프로젝트의 실질적인 개발 기간도 중간지점을 돌았다. 그럼에도 불구하고, 개발 및 배포환경이 불안정한 상태이며, 개발이 완료된 기능이 없는 상태이다. 그만큼 MSA 구조를 위하여 설정할 것이 많은 상황이다.
한편으로, 프론트엔드도 프레임워크를 바꾸고, 컴포넌트 구현 방식을 바꾼 덕분에 작업이 적잖게 미뤄졌다. 개인적으로 진행하고 있는 것들과 지속 가능한 루틴을 지키려고 하니, 이전 프로젝트에서 했던 것처럼 작업 시간을 고무줄 늘리듯이 늘릴 수가 없었다.
그럼에도 불구하고 나름의 디렉토리 구조와 컴포넌트 추상화 방식이 있는 상태라, 기술적인 증명이 완료된 부분은 빠르게 구현하고 있다. 시간이 모자라지는 않을 것이지만, NodeJs로 마이크로 서비스를 만드는 것은 간당간당해 보인다.
Next.js 서버사이드 렌더링과 Styled Components
문제
src/pages/_document.tsx에서 레이아웃 컴포넌트를 불러오니 스타일이 적용되지 않았다. HTML 태그 자체는 렌더리 되었기 때문에 styled components가 제공하는 스타일을 불러오기 전에 서버사이드 렌더링이 되어버리기 때문이라고 생각했다.
시도 1. Next.js 버전 다운그레이드
조금 검색해보니 최신 버전인 14버전이 styled components와 호환 이슈가 있다는 포스팅이 있었다. 하지만 버전을 변경한 이후에도 마찬가지로 src/pages/_document.tsx에서 불러온 Styled Components는 적용되지 않았다.
시도 2. 컴포넌트 렌더링 위치 변경
지난 주에 Next.js 14버전 프로젝트에서 src/pages/_app.tsx에서 themeProvider로 theme을 주입하고, src/components에 작성한 Button컴포넌트에 theme color를 적용하여 src/pages/index.tsx에서 불러오는 방식으로 테스트를 했다. 때문에 index.tsx에서는 렌더링이 되는 것이 분명했다.
결과
컴포넌트에 스타일이 정상적으로 적용됨
Headless UI
렌더링 조건과 같은 기능(로직)만 정의된 컴포넌트. 같은 로직을 가진 다양한 컴포넌트의 베이스를 제공한다. 프로젝트에서는 Dialog를 사용할 부분이 많고, 그 중에서도 어떤 선택을 확정 짓거나 취소하는 기능을 가진 Dialog가 많아, ConfirmationDialog를 생성했다. 그리고 그 ConfirmationDialog의 트리거로 동작하는 Logout, DeleteAccount 등을 생성했다.
팀 소통
기획이 마무리되고 각자의 작업이 진행되면서 소통이 부족해짐을 느꼈다. 각자가 진행하는 내용을 파악하지도 못했고, 각자의 어려움이 공유되지 않은 채 개인에 의해 해결되고 있었으며, 무엇보다 회의의 분위기가 좋지 못했다. 각자의 업무에 대한 확신이 없어서 더 심했던 것 같다.
하지만 프로젝트 중간 멘토링 이후 분위기가 많이 바뀌었다. 어떤 어려움을 겪고 있는지 솔직히 공유하고 있으며, 조금 막히는 부분이 있으면 한 사람이 더 붙어서 소통하는 과정에서 실마리를 찾는 경우가 많았다. 덕분에 아침 10시 - 오후 2시 - 저녁 마무리 직전에 세 번이나 보고 있지만, 밝은 분위기에서 부담 없이 상황을 공유하고 있다.
마무리
a tempo
