미니 프로젝트 주간이 시작되었다. 이제 온종일 강의 듣고 공부하는 시간은 끝났다. 프로젝트를 하면서 틈틈이 찾는 자료들로 충분히 공부가 될지는 다소 의문스럽다. 어찌 됐든 함께 프로젝트를 진행할 우리 조에는 프론트엔드가 나까지 2명, node.js를 다루는 백엔드가 3명 있다. 아이디어 회의를 진행해서 스터디처럼 소모임을 구성하기 위해 게시글을 올리는 페이지를 만들기로 했다. 다함께 miro에서 와이어프레임을 짜고, 노션으로 api 리스트를 작성한 후 S.A를 제출했다. 서로 뭘 알고 있는지 잘 모르는 프론트와 백의 첫 회의란 그야말로 우당탕탕이었다. 그리고 서로의 지식을 공유할 때마다 진심으로 신기해하곤 했다.
프론트엔드끼리 버튼, 인풋, 그리드, 텍스트 같은 기초 단위부터 헤더, 푸터 및 메인 페이지, 상세 페이지 등 페이지 단위의 컴포넌트까지 세분화하여 분배했고 각자 코드를 작성하고 깃헙에 올렸다. 나중에 깃헙 리드미에 넣을 내용은 리덕스를 붙일 때부터 정리하고, 그 전에 작성하는 단순 UI 이외의 코드들에 대해서는 주석을 상세히 남기기로 했다.
나는 페이지 단위 컴포넌트에서는 목록에서 게시글을 클릭하면 나올 상세 페이지를 맡았는데, 상세 페이지에 들어갈 내용이 많기도 했지만 만들어 놓은 기초 단위 컴포넌트들만 가지고 구성하려니 여백이나 사이즈 같은 것들, 또는 배치 방식이 상이해 자꾸만 시행착오를 겪었다. 뷰포트를 기준으로 한 단위를 사용하지 않으면 브라우저 크기를 줄였을 때 보기 싫을 정도로 시각적 삑사리가 났다. 반응형 웹페이지란 모든 걸 픽셀 단위로만 작성하던 나에게는 가장 힘든 일이 아닐 수 없었다.. 오늘은 일찍 잘 수 있을 줄 알았는데 지금 보니 여전히 비슷한 시각이다. 그래도 다행히 마치기 전에 어느 정도 윤곽을 잡았다.
내일 할 일
백엔드와의 회의에 참여해 지금까지의 진행 상황을 공유하고 앞으로의 남은 일정을 재확인한다.