반려동물 쇼핑몰 모두댕냥[mainProject] 회고

🙌🏻 드디어 짧지만 길었다면 길었던 메인프로젝트가 끝났다!! 🙌🏻
프론트 개발자로서의 다가온 한 걸음!!

개요

배포링크 : http://modudogcat.shop

모두댕냥

깃허브 : https://github.com/Min-hh-k/modudangnyang

GitHub - Min-hh-k/modudangnyang: 모두댕냥_메인프로젝트

 

 

팀 구성 👀

프로젝트에 앞서 이것 또한 중요한!!
먼저 팀을 짜고 싶은 인원들은  팀원 구성 후 제출하고,

나머지는 랜덤으로 프론트,백엔드 매칭해서 팀을 구성해주는 그런 시스템이었다.

 

나는 페어활동과 스터디를 하면서 친분이 있거나 비슷한 동기분들과 함께 하고 싶었다.

랜덤으로 돌려서 처음 접하고 일면식 없는 다른 동기분들과 진행하며 아주 도전적인 것도 원하긴 했지만!!

현재 메인 프로젝트가 또 그렇게 긴 시간이 아니었으며,

페어활동 하며 좀 약간 대화를 하지않고, 꿍? 하게 소통을 잘 해주지 않은 사람도 만나왔기에

순조로운 진행을 위하여 우선 이전 스터디원 분 한명과 페어활동 함께 했던 동기분과 먼저 프론트 3명 팀을 구성했다.

 

그리고 팀의 카테고리는 여러가지가 있었지만,

유통/물류 쪽으로 하고 싶은 백엔드 분들을 ZEP에서 섭외해서

FE : 3명

BE : 3명 -> ( 2명 )

총 6명으로 팀을 구성했다!

 

하지만..ㅜ

2주 쯤? 지났을 까,

기획까지 마치고, 역할분담하여 개발에 매진해야할 시기에 

백엔드분 중에서 한명이 힘들어서 인지, 무엇인지~~

아무말도 없이 탈주를 해버렸다...

이것 때문에 마지막 배포날 까지 너무 힘들었었다.

구현은 했지만 백엔드쪽에서 db랑 기능구현이 되지가 않아서

테스트를 할 수도 없던

 

 

기획 (폭포수 방법)

 

우선 다들 반려동물도 키우며 좋아해서, 이쪽으로 관련된 쇼핑몰을 해보자 에서 중계 쇼핑몰로 변경했다.

판매자가 등록 하고, 구매자가 구매하는 방식으로!

 

[ 요구사항 정의 > 디자인(피그마) > 개발 > 테스트 > 배포 ] 워터폴 방식으로 진행 했다.

 

그리고 먼저 요구사항 정의서는

프로젝트에 필수 적인 것은 Bare Minimum, 추가적 기능 구현 하고 싶은 것들은 Advanced 로 나누었다.

 

 

디자인은 피그마 툴을 활용하여 시간 상 프로토타입이 아닌 간편하게 목업으로 진행 했다.

개발에 더 집중하자 라고!!

 

마이페이지, 로그인&회원가입, 메인(+상세페이지), 장바구니, 상품주문, 후기 등등 이렇게 나누었다.

개발하기 전에 파트를 나눠야 하는데 다들 사다리타기로 파트를 정하자~ 라는 결론이 나와서 돌린 결과ㅎㅎ

 

로그인&회원가입, 장바구니, 주문 쪽을 맡기로 하였다!

 

 

개발 & 느낀점

 

로그인&회원가입, 장바구니, 주문 쪽을 맡은 나!

우선 일반 회원가입, 판매자 회원가입, 로그인까지 유효성 검사로 나타 내었다.

 

자체 회원가입 로그인은 Bare Minimum 이었고, 구글로그인을 하고 싶었는데

백엔드 일손 부족+구현을 못할 거 같다고 하셔서 넘어갔었다.

나머지 구현 부분도 너무 많이 남았기에 욕심이라 생각하고, 차후에 개인프로젝트에서 도전 해볼 예정이다!

로그인 유효성 검사 >>

로그인 부분은 react-cookie를 활용하여, 로그인 요청시 accessToken 을 받아 구현 하였다.

refreshToken은 따로 하지 않았고, 백엔드 분이 2시간이 지나면 자동으로 로그아웃 되도록 설정하겠다~ 하셔서

할 수 있는 방향으로 맞추었다.

 

 

 

그리고 Redux 와 useState 를 활용하여,

isLogin 값을 true, false 로 나누어서 헤더를 적용 하였다.

로그인 전 헤더

로그인 후 헤더

 

자세한 내용은 다음글에 포스트 해두었다.

Redux 데이터 초기화로 인한 해결하기 [redux-persist @reduxjs/toolkit]

 

 

다음으로 장바구니 페이지는 다른 팀원이 목업만 대략 만들어 놓으셔서, 만든 것에 수정 하여 개발을 진행 했다.

장바구니에 대한 자세한 구현은 다음글에 포스트 해두었다.

[axios] React 장바구니 기능구현 / CRUD

백엔드와 회의 결과 각각 로그인한 개별 사용자의 db와 장바구니를 실시간 연동을 위해서 각 버튼마다 axios.patch 를 적용했는데

페이지를 리로드 시켜야지 화면이 변경 된다는게 참 걸림돌이긴 했지만,,

이맘때쯤 이었을 땐 거의 배포 전이라 우선 기능 구현 하자!

라는 마인드로 어떻게든 한 것 같았다🥲

 

백엔드 분들도 기능 구현 할 건 많았지만 배포, 서버, db에 계속 에러가 나서 하나하나 해결 하면서 하다 보니

시간 부족 + 시간내 개발능력이 정말 몸소 느껴졌었다.

 

 

 

 

마지막으로 상품 주문 부분이었는데,

 

이것도 paypal 이나 다른 결제 api 를 끌어들여서 적용을 해보고 싶었지만

요구사항 정의서 작성 회의 당시, 백엔드 분들께서 솔직히 구현할 자신이 없다 하셔서
Advanced 로 두고, 쇼핑몰 플랫폼이니까 다른방법이 '무통장' 이 있어서 띄워서 구현 하기로 했다.

 

주문 페이지

장바구니의 담긴 총액과 받는 사람 정보를 받아 주문 API 에 따라 post 해주었다.

주문 완료와 함께 db에 등록이 되어, 마이페이지에서 조회가 가능하게 구현 했다.

주문완료 페이지

 

구매자 마이페이지 (주문 내역)

 

 

느낀점 👏🏻

처음 팀이 만남과 동시에 프로젝트까지 얼마나 많은 대화를 했었는지~~

커뮤니케이션이 정말 중요하다는 것을 느꼈다..

예를 들면 백엔드 분들은 ERD(Entity Relationship Diagram)에서 지정한 보내야 할 키 값들의 이름,

개발을 진행하며 필요없는 부분과 필요한 부분의 추가와 수정과 axios 통신에서의 에러를 해결 할때 정말 대화를 많이 했다.

그리고 API 문서에서의 타이핑 실수, 약속한 값과 다른 키 값이 있는 것 처럼 서로서로 사람이기 때문에 계속 확인 해주며 했었다.

그리고, 팀원과 프론트만이 아닌 백엔드와 함께하는 프로젝트가 완성이 되어서 아쉬움도 많이 남지만! 해냈다는 것에 기뻤다.

 

앞으로 정처기 준비와, 개인프로젝트, 이력서, 자소서 등등 준비해야 할 것이 많고, 언제가 될 지 모르지만
차근차근 준비하여 개발자가 꼭 되고 싶다!!!💡

 

현업에서의 새로운 프로젝트나 보수를 맡게 된다면

유저 친화적으로 좀 더 편하게 사용 할 수 있고,

고객을 위한!

요구사항을 만족하는!!

에러-부재 궤변을 만들지 않게 애자일이 잘 스며든
개발평에도 인정받고 많은 사람들이 이용하는 그러한 작업을 내는 날 까지 달리자!!

 

마지막으로 함께한 프론트 동기들의 평가!! 👏🏻
+ 프로젝트를 하며 멘토분의 평가

 

 

멘토평가

 

나의 가치관과 방향성과 맞는 평가 였다~

소통을 잘하자!

팀원과 함께 성장하며 나아가자!

이상!!