[React] 플랫폼 비지니스 1차 팀플 후기

 

USG에서 진행하는 플랫폼 비지니스 오픈메타 캠퍼스에서 하반기 과정으로 팀프로젝트를 진행한다.

총 3차시로 구성되어 있고, 오늘 1차 프로젝트를 마무리지었다.

 

1차 프로젝트는 약 2주 동안 진행되었다. 짧은 기간 내에 기획, 설계, 개발, 배포를 끝내야 했다. 사실 우리팀은 최종 배포까지는 시간 부족으로 실패...

 

주제

지역 정보 플랫폼

nav바에서 지역 리스트를 보여주고 지역을 클릭하면 해당 지역의 업소들을 명소, 카페, 음식점, 놀거리로 구분하여 보여준다. 업소를 클릭하면 영업시간, 주소 등 자세한 정보를 볼 수 있다.

회원가입은 업주와 고객으로 role을 나누어 진행하였으며, 로그인된 role에 따라 기능이 조금 달라지게 구성했다.

 

역할

나는 프론트를 맡아 리액트로 개발을 진행하였다. 졸작을 하면서 리액트를 조금 접했기 때문에 큰 무리는 없었다(Chat gpt의 도움도ㅎㅎㅎ). 원래는 팀에 백엔드 인원이 부족해서 백을 맡게 될 뻔 했으나, 인원 조정으로 다시 프론트로 복귀! 백엔드를 했으면 아마 이렇게 수월하게 개발하진 못 했겠지... 백엔드 쪽을 한 번 경험해보고 싶은 욕심이 있었기에 조금 아쉽긴 했다. 또, 이번 프로젝트에서는 msa를 사용하여 기존에 백엔드를 하시던 분들도 생소하셨던 거 같다. msa에 대해 플랫폼 비지니스에서 올려주신 강의를 보면서 공부해보는 것도 좋을 거 같단 생각이 들었다. 

 

개발

내가 맡은 페이지는 Main과 Header이다.

 

주요 기능

• 행정구역 nav바 구현
  • 도 컴포넌트 클릭 시 해당 도의 하단에 시/군 컴포넌트 출력
  • 광역시의 경우에는 클릭시 구 컴포넌트 출력
  • 최하위 컴포넌트 클릭 시 클릭된 지역의 업소만 보이게 filter
• 업소 리스트 출력
  • 업소 타입별로 분류하여 출력(타입별로 출력되는 item을 4개로 제한)
  • 더보기 버튼 클릭 시 해당 업소 타입만 보이기
  • 업소 item 클릭 시 detail 페이지에 업소 id 전달하며 이동
• Header 구현
  • 로그인 상태에 따라 구분하여 컴포넌트 출력
    • 비로그인 시 -> 로그인 | 회원가입
    • 로그인 시 -> 마이페이지 | 로그아웃

 

 

 

 

 

 

프젝 진행 중 겪은 어려움

2주라는 아주 짧은 기간 동안 진행되었고, 팀원들 대부분이 협업 경험이 적어 github, figma 등 협업툴을 사용할 때 어려움을 보이거나 흐름을 잘 이해하지 못했다. 그래서 github 사용법을 정리해 팀원들과 공유하기도 하고 팀 프로젝트를 잘 이끌어가려고 애썼다. 다들 열심히 임해주셨으나, 아쉬운 부분이 많은 프로젝트가 되었다. 

기간이 짧아 완성도 높은 프로젝트를 만들지 못 했다는 것이 가장 큰 아쉬움이 남는 거 같다.

 

 

개발 중 겪은 어려움

github 사용에서 여러 어려움을 겪었다.

조장님의 github를 fork한 후, main에서 백과 프론트가 모두 포함된 base file을 내려받아 코드를 작성하였는데, 백을 삭제하고 front 부분만 front branch에 올려달라고 하셨다. 그런데 나는 원본 저장소에 front branch를 생성하기 전에 fork 받았고, 내 main branch와 원본 저장소의 front branch 간의 commit history 오류 때문에 pr이 안 됐다. 그냥 내 폴더를 백업해놓고 새로 fork 받아서 front brach에 push하여 pr 성공!

그런데 또 다른 문제 발생... 백 코드를 삭제하면서 package.json, .gitignore 등 다른 파일들도 같이 삭제해버려서 에러 폭탄...

.gitignore이 삭제된 덕분에 node_modules까지 깃에 올라가면서 대참사가 났다. 그래서 다시 .gitignore 생성 후, git rm을 통해 원격 저장소의 node_modules을 다 삭제하며 겨우 상황 해결...(2가지 오류 때문에 몇 시간을 github만 봤다ㅠㅠㅜ,, 지금 보면 별 거 아닌 오류들...)

 

 

 

 

 

깃허브

https://github.com/wpslxm20/USG-Team-Project-1.git

GitHub - wpslxm20/USG-Team-Project-1: USG 팀프로젝트 1차 경진대회

 

노션

https://fossil-spoonbill-131.notion.site/e4f3ef4d17d946359c7a7c25f38a826e?v=77a0503246f54db9abdd16bc2fbccfde&pvs=4

usg 플랫폼 비지니스 | Notion