프로젝트 소개
취향이 비슷한 사람들과 함께 영화에 대해 정보를 공유하고 모임을 만들 수 있는 공간을 제공하자는 취지에서 해당 프로젝트를 진행하게 되었다.
첫 프로젝트
🗓 작업기간
2020.11.09~2020.11.20
🔧 기술 스택
프론트엔드
- HTML/CSS
- JavaScript(es6)
- React(CRA, Router DOM)
- naver open API
- AWS CLI를 이용한 S3 배포
백엔드
- nodejs express
- MySQL
- CORS
- sequelize
- JWT
- AWS EC2 & RDS 를 이용한 배포
협업도구
- Slack
- git-git hub
- Postman(API)
📋 주요구현사항
내가 담당한 부분 ✔
- 프로젝트 메인 화면 및 슬라이드 구현 ✔
- 로그인, 로그아웃 기능 및 유효성 검사 ✔
- JWT 토큰 인증 ✔
- 브라우저 내 아이디 기억하기 기능 구현 ✔
- 회원가입 기능 및 유효성 검사 구현
- 마이페이지 및 회원정보 수정 구현
- 안내 메세지용 모달창 구현 ✔
- Naver open API를 이용한 영화 검색(장르 필터링 포함) 기능 ✔
- 영화 찜하기 기능 ✔
- 게시판 게시글 목록 출력 및 새글 작성/추가/조회 기능 구현
- 반응형 UI 구현 ✔
🎉 구현한 기능
1. JWT 인증 로그인/로그아웃
JWT 토큰 인증 방식을 통해 로그인/로그아웃을 구현했다.
2. 로그인 유효성 검사
서버와 통신하기 전 회원가입 validation을 진행하여 사용자가 올바른 값을 입력하도록 구현했다.
3. 브라우저 내 아이디 기억하기 기능
사용자 편의성을 위해 브라우저 내 Localstorage를 이용한 아이디 기억하기 기능을 구현했다.
4. 회원가입 기능
사용자가 일반회원가입이 가능하도록 기능을 구현했다.
4. 마이페이지 및 회원정보 수정 구현
마이페이지 안에서 회원정보를 수정할 수 있게 구현했다.
5. 게시판 글 목록 보기/수정/삭제
로그인한 사용자만 게시판 기능을 이용할 수 있게 구현했다.
6. 영화 검색(장르 필터링)
Naver open API를 이용하여 영화 검색 기능을 구현했고, 장르 선택을 통해 필터링된 검색 결과를 얻을 수 있게 구현했다.
7. 영화 찜하기 기능
로그인한 사용자만 관심있는 영화를 찜할 수 있는 기능을 구현했고, 이미 찜한 목록을 중복체크할 수 없도록 구현했다.
8. 전체 페이지 반응형 UI
media query를 이용하여 반응형 UI를 구현했다.
🏷 프로젝트 리뷰
팀장 역할의 중요성을 깨달았다.
첫 프로젝트에 첫 팀장이다보니 부담감이 엄청 컸다. 팀장이라는 역할을 맡아서 팀원들과 으쌰으쌰한 분위기로 이끌어 가기 위해 노력을 많이 했다.
처음에 잘할 수 있을까? 라는 걱정이 엄청 많았는데, 팀원분들이 모두 이해를 잘 해주시고 같이 힘내주셔서 프로젝트 마무리까지 힘낼 수 있었다. 프로젝트 시작부터 끝까지 팀장이 어떤 역할을 해야 프로젝트가 잘 흘러갈 수 있을지 고민해보고 부딪쳐 볼 수 있는 시간이었다.
프로젝트 시작을 위한 다양한 툴 이용을 습득했다.
이번 프로젝트를 통해서 기본 스택뿐만 아닌 git이나 AWS 활용을 많이 해볼 수 있어서 좋았다. 나중에 프로젝트 등을 준비할 때 사용해야 하는 git Readme 및 wiki 활용을 한번에 익힐 수 있는 시간이었다. AWS CLI부터 백엔드와의 커뮤니케이션을 통한 EC2 활용 등을 통해 배포하는 환경에 대한 이해를 높일 수 있었다. 또한 SR 을 통해 피그마, 미로 등을 활용해서 프로젝트의 기본 시작을 어떻게 해야하는지 알 수 있었다.
개발환경과 배포환경, 그리고 에러핸들링의 중요성을 깨달았다.
개발환경(로컬)과 배포환경에서의 차이점을 많이 느낄 수 있었다. 실제 브라우저를 이용했을 때, 생각치못한 에러가 발생하는 것을 경험했기 때문에 작은 단위로 테스트 진행을 해나가야하는 중요성을 알 수 있었다.
활발한 커뮤니케이션은 중요하다.
백엔드와 수시로 소통을 진행하며 초기부터 배포환경을 잡아나갔다. 그 덕분에 배포에 있어서 어려움이 크게 발생하지 않았고, 첫 프로젝트에서 성공적으로 배포를 할 수 있어서 좋았다.
에러 핸들링이나 풀리지 않는 문제에 있어서도 모각코를 진행하면서 서로 도와가면서 해결했다. 적극적으로 커뮤니케이션이 이뤄져서 첫 프로젝트에 많은 부분을 구현해나갈 수 있었다고 생각한다.
개선해야할 점
-
SR의 소중함
DB 스키마부터 플로우 차트, API, 와이어프레임 등에 대해서 세세하게 적어나가야 프론트엔드와 백엔드 간의 상호작용이 수월하다는 것을 느낄 수 있었다.
개인적으로 아쉬웠던 부분은 UI 디자인이었다. 일단 기능 구현을 먼저하는데 초점을 두어서 기능구현이 끝나면 진행하자고 생각했는데 쉽지 않았다. 기존에 잡아두었던 심플한 디자인으로 통일해서 진행했다. 추후 SR에 시간을 좀더 투자해서 UI 디자인도 신경써서 진행하고자 한다. -
다양한 스택 활용의 제한
현재 배웠던 스택을 복습하는 부분으로 집중을 했기 때문에 다양한 것을 시도해보지 못했다. 짧은 시간 안에 새로운 스택을 공부하면서 구현에 성공할 수 있을지도 의문이었고, 팀원들간의 역량도 맞춰서 진행해야했기 때문에 욕심내지 않았다. 덕분에 이번 프로젝트를 통해 기존 스택에 대한 기본 이해도는 처음보다 많이 높아졌다고 생각한다. -
CSS 구현 시간 지연
이번 프로젝트에서 CSS 라이브러리 및 모듈을 사용하지 않고 어디까지 할 수 있을지 한계를 파악했고, 그 한계점은 CSS 구현 시간임을 정확하게 인지했다. 특히 슬라이드 구현에서 오직 CSS만으로 혹은 JS를 이용해서 하는 방법을 보긴 했는데, 정작 원하는 부분에서 구현하지 못 하고 예상 시간을 넘겨버렸다. 추후 프로젝트에서는 CSS 모듈 및 라이브러리 사용을 통해 시간 단축을 할 예정이다. -
SameSite 이슈
배포는 성공적이었지만 samesite 이슈가 큰 문제였었다. 초반에는 새로고침을 해도 로그인이 유지가 되어 잘 해결되었나 싶었으나 프로젝트의 규모가 커졌을 때, 해당 이슈는 다시 발생했다. 결국 클라이언트쪽에서 수동으로 토큰 저장 및 발송을 새로고침 유지를 성공시켰지만, 추후 인증서 및 HTTPS 서버 구축을 통해 문제를 풀어볼 예정이다. -
팀원들의 고충
프로젝트를 진행하는 동안 팀원들과의 팀워크와 분위기는 무척 좋았고 즐거웠다. 하지만 회고시간을 통해 각 팀원들이 겪었던 고충에 대해 읽어보면서, 내가 팀장으로써 좀더 케어해줬어야 하는 부분이 무엇인지 깨달았다.
다음 프로젝트에서는...
- axios 기본 환경 설정
- React Hooks 및 Redux 활용
- CSS 관련 Sass(SCSS) 혹은 styled-component, ant design, 머터리얼ui 활용
- samesite 이슈 해결
프로젝트 주간 포스팅 모음
