[Bootcamp W07 회고] vscode styled component extenstion, react router v6, redux toolkit, dayjs

1. styled component

css module 방식으로 진행하려고 했다가 불편해서;; 결국 성능 대신 작업 효율화를 선택했다. 당연히도 styled component 방식으로 선택. 그냥 코드짤때 이 방식이 편하다는 것이다. 그런데 여기서 한가지 pain point 가 있었는데 자동완성도 안되고 스타일도 잘 안나오고 무엇보다 color picker 작동이 안되었다는 것. 프로젝트 내내 불편하게 작업하다 작업 끝나고 필요한 최적의 세팅을 찾았다. 

 

단축어 제공. 사실 잘 안쓰게 되지만 익숙해지면 엄청 사용할거 같다.

vscode-styled-components-snippets - Visual Studio Marketplace

이렇게 세팅하기 전에는 이 라이브러리를 활용하는 것이 좋다고 생각했으나 중요한건 아래의 세팅이었음... 이건 drop!

vscode-styled-components - Visual Studio Marketplace

돌고돌고돌아서 결국 여기로 안착.

vscode-styled-components - Visual Studio Marketplace

다만 여기서 주의할 점!

이 확장기능은 .js 파일을 vscode에서 javascript react 로 인식하도록 세팅을 해줘야 color picker가 실행된다. .jsx로 설정하지 않는 한 아마도 보통 babel javascript로 되어있을 것. 클릭해서 바꾸자. 굳이 .jsx 파일로 일괄 변경하지 않아도 react로 작업하면 .js 파일을 일괄적으로 인식하도록 세팅하는 것도 방법이겠다.

2. react router v6

사실 지난 프로젝트에서 router는 별로 신경쓰지 않았다. 사실 알고있다. router가 얼마나 중요한지는. 다만 v5 말고 아예 v6로 안착해서 세팅하는데 단디 학습해야겠다고 생각했다. 그걸 이번주에 해야겠다고 생각했으니 그것이 망;;; 하지만 어쨌거나 굉장히 진득하게 처음부터 차근차근 학습했고 시간을 많이 썼다. 결과는 꽤 만족. 초반에 세팅하는 방식이 낯설어서 꽤 고생했는데 공식문서도 찬찬히 보고 예제를 보여주는 유튜브 영상들도 이것저것 보면서 얼추 이해하고 활용할 수 있게 되었다. 초반부터 아주 탄탄하게 단디 v6로 세팅해서 나름 만족.

 

3. redux toolkit

사실 리덕스에 대한 인상은 그리 좋지 않은 편이다. 예전 회사에서 개발자들이 상태관리툴 고민을 엄청 하다가 결국 mobx로 안착하는걸 보기도 했고, 무엇보다 이번에 적용 예시를 보니 굉장히 불만(?)이었다. 뭐 이렇게 너저분하고 불편하게 만들어놨어? 라는 느낌. 하지만 redux toolkit을 만나고~ 너의 머릿결~을~......

여튼 redux toolkit 너무 좋다. 이거라면 난 redux를 쓸 수 있겠어요. 다만 나중에 mobx도 체크해보게되겠죠.

리덕스 잘 쓰고 계시나요? - 리디주식회사 RIDI Corporation

 

4. 날짜관련 라이브러리

생 javascript 메서드로 짜려니 코드가 너저분해진다. util functions도 꽤 많이 만들어야하고. 이럴거였으면 욕심부리지 말고 그냥 라이브러리 쓸걸... 하는 생각이 들었다. 그러다 결국 찾아보고 dayjs로 안착하기로 마음먹음. luxon이 좋다는 동기도 있었으나 음... 이런 이름을 가진 소스는 괜히, 왠지 마음에 안들어 ㅋㅋ (뭔가 마블코믹스 빌런이 대표로있는 기업 이름 같... ㅋㅋ) 이건 순전히 개취이기도 하겠지만 나름 열심히 구글링한 결과 대세는 date-fns였으나 실제로 여러 실무를 진행한 사람들은 dayjs를 추천했다는 것도 한몫 했다. 원하는 기능만 골라서 가볍게 적용할 수 있는 방식도 마음에 들었고. 날짜 관련 프로젝트를 진행하게되면 dayjs 쓰기로 마음먹음.

date-fns vs day vs dayjs vs luxon vs moment | npm trends

 

여튼 결과물이 나오긴 나왔는데 지금까지 한 프로젝트 중 제일 신경썼지만 마음에 안들기도. 하지만 실무에 가까워져가면서 내가 무엇을 챙기고 무엇을 준비하는것이 좋을까 하는데 많은 인사이트를 주었다. 이번주 테스트기간 지나면 기초적인 SEED 작업을 슬슬 하기 시작할 수 있을거 같다. 

 

Calendar by Jinho