리액트

[React] 소셜웹페이지 - 서버 통신 & 로그인

서버의 도움을 받아 회원가입 - 로그인 - 메인 페이지로 로그인 유저 넘기는 과정까지 진행해보았다. 목데이터가 아닌 실제 서버랑 통신하게 되면서 오류도 많이 봤지만, 이런저런 정보를 받아보면서 재밌었던 것 같다. 회원가입 const navigate = useNavigate(); const [id, setIdValue] = useState(''); const [pw, setPwValue] = useState(''); const onSubmit = (e) => { // email : justpoy@email.com // pasword : 11111 e.preventDefault(); fetch("http://localhost/users/signup", { method: "POST", headers: { "C..

[React] css 모듈과 proptype

1. CSS 모듈 클래스 이름을 고유한 값으로 만들어서 컴포넌트 스타일 클래스 이름이 중첩되는 현상을 방지하는 방법이며, 유지보수가 편리해진다. 사용 방법 .css 확장자 앞에 .module 을 붙여준다. .module.css 파일에 클래스명으로 된 속성을 만들어준다. 파일을 import 해주고, 프로퍼티를 호출하는 것처럼 클래스명을 불러와주면 된다. 여러 개의 속성을 가져오려면 백틱(``)을 사용해 감싸준다. 개발자 도구에서 클래스가 적용된 것을 보면 hash 값이 붙은 고유한 값이 부여된 것을 알 수 있다. 따라서 클래스명이 같더라도 덮어씌워지지 않는다. 2. proptype React에 내장된 타입 검사 기능이다. 타입 선언의 장점은 타입 정보를 정의해 둠으로써 다른 사람이 코드를 봐도 컴포넌트 로..

[React] 시작하기

1. npm 설치 확인 2. react-create-app 설치 특정 폴더에서만 사용할 경우 터미널에서 해당 폴더로 이동 후 거기서 npm을 통해 깔면 되지만, 컴퓨터 전역에서 사용하려면 -g를 이용해 설치해야 한다. npx를 통한 설치도 가능하다. npx의 경우 프로그램을 임시로 설치해 한 번 사용하는 경우에 적합하며 실행할 때마다 다운로드하기 때문에 항상 최신 버전을 이용 가능하고 사용 후 지우기 때문에 저장공간을 낭비하지 않는다. 3. 개발환경 구축 환경을 구축할 폴더를 만들고 터미널에서 해당 폴더로 이동한다. 위 명령을 입력하면 현재 폴더에 react 개발환경을 설치한다. 마지막에 ' . '은 현재 디렉터리에서 실행하겠다는 뜻이다.