[원티드 프리온보딩] TIL - (13)
5월 17일
🔗[React Redux] React Redux와 Redux Toolkit 함께 사용하기 - (3)
React Redux를 Redux Toolkit을 활용하여 구현하는 방법을 공부해보았다. 익숙해지고 심화적인 활용 방법을 익히면 다양한 방면으로 사용할 수 있을 것 같다.
📌 주식회사 퓨저블 대표 양민열님의 코드 리뷰
Route는 최대한 간결하게 유지하는 것이 좋다
페이지 수가 많아지면 많아질 수록 Route 파일은 굉장히 길어지기 마련이다. 이 때 Route파일에 로직을 넣거나 추가적인 HTML을 넣게 되면 각각의 주소에 대해 어떤 일이 벌어지는지 확인하기 힘들어지므로 간결하게 유지하는 것이 좋다.
수정을 빠르고 쉽게 할 수 있도록 폴더 구조를 짜는 것이 좋다.
폴더 구조는 반드시 의미 있게, 그리고 일관적으로 짜야 수정을 할 때 빠르게 진행할 수 있다.
🔗React Helmet
문서의 head와 관련된 내용을 작성하고 편집할 수 있도록 해주는 라이브러리이다. SEO 최적화에 도움을 줄 수 있다.
유명했지만 몰락하는 라이브러리들
TypeORM이나 Moment.js는 오랫동안 사랑받고 많은 사용자를 보유했던 라이브러리들이다. 하지만 시간이 지남에 따라 새로운 라이브러리와 프레임워크가 등장하고 호환성이나 효율적인 측면에서 밀려나게 되며 몰락의 길을 걷게 되었다. 이렇듯 많은 라이브러리들이 흥하고 망하고를 반복하기 때문에, 단순히 깃허브의 ‘stars’만 볼 것이 아니라 issues도 들여다 보고 공식 문서도 읽어보며 현재 사용할만 한지, 또 앞으로도 사용할만 한지에 대해 고려를 해보는 것이 필요하다.
HTML return에 삼항연산자를 사용하지 않는 것에 대해 고려해보기
컴포넌트 내의 return에는 HTML에 대한 내용이 들어가게 된다. 이 부분은 뷰를 담당하는 부분이다 보니 최대한 간결하고 직관적으로 존재하는 것이 좋다. 따라서 삼항연산자를 통해 어떠한 내용이 보이고 안 보이고를 이 부분에서 정의하기 보단 따로 변수를 선언하여 스크립트 부분에서 선언을 하고 그 변수를 return에 넣어주는 것이 가독성 측면에서 유리할 수 있다.
HTML return의 map 함수 등은 따로 변수로 빼는 것을 고려해보기
상술한 삼항연산자와 마찬가지로 가독성을 위해 빼는 것을 고려해 볼만 하다.
아이콘 라이브러리는 거의 사용하지 않는다.
대부분 현업에서는 디자이너가 아이콘을 SVG파일 등으로 제공해주는 것이 일반적이다 보니 아이콘 관련 라이브러리는 거의 사용하지 않게 된다. 따라서 실제 포트폴리오를 만들거나 코드 연습을 할 때에도 사용을 지양하는 편이 좋다.
프론트엔드는 디자인 감각도 중요하다.
dribbble, behance, pinterest 등을 참고하며 다양한 디자인에 대한 감각을 키워 놓으면 포트폴리오를 만들 때든, 자신만의 서비스를 구현할 때든 분명 도움이 된다.
🔗react-modal, 🔗React Portals
모달창이나 팝업을 효율적으로 구현하고 관리할 수 있게 해주는 라이브러리와 메서드이다.
단어 굳이 짧게 쓰지말기
변수나 함수는 한 눈에 어떤 역할을 하고 어떤 의미를 갖는지 이해가 되는 게 좋다.
package.json을 보면 전체적인 프로젝트가 보인다.
types, testing 등 dev로 뺄 건 빼고 불필요한 라이브러리는 제거해야 한다.
props와 변수명은 이름을 통일하는 것이 좋다.
통일을 해두면 부모와 자식 간에 어떤 이름으로 넘겨줬는지 확인해야하는 번거로움이 줄어들고 가독성이 좋아진다.
🔗camelcase
문자열을 camelcase로 변환해주는 라이브러리이다.
로직 분리는 철저하게 하자.
로직 분리는 철저하게 해두는 편이 가독성과 유지보수측면에서 유리하다.
임포트 순서
임포트 순서 또한 가독성에 영향을 준다.
민열님이 추천하신 순서는
패키지 및 라이브러리 -> 타입 -> 커스텀 훅 -> 컴포넌트 -> 스타일링
pretendard 폰트
깔끔한 폰트
📌 Session
Netlify 배포
Vercel처럼 간편하게 배포할 수 있다. 레포를 지정하고 환경 변수를 지정해주면 레포에 푸쉬가 발생할 때마다 자동으로 재배포해준다.
favicon 만들기
🔗Favicon & appicon generator에서 원하는 이미지를 변환하고, index.html을 수정하여 삽입해주면 된다. 참고로, 사이즈 별로 넣어줘야 사용자의 환경에 따라 파비콘이 선택된다.
폰트 사용
과거에는 호환성 문제로 otf와 ttf를 많이 사용했지만, 호환성 업데이트가 모두 이루어지면서 이젠 woff2와 woff를 주로 사용한다. 또한 폰트의 용량이 너무 크면 성능 저하가 발생할 수 있으므로 상황에 따라 서브셋 버전이나 최소화 버전을 사용하는 것이 좋다.
Google Analytics
페이지 방문이나 이벤트 발생 등과 관련하여 통계를 수집할 수 있다.