오늘 1차 프로젝트 발표까지 마치고 짧은 러닝커브를 정리한다.
- 맡은 tasks
- Signup page
- Shop page
- 배운 점
📌 맡은 tasks
- Signup page 💻
- Shop page 🛒
Signup page를 맡고 일주일내로 끝나 기능 구현을 더 담당하고 싶어 Shop page도 맡았다.
📌 Signup page
✏️ 구현 기능
[회원가입 input values]
- 필수 데이터인 아이디, 패스워드, 휴대폰번호, 이메일 value 값을 비구조할당 및 스프레드 오퍼레이터를 사용해서 객체에 저장
- 정규표현식 조건을 걸고 삼항연산자 및 스프레드 오퍼레이터를 사용해 조건에 부합하지 않으면 경고 message의 빨간색이 active 되게 설정
[회원가입 버튼 활성화]
- 삼항연산자로 걸어둔 조건이 모두 true라는 조건을 변수에 담고 버튼에 disabled 기능으로 true면 disabled를 false를 하고 반대면 활성화
- 백엔드와의 통신으로 데이터 유효성 검사. 정규표현식에 걸어둔 조건에 부합할 시, 통신에 성공(201 success)
- 통신에 성공할 시, useNavigate를 사용해 로그인 페이지로 이동
✏️ 잘했던 점
- 이 전 위스타그램 프로젝트를 바탕으로 JSX structure를 잘 기획한 것. Layout을 어떻게 나눌 건지 사전 플래닝 후, 시작
- 팀원들과 적절하게 tasks 분배를 하고 원활한 소통으로 프로젝트 협업
✏️ 배운 점
- 백엔드와 커뮤니케이션해서 key값 매칭의 중요성
- 백엔드와 통신할 때 매번 URL이 변경 되기에 다수의 페이지가 있을 경우, 환경변수로 .env를 사용해서 관리(https://www.npmjs.com/package/dotenv)
- 정규 표현식을 처음으로 활용해 회원가입 페이지 구현
- 삼항연산자를 다양한 기능에 활용 (예: 회원가입 input values의 조건이 맞지 않았을 때, 모든 input values가 valid 됐을 때, 버튼을 눌러 로그인 페이지로 이동)
- Mock data를 사용해서 데이터를 불러오거나 백엔드와 통신해서
📌 Shop page
✏️ 구현 기능
[반복되는 데이터 컴포넌트화]
- Shop 페이지에서 perfume 항목이 반복되어 perfume & perfumelist를 컴포넌트화
- 백엔드에서 Mock data를 받아와 fetch 함수로 호출한 후, map 함수를 사용해 반복해서 UI 설정
[상품 카테고리화]
- Shop 페이지를 카테고리화 하고 프론트 & 백 객체 배열 데이터에 [All, 시트러스, 플로럴, 우디, 머스크]에 해당하는 tags를 넣어 matching 되는 tags의 카테고리를 filter 함수로 호출
- 백엔드와 실제 통신해 shop main page 전체 데이터 호출, 각 카테고리를 클릭했을 때 해당 tags에 맞는 항목 재렌더링
✏️ 잘했던 점
- 긍정적이고 도전적인 태도로 프로젝트 접근
- 기본틀 만들어 놓고 기능구현 먼저 해결, scss은 나중
✏️ 힘들었던 점
- 모르는 점을 구글 검색했으나 더 모르겠던 점
- 눈에 보이는 UI는 작았지만 기능 구현 시간이 오래 걸렸던 점
- merge하고 conflicts 수정하면서 에러난 것 -> 구글검색 및 멘토님 가이드로 해결
✏️ 보완점
- 코드를 좀 더 분석해보는 것
- 코드를 뜯어보는 리뷰 포스팅 작성하기
- 에러를 해결했을 때 한 개 정해서 블로그 작성
- 백엔드와 프론트간의 class, state, component name 일치화
- 프론트엔드의 카트 변수명과 백엔드 데이터 변수명이 달라 에러났던 점
- 선 통신: 미리 통신해서 에러 최소화
4대륙 개발자