Tips
-
라이브러리를 뜯어보는 공부가 정말 많이 도움 된다.
-
디자인을 단순히 보기만 하지 말고, 어떤 색이 메인이고, 몇 개의 색이 쓰였고, 어떤 식으로 컴포넌트를 나눴구나, 생각하면서 보면 감각을 익히기에 좋을 것.
-
Emotion 이 SSR 지원 측면에서 Styled-Component 보다 우수하다.
https://emotion.sh/docs/introduction -
typeORM 은 사용자도 많지만, issue 도 많다. 라이브러리를 볼 땐 stars 수와 issue 수를 보면 좋은데, 아무리 인기가 많아도 issue 가 많다면 안정된 라이브러리가 아닌 것.
-
작은 회사는 도커, 큰 회사는 쿠버네티스 많이 쓴다.
-
CORS 오류는 보통 서버에서 해결하는 게 맞다. 오류 발생 시 서버와 소통 필요.
React
-
return 내에서 삼항연산자 분리는 가독성을 해친다. CRA 에서 빌드할 땐 어차피 하나의 파일로 만들어지게 되므로, 파일 수를 늘리는 것에 연연하지 말고, 컴포넌트를 잘 분리하는 것에 더욱 신경을 써라.
-
Route 는 최대한 간단해야 한다. 큰 기업은 라우트 30-40 개가 기본이므로.
-
props deps 는 2개 이상 되지 않는 게 좋다. 클래스 컴포넌트보다 함수 컴포넌트, 커스텀 Hooks 사용이 지향되는 이유다.
-
한 컴포넌트 내 state 는 5개를 넘지 않는 게 좋다.
-
state 와 무관한 함수는 컴포넌트 밖으로 빼라.
-
라이브러리
- react-helmet
SEO 설정을 도와주는 라이브러리
https://github.com/nfl/react-helmet - react-modal
모달창 생성 라이브러리, 라이브러리를 사용하지 않으려면 react portal 을 쓰면 됨
https://github.com/reactjs/react-modal
React Portal 공식 문서
- react-helmet
Typescript
- Typescript 를 쓸 때, 해당 타입이 예상되지 않는 코드라면 잘못짠 코드다. 배열임을 예상하지 못할 경우엔 xxx?.map 보단 xxx.isArray() 를 쓰는 게 맞는 것이다.
CSS
- 추천 폰트 ( + 폰트는 서브셋 파일을 받으면 용량이 작다 )
- font-face
otf, ttf, woff2 중에 woff2 만 있어도 된다
더 알아볼 것(+해야 할 것)
- react-loadable
https://github.com/jamiebuilds/react-loadable - 코드리뷰 받은대로 개인과제 수정하기
- google Analytics (이벤트 등록*)
- font-face
한 줄 일기
매일 새롭게 배운다. 팀 과제 끝내고 얼른 개인 과제 리팩토링 하고 싶다!!💪🏻
