엘리스 1차 프로젝트 KPT회고
엘리스 SW Engineer 트랙 - 1차 프로젝트
2022.12.12 ~ 2022.12.30 (3주)
엘리스에서 그동안 학습한 HTML, CSS, JavaScript, Node.js를 바탕으로 웹쇼핑몰을 만들어보는 1차 프로젝트이다.
엘리스 트랙 이전에 웹개발 강의를 듣고 웹게시판을 만들어본 적이 있는데, 그때 데이터를 목적에 맞게 관리하고 서버와 연결하는 부분에서 가장 재미를 느꼈었고 집중할 수 있었기 때문에 백엔드 개발을 목표로 하고 있었다. 하지만 이번 node.js에 대한 지식은 엘리스의 2주 과정이 전부였고 팀프로젝트에 대한 준비를 위해 강의를 추가로 찾아서 학습한 것밖에 없었기에 과연 내가 백엔드 역할을 해낼 수 있을까 하는 걱정을 하는 중이였다. 고민이 많았지만 마지막에는 일단 node과정을 들었으니 학습한대로 구현하면 할 수 있겠지! 라는 마음으로 백엔드로 참여했다.
KPT회고
▶ KEEP(다음 번에도 이어갈 부분)
- git 사용법에 대해 함께 익히고 통일된 방법으로 프로젝트를 진행함
- prettier 설정을 통해 코드 스타일의 통일성을 줌
- api 및 스키마 변경 시 문서화 해두어 프론트와 공유함
▶ Problem(진행하면서 문제가 되었던 부분)
- 팀원 모두 git사용에 익숙치 않아 사용법을 익히는데 시간을 오래 할애함
- 웹서비스 기획을 깊이있게 하지 못하고 각자 바로 구현을 시작함
- 팀 Notion을 적극적으로 활용하지 못함
- API 설계시 프론트와의 논의가 필요하다는 점을 알지 못함
- API 구축에 시간이 오래 걸려 이를 빠르게 문서화하지 못함
- vim 사용에 익숙치 않아서 배포시 오류 해결이 힘들었음
- 팀장을 맡았으나 프로젝트를 이끌어갈만큼의 역량이 부족했음
▶ Try(다음 진행에서 새롭게 시도해 볼 부분)
- 화면구성과 필요 기능에 대한 기획을 좀더 탄탄히 할것
- Notion사용법을 익히고 스크럼 기록을 조금 더 효율적으로 할수 있는 방법을 알아볼것
- RESTful API에 대해 제대로 학습하고 api명세서를 빠르고 가독성있게 만들어 공유할것
프로젝트 총평
- 팀프로젝트는 처음이라..
함께 프로젝트를 진행했던 멤버들이 모두 팀프로젝트에 대한 경험이 없어서 프로젝트를 어떻게 진행해야 하는지에 대한 방향이 없었다. 더불어 git 사용도 다들 개인적으로만 해본 상태라 브랜치 관리, 충돌 해결 등의 방법은 경험해보지 않은 상태였다. 나 또한 github에 commit과 push만 해본 상태였는데 프로젝트를 하면 무조건 conflict를 접하게되면서 파일이 다 날라갈수있다는 말을 들어서 겁먹고 있었다. 그리하여 프로젝트 초반에는 회의실에 모여서 브랜치를 만들고 병합해보면서 git을 잘 다룰 수 있게 서로 알려주고 익히는데에 시간을 오래 투자했다. 안그래도 짧았던 프로젝트 기간에 시간을 더 부족하게 했던 요인이지만 이렇게 git 사용법은 이제 앞으로도 쉽게 활용할 수 있게 되어서 결론적으로 매우 유익했다.(하지만 마지막까지 git merge는 쉽지않았다..!)
- 팀장 역할에 대한 아쉬움
팀원들과의 첫 회의 당시 모두가 프로젝트 경험이 없었고 팀장을 기피하는 분위기여서 내가 팀장을 하겠다고 이야기했다. 사람들의 의견을 조율하고 취합하면서 진행사항을 체크하는 일에는 자신있었기에 이번 팀협업도 그렇게 해나가면 될것이라고 생각했다. 하지만 지금 보면 팀장은 프로젝트 진행을 좀더 주도적으로 이끌어가거나 개발에 대한 지식이 더 갖추어져있었어야 했던 것 같다. 팀장을 맡고난 뒤 프로젝트 진행 시 유의해야 할 브랜치, 파일 관리법을 알아보고 다른 이전 기수의 프로젝트들을 찾아보면서 참고할 자료들을 공유하는 등의 노력은 했지만 결과적으로는 모든것이 처음이라 확실한 방향을 제시하지 못했다. 무엇보다 관련된 지식이 부족하다보니 개발에 대한 논의가 어려웠고 오히려 팀원들의 도움을 받은 것이 많았다.
- 학습한 Node.js와 실전의 차이
학습하면서 익힌 node.js와 실전의 차이가 너무나 크게 느껴졌다. 처음 개발하는 학생들도 참고하면서 개발할 수 있도록 스켈레톤 코드들이 주어졌는데 혼자서 만들어본 프로젝트와 폴더구조가 달라지자 모든것이 새롭게 느껴졌다. MVC패턴으로 개발을 하도록 짜여진 구조도 처음 접하게 되면서 이 스켈레톤 코드를 분석하고 이해하는데만 꽤 오랜 시간을 보내야 했다.
결국 프로젝트가 끝나갈때쯤에서야 상품 CRUD기능을 하는 API를 어떻게 만드는지, RESTful한 api가 무엇인지, 스키마를 어떻게 설계해야 하는지 등을 깨닫게 되었다.
- API가 있었는데 ... 없어요..
매일 오류와 싸우며 api를 다 만든 순간 프론트에서 api요청 없이 페이지가 돌아가도록 만들었다는 것을 알게 되었다. 나는 내가 맡은 상품과 카테고리 기능에 대한 CRUD기능이 모두 필요할 것이라 생각하고 조회기준이 되는 id값, 이름 등등 모든 항목에 대해 설계하고 있었는데 프론트에서는 전체 리스트에 대해 불러오는 api만을 사용했다. 전체 데이터들을 로컬스토리지에 저장한뒤 이후 페이지에서 사용하는 방법을 쓰고 있었는데 이런 방법이 가능한 줄도 모르고 있었다. api요청이 많으면 성능, 비용면에서 효율적이지 않을 수 있다는 부분도 새롭게 알게 되었다. 하지만 api요청 없이 페이지를 개발한 프론트의 노고도 무시할 수 없기 때문에 서로간의 적당한 api 요청은 필요했다. 그렇기에 구현할 기능들에 대한 사전 기획과 소통을 통해 필요한 api명세서를 빠르게 전달하는것이 중요하다는것도 깨달았다.
- 배포
NginX를 통해 만든 프로젝트를 배포해볼 수 있었다. VM에 접속해서 pm2와 NginX 라이브러리를 설치하고 배포환경을 세팅하는 과정들이 간단해보였는데 막상 직접 해보니 에러가 계속해서 생겼다. vim편집기 명령어를 사용하려니 환경이 낯설어서 잘 되고 있는건지 확인하기 어려웠던 부분도 있었다. .env 파일을 수정하다가 줄바꿈 해결을 하지 못해서 헤메기도 했는데 사용하고 있는게 vim편집기라는 것도 모르고 있을정도로 유닉스 환경에 무지했다. 배포 오류가 났을때 코치님과 동료들과 함께 화면을 보고 pm2 재실행을 수없이 하면서 원인을 찾아내느라 진땀을 빼기도 했는데 이런 과정에서 실제 배포시에 서버를 끄지 않고 restart로 무중단 배포를 해야 한다는 부분도 알게 되었다.
- 멀고도 험한 백엔드
무엇보다 프로젝트동안 가장 많이 든 생각은 백엔드개발자가 고려해야할 부분이 생각보다도 깊고 넓다는 것이였다. CS지식도 기본적으로 알고있어야 하고 데이터 관계테이블을 효율적으로 설계할 줄 알아야 하며 데이터 양이 많을때도 과부하없이 처리되도록 다룰줄 알고 고려해야하는데 나는 이중에서 아무것도 알지 못한다는 사실에 부담이 커졌다. 물론 백엔드 학습을 2주밖에 하지 않은 상태에서 겁먹는게 정말 말도 안되지만 앞으로 배울 분야들이 더더욱 많다는 것을 뼈저리게 느꼈다. 그럼에도 이번 프로젝트를 하면서 마지막에나마 백엔드와 프론트가 어떤 역할로 협업을 하게 되는지와 여러 사람이 협업하여 개발을 할때 맞춰야 할 세팅들을 알게 되어 다행이라고 생각한다. 뿐만아니라 Node.js와 Express.js를 통해 서버를 만들어보는 경험을 직접 할 수 있었다. CRUD api를 만들어보고, MongoDB와 Mongoose를 활용해 스키마 정의, 모델연결, 쿼리 작성까지 직접 해보면서 구성한대로 데이터가 보내지고 이걸 프론트에서 화면에 그려준걸 봤을땐 정말 행복했다.
추가 구현 과제 및 리팩토링 요소
- 상품등록시 존재하는 카테고리가 선택옵션에 보여지도록 api 연결
- 카테고리 등록시 네비바 카테고리 드롭박스에도 반영되도록 api연결
- 카테고리별 상품페이지 이동시 api요청하여 데이터 받아오도록 수정
- 일부 페이지에서 실행되지 않는 드롭박스 해결
- 로그아웃 기능 추가
- 유저 권한 확인하여 네비바 항목 변화주기
+ 홈레이아웃 및 상품리스트페이지 그리드 수정, 반응형 디자인 추가