[엘리스 SW 트랙] 2차 프로젝트 : 프론트엔드 오피스아워 코멘트 14주차 - 3

• 현재 프로젝트에서 동일하게 코드 컨벤션을 맞추기 위해 eslint와 prettier를 적용했습니다. 
  • 다수의 인원과 함께 프로젝트 작업을 하신다면, 코드 퀄리티를 위해 eslint 와 prettier 를 적용하는게 좋습니다.
• 컴포넌트 작성할때 함수 표현식으로 사용하기로 했는데, 선언식과 차이가 있을까요?
  • 어떤 것이든 사용해도 상관은 없습니다. 다만 hoisting 이슈만 유의해서 사용해주시면 됩니다.
• 타입스크립트를 사용할때 유의점이 있을까요?
  • 타입스크립트를 사용할 때, "모든 타입을 적어줄거야!" 보다는 타입 추론이 되는 것들은 작성하지 않아도 됩니다. 그래야 생산성도 올라가고, 흔히 말해 가독성도 좋아지거든요. 필요한 것에만 타입 선언을 하시면 됩니다. 
• React Query 버전 관련
  • React Query가 현재 구버전인데요. 버전이 올라가면서 이름이 조금 바꼈습니다. tanstack query 라고 있어요. 한번 찾아보시고 최신 버전으로 올려주시면 됩니다. 아마.. @tanstack/react-query 로 설치하시면 될 겁니다 :)
• Object.freeze와 as const의 차이점이 있나요?
  • freeze는 runtime 환경에서 바꾸지 못하도록 하는 거고, 타입스크립트에서의 as const는 타입 추론을 할 때 못바꾸게 하는 거라고 보시면 됩니다. 타입스크립트의 as const는 컴파일 전 단계에서 "상수다!" 라고 넣는 것이고, object.freeze는 as const와 똑같은 동작을 하지만, 런타임 환경에서 실제 자바스크립트 객체가 조작되는 걸 막습니다. 
• 그렇다면 as const는 컴파일 환경에서만 잡아주고 런타임 환경에서는 잡아주지 못하는 건가요?
  • 네 맞습니다. 둘 다 잡는건 object.freeze() 입니다.
• npm 과 yarn 중에 현업에서 더 많이 사용하는 툴은 어떤 건지 궁금합니다. npm은 phantom dependecy 가 있어서 yarn을 써보는건 어떠냐는 제안을 백엔드 오피스 에서 받았는데.. 그러면 npm은 사용하지 않는 추세일까요?
  • 어떤 걸 더 많이 사용한다? 라는 건 없는 것 같아요. 회사마다, 혹은 팀마다 다릅니다. npm을 선호하는 곳이 있고, yarn을 선호하는 곳이 있고, 또 다른 패키지 매니저로는 pnpm이라고 인기가 점점 많아지고 있는 친구도 있습니다.
  • npm이 예전에는 무겁고, 메모리도 많이 먹고, install도 느리고 해서 이런 단점을 극복하고자 yarn이 나왔습니다. 또 예전에 고질적인 문제인 phantom dependency를 해소하기도 했고요. 그래서 한때 yarn 열풍이 불기도 했죠.
  • 근데.. 지금 현재 npm 버전이 12입니다.ㅎㅎ 버전이 많이 올라가면서 퍼포먼스 측면이라던지, 버그라던지 많이 개선이 됐죠. 어지간히 속도에 환장하지 않는 이상.. yarn, npm, pnpm 셋 중 어떤 걸 써도 상관없습니다. 그러면 걸리는 게 이제 phantom dependency 겠죠? phantom dependency가 일어나는 경우는 드뭅니다. 너무 무서워하실 필요는 없을 것 같습니다. 정리하자면 셋 중 하나를 선택하는 건 취향차이라고 보시면 될 겁니다.
  • 다만 npm의 경우 예전버전을 써야한다! 이러면 조금 이슈가 생길 수 있습니다. 예전버전을 쓰셔야 한다면 차라리 yarn berry를 사용하시는 걸 권장드립니다. 아, 만약에 속도가 맘에 걸리시면 pnpm을 쓰시는 것도 추천드립니다. 

프론트엔드 오피스아워 하면서 공부한 내용

• 타입스크립트에서 Enum을 사용하면 트리셰이킹이 안되는 문제가 있음.
• 타입스크립트에서 enum을 썼을때 변환되는게 단순한 객체 형태가 아니라 즉시 실행 함수로 바꾸기 때문에, 트리셰이킹이 안되는 것.

 

 

#엘리스트랙 #엘리스트랙후기 #리액트네이티브강좌 #온라인코딩부트캠프 #온라인코딩학원 #프론트엔드학원 #개발자국비지원 #개발자부트캠프 #국비지원부트캠프 #프론트엔드국비지원 #React #Styledcomponent #React Router Dom #Redux #Typescript #Javascript