# Today I Learn - 2022.05.03
# Pre Onboarding Course
- Orientation : 출결은 원티드 스페이스 어플을 통해서 진행하며, 5개 기업의 과제를 진행한다.
- TIL 작성하기 : Today I Learn 작성하자! 블로그에 작성하는 이유는 검색이 되기 때문이다. 내가 어떻게 공부했는지를 보여주고 많은 회사에 나를 노출하기 위함이다.
- 사전 과제 Code Review : 참가자 코드를 무작위로 확인하여 코드 리뷰를 진행하였다.
- 네이밍과 컨벤션 - state네이밍과 function네이밍은 기능을 유추할 수 있도록 작성하는 것이 좋다. 또한 컴포넌트는 파스칼케이스 변수는 카멜케이스를 사용한다.
- 이벤트는 태그 내부에 작성하지 말기 - 로직과 함수는 분리하는 것이 좋다. react에서 DOM들이 위치한 view를 담당하는 부분에 이벤트 핸들러를 바로 집어넣는 것보다 바깥으로 빼서 사용하는 것이 좋다.
- index 사용 시 후 가공 - react에서 map사용 시 key값은 index로 사용하는 것은 권장되지 않는다. 확장성에 어긋나기 때문이다. 만약 index로 사용한다면 index를 사용하는 위치에서 변수에 index를 가공한 값을 생성하여 사용하는 등 후 가공이 필요하다.
- classnames 라이브러리 - 삼항연산자 혹은 && 연산자를 사용하지 않고 classnames 라이브러리를 사용하여 true일 경우 class를 삽입할 수 있다.
- 들여쓰기 컨벤션 - html, css, js는 들여쓰기 2칸을 사용한다.
- email 유효성 검사 - email validation은 간단할 수록 좋다. 아무거나 검색해서 쓸 경우 [email protected] 이런 이메일의 경우 매치되지 않는 경우가 있다. email validation은 w3c표준이 있다. 그것을 사용하는 것이 좋다. 검색 키워드 email regex w3c로 검색하면 확인할 수 있다.
- event.target 보다는 event.currentTarget 사용하기 - target보다는 currentTarget을 사용하는 것이 좋다. 이벤트 전파로 인한 문제가 발생할 수 있다. 예를 들어 이벤트가 발생하는 DOM 내부에 장식 요소가 있다고 하면 장식 요소에는 원하는 값이 없기 때문에 에러가 발생하는 것이다.
- prev state 사용하기 - setState(!state)와 같이 작성하는 것은 위험할 수 있다. react에서 비동기 적으로 작동하기 때문이다. 함수로 prev state를 사용하는 것이 좋다. (ex setState((state) => !state))
- id선택자로 스타일링 하지 않기 - css선택자로 id를 사용하면 안된다. 커뮤니티 표준이다. 스타일링은 class로만 사용한다.
- 이미지 경로 - 없으면 안되는 이미지 같은 경우 public이 아닌 src에 넣어줘야한다. src에 asset을 만들거나 사용하는 js 바로 위에 넣는다. 그 후 import하여 사용하는 것이 좋다. (ex '변수' from '이미지 경로') public에 넣게 되면 웹팩 과정에서 용량이 작은 이미지는 강제로 html에 포함될 수 있다. 그렇기 때문에 src에 넣어야 용량 작은 이미지를 줄여준다.
- SVG 컴포넌트화 - svg파일은 사용 방법이 다르다. ReactComponent로 svg를 가져와서 사용하는 것이 좋다. (ex import { ReactComponent as Cookie } from 'assets/cookie_icon.svg') 이렇게 가져와서 사용하면 하나의 컴포넌트가 되고 svg의 컬러를 바꿔줄 수도 있다. 다크모드 같은 경우에 사용하면 매우 효율적이지 않을까?
- css transition - transition 속도는 0.2로 넣으면 빨라보인다.
- input 옵션 활용 - 사용자 입력을 받는 input태그의 인라인 옵션 중 autoCorrect, autoCapitalize, spellCheck, data-lpignore, checkbox등 쓸만한 옵션들을 적극적으로 활용하는 것이 좋다. (ex checkbox 를 사용하여 버튼 슬라이드를 구현)
- react use 라이브러리 - npm i react-use로 설치하며 여러가지 편리한 기능을 제공하는 라이브러리이다. 예를 들어 useClickAway를 통해 특정 DOM의 외부 클릭 이벤트를 간단히 구현할 수 있다.