● 6월 8일 Project / Unit1 - Project Wiki

● 오늘 배운 것

- 오늘은 프로젝트 OT를 진행해서, 크게 배운 것은 없었고 앞으로 어떻게 진행하게 될지 그리고 어떤 것들을 배우게 될 것인지에 대해 대략적으로 훑어보기만 하였습니다. 이번 pre-project에서는 'stackoverflow'를 클론하는 것으로 진행될 것 같습니다.

 

● 이외에 공부한 것

GitHub - ddaeunbb/solo-shoppingmall: shoppingmall-solo-project

2차 리팩토링을 꾸준히 진행하고 있습니다!

• 리덕스 thunk
• RTK Query (조금 미뤄진 상태)
• react-intersection-observer 라이브러리를 활용한 무한스크롤
• dark mode theme
• enum -> as const
• prettier 세부설정
• eslint 세부설정
• husky

 

오늘은 react-intersection-observer라이브러리를 사용해볼 생각입니다. 허허 하하 파이팅

 

❍ 리팩토링을 진행하면서 알게 된 것

확실히 리팩토링을 진행하게 되면서, 리팩토링을 시작하기 정말 잘했구나 생각이 들었습니다. 어제는 redux-Thunk를 적용해보려고 많은 노력을 하였는데, 역시.. 해보면서 느껴야된다는 걸 많이 느낀 것 같아요.

● createAsyncThunk

 

오늘은 현직에 계시는 성진님께서 이전에 피드백을 해주셨던 enum의 사용이 점점 권장치 않는다는 말씀을 듣고 코드를 수정하게 되었습니다. enum같은 경우는 union-type이나 interface처럼 컴파일되고나서 tree-shaking이 되지 않기 때문에 cosnt enum이나 as const 를 사용하는게 좋다는 말씀을 주셨었습니다. Q&A를 진행하면서, 아래 링크도 공유해주셔서 읽어보았습니다.

TypeScript enum을 사용하지 않는 게 좋은 이유를 Tree-shaking 관점에서 소개합니다.

블로그에서는 enum은 tree-shaking 관점에서 좋지 않으며 const enum같은 경우에도 babel로 트랜스파일할 수 없으며 또 양방향 maping이 불가하기 때문에 대략적으로 보았을 때 as const와 기능이 비슷해지기때문에 as const를 사용하길 권장하고 있다고 합니다.

as const를 썼을 때에는 Type의 추론 범위를 줄여서 해당 값 자체를 Type으로 만들어줍니다. 비록 양방향 바인딩을 해주진 못하지만, 상수가 아닌 것을 상수로 만들어 주기 때문에, 이를 활용한 여러가지 코드 테크닉을 쓸 수 있고, 실질적으로 const enum 문법을 대체하고 있는 중이라고 합니다!

• 수정 전

enum Categories {
  total = 'total',
  smartphones = 'smartphones',
  laptops = 'laptops',
  automotive = 'automotive',
  motorcycle = 'motorcycle',
}

• 수정 후

const Categories = {
  total: 'total',
  smartphones: 'smartphones',
  laptops: 'laptops',
  automotive: 'automotive',
  motorcycle: 'motorcycle',
} as const

 

• react-intersection-observer

무한스크롤 로직을 라이브러리를 통해 수정하였습니다.. 역시 라이브러리 만만세 너무 편했습니다.