미니 프로젝트
11월 18일에 대학교 밴드 동아리에서 연간 정기공연을 했다. 매년 2학기마다 동아리원들이 열심히 준비해서 선배들과 지인들을 초대하는 방식의 공연인데, 기존에는 유인물을 배부하는 등으로 공연 셋리스트, 참여자 리스트 등을 공유하였다.
올해에는 기획부 친구들의 제안으로 셋리스트나 멤버 리스트 등의 공연 정보들을 열람할 수 있는 페이지를 만들어 QR코드로 배포하게 되었다. 나와 한 명의 후배가 홈페이지 제작을 맡았고, 한 두 명 정도의 디자인 담당 기획부원이 레이아웃 기획과 디자인 디테일 작업을 맡아주었다.
해당 포스트와 같은 시리즈에 포함된 모든 포스트들은 프로젝트 구현이 끝나고, 공연 관객들을 대상으로 배포까지 완료된 상태에서 회고를 위하여 작성되었다. 따라서 구현 과정에 대한 순차적인 흐름과 깔끔한 코드를 위한 리팩토링 과정은 생략되어있다.
페이지 구성
필요로 하는 기능은 크게 아래의 세 가지가 있었다.
- 셋리스트, 공연 참여자 정보 등의 정보 제공 페이지: SetListPage
- 익명으로 코멘트를 남길 수 있는 방명록 페이지: GuestBookPage
- 추첨 정보 등록 및 조회를 위한 추첨권 페이지: RaffleInputPage, RaffleConfirmPage
architecture
- 프론트엔드는 ReactJS를 사용하여 구현하였다. type script를 공부한 이후에는 type script를 사용하지 않고 java script를 사용하여 프로젝트를 진행한 적이 없었는데, 함께 작업하는 후배가 type script를 사용하지 않아 java script를 사용하여 코드를 작성하였다.
- 백엔드 서버를 구현하기에는 요구하는 기능에서 서버에 대한 의존성이 크지 않다고 판단하여 firebase realtime database를 사용하였다.
사용한 주요 라이브러리
- tailwind CSS: 짧은 제작 기간과, 일회성 페이지라는 점을 고려하여 유지보수 측면에서는 힘들 수 있지만 빠른 제작과 쉬운 반응형 스타일 작성에 유리한 스타일 라이브러리인 tailwind를 사용하였다.
- firebase: 데이터베이스 계층에는 firebase realtime database를 사용하였는데, 이를 위하여 firebase library를 프로젝트 내에서 사용하였다.
- gh-pages: github 호스팅에 자동 deployment를 설정하기 위한 라이브러리로 사용하였다.
- recoil: 전역 상태 관리 라이브러리로 사용하였다. 다음 프로젝트에서는 zustand를 사용해볼 예정이다.
- react-cookie: 추첨권 관리를 위하여 브라우저 쿠키를 활용하고 싶었는데, 이를 위하여 react-cookie 라이브러리를 활용하였다.
모든 페이지에서 로고 버튼을 연속으로 클릭/터치하면 DEV Page로 이동이 가능하다.
MainPage와 DEV Page는 테스트와 개발을 위한 페이지이며, SetListPage와 RaffleInputPage, RaffleConfirmPage에서 MainPage로 돌아가는 경로는 없도록 하는 것이 기획의도였다.
위에서부터 차례대로 SetListPage, GuestBookPage, RaffleInputPage, MemberModal의 결과물이다. 시리즈에는 각 페이지 별로 기능 구현, 페이지 레이아웃 디테일 구현 등에 있어서 의미가 있었던 부분이나 기록해둘만한 내용들을 작성할 예정이다.
