React 프로젝트 세팅
1) 작업할 폴더에서 터미널 열기
2) 리액트 패키지 세팅
yarn create react-app 프로젝트이름
위의 방법은 CRA. CRA 방법보다 Vite가 더 좋다. 패키지 세팅이 훨씬 빨리 되고 다른 장점도 있다 하는데 어쨌든 요즘은 Vite를 많이 쓴다고 기억하면 좋음.
아래의 명령어 입력하기!
yarn create vite 프로젝트이름 --template react
3) 프로젝트 폴더로 이동
지정한 프로젝트 이름으로 폴더가 생성되고 그 폴더 안에 패키지가 설치된 것을 확인할 수 있다. 그러면 우리는 상위 폴더에서 프로젝트 폴더로 이동해야 하는데, 전에도 사용했던 방법으로 하위 폴더로 이동하는 명령어를 입력하면 된다.
cd 프로젝트이름(=폴더이름)
4) yarn 작동시키기
예전에 다른 곳에서 리액트 처음 배웠을 때는 npm을 사용했는데 내배캠 강의에서 npm보다 yarn이 낫다고 하셔서 앞으로 yarn을 사용해보려고 한다.
yarn
5) 서버 띄우기
yarn dev
스탠다드 반 실강 메모
1. 엄격한 비교
== 대신 ===
!= 대신 !==
특별한 이유가 없으면 엄격한 비교를 사용하는 것을 습관화 하자.
2. 제어 컴퍼넌트
보통 input 같은 거 있으면 제어컴퍼넌트라고 한다. 사용자가 값을 입력하는. 리액트가 제어하는 컴퍼넌트 = 제어컴퍼넌트.
상태랑 input값이 연결되어있다(바인딩되어있다) = 제어컴퍼넌트
이렇게 이해하면 된다.
3. 초기값 설정, input 값
useState() 초기값을 () 이렇게 비워놓지 말자. () 이렇게만 해놓으면 기본적으로 underfined가 되기 때문에 그러지 말고 처음부터 데이터 타입을 설정해주면 좋다.
(""), (0), ([]) 이런 식으로.
input으로 들어오는 값은 기본적으로 string이다. 숫자로 저장해야 하는 값은 숫자로 변경해주는 작업이 필요하다. 이때 parseInt(), Number()를 사용하기보단 더 간단한 방법이 있는데, +를 앞에 붙이면 숫자로 변경이 된다. 코드를 컴팩트하게 작성하는 방법.
예) parseInt("10") = Number("10) = +"10"
4. early return VS if/else
유효성 검사 할 때 early return VS if/else => early return 방법이 더 선호됨.
해당이 될 경우에 return 해서 바로 블락 시켜버리는 방법. return을 만나는 순간 밑에 있는 코드를 안 읽고 함수가 끝나버린다.
early return이 선호되는 이유: if/else를 사용하면 중첩구문이 나올 확률이 높아지기 때문에 if/else 방법보단 return으로 끊어주는 게 좋다. 그래야 가독성도 더 좋아진다.
5. 고유 id 부여 방법: npm UUID
1) 일반적으로 많이 쓰는 라이브러리: npm UUID (실무에서는 이걸 씀!)
2) crypto.randomUUID
요즘에는 nanoID 라는 것도 있음. UUID보다 짧고 핫하다고 함. 요즘 프론트엔드 파트에서는 nanoID를 많이 쓰는 추세지만 백엔드에서는 UUID를 주로 사용한다고 한다. 호환성을 위해서는 UUID를 추천.
6. 기타 메모
- 껐다 켰다 하는 함수의 이름 = toggleTodo 토글이라고 이름지으면 좋음.
- 함수명은 동사 또는 on(이벤트핸들러한정)로 시작하는 것이 범용적 코딩 컨벤션이다.
예) setTitle O / titleSet X - sweetalert2 라이브러리
alert UI를 좀 더 예쁘게 만들어주는 라이브러리 - 외부 라이브러리를 사용할 때 최신 버전인가, 유지보수가 최근에도 되고 있는 라이브러리인가 확인하고 사용하는 게 좋다.
- class 컴포넌트, reder 함수는 레거시(устарелый) 패턴. 요즘은 안 쓴다. 대신 고유의 컴포넌트로 만들어서 표현하자. 이렇게 바로 넣기.
- 코드를 해석해가면서 읽는 연습을 계속 많이 하기. event.target.value는 뭘 하는 건지... onChange는 뭘 하는 건지...
