Codestates 2주 Project 회고

Immersive Course 과정을 진행하면서 블로그에 대해 꽤나 잊고 지냈었는데, 그 동안 많은 스프린트를 거치면서 정말 한 번도 쉬운 적은 없었지만 결국 돌이켜보면 모두 무난하게 수행하였고, HA를 봤을 때도 무난무난하게 금방 풀어서 통과를 했기 때문에 project 단계까지 올 수 있었다. 프론트엔드 쪽으로는 뒷부분 React부터 시작해서 React hooks, Redux 등과 백엔드 쪽으로는 express를 이용한 서버를 기반으로 https 서버를 만들고, mysql을 이용하여 데이터베이스를 구축하는것부터, Sequelize라는 ORM을 이용하는것 까지 정말 다양한 것을 배웠는데 정말 그 때는 뭐하나 쉬운게 없었기 때문에 스프린트 당시에는 어느 정도 잘 이해하고 넘어갔어도 정말 실전이라고 생각되는 project를 임하는데에 있어서 불안한 마음이 든 것은 사실이다. 우선은 팀원 설문조사를 통해 새로운 사람들을 만나 그 사람들과 원만히 커뮤니케이션을 하면서 진행을 해야하고, 또 나도 나름 1인분 이상은 기여를 해서 팀에 도움이 되어야 한다는 생각이 들었기 때문에 긴장이 안될 수가 없었다. 다행히 감사하게도 예전에 같이 페어활동을 진행했던 분에게서 팀 제안이 왔고 정말 좋은 팀원들을 만나 2주라는 짧은 시간 동안 어느 정도 처음에 생각했던 Bare minimum한 부분까지 전부 완료를 해내게 되어 마지막 즈음은 힘들게 달렸지만  뿌듯한 시간들이였다.

 

 

---

 

그래서 무엇을 만들었느냐?

 

설명하기 앞서, 아무래도 눈으로 보는게 빠를듯 하여 사진을 준비해보았다. 구현한 기능 중 일부분이지만 주된 내용은 위 사진으로 알 수 있다. 우리 2조의 팀명은 카피바라였고, 팀명을 본따 프로젝트 이름은 무비바라로 정했다. 구현한 것은 영화를 보고 해당 영화에 맞는 리뷰를 적는 사이트이다. 아쉽게도 시간관계상 완벽하게 구현할 수 없었지만, 아무래도 볼륨이 그리 작지 않았다고 판단되기에 지금 정도만 해도 어느 정도 만족스러운 결과물이 나왔다고 생각한다. (팀원들이 고생이 많았다...)

 

 

---

 

 

사용 스택

 

프론트엔드 측에서는 React와 React hooks를 사용하여 만들었고, 최초에 Redux까지 고려했지만 시간관계상 이번엔 넣지 못하였다.

그리고 내가 맡았던 백엔드 측에서는 express를 사용하여 서버를 구축하였고, 데이터베이스 관련해서는 Mysql과 Sequelize ORM을 사용하였다. 배포는 기본적으로 EC2, S3, RDS를 사용하고 https 구현을 위해 AWS Certificate Manager를 이용해 인증서를 발급받고 ROUTE53에서 도메인을 구매하고 CloudFront, ELB를 사용하였으며 보안과 로깅을 위해 역방향 프록시를 두었다.

 

 

---

 

 

구성 요소

 

 

• 회원가입 : 소셜 로그인 이외의 회원가입 페이지 ( 이메일 형식 및 비밀번호 유효성 검사 적용 )
• 로그인 : 기본 로그인, 소셜 로그인 페이지, 비회원 로그인
• 로그아웃 : 로그아웃 버튼 ( 토큰 삭제 )
• 마이페이지 : 회원 정보 조회 및 수정 ( 닉네임, 비밀번호, 프로필 사진 변경 가능 )
• 메인 : 영화 목록 나열 ( 영화 선택시 해당 영화 페이지로 접근 )
• 영화페이지 : 해당 영화의 정보 및 영화에 달린 리뷰 나열 ( 생성, 수정, 삭제 및 스크랩 가능 )
• 유저홈 : 내 정보 및 내가 쓴 리뷰, 스크랩한 리뷰 나열

 

구성요소는 위와 같으며, 리뷰에 있는 유저의 닉네임 클릭시 해당 유저의 피드가 나오도록 구현하고자 했지만, 시간관계상 만들지 못해서 아쉬움이 남는다. CRUD 기능은 모두 들어 있으며 프로필 사진 업로드는 multer와 S3를 이용하여 구현하였다.

 

 

---

 

 

프로젝트 진행 방식

 

 

 우선 깃허브 레포는 클라이언트, 서버 2개로 나누었다. 작업시 미리 양식이 준비된 Task card를 만들어서 작업할 내용을 미리 적어두고, 라벨을 이용하여 예상 시간과 작업 후에는 실제 걸린 시간도 적어두었으며 주차별로 Milestone을 설정해 연결하고, 칸반보드에 알맞게 넣어두었으다. 그리고 작업이 끝나면 Pull request를 해당 Task card에 연결하였다.

 

 

---

 

 

이번 프로젝트에서 내가 구현한 것들

 

 우선 처음 서버와 데이터베이스 구조를 짜는 것은 같은 백엔드 포지션 팀원과 함께 화면을 공유하며 같이 진행하였다. 우선 express를 이용해 서버를 성공적으로 열어보고, 사용할 미드웨어들을 전부 설치하고, API를 참고하여 라우트를 나누었으며, 해당 라우트에 맞게 컨트롤러들을 이어주었다. 그리고 Sequelize를 통해 미리 짜둔 스키마에 맞게 model들을 구현하고, 관계설정을 하고, 데이터베이스에 담아 잘 작동되는지 확인하였다. 그 후에는 서로 하나씩 컨트롤러들을 정해서 구현해나갔고, 영화 리뷰 사이트에 걸맞게 영화 목록에 대한 데이터가 필요했기에 영화 데이터를 구해 데이터베이스에 담아냈다. 그리고 로그인을 토큰방식으로 했기 때문에, 토큰을 사용하여 어떻게 구현할지에 대한 생각도 꽤 오랜시간 토론하며 정했고, 토큰을 쿠키에 담는것, 그리고 토큰을 검증하는것을 구현했으며 토큰 검증의 경우에 중복되는 부분이 있어서 미들웨어를 커스텀하여 적용해주었다. 또한 Oauth 로그인에 대해서도 많이 고민하고 찾아봤는데 결국 해답을 찾아내었고, 이부분에서는 제 파트너가 정말 많은 활약을 해주셔서 수월하게 해낼 수 있었다.

 

 

 

---

 

 

이번 프로젝트에서 얻은 것

 

 걱정과는 달리 결국 마지막엔 결과물이 탄생하여 무사히 발표까지 마칠 수 있어서 정말 다행이였다. 그리고 나도 이 팀 내에서 충분히 1인분은 하지 않았을까 하는 생각도 들면서 그 부분도 다행이라고 생각한다. 지금까지 배운 것들을 모두 동원하여 써먹다보니 이전보다 훨씬 익숙해지기도 하고, 상상했던 기능을 구현하기 위해 모르는 것들을 인터넷 검색을 통해 정보를 찾고 구현에 성공하는 과정에서 자신감도 조금은 생긴 것 같다. 프로젝트 도중에는 정말 어렵고 막막한 것들도 사실 많았는데, 정석적인 방법이 아니라고 생각되어도 타협안이 있으면 그냥 타협해서 구현해버릴까 하는 안일한 생각이 들 때도 있었다. 하지만 결국 끝까지 물고 늘어지면 성공할 수 있다는 것을 배웠고 이것은 앞으로도 개발자로 살아가는데 있어서 아주 중요한 교훈이 아닐까 생각한다. 모르는 것은 회피하지 말고 부딪혀서 내 것으로 만들어라. 개발자에게 아주 중요한 마인드라고 생각하고 반성하였다. 다음 4주 프로젝트는 또 새로운 스택들을 도입하게 될 것이며, 2주 때보다 더 진화된 것들을 만들어야 할 것인데 지금의 깨달음을 잊지 말고 열심히 달린다면 꼭 좋은 결과가 있지 않을까 생각한다. 앞으로도 열심히 하는 내가 되자.