[Wantudy] Nodejs와 React로 구현한 웹 프로젝트 회고

천재 디자이너가 만든 아이템 포스터

프로젝트 내용

https://youtu.be/NF_OMyGxZzA
시연 영상

Wantudy
스터디 올인원 웹페이지

 

팀원
기획 3 / 개발4(프론트2,백2) / 디자인 1

 

전체 프로젝트 기간
9/22 ~ 11/26

개발 기간
10/11 ~ 11/26
(초기환경 구축을 제외한 개발 기간은 한 달 정도 인 것 같다.)

 

기술 스택
프론트 - React
백 - Node.js, Express, MongoDB

 

프로젝트 환경

AWS EC2

 

협업 툴
Figma, Notion, Swagger

 

구현 API

• 스터디 모집 API
  • 스터디 모집글을 작성하고 등록, 수정 및 삭제 기능 구현
  • 스터디 모집 글의 상세페이지 조회 기능 구현
  • 게시된 스터디 목록 조회 기능 구현 ( 스크랩 순, 마감 기한 임박 순 등 조회 조건 필터링 가능)
  • 스터디 검색하기 기능 구현
  • 각 스터디 스크랩 및 스크랩 취소 기능 구현

• 스터디 일정조율 API
  
  • 각 스터디 원들이 각자 가능한 일정을 시간표에 입력하는 기능 구현
  • 스터디 원들의 공통 일정 추출 기능 구현
  • 공통 일정 중 하나의 일정을 선택해서 확정하는 기능 구현

(팀원이 구현한 API 목록)

• 카카오 소셜 로그인
• 스터디 지원서 작성 및 등록
• 마이페이지 조회 (참여 스터디, 개설 스터디, 찜한 스터디, 신청 스터디 등)
• 스터디 과제 관리 (체크리스트로 과제 관리)
• 열정온도 평가

백에서 추가 구현한 API ( 실제 서비스에는 사용 X)

• 댓글/대댓글 API
  • 댓글 및 대댓글 등록 및 삭제 기능구현
• 스터디 신고 API
  • 스터디 신고 기능 구현 (신고 횟수가 DB에서 누적됨)

(팀원이 구현한 추가 API)

• 지원서 다른 이름으로 저장

배운 점

프론트와 협업

• • Swagger로 API 명세서 전달
    프론트와 백으로 역할을 나눠서 팀 프로젝트를 진행하는 건 처음이었다. API 명세서를 어떻게 전달해야 할까에 대해서 이야기를 나눴다. 역시 Swagger 를 쓰기로 결정.. Swagger는 처음 써봐서 어떻게 해야 하나 막막했다^^ ( 그냥 팀 프로젝트가 처음이라 안 막막한 게 없었다.) 처음엔 swagger 서버를 따로 할당해야 되나 싶었지만 node에 붙여서 하기로 결정했다. node를 forever로 실행시켜주고 내가 테스트해야 될 때만 forever 잠깐 멈추고 node 실행해보고 하는 식으로.. 같은 포트를 써서 이렇게 해야 충돌 안 났다. 스웨거 문서 하나로 모든 수정사항을 해결 할 수 있어서 좋았다. 스웨거 자체에서 테스트도 해볼 수 있고!
  • 백 테스트는 어떻게? POSTMAN 사용
    내가 짠 코드가 DB에 제대로 박히는 지 테스트 하고 싶은데.. 어떻게 해야 하지? 라는 생각이 들었다. 말했듯이 팀 프로젝트는 처음이고.. 이렇게 역할 분리를 제대로 한 경우에 어떻게 테스트를 해야하는지조차 몰랐다. 하지만 모르면 방법을 찾아야지... POSTMAN을 사용해서 테스트를 진행했다. 사실 개발을 할 수록 포스트맨으로 테스트하는 순간이 제일 떨리면서도 즐거웠다. (ㅋㅋㅋ) 일단 테스트 한 다는 게 뭔가 대충 완성은 됐다는 거니까 재밌었음
  • 프론트에서 테스트는 어떻게? 원격서버에 정답이 있다.
    어느 날.. 프론트 친구한테 GET 요청이 계속 오류 난다고 연락이 왔다. 난 멘붕이었다.. 왜냐면 포스트맨에서는 너무 멀쩡히 잘 됐기 때문에.. 알고보니 나는 내 로컬에서 백 코드가 있으니까 잘 되는 거고 프론트 로컬에는 내 코드가 없으니까 실행이 안 됐던 거 .. 우리는 AWS 클라우드를 이용해서 원격 서버를 구축했다. 그니까 당연히 코드도 원격서버에 올려놓고!! 그럼 프론트에서 원격서버로 요청을 보내면 해결되지 않을까? 해서 말해봤더니 해결됐다.
  • logger를 통한 디버깅
    프론트에서 연락이 왔을 때 바로 대응할 수 있으면 좋겠지만.. 현실은 그렇지 않다. 그럼 프론트에서 찍힌 로그를 뒤늦게 어떻게 확인할까?? logger를 설치해서 서버에 로그를 남기게 했다. 그렇게 뒤늦게도 디버깅 해서 대응할 수 있었다.

디자인/기획과의 협업

• 이번 프로젝트는 디자인/기획도 역할이 다 나눠져 있는 프로젝트였다. 역시 각 역할 간의 간극이 확실히 존재했고.. 팀원 간의 소통이 정말 중요함을 느꼈던 프로젝트였다. 비교적 짧은 기간 내에 개발을 해야 해서, 기획팀이 원하는 기능을 모두 구현할 수는 없었다. 하지만 만약에 기능 구현을 완전히 못하겠다면 대안을 찾아가기..!!!! 이게 중요한 것 같다.

수 많은 Git 오류

브랜치를 나눠서 Git을 사용해보는 게 처음이었다. (Merge가 처음이라는 말..ㅎㅎ) 3학기 때 웹 수업 특강으로 Git 을 들었던 적이 있는데.. 그 때 브랜치 무슨 소리 하는 지 몰라서 다 흐린눈 했었는데 역시 백문불여일견이다..^^ 한 번 경험하니까 이해 완료. Git에서 볼 수 있는 오류는 정말 다 본 것 같다.. 가장 아찔했던 순간은 Main브랜치랑 연결이 끊겼을 때..^^ 오류 부분은 게시글 하나에 할당해서 정리해야지.. 너무 많아서 여기 다 못쓰겠다. Merge 충돌도 처음엔 너무 무서웠는데 몇 번 해보니까 괜찮아졌다. Merge 충돌은 양반이다.

Nodejs 로직 이해

이번 프로젝트로 Nodejs를 제대로 처음 써보는 거였다. 이렇게 많은 기능을 어떤 파일에 코드를 짜야하는 걸까.. 도 몰랐다 ^^ Node를 배우긴 했지만.. 로직을 나누는 게 아니라 server.js 파일 하나에 모든 Api를 때려박는 수업이었기 때문이다... 깃허브에서 스타 많이 받은 Node 프로젝트 찾아보면서 로직을 이해하려고 했다. model > 데이터베이스 작성 controller > 함수 작성 route > api 연결로 로직을 나눠서 코드를 작성했다.

그냥 팀 프로젝트가 처음이라서 이번 프로젝트로 제대로 배워간 것 같다. 쓰려고 하면 더 많은데 이 정도까지로 줄이고 배운 점들에 대해서 상세한 글들을 몇 개 더 써야겠다 ㅎㅎ

찐 회고

진짜 처음엔 같이 백엔드를 맡은 팀원 언니랑 "이게 되나..? 이게 맞나..?" 의 연속.. ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ 처음엔 진짜 막막했다. 일단 서버 구축이 돼야 뭐라도 할텐데~!! 서버 구축해놓고 DB 설치하니까 Robo3T가 안 되고.. 암튼 삽질의 연속이었다. 앞서서 개발 기간이 10/11부터지만 서버 구축을 뺀 기간은 한 달 남짓일 것 같다고 썼는데.. 진짜 초기환경 구축이 제일 힘들었고 시간을 많이 쏟았다..ㅎㅎ 오류가 왜이렇게 많이 나는지..^^ 뭐든 다 처음이여서 (AWS.. Swagger.. 등등) 오류도 많이 났고 해결하고 하느라 오래 걸렸다. 그래도 오래 걸린만큼 ㅋㅋㅋ 진짜 확실히 이해해서 기억미화 완료됨.

우리팀에 대한 피드백인데 일부분 가져왔지만 개발에 대한 이야기가 많아서 뿌듯했다.. 특히 <개발팀이 보기에 백엔드분들의 노력이 돋보였던 작품> 이거 쓴 사람 진짜 누구세요. 같이 백엔드 한 언니랑 동시에 이 말 봤냐고!!! ㅋㅋㅋㅋㅋㅋㅋㅋㅋ 카톡 보내고 아주 기뻐했다. 백엔드가 화면에 안 나타나는 부분이라 그런지 알아주니까 너무 신남.. (일정조율 알고리즘 때문에 머리 부여잡던 3일 간의 기억이 스쳐지나가면서..) 암튼 화려한 화면 뒷편의 백엔드를 알아봐주다니. 정말 감사합니다~!!!!

외부심사단으로 온 한양대학교 교수님께서도 피드백에 App Story Line이 우수하다고 적어주셔서 아주 신났다 ^^

여튼 나는 이번 프로젝트로 진짜 많은 걸 배워갔다. 같이 한 팀원들도 너무너무 좋고 다들 열심히 하고 진짜 해피 팀플이었다.

 

 

--12월에 작성한 글 백업