안녕하세요. 코드스테이츠에서 약 2주동안 진행하였던 SO Bucket 프로젝트에 대해서 블로깅을 해보려합니다.
프로젝트 소스코드는 아래의 Github repository에서 참고하실 수 있습니다.
Client : https://github.com/hsl0505/SOBucket_client.git
Server : https://github.com/hsl0505/SOBucket_server.git
기획의도 및 프로젝트 소개
SO Bucket은 자신의 버킷리스트를 관리하고 다른 사람과 공유할 수 있도록 해주는 웹 프로젝트 입니다.
Spread Out Bucket의 약자를 따서 SO Bucket으로 프로젝트 이름을 정하였습니다.
프로젝트 개요
프로젝트 기간 : 2020.01.13 ~ 2020.01.23 (약 2주)
서비스 종류 : Web Application
프로젝트 참여 인원 : Full-Stack 3명
프로젝트는 약 2주동안 진행되었으며, 웹 어플리케이션으로 만들었습니다.
프로젝트는 팀프로젝트로 진행되었으며, 저 포함 총 3명의 팀원으로 진행하였습니다.
팀원 모두 Full-Stack 포지션을 담당했습니다. 저는 Front에서는 클라이언트의 기본 구조와 레이아웃을 구현하였고, 메인 화면 및 여러 기능을 담당하였습니다. Back에서는 Front에서 맡은 기능의 api를 주로 구현하였습니다. 제가 프로젝트에서 어떤 부분을 어떻게 구현하였는지 소개해드리겠습니다.
사용한 기술 스택
Front에서는 웹 프로젝트이기 때문에 React를 사용하였습니다.
Back에서는 node.js를 기반으로 Express를 사용하였고, 유저 인증에 JWT를 사용하였습니다.
데이터베이스로는 MySQL을 사용하였고, Sequelize ORM 및 Sequelize CLI를 사용하여 데이터베이스를 다뤘습니다.
[Front-End]
주요 화면별 라우팅 설계
React-router-dom을 활용하여 주요 화면 별 라우팅을 설계하였고, 이를 통해 SPA를 구현하였습니다.
여러가지 기능 구현
제가 클라이언트에서 구현한 기능은 다음과 같습니다.
- 홈 화면 레이아웃 구성 및 기능 구현
- 검색 화면 레이아웃 구성 및 기능 구현
- 좋아요
- 퍼가기
- 마이페이지 - 내 버킷 리스트 / 좋아요 리스트
각 기능 구현시 고려하였던 부분을 아래에 설명하겠습니다.
홈 화면
Search bar, Nav bar, Main Img, Bucket 리스트, Best Bucket 리스트로 레이아웃을 구성하였습니다.
비 로그인 시에도 버킷의 상세 정보나 버킷의 검색이 가능하도록 하였고, 비로그인 시에 좋아요나 퍼가기 버튼을 누를 경우, Alert message로 로그인을 요청하도록 하였습니다.
로그인할 경우에는 자신이 기존에 좋아요를 눌렀던 버킷의 좋아요가 눌러진 채로 렌더링 되도록 하였습니다.
검색 화면
버킷의 제목으로 버킷을 검색할 수 있도록 하였습니다. 일치하는 버킷이 없을 경우 검색 결과가 없다는 화면이 보여지고, 일치하는 버킷들이 있을 경우 버킷들을 보여줍니다.
좋아요 기능
좋아요 기능을 토글 형식으로 만들어 좋아요를 누를 시에 좋아요 숫자가 올라가고, 활성 상태로 변합니다. 활성 상태에서 다시 누를 경우, 숫자가 내려가고 비활성 상태로 다시 돌아옵니다.
마우스 hover 시 scale이 커지도록하였고, 좋아요 컴포넌트를 홈 화면 뿐만아니라 검색화면, 마이페이지나 버킷 상세화면에서도 사용할 수 있도록 하였습니다.
퍼가기 기능
퍼가기 버튼 클릭 시 자신의 버킷 리스트에 해당 버킷이 추가 되도록 하였습니다.
주요 UI 및 디자인 구현
- 짧은 시간에 빠른 UI를 구현하기 위해 AntDesign을 활용하였습니다.
- Card, Like 등 재사용할 수 있는 컴포넌트로 만들어 다른 컴포넌트에서 사용하였습니다.
- CSS로 프로젝트의 전반적인 디자인을 구현하였습니다.
[Back-End]
Client에서 제가 맡았던 기능과 연관되어있는 API를 구현하였습니다.
구현한 API의 상세 정보는 Github README를 참고하여 주시면 감사하겠습니다 :)
제가 구현한 API는 다음과 같습니다.
# buckets controller
버킷에 관한 모든 것을 담당하는 컨트롤러입니다.
- GET / home : 홈 화면에 나올 버킷 받아오기 (무작위 8개)
- GET / today : 홈 화면에 나올 베스트 버킷 받아오기 (좋아요 순서로 4개)
- POST / deleteBucket : 버킷 삭제
- GET / mypage : 마이페이지에서 자신이 작성한 버킷 목록 받아오기
- GET / findLikeList : 마이페이지에서 자신이 좋아요 누른 버킷 목록 받아오기
- POST / fork : 버킷 퍼가기
- POST / like : 버킷에 좋아요 토글 기능
- GET / search : 버킷 검색
- POST / test : 클라이언트 및 서버 테스트를 위한 fake data를 생성해주는 api
# user controller
유저에 관한 모든 것을 담당하는 컨트롤러 입니다.
- POST/ login : 유저 로그인
- POST / logout : 유저 로그아웃
- POST / resign : 유저 회원탈퇴
# Database Schima
Sequelize ORM과 Sequelize CLI를 활용하여 api endpoint별로 구현하였습니다.
가장 신경썼던 부분이 홈 화면이나 다른 화면 등에서 과거에 자신이 좋아요 눌렀던 버킷의 경우 좋아요가 눌러진 채로 렌더링 하는 부분이었습니다.
그래서 먼저 bucketlists와 likes, users 테이블을 join한 후에 받아온 버킷리스트 배열에서 각 버킷에 mylike라는 property를 각각 추가해주었습니다.
그리고 각 버킷의 likes 목록 중에 유저 id를 가지고 있는 likse가 존재할 경우, mylike를 true로 설정하여 클라이언트로 응답을 보내주었고, 클라이언트에서는 이 mylike에 따라 렌더링 되도록 하여 자신이 좋아요를 눌렀던 버킷은 눌러진 채로 렌더링을 시켜주었습니다.
cookie와 JWT를 통한 Authorization 구현
저희 프로젝트는 유저 인증에 JWT를 사용하였습니다. 그리고 이 JWT를 주고 받는 것을 쿠키를 통해 구현하였습니다.
서버에서 Express의 cors 미들웨어를 사용하여 쿠키를 받기 위해서 credentials을 설정해주었습니다.
클라이언트에서 fetch api를 사용하였기 때문에 서버로 요청 시, credentials 설정을 해주어 쿠키를 주고 받을 수 있도록 해주었습니다.
그리고 로그인 시에 JWT를 발급하여 응답 시 쿠키에 담아주었고, 이후 모든 요청 시 쿠키에 JWT가 존재하여 인증 상태를 유지 할 수 있었습니다.
회고
약 2주 안되는 기간동안 진행하였던 저의 첫 팀 프로젝트였습니다.
새로운 기술 스택을 사용하기보단 그동안 코드스테이츠에서 배웠던 것들을 복습하는 차원에서 프로젝트를 진행하였습니다. 기간도 길지 않고, 처음 팀으로 프로젝트를 진행한 것이어서 서툰 점이 많았고 결과물의 완성도도 그렇게 좋지 않다고 생각합니다.
하지만 배운점은 많았습니다.
먼저 프로젝트 기획의 중요성을 느꼈습니다. 프로젝트 시작 시, 시간이 좀 걸리더라도 꼼꼼하게 기획을 해야 나중에 일정이나 task 관리를 원할하게 할 수 있고, 팀원과 의사소통과 협업도 잘된다는 것을 알 수 있었습니다.
처음하는 팀프로젝트라서 그런지 프로젝트 기획이 잘 되지 않았었고, 프로젝트 후반에 일정과 task 관리를 실패하여 구현하고 싶었던 기능들을 많이 구현하지 못했습니다. 그리고 이러한 것들이 프로젝트 완성도 저하로 이어졌기 때문에 많은 아쉬움을 느꼈고, 기획이 탄탄해야한다는 것을 배울 수 있었습니다.
또한 개인이 아닌 팀원들과 같이 만들어가는 팀프로젝트이기 때문에 팀원들과 항상 진행사항을 공유하고 같이 고민하며 의사소통을 하고 협업하는 방법을 많이 배웠던 것 같습니다.
이외에도 git work flow를 익힐 수 있었고, 애자일 스크럼 방식을 경험해 볼 수 있었습니다. 기존의 배웠던 기술 스택에 대해서도 많이 복습할 수 있었습니다.
비록 프로젝트 완성도가 많이 떨어져서 아쉬움이 많았지만 정말 많은 것을 배울 수 있었고 이러한 점들이 저를 개발자로서 좀 더 성장시켜주었다고 생각합니다 :)
이상 프로젝트 블로깅을 마칩니다. 봐주셔서 감사합니다 :)
'Project Portfolio' 카테고리의 다른 글
| Billy Zip 프로젝트 (0) | 2020.03.13 |
|---|
댓글