[POB] POB TLI - 1

# Today I Learn - 2022.05.03

# Pre Onboarding Course

• Orientation : 출결은 원티드 스페이스 어플을 통해서 진행하며, 5개 기업의 과제를 진행한다.

• TIL 작성하기 : Today I Learn 작성하자! 블로그에 작성하는 이유는 검색이 되기 때문이다. 내가 어떻게 공부했는지를 보여주고 많은 회사에 나를 노출하기 위함이다.

• 사전 과제 Code Review : 참가자 코드를 무작위로 확인하여 코드 리뷰를 진행하였다.

1. 네이밍과 컨벤션 - state네이밍과 function네이밍은 기능을 유추할 수 있도록 작성하는 것이 좋다. 또한 컴포넌트는 파스칼케이스 변수는 카멜케이스를 사용한다.
2. 이벤트는 태그 내부에 작성하지 말기 - 로직과 함수는 분리하는 것이 좋다. react에서 DOM들이 위치한 view를 담당하는 부분에 이벤트 핸들러를 바로 집어넣는 것보다 바깥으로 빼서 사용하는 것이 좋다.
3. index 사용 시 후 가공 - react에서 map사용 시 key값은 index로 사용하는 것은 권장되지 않는다. 확장성에 어긋나기 때문이다. 만약 index로 사용한다면 index를 사용하는 위치에서 변수에 index를 가공한 값을 생성하여 사용하는 등 후 가공이 필요하다.
4. classnames 라이브러리 - 삼항연산자 혹은 && 연산자를 사용하지 않고 classnames 라이브러리를 사용하여 true일 경우 class를 삽입할 수 있다.
5. 들여쓰기 컨벤션 - html, css, js는 들여쓰기 2칸을 사용한다.
6. email 유효성 검사 - email validation은 간단할 수록 좋다. 아무거나 검색해서 쓸 경우 asdas@asd.info 이런 이메일의 경우 매치되지 않는 경우가 있다. email validation은 w3c표준이 있다. 그것을 사용하는 것이 좋다. 검색 키워드 email regex w3c로 검색하면 확인할 수 있다.
7. event.target 보다는 event.currentTarget 사용하기 - target보다는 currentTarget을 사용하는 것이 좋다. 이벤트 전파로 인한 문제가 발생할 수 있다. 예를 들어 이벤트가 발생하는 DOM 내부에 장식 요소가 있다고 하면 장식 요소에는 원하는 값이 없기 때문에 에러가 발생하는 것이다.
8. prev state 사용하기 - setState(!state)와 같이 작성하는 것은 위험할 수 있다. react에서 비동기 적으로 작동하기 때문이다. 함수로 prev state를 사용하는 것이 좋다. (ex setState((state) => !state))
9. id선택자로 스타일링 하지 않기 - css선택자로 id를 사용하면 안된다. 커뮤니티 표준이다. 스타일링은 class로만 사용한다.
10. 이미지 경로 - 없으면 안되는 이미지 같은 경우 public이 아닌 src에 넣어줘야한다. src에 asset을 만들거나 사용하는 js 바로 위에 넣는다. 그 후 import하여 사용하는 것이 좋다. (ex '변수' from '이미지 경로') public에 넣게 되면 웹팩 과정에서 용량이 작은 이미지는 강제로 html에 포함될 수 있다. 그렇기 때문에 src에 넣어야 용량 작은 이미지를 줄여준다.
11. SVG 컴포넌트화 - svg파일은 사용 방법이 다르다. ReactComponent로 svg를 가져와서 사용하는 것이 좋다. (ex import { ReactComponent as Cookie } from 'assets/cookie_icon.svg') 이렇게 가져와서 사용하면 하나의 컴포넌트가 되고 svg의 컬러를 바꿔줄 수도 있다. 다크모드 같은 경우에 사용하면 매우 효율적이지 않을까?
12. css transition - transition 속도는 0.2로 넣으면 빨라보인다.
13. input 옵션 활용 - 사용자 입력을 받는 input태그의 인라인 옵션 중 autoCorrect, autoCapitalize, spellCheck, data-lpignore, checkbox등 쓸만한 옵션들을 적극적으로 활용하는 것이 좋다. (ex checkbox 를 사용하여 버튼 슬라이드를 구현)
14. react use 라이브러리 - npm i react-use로 설치하며 여러가지 편리한 기능을 제공하는 라이브러리이다. 예를 들어 useClickAway를 통해 특정 DOM의 외부 클릭 이벤트를 간단히 구현할 수 있다.
15. 확장성 고려 - spa의 경우 state의 변화가 빈번히 일어나므로 항상 확장성을 고려하자.
16. 상수 관리 - react에서 const같은 상수는 렌더링에서 영향을 받지 않기 위해 렌더링 함수 밖으로 빼준다.
17. event.target.dataset - event.target.dataset 활용하기
18. 이미지 최적화 - 이미지는 용량의 기준을 정해서 사용하는 것이 좋다. (ex 1mb가 넘지 않도록 한다.) 이미지 포맷을 활용하여 이미지 최적화를 할 수 있다.(ex WebP, jpg2000)
19. 비디오 사용 - 동영상 사용 시 동영상이 보이지 않는 유저들을 위해 이미지를 깔아준다.
20. 의존성 줄이기 - react는 컴포넌트 간의 의존성을 줄여줘야한다. 의존성이 높으면 유지보수에 어려움을 겪을 수 있다.
21. EndOfLine - 코드 마지막 줄에는 Enter 처리를 해주어야 한다.
22. 관련 스타일 몰아서 관리하기 - z-index 등과 같이 연관이 있는 스타일들은 모듈화하여 모아서 관리한다.
23. SVG pointer-events : svg pointer-event 속성을 통해 엘리먼트가 마우스 이벤트(호버, 클릭, 드래그 등)에 어떻게 반응할지를 지정할 수 있다. 대부분의 속성 값은 SVG 전용이며 pointer-events: none을 설정하여 마우스 이벤트의 타겟이 될 수 없도록 할 수 있다.

# Takeaway

오늘은 원티드 프리온보딩 코스 첫번째 날이다. 간단한 오리엔테이션이 진행되었으며 세션 시간에 참가자들의 사전 과제와 탈락한 분들의 사전 과제를 리뷰하는 시간을 가졌다. 세션을 담당하시는 로켓런치의 대표님인 준혁님은 10년차 개발자라고 하셨는데 첫 세션임에도 불구하고 배울 점이 참 많았다. 또한 강조하신 부분 중에 검색하는 것이 매우 중요하다고 하셨다. 개발자에게 검색하는 역량이 너무나 중요하며 구글같은 경우 개발 관련 된 방대한 자료가 있음에도 불구하고 검색을 하지 못한다면 그 자료들은 없는 것과 마찬가지라고 하셨다. 참 와닿는 말씀이었다. 또한 영문으로 작성 된 자료가 국문보다 비교도 안될만큼 많기 때문에 영어 공부가 더 필요하다는 것을 다시 한번 느낄 수가 있었다. 그리고 코드 리뷰 부분에서는 이미 알고 있었지만 잊고 있었던 것들, 새롭게 알게 된 부분들도 많았다. 이러한 부분들을 내 것으로 만들기 위해 꾸준히 반복해야겠다!