이번 주차부터는 개발 주차로 드디어 개발에 들어갔다. 하지만 개발 환경을 세팅하는 부분에서 막혀 처음부터 힘들었다. 항상 세팅하는 부분이 제일 어려운 것 같다…
코딩 컨벤션을 맞추기 위해 eslint와 prettier를 사용하기로 했는데, 타입 스크립트와 같이 설정을 하려다보니 어려웠던 점이 많았던 것 같다. 다음부터 typescript + react를 사용하면 eslint와 prettier는 이 템플릿을 그대로 이용하여 사용하면 될 것 같다. 또한 하다보니 prettier의 좋은 기능을 알게되었다. 바로 import순서 정렬 기능이다. 이 기능을 사용하면 import 순서를 내가 지정한대로 저장시 순서를 바꿔준다. 평소에 수동으로 했는데 아주 좋은 기능인 것 같다.
사실 이 부분은 윤규님이 전부 설정하셔서 내가 힘들었던 부분은 없다. 하지만 그 과정을 지켜보면서 스토리 북 이놈은 만만치 않은 놈이란 걸 알 수 있었다.
국제화 기능은 nextjs의 i18n 내장 모듈과 next-i18next 라이브러리를 사용하여 구현하는데, 이 부분에 대해서 세팅이 필요했다. 이 세팅 과정은 윤규님께서 잘 정리해주셔서 여기를 참고하면 좋을 것 같다.
이번에 드롭다운과 랭킹 컴포넌트를 구현하면서 가장 중요하게 생각했던 부분은 재사용성이다. 특히 코드에서 로직적인 부분과 UI적인 부분을 최대한 분리하면서 컴포넌트를 작성하려고 했다. 또한 여러 군데에서 사용되지만 비즈니스 로직이 따로 없는 랭킹 컴포넌트의 경우 컴포넌트를 재사용하는 사용자 입장에서 최대한 커스텀하게 컴포넌트를 조작할 수 있도록 컴포넌트를 구현하는데 고민을 많이 했던 것 같다.
이 과정에서 컴포넌트를 구성하는 여러가지 레이아웃 패턴같은 것이 있다는 것을 알게되었고, 이에 대해서 자세히 학습한 후에 정리해보면 좋을 것 같다.
아쉬웠던 점은 아직도 브랜치 관리가 제대로 안되는 것 같다. 항상 feature 브랜치내에 다른 기능을 추가하거나 수정하는 commit이 많이 포함되고 있어 이 부분은 앞으로 좀 더 신경써야 할 부분인 것 같다.
이번주는 늦은 시간까지 야근을 많이 했던 것 같다. 몸은 많이 피곤했지만 그래도 팀원들과 같이 해나가면서 뿌듯함을 많이 느끼고 있다. 또한 컴포넌트를 만들 때 이런식으로 고민을 많이했던 적은 이번이 처음인 것 같은데 앞으로 꾸준히 이런식으로 컴포넌트를 작성하다 보면 재사용하기 좋은, 관심사가 잘 분리된 컴포넌트를 잘 작성할 수 있을 것 같다.