[Team Project] 쓰레빠 Threppa Project 2 mamuree~

콜라의 위험성

오늘 제로콜라 한잔 했습니다..

 

드디어 2주간 팀 프로젝트,

쓰레빠 프로젝트를 마무리(manuree)했습니다

 

저희 팀은 다른 팀들보다 한 명이 적은 상태로 출발했습니다 

팀원들 전부 mbti가 i로 시작하는 사람들이라 싫어도 싫은 소리 못 냈을 팀원분들 너무 고생 많이 하셨습니다

 

처음 해보는 팀 프로젝트,

그리고 딱 겹친 장마철의 습함 덕분에 불쾌지수도 올라가고 코딩의 열기도 올라가ㄱㅗ... 응??

 

 

음악 하나 틀고 들으면서 마무리 스크롤 한번 내려보겠습니다 클릭클릭클릭클릭클릭클릭클릭클릭클릭

 

프로젝트 명 : 쓰레빠(Threppa) Project

팀 구성 : Front 3명, Back 1명

 

Github(깃허브)

본인 담당 : 제품 상세 페이지, 푸터

 

Demo 영상부터 보겠습니다

유튜브 영상

쓰레빠 데모영상

구성은 이렇습니다

• 메인 페이지
• 로그인 / 회원가입
• 제품 리스트 페이지
• 제품 상세 페이지(본인 담당)
• 장바구니 페이지
• 상단 메뉴바
• 푸터

메인 페이지

 

• 메인 페이지는 팀장님께서 매우 예쁜 이미지를 구해 놓으셨습니다 마치 미술관 홈페이지 같습니다
• 메인 페이지는 다른 중요 페이지를 먼저 만들어 놓은 후 마지막에 모여 추가하였습니다
• 이미지 사이 탑과 바텀 사이 하얀 공간은 의도된 디자인입니다 깨진 거 아님

주요 포인트

- 확 끌리는 이미지가 필요했습니다

- 상단 메뉴바와 하단 푸터의 적절한 공간을 계산해야 했습니다

- 처음에 누가 봐도 슬리퍼 판매샵으로 보여야 했습니다?

 

로그인 / 회원가입

• 백엔드님이 API를 만들어 주시면 거기에 토큰을 저장하는 방식으로 데이터 통신을 했습니다
• 사진에서 보시는 바와 같이 유효성 검사 기능이 있습니다
• 로그인을 하면 로컬 스토리지에 토큰 키를 넣어 페이지가 새로고침 되어도 로그인 정보가 쭉 유지되게 하였습니다

주요 포인트

- 솔직하게 아직 로그인 정보를 어떻게 계속 유지하면서 페이지를 이동하고 있는지 이해가 더 필요합니다??

- 유효성 검사를 다양한 방법으로 했습니다

 

제품 리스트 페이지

 

• 제품 필터를 통해 상품을 분류할 수 있습니다
• 더보기 버튼을 통해 데이터에 있는 모든 제품을 확인할 수 있습니다

제품 리스트 페이지에서 아쉬운 점

- 유일하게 프로젝트 들어가면서 제가 경험이 부족한 기능들이 있는 페이지였습니다

- 필터 기능은 구현해보고 참고는 좀 했으나 아직 많은 노력이 필요합니다 

- 라우팅으로 페이지를 연결시킬 때는 공부가 좀 더 필요합니다

- 다음 프로젝트에서 리스트 페이지를 맡아서 해볼까 고민 중에 있습니다

 

제품 상세 페이지

• 제가 담당해서 만든 페이지입니다
• 버전 마크 1이 있고 마크 2가 있습니다 

초기 MK1

• mockData를 사용하여 UI를 구현했습니다
• 색상을 변경 시 그에 맞는 이미지가 변경되도록 했습니다
• 사이즈 표 모달 창을 만들었습니다
• 캐러셀(슬라이드)이 이동할 때 px단위로 이동하여 맥시멈 가로 값을 설정하였습니다
• css적으로 스티키를 구현하여 제품 선택 창이 스크롤과 함께 내려오도록 하였습니다
• 사이즈가 많이 있습니다

처음 일주일 정도 진행되었을 때 만들었던 페이지입니다 수정이 필요한 부분이 많이 있습니다 

 

MK2

 

MK1 초기와의 개선 점

• 백엔드님과의 API 통신 후 정식으로 받은 데이터 form을 사용한 데이터로 UI를 구현하였습니다
• 캐러셀 기능을 px단위가 아닌 상품 데이터의 길이만큼으로 변경시켜 몇 개의 상품 데이터가 들어와도 무한정 늘어날 수 있게 변경하였습니다
• 코드 리팩토링을 진행하였습니다
• 데이터 활용도에 따라 무분별하게 나누어 논 컴포넌트를 다시 재조정하였습니다
• 백엔드님 과의 API 통신으로 사용자가 선택한 제품의 id와 컬러, 사이즈 데이터를 서버로 전송할 수 있습니다
• 전송된 데이터를 장바구니에서 가져올 수 있습니다
• useParams hook을 사용하여 URL 주소 뒤에 id값으로 각 id의 맞는 제품의 UI를 동적으로 변경할 수 있습니다

 

백엔드에서 받은 데이터를 활용하여 UI를 구현할 때 알고 있어야 하는 것

옵셔널 체이닝입니다

진짜 처음 이 문제 때문에 하루를 꼬박 날렸다는?로 시작해?로 끝나는 무슨 말도 안 되는 지금 하는 말도?? 소리인가?

잠깐 왜 이 문제로 고생을 했다는 건지 알아보고 가겠습니다

이후 더욱 자세한 건 블로그를 통해 알아보도록 하겠습니다

 

React에는 라이프사이클로 인해서 종종 언디파인드를 출력하는 경우가 있습니다

저는 상세 페이지에 있는 데이터를 받아올 때 useEffect를 사용하고 fetch함수를 통해 받아 왔습니다

데이터를 담을 빈 State도 만들었습니다

useEffect를 사용했으니 첫 번째 로딩에서 랜더링

두 번째 업데이트에서 랜더링이 됩니다

 

이때 첫 번째 랜더링을 하는 과정에서 빈 State에 언디파인드가 출력됩니다

에러가 아닙니다

여기서 제가 겪은 문제가 발생합니다

 

원하는 객체의, 배열의 데이터에 접근하려 해도 에러가 납니다

이는 아까 말씀드렸던 첫 번째 언디파인드(빈 데이터)를 자꾸 접근하여 원하는 데이터를 뽑으려고 했기 때문입니다

 

이를 방지하고자 옵셔널 체이닝을 사용합니다

예전에는 && 연산자를 통해 이를 방지하였고 비교적 최근에는?. 을 통해 이 언디파인드를 방지할 수 있습니다

이로써 하루 종일 걸린 문제 해결....

mk2 장착

 

장바구니

 

• 제품 상세 페이지에서 백엔드를 통해 받아온 데이터를 통해 UI를 구현하였습니다
• 수량 조절 기능이 있습니다
• 장바구니에 필요한 CRUD가 있습니다

주요 포인트

- 팀원이 쿠폰 기능을 넣었습니다

- 팀원이 총액을 계산해주는 기능을 넣었습니다 

 

상단 메뉴바

• mockData로 UI를 구현하였습니다 
• 카테고리 클릭 시 제품 리스트 페이지로 이동합니다

 

푸터(footer)

• 하드코딩입니다

 

느낀 점

• 백엔드와의 초반 소통이 매우 중요합니다!
• 제가 처음에 생각했던 데이터와 실제로 받아본 데이터의 갭 차이가 너무나 큽니다 (하나하나 다 수정했습니다ㅠ)
• 데이터로 UI를 구현할 때 효율적인 컴포넌트화를 항상 생각하고 설계해야 합니다 (나중에 컴포넌트가 꼬일 수 있습니다)
• 초반에 너무 많은 레이아웃 구현 시간을 쏟지 맙시다 (효율적인 시간 분배)

첫 프로젝트에서 사용해 협업 툴

Trello

 

마무리

- 이제 코드 정리도 좀 해야 할 거 같습니다

- 하루를 꼬박 잡더라도 초반 프로젝트 계획을 확실하게 하고 가는 게 좋을 거 같습니다

- 다음 프로젝트에서는 아주 조금 더 욕심을 내 기능을 몇 개 더 만들어 보고 싶습니다

- 신경질 한번 안 낸 팀원들에게 너무나 고맙습니다

프로젝트 발표