2022.05.23 ~ 2022.06.05 기간동안 진행한 패션 쇼핑몰 사이트 제작 프로젝트 회고글입니다.
🎬 프로젝트 시작
엘리스 SW 엔지니어 트랙 2기에서 계속 수업을 듣으며 개인으로 공부하는 시간을 가지다가 처음으로 팀원과 함께 프로젝트를 하게되는 기간이었습니다.
팀원은 총 5명으로, 프론트엔드 3명과 백엔드 2명으로 이루어졌습니다.
이 프로젝트는 첫 프로젝트였어서 교육 기관에서 기본 틀을 스켈레톤(뼈대) 코드와 함께 정해주었습니다.
우리가 개발해야하는 것은 무언가를 판매하는 쇼핑몰 사이트 제작이었고 어떤 것을 팔지만 정하면 되었습니다.
처음으로 누군가와 함께 무언가를 만드는 일이라 기대 반 걱정 반이었습니다.
'걱정'은 제가 부족하여 팀에 민폐는 되기 싫었고,
'기대'는 사람들과 소통하는 것을 좋아하는 저에게는 다른 사람들과 무엇을 만들 지 상의하고 그 이후 코딩할 때 함께 이야기하며 공부를 할 수 있다는 것은 정말 재밌을 것 같았습니다.
🔴 프로젝트 진행 방식
첫 날엔 협업을 위한 Gitlab에 대한 사용법 설명 등이 있었습니다.
엘리스 측에서 교육생들이 이용할 수 있도록 엘리스 Gitlab을 제공해주었으며, 사용 권한을 받아 그 사이트에 코드를 업로드하며 프로젝트를 진행하였습니다.
그 이후 화요일부터 금요일까지 쇼핑몰 컨셉을 잡고, 스켈레톤 코드를 이해하고 그 다음부터 개발을 시작하여 이번 한 주 내로 기본적인 쇼핑몰을 완성해야만 했습니다.
2주차에서는 1주차에 완성하지 못한 쇼핑몰의 기본 부분을 완성하고, 추가 개발을 선택하여 하는 기간이었습니다.
처음에 점수 체크리스트를 받았는데, 추가 점수를 획득하고 싶다면 기본 완성 뿐만 아니라 추가 점수를 받을 수 있는 부분을 2주차에 완성하는 것이었습니다.
체크리스트를 보고 우리가 해야하는 것을 다이어그램을 만들어 하나씩 완성해나갔습니다.
원래 정해진 시간표는 매일 아침 스크럼을 가지고 오후에는 개발을 하고 오후 7~10시에는 프론트/백엔드 한 번씩 번갈아가며 코치님에게 궁금한 것을 물어보는 오피스아워를 가지는 것이었습니다.
그리고 매주 주말에는 조별로 프론트/백엔드 코치분들이 Gitlab에 올려져있는 코드를 보고 조언을 해주는 시간을 가지는 것이었습니다.
저희 팀에는 오프라인 미팅을 선호하는 분들이 계셔서 매일 아침 스크럼을 가지는 대신,
주 3일 엘리스 측에서 제공해준 회의 장소에 모여 오프라인 회의를 가졌습니다.
🟠 프로젝트에 사용된 기술 스택
이번 프로젝트에 사용하게 된 기술 스택은 교육에 들어와 처음부터 지금까지 배웠던 것들을 이용해서 개발을 해보는 것이었습니다.
개발언어 및 프레임워크 등은 뼈대코드가 주어지면서 이번 프로젝트에서는 고정되었습니다.
결과적으로 프로젝트에 사용된 기술 스택은 아래와 같습니다.
프론트엔드
- HTML / CSS
- Javascript
백엔드
- Node.js
- MongoDB
- Postman(API Test)
- Ubuntu Server
🟡 프로젝트를 통해 배운 점
저에게는 처음으로 협업을 해본 경험으로서 사람들과 소통하며 작업하는 것, 갑작스런 에러 발생 시 대처하는 방법 등 많은 것을 배우고 경험할 수 있는 기회였던 것 같습니다.
Gitlab을 통한 협업 방법
처음 협업을 위한 도구로 Github을 많이 쓴다고 알고 있었지만, 엘리스에서 사용토록 하게 한 것은 Gitlab이었습니다.
처음 사용해보는 것이라 당황하기도 했지만 첫 날 교육을 듣고 사용해보니 Github과 크게는 다르지 않아 금방 적응할 수 있었습니다.
작업의 구분을 위한 라벨 작성, 해야하는 것에 대한 마일스톤 작성, 그에 따른 작업 단위별 issue 작성, Gitlab wiki를 통한 회의내용 기록을 통해 업무에 대한 문서화 방법을 배웠고 적용해나갔습니다.
엘리스 측에서 설명해줄 때 최대한 잘게 잘라서 작성을 권장했고 저희는 그 방식을 잘 따라서 업무방식을 적응해나갔습니다.
결국 issue를 잘 작성하고 작성량이 많았던 점으로 프로젝트 결과 발표 때 협업상(?)을 받게되었습니다.
Node·Express/MongoDB(Mongoose ODM) 프로젝트에 대한 이해
정규수업 때 교육을 받으며 어느정도 이해는 하고 있었지만, 이렇게 직접 프로젝트를 제작해보니 이해도가 달라졌습니다.
.env파일을 통해서 포트/DB정보/API_Key 등 외부에 공개되면 안되는 것들을 저장하고 변수처럼 가져와 사용하였습니다. 이 때, gitignore파일을 통해 저장소에는 push되지 않도록 하였습니다.
MVC패턴, MPA 개발에 대해 배웠고, Mongoose를 사용하면서 ODM에 대해 이해하게되었습니다.
개발 코드에서 데이터베이스의 스키마를 정의하고, 사용할 함수들을 작성하고 Service에서 이 함수를 가져와 이용하였습니다.
이메일 발송을 비밀번호 찾기에서 nodemailer로 구현하였고, 바뀐 비밀번호로 로그인하면 새 비밀번호를 입력하도록 하였습니다.
소셜 로그인을 구글링하며 구현해보았는데, 생각보다 까다로웠다.
특히 배포 전 구현과 배포했을 때 url을 배포url로 바꿔줘야 한다는 것이 중요했다.
발표 전 막판에 소셜로그인을 추가하다가 이 url 바꿔줘야 한다는 것을 떠올리지 못해 배포하고 난 뒤 왜 안될까..라는 생각을 하다가 시간이 종료되버렸었다.
프로젝트가 끝나고 구글링 및 생각해보다가 떠올라서 다음번에는 잘 구현할 수 있을 것이라고 생각했다.
API 개발 및 API Document 작성에 대해 많이 배웠는데, restful하게 api를 작성하는 법과 API 문서를 잘 만들어서 프론트분들에게 전달해주는 것이 정말 중요하다고 생각하게 되었다.
API에 대해 확실히 정의되지 않았다보니 계속해서 맞춰주는 과정이 필요했고 생각보다 시간을 많이 소요했던 경험이 있어 다음 프로젝트에서는 API에 대해 확실히 데이터 명세를 정의하고 시작해야겠다고 생각하였습니다. 아래는 급하게 만들었던
🟢 고민했던/어려웠던 점과 해결
1. jwt 토큰을 이용한 인증/인가
토큰을 이용한 인증/인가를 교육 때 빠르게 들었는데, 프로젝트에 적용해봤던 것이 아니어서 확 와닿지 않은 상태였다. 그래서 제대로 된 개념이 없었는데 구글링을 통해 학습하고 Local/Session Storage, IndexedDB 3가지 방법 중에 Local Storage를 사용하기로 하였습니다.
로그인 시 .env에서 보관한 jwt_secret_key를 Signature로 이용하여 payload에 userId와 role을 담아 암호화한 token을 프론트 단으로 보내주도록 처리하였습니다.
2. MongoDB 설계
팀프로젝트 주제도 좀 늦게 잡히긴 했지만, 처음에 구조를 잡고 시작한 것이 아니었기 때문에 그에 맞춰 데이터베이스 설계도 초반부에 확실히 정하질 못했습니다. 그래서 사용자->카테고리->상품->주문->주문목록->리뷰 순서로 DB를 설계하게 되었어서 분업을 하지 못해서 속도가 안나왔던 것 같습니다.
어느정도 기틀이 잡힐 때까지 백엔드는 나눠서 일을 못하고 같이 고민하고 프론트 작업 되는 것에 맞춰 작업을 하게되었어서 아쉬웠습니다.
어느정도 이후에는 제가 주로 데이터베이스 설계, 로직작성 등을 하였습니다.
많이 팔린 Top 판매 목록 API, 무한 스크롤을 위한 Pagination API, 소/대 카테고리 DB 설계, populate를 이용한 데이터베이스 설계 등이 있었습니다.
페이지네이션을 위한 코드에서 sort할 때 계속해서 중복되는 값이 나오는 이슈가 있었습니다.
처음에는 DB의 값을 sort를 하여 console을 찍어봐도 이유를 알 수 없이 한 번 나온 값이 두번째 페이지에서 중복되는 문제가 있었는데, 구글링을 해봐도 이에 대한 설명이 잘 나오질 않았고 지인분께 여쭤봐도 확실한 답을 듣지 못해 어려움을 겪었습니다. 우연찮게 페이지네이션 관련된 여러 자료를 보다가 sorting을 여러 조건을 주는 것을 발견하고 적용해보기로 했습니다.
sort({A조건 : 1, B조건 : -1}) 이런식으로 처리하였더니 해결되었습니다..
내가 이런 식으로 시간을 많이 소비하는 동안.. 다행히 다른 백엔드분이 쇼핑몰에 쓰일 데이터를 크롤링해주시고 이를 S3에 이미지 저장할 수 있도록 준비해주어 시간을 단축할 수 있었습니다.
다음 프로젝트 때는 프론트/백엔드 크게 구분없이 초반부에 데이터에 대해 확실히 얘기를 하고 시작해서 지연 없이 빠르게 프로젝트를 완성해 나가고 싶다고 생각하였습니다.
3. git 관련 이슈
처음에 팀원들이 git으로 협업해본 경험이 없어서 모두 어려워했습니다. 팀장님이 경험이 있으셔서 대부분의 팀원들에게 한명씩 작업하고 난 후 commit/MR Request 하는 것까지 알려주셔서 다행히 진행이 조금씩 되었던 것 같습니다.
중간중간 한 번씩 팀원분이 dev branch에 merge 해야하는 것을 실수로 master에 merge해버리거나, revert 하는 과정에서 branch가 꼬이게 되는 경험을 했었는데 굉장히 당황했었습니다.
어찌저찌 구글링하여 겨휴 복구하는 과정을 겪었는데 심적으로 매우 힘들었습니다..
git에 대해 좀 더 자세히 알아서 다음 협업 시에는 제가 알려줄 수 있도록 잘 준비하고, 문제가 생겨도 잘 풀어버릴 수 있도록 git에 대해 많은 이해가 필요하다고 생각하였습니다.
4. 상품 이미지 AWS S3에 저장
백엔드 팀원분이 먼저 구글링을 통해 이미지 업로드에 대해 이해하고 AWS S3 Bucket을 만들고 코드를 작성해주셨는데, 이미지를 어떤 포맷으로 올려도 s3 bucket에 업로드 되지가 않는 문제가 있었습니다.
코치님께도 여쭤봤지만, 자세히 코드에 대한 리뷰가 안됐고 막막하였습니다.
구글링을 통해 여러 코드들을 찾으며 공부하였는데, contentType을 지정해주지 않아 처리가 안되었던 것을 발견하여 다행히 해결하였습니다.
😢 아쉬웠던 점
아쉬웠던 점은 처음 프로젝트여서 어떻게 진행해야 할 지, 기획하는 것 등에 대한 이해가 없어 프로젝트 초반에 시간을 많이 소모했고 이로 인해 2주차까지 기본 개발이 조금 밀렸었고 이로 인해 완성하고 싶던 추가개발 부분의 일부분을 포기해야 했다는 점입니다.
코치님에게 다른 팀들도 기본 개발 완성이 덜 된 팀도 많다는 얘기를 듣고 조급해하지 않으며 우리가 해야할 일을 해나간 것은 정말 다행이라고 생각합니다.
또한, git 커밋 컨벤션이나 함수/폴더/파일 등 네이밍 컨벤션을 맞춰보지 못한 건 아쉬웠습니다.
협업에 대해 모두 서툴렀기 때문에 초반부에 간신히 prettier 세팅만 맞출 수 있었습니다.
그리고 코드 작성을 하면서 내가 작성한 코드가 잘 작성된 코드인 지에 대한 의문이 들었는데, 코치님들의 코드 리뷰로 부족한 점을 보면서 아직 너무도 많이 부족하다고 느꼈고 여러 좋은 코드들을 보며 내 것을 고쳐보기도 하며 부족한 점을 채워나가고 싶다고 생각하게 되었습니다.
🌈 느낀점/소감
이번 프로젝트를 하면서 처음으로 Node.js + MongoDB 프로젝트를 완성해보았는데, 많은 것을 배울 수 있었습니다. 또한 프론트와 백엔드로 나뉘어 협업하면서 서비스를 완성해나간다는 것이 어떤 것인지, API Document 작성 및 Git을 활용한 문서화를 하는 법과 왜 해야하는 지 깨달았고 스스로도 조금은 개발자스러워졌다고 느낄 수 있던 프로젝트였습니다.
마지막에 팀원들과 함께 밤새며 발표 전까지 불태웠었는데 팀원들에게 모두 고마웠습니다.
함께여서 더 힘을 낼 수 있었던 것 같고 즐겁게 프로젝트를 할 수 있었습니다.
🛴 github repo 및 배포
레포지토리 : Github
※ 배포는 엘리스 측에서 제공해준 ubuntu 서버를 통하였으나, 기간이 지나 회수 되었고
이미지 업로드 시 AWS S3를 이용하였는데 사용기간 만료로 현재 배포는 되어있지 않습니다.
