4명이서 한팀이 되어 코드잇 중급 프로젝트 중
"wikid"를 진행 하였다.
https://9-3-wikied.vercel.app/ 배포 서비스
https://github.com/junjeeong/Wikied 깃허브 주소
"wikid"는 남들이 만드는 나만의 위키 페이지로 위키피디아를 모티브로 만든 프로젝트라고 할 수 있다.
깔끔한 디자인과 다양한 사람들과 소통할 수 있는 플랫폼이라고 생각되 선택하게 되었고 유저 기능에 대해서도 처음 도전해 볼 수 있는 과제였다.
개인적으로 두번째 팀프로젝트에서는 '팀원의 코드를 완벽히 이해해보자'라는 의지를 다지기도 했다.
중급 프로젝트에서 '나'의 역할과 기여한 점
팀원으로서 의견을 주고 받고 작업을 공유 하였다.
🔷Button 공통 컴포넌트 구현
앱 여러곳에 사용되는 버튼을 많은 추상화를 통해 단 하나의 공통 버튼을 만들어 공유하였다. 하지만 너무 많은 추상화가 되어 있다보니 사용하는데에 많은 프랍스와 분기처리가 많아졌고 오히려 버튼의 사용이 불편해지기까지 하였다. 분기처리되는 부분을 여러파일로 나누면서
FilledButton, OutlineButton, LandingButton 으로 나누면서 적당한 추상화가 오히려 도움이 된다는 것을 알았다.
🔷DropDown 공통 컴포넌트 구현
버튼 공통 컴포넌트를 만든 이후, 드랍 다운도 만들게 되었는데 현재 사용처에 맞게 나눠 제작하였고 최대한 공통 드랍다운만 사용하면 드랍다운 메뉴, 드랍다운 메뉴의 비지니스 로직까지 구현해 놓아 가져다 쓰기만 하면 되게끔 만들었다. 이 또한 쉽게 사용할수 있다는 장점이 있지만 작업이 끝나고 보니 재사용성은 굉장히 떨어질 수 밖에 없는 구조라는걸 알게 되었다.
🔷Zustand 전역 상태관리 구현
클라이언트 상태 관리에 대해 많이 알게되는 작업 이였다.
상태란 변수인데 브라우저 메모리에 저장되어 컴포넌트가 리랜더링 되어도 유지된다는 기본적인 것부터 contextAPI, 리코일, 리덕스, 조타이 등 많은 전역 상태관리가 있다는 것. 그중 Zustand를 사용했는데 상태와 액션함수를 중앙 스토어에서 정의하여 전역에서 쉽게 사용할 수 있다는게 좋은 기술이고 필수적이라고 생각이 들었다.
🔷게시판('/boards') 페이지구현
게시글 목록을 보여주고 정렬 기능(드랍다운), 쿼리스트링을 이용한 추가 데이터 불러오기(페이지 네이션), 검색 기능(서치인풋) 등 미리 만들어둔 공통 컴포넌트를 이용해서 조각조각 블럭 쌓듯 페이지 기능을 구현하였다. 내가 만든 컴포넌트 뿐아니라 팀원이 만든 공통 컴포넌트를 사용하니 잘 만들어진 부분, 아쉬운 부분이 눈에 들어오기 시작했다.
🔷게시판 상세('/boards/[id]') 페이지 구현
게시판 페이지와 마찬가지로 공통 컴포넌트를 사용하면서 페이지를 제작하였고 페이지가 랜더링되는 방식을 생각하며 게시판 페이지는 SSG로 구현하였지만 상세페이지는 동적라우팅이되어 CSR로 구현되었다.
중급 프로젝트를 통해 새롭게 배운 것
기술적인 부분으로는
1. 유저 기능
2. 프록시 서버 구축 방법
3. 페이지 랜더링 방식 (SSR, SSG, CSR)
4. 공통 컴포넌트의 추상화
5. 전역 상태관리
소프트 스킬로는
1. 코어타임 활용 방식
2. 팀원의 작업을 이해하려는 자세
특히 코어타임을 최소화 하고 개인 작업 시간을 극대화 하는 시간이라고만 생각했던 나에게 팀과 소통하고 작업 내용을 깊이 공유하면서 배움의 시간을 갖게한다는 다른 관점의 코어타임이 있다는 것을 알게 되었고,
기존 알고 있는 방식의 장점도 있지만 새로 알게된 방식도 굉장한 메리트가 있다라는 걸 깨달았다.
아쉬웠던 점과 그것을 보완할 방법
팀원 모두 프로젝트 기간 내 많은 시간과 노력을 들여 작업에 몰두 했는데
제출 마지막 날 새벽까지 버그 수정, 배포 과정이 있었다.
프로젝트를 더 완벽히 만들려는 자세도 있지만 기간 산정이 부족하다고 느꼈고 초기 작업에서 유저플로우, api 스웨거 확인 작업 등 사전 작업이 있었다면 프로젝트 전반적인 이해와 함께 속도가 더 나지 않았을까라는 생각이 든다.
프로젝트가 커질수록 빠른 작업 시작보다는 전반적으로 어떻게 흘러가는지 두루두루 체크하는 것이 더 빠른 지름길이라고 생각한다.
중급 프로젝트 사용 스택
✔ HTML, CSS, JS
✔ React
✔ Next.js (Page router)
✔ Git, GitHub, 피그마, 노션
✔ Zustand,
✔ Vercel,
✔ Tailwind,
✔ ESLint, 프리티어
