[포스코x코딩온] 웹개발자 풀스택 과정 4차 팀프로젝트 - 회고록(1)

 

배포 링크 : https://doongg.site/

깃 허브 : https://github.com/orgs/DoongG/repositories

 

---

 

🐣 DoongG(둥지)

드디어 부트캠프의 마지막 프로젝트가 시작되었다. 기간이 긴 만큼 기획과 개발까지 차근차근 시작했다.

팀원은 자유였으며 나는 원래 친한 5명의 크루들과 함께 프로젝트를 시작했다. 총 5명이었으며 프론트 3명 백엔드 2명으로 이루었다.  

 

주제를 정해야 했다. 팀원 모두의 흥미를 이끌 수 있는 주제를 생각해봤다. 우리 팀원들 과반 수 이상이 혼자 산 경험이 있었다. 그래서 자취생들을 위한 플랫폼을 만들기로 했다. 플랫폼에 어떤 것을 넣을 까 생각을 해봤는데 자취생들은 일반적으로 돈이 부족하기 때문에 '핫딜 상품'만 모아둔 쇼핑 페이지, 자취생들끼리 경험과 노하우를 공유 할 수 있는 커뮤니티 페이지, 자취방에 대한 리뷰를 달 수 있는 '자취방 리뷰 페이지'를 기능에 넣기로 했다.

 

팀명은 둥지에서 막 벗어난 병아리와 자취생이 비슷하다고 생각해서 둥지라고 정했다.

 

🕰️ 기간

2023.11.08 ~ 2023.12.08 (약 4주)

 

👨‍👩‍👧‍👦 인원 구성

프론트 : 3명 

백엔드 : 2명

 

⚒️ 기술 스택

사용한 기술 스택

우리팀이 사용한 기술 스택이다. 나는 프론트를 맡았기 때문에 프론트 부분에서 Quil만 빼고 다 사용을 했다. 

이전 프로젝트와 차이점은 개발언어를 타입스크립트로 바꾼 점과 상태관리를 zustand를 사용했다는 점이다. 각각을 사용하면서 느낌점은 아래의 블로그 링크로 들어가면 자세하게 써놨다. 

 

타입스크립트를 사용하면서 느낀점 : https://jin99.tistory.com/101

[포스코x코딩온] 웹개발자 풀스택 과정 4차 팀프로젝트 - 타입스크립트

 

zustand를 사용하면서 느낀점 : https://jin99.tistory.com/102

[포스코x코딩온] 웹개발자 풀스택 과정 4차 팀프로젝트 - Zustand

 

✏️ 내가 맡은 페이지

1. 핫딜 페이지(제품 상세 모달, 구매 모달)

 

핫딜 페이지는 평소보다 싸게 나온 상품들을 자취생들에게 보여주는 페이지다. 

제품 상세 페이지 구매 페이지 모두 모달로 만들었기 때문에 이 페이지 안에서 모두 해결 할 수 있다. 페이지의 로딩되는 시간을 줄이고자 모두 모달로 만들었다. 확실히 로딩이 필요없어 더 빠르게 상품 상세를 볼 수 있지만 이로 인해 많은 단점도 발생했다. 이 페이지를 만들며 모달에 대한 단점과 장점을 확실히 알았고 다음부터는 어떻게 써야 할 지 깨닫게 되었다. 

이에 대한 자세한 설명은 아래 블로그 링크에 들어가면 자세하게 설명을 해놨다. 

 

링크

[포스코x코딩온] 웹개발자 풀스택 과정 4차 팀프로젝트 - 핫딜 페이지(1)

 

[포스코x코딩온] 웹개발자 풀스택 과정 4차 팀프로젝트 - 핫딜 페이지(2)

2. 자취방 리뷰 페이지

 

자취방 리뷰 페이지는 자취생들이 직접 겪은 자취방에 대한 리뷰를 남기는 페이지다. 

카카오 맵 api를 활요했고 현재 위치 이동, 주소 검색 후 이동, 리뷰 남기기, 현재 지도 안의 리뷰만 보이게 하기 등등 카카오에서 제공하는 여러 기능들을 활용했다. 이번 프로젝트를 하면서 가장 흥미롭게 진행했던 페이지다. 기존에 없는 기능이고 내가 제안했던 기능이었기 때문이다. 자취방 리뷰 페이지는 원래 예정에는 없는 페이지였기 때문에 기간이 얼마 안남았을 때 제작을 했다. 그래서 아쉬운 점이 많았다. 이 또한 아래 블로그 링크에 들어가면 자세하게 설명을 하겠다.

 

링크: https://jin99.tistory.com/105

[포스코x코딩온] 웹개발자 풀스택 과정 4차 팀프로젝트 - 자취방 리뷰 페이지(1)

 

🥲 아쉬운점...

1. 기획의 중요성

이번 프로젝트는 가장 아쉬움이 많이 남는 프로젝트였다. "마지막 프로젝트","4주라는 기간" 이라는 부담감 때문에 기획 단계에서 욕심이 생겨 우리의 능력보다 많은 기능을 하려고 했다. 만들다 보니 쇼핑몰이면 쇼핑몰, 게시판이면 게시판 뭔가 자취생이라는 타이틀 말고도 다른 개념과도 어울리는 기능들이었다. 한마디로 '특색이 없었다' . 그래서 급하게 쇼핑몰을 만들다 자취방 리뷰 페이지를 만들기 시작했다. 하나의 페이지를 완벽하게 만드는 것이 내가 원하는 개발 방식이었으나 시간상 꼭 필요한 기능들만 넣었다. 2개의 페이지 모두 이도저도 아닌 페이지를 만든것 같아서 아쉬웠다. 기획이 잘못되니 개발까지 영향을 끼치는 모습을 보고 앞으로의 프로젝트는 기획단계 부터 철저하게 해야 겠다고 생각했다. 

 

2. 타입스크립트의 애매한 사용

프로젝트를 진행하기 전 2주간 타입스크립트 강의를 보고 공부를 하고 들어갔지만, 실제로 타입을 정의하고 제대로 사용을 했는 지는 애매했다. 상위 컴포넌트에서 props로 값을 전달할 때 자식 컴포넌트에서 interface를 사용해 타입을 정의한다는 점과, 이벤트 핸들러(마우스 이벤트 정의 등등), useState 또는 useRef를 사용할 때 미리 타입 선언을 해줘야 한다는 점 등등 기초적인 사용 방법에 대해서만 타입스크립트를 쓴 것 같아 아쉬웠다.

 

 

 

😎 마치며

그래도 내가 써보고 싶은 기술(typescript)을 쓸 수 있는 기회가 되어서 좋았다. 디자인이 살짝 아쉬웠지만 나름 최선을 다했다고 생각한다. 다음엔 기획부터 디자인까지 참고할 수 있는 레퍼런스를 충분히 확인한 후 개발에 들어가야 겠다고 생각했다.