[항해99 - 7주차] 주특기 미니프로젝트 - React

⚓ 항해99 - 7주차 회고록 (주특기 미니프로젝트)

하얗게 불태웠어....

 

진~~~~짜로 길었던 한 주였다!!!

이번 주는 프론트엔드와 백엔드가 협업해서 프로젝트 하나를 완성하는 주특기 미니프로젝트 주차였다.

우리 조는 [프론트 2명: React, 백엔드 3명: Node.js]로 구성 되었고,

API 명세서는 주로 백엔드분들이 작성하고

프론트를 담당하는 나와 다른 한 분(S님)이 같이 와이어 프레임을 작성했다.

몇 시간만에 괜찮은 결과물이 나와서 흡족😀

프로젝트 첫 날 다같이 API 명세서, 와이어 프레임, git 생성, 각종 문서 작성 등을 호다닥 완성하고

기능은 회원가입, 로그인(jwt토큰), 전체 목록, 상세 페이지, 글 작성, 힌트 및 정답 입력 매칭 댓글등

꼭 필요한 기능들부터 1차 기능, 2차 기능, 3차 기능 순으로 단계별로 개발하기로 했다.

기간이 일주일이다보니 미완성보다는 1차 기능이라도 완성하자라는 목표가 있었다.

다음 날부터 바로 개발을 시작했다.

 

흐름이 잘 담긴 와이어프레임!

 

프론트인 우리는 와이어 프레임대로 담당을 정했고, git 브랜치를 분리해서 작업을 진행했으며

실제 서버 연결 전에 각자 json 서버를 설치하고 로컬환경에서 개발을 진행했다.

UI 개발 > 컴포넌트 분리 및 제작 > 기능 개발(더미 데이터) > 서버 연결 순으로 작업했다.

서버와 연결하고 기능들을 하나하나 개발하다보니

에러처리, CORS 문제, API 수정 등 디테일하게 작업해야 할 일들이 많았다.

프로젝트 초반에는 프론트, 백엔드 거의 따로 작업을 하다가

마감 전날에는 프론트와 백엔드 파트가 함께 조율을 해야하는 부분들이 있기 때문에

새벽 5시까지 게더에서 같이 얘기하면서 실시간 개발을 했다. (다들 대단쓰👍)

'백엔드분들의 빠른 수정 반영은 엄청났다!'

그리고 마감 당일! 우리 프로젝트의 핵심인 '캔버스' 기능이 [두둥-완성] 되었다! S님 최고!!! 🎉

프론트 프로젝트는 vercel에 배포해서 서버와 연결했으며 우리끼리의 테스트가 성공적으로 마무리 되었다.

그리고 바로 (진짜 바로!) 프로젝트 발표를 했고, 매니저님께서 🥕당근을 많이 주셨다.

그리고 미니프로젝트 발표는 큰 기대를 안 하시는 편인데

우리 프로젝트는 포트폴리오로 써도 될 것 같다는 엄청난 칭찬을 끝으로 프로젝트가 최최최종 마무리 되었다.

 

귀엽고 멋있는 우리 프로젝트

 

이번 프로젝트를 진행하면서

프론트엔드와 백엔드의 조율을 통해 몇번의 API 명세서 수정이 필요했으며,

서버 통신을 할 때 에러 처리 부분에서 신경 써야하는 부분들이 생각보다 꽤 있었다.

(유효성 검사가 제대로 되어 있지 않으면 서버에서도 예상치 못한 에러가 나오는 상황 등)

 

프로젝트 기간이 짧기도 하고, 모두 협업의 경험이 많지 않다보니

API 명세서가 한 방에 뙇 완벽하게 나올 수는 없겠지만

최대한 수정을 안 할 수 있도록 처음부터 더 신경을 써야겠다는 것을 많이 느꼈다.

(이게 있어야 하는데?! 하는 상황이 생기지 않도록!)

 

그리고 에러 핸들링 부분은 더 공부가 필요하다는 것을 느꼈기 때문에

곧 ' axios 인스턴스 & 인터셉터 / 에러 핸들링 '을 주제로 포스팅 하겠다.

 

얼른 공부해서 곧 포스팅 하겠습니다!

 

 

주특기 미니프로젝트 2조 최고!