Front-End : 👑Luxury Brand Shop

No . M4 - Front-end web Team-project

Project Assignment 1 - Fastcampus KDT-FE (2023)

🔗N4 보러가기!

• 사용자 페이지: https://moonlit-paprenjak-f17873.netlify.app/
• Admin: https://idyllic-kheer-eeffb7.netlify.app/admin

1. test 계정:

• ID: test@gmail.com
• password: test1234

🐥 한정된 수량으로 특별한 쇼핑을 할 수있는 Shop!

• 면세점에서만 구매할 수 있었던 제품을 쉽게 구매하고 판매할 수 있는 서비스 홈페이지를 구현했어요!
• 짧은 프로젝트 기간, 적은 인원으로 개발에 집중해야 하므로, 디자인/기획 부분은라룸을 모티브 삼아 진행했어요!
• UI가 완성된 CSS 외부 라이브러리를 사용하지 않고 Styled-component를 사용하여 다른 컴포넌트의 동일한 ClassName을 사용 할 경우, 방해가 되지 않도록 이를 활용하였습니다.!

🐥 하루같이 느껴 졌던 프로젝트 기간

2022.11.28(월) ~ 2023.01.01(월)

🐥 한분한분이 소중한 우리 팀 일원!

Front-End :👑✨이승윤님, ✨이은영님,✨곽혜지님 ,✨한수산님✨👑

🐥 Front-End 사용한 기술 스택!

🐥 우리 어떻게 일 한 한거야?

• GitHub : 각 페이지마다 branch를 생성하여 관리했어요!

• Slack : 슬랙과 깃허브를 연동하여 상시 상황을 공유하도록 했어요!

• Notion 매일 공부하고 적용하여 PR을 날리고 해결과 오류가 있었던 부분을 기재하고, 일주일 2번정도 회의를 하며 원활한 소통을 위해 하루계획, 현재진행상황, 팀원칭찬 등 여러부분을 작성했어요!

🐥 열심히 만들어본 페이지! 그래서 누가했는가!

이승윤	한수산	곽혜지	이은영
관리자 페이지 구현 제품 (판매)페이지 구현 카테고리 페이지 구현 검색 기능 구현	계좌 연결 구현 계좌 해지 구현 제품 구매 페이지 구현 메인 페이지 구현	헤더 구현 회원가입 구현 로그인 구현 회원정보 수정 구현	제품 (구매) 페이지 구현 제품 상세페이지 구현 장바구니 페이지 구현

📱 피드백 받고 싶은 부분

이승윤

아쉬웠던 점, 피드백 받고싶은점.
: useCallback를 사용하여 함수를 재활용하고자 했으나, 어떤 부분에서 적용해야 할지 잘 감이 오질 않았습니다. 보통 어느 경우에 useCallBack을 사용하는지 궁금합니다..

이은영

피드백 받고싶은점

[마이페이지 홈_ Outlet]
- 마이페이지 홈에서 개별 컴포넌트로 진입하는 것은 Outlet으로 작업했습니다. 올바르게 Outlet을 사용한 건지 궁금합니다.
- 특히 비밀번호 재확인은 Bank Accounts와 My profile일 때만 뜨는데, nav의 탭버튼 클릭으로 비밀번호 재확인 출력 여부가 결정됩니다.
따라서 Bank Accounts와 My profile의 주소로 직접 접속하면 비밀번호 재확인 없이 접속이 됩니다.
탭버튼에서 비밀번호 재확인출력 여부를 결정하는 것이 아니라, Bank Accounts와 My profile 컴포넌트 내부에서 비밀번호 재확인 출력 여부를 결정하는 것이 바람직할까요? 혹은 더 좋은 다른 방법이 있을까요?
- [장바구니 페이지_Step 컴포넌트 오타로 인한 `out of memory` 에러
- 브라우저 출력 형태
- 상황
- 장바구니 페이지에 주문단계를 나타내는 Step 컴포넌트를 추가하니, 브라우저에 위와 같이 out of memory 에러가 떴습니다.
- 추후에 원인이 Step 컴포넌트 내에서 컴포넌트명의 오타에 있다는 걸 알게 돼 해결했습니다.
- 컴포넌트명 오타가 왜 out of memory 에러로 이어지는지 알 수 있을까요?

한수산

아쉬웠던 점, 피드백 받고싶은점
1. 아쉬웠던 점
- 가상 DOM을 활용하여 개발하는 React의 장점을 잘 살리지 못한점
- 새롭게 랜더해야 할 부분과 아닌 부분을 나누어 상태를 관리해주지 못한점
- 오류 핸들링이 구체적으로 되어있지 않아 오류에 맞는 정확한 메세지를 전달하지 못한점
- api 호출이 많이 , 자주 이루어 지는데 그 부분을 최적화 하지 못한점

2. 피드백 받고싶은점
- 결제 페이지 입력 폼 또는 다른 입력 폼에서 입력되어있지 않거나 잘못된 값이 입력된 경우 예외 처리가 제대로 이루어지지 않았습니다. 이 작업을 해줄 시 참고할 내용 혹은 개인적인 피드백 부탁 드립니다.
- 불 필요한 api 호출이 자주 이루어지고 있습니다 효과적인 해결 방안을 알고 싶습니다.
- 가상 dom을 쓰는 react환경에서 DOM API 사용을 지양할 수 있는 방법이 어떤 것이 있을지 궁금합니다.