caniuse.com 사이트
https://caniuse.com/ciu/comparison
써도 되는 기능인지 브라우저별로 확인 가능
라이브러리 탐색
해당 라이브러리 github issue 에서 검색해보면 당면한 모든 문제를 거의 해결 가능. 관리 중인 라이브러리인지 확인 가능.
3일 과제라면 2일 안에 끝내고, 1일은 test, bug fix 등에 써야 한다
한 파일 내 코드는 150줄을 넘어가지 않도록 쓰는 게 가독성에 좋다
한 파일 내 컴포넌트는 하나만!
dayjs 라이브러리
2KB 밖에 안되는 용량으로 무거운 momentjs 를 대체한다
https://day.js.org/
storejs 라이브러리
localStorage 사용을 더 짧은 코드로 편하게 사용할 수 있다
https://github.com/jaywcjlove/store.js
slickjs 라이브러리
케로셀(carousel) 구현에 쓴다
https://kenwheeler.github.io/slick/
setTimeout 은 반드시 clearTimeout 과 함께 써라
a ?? b
a 가 있으면 넣고, 없으면 b 넣는다는 문법
useCallback, useMemo
useCallback 은 함수를 기억, useMemo 는 값 자체를 기억. 기억한다는 말은 메모리에 저장된다는 뜻이다. 고로, 연산량이 많다면 쓰는 게 좋지만, 용량 부담에 비해 성능 개선이 뛰어나지 않으므로, 잘 생각해서 써야 한다. 언제 쓸 지는 경험으로 배워라.
React context
https://ko.reactjs.org/docs/context.html
React context는 React 에서 기본으로 제공하지만, 퍼포먼스가 느리다. 테마 관리(다크모드 등) 등에만 쓰는 것을 추천.
react-use 라이브러리의 useMount
https://github.com/streamich/react-use
useMount() 는 useEffect()를 단 한 번만 실행하게 하는 것과 동일하게 동작함!
overflow-x scroll 을 써서 스크롤만 가려주면 구현 가능하다. 모바일에서도 터치 적용된다.
- https://squoosh.app/
압축률, 리사이즈 등으로 이미지 최적화가 가능한 사이트.
콘텐츠 이미지는 디자이너가 작업하지 않고 개발자가 챙겨야 하는 경우가 많다. 용량을 줄여서 로딩 속도를 올리는 개발자가 되자!
개발자 도구에서 network 열어서 size 크기로 정렬해보면 용량이 가장 큰 파일을 볼 수 있음
색이 많은 사진 : JPEG 로 해주면 safari 도 지원 가능(WebP 는 최신 사파리에서만 된다)
색이 적은 사진(클립아트 느낌의 사진) : PNG 로 해주면 됨
GIF 는 용량이 크므로, 웬만하면 쓰지 말 것
parse to json 익스텐션
API 가져올 때 편하게 볼 수 있음
JSON to ts 익스텐션
API 가져올 때 자동으로 타입 생성을 해줌