- 오설록 웹페이지 클론코딩 프로젝트
- 클론코딩은 개발 환경 셋팅부터 시작하였으며, 하단 시연 영상은 모두 백엔드와의 데이터 연동을 통해 실제 서비스에서 이용되는 수준으로 구현하였습니다.
- 프로젝트는 2주동안 진행됨에 따라 디자인과 아래 서술한 기능들만 선택하여 구현했습니다.
- 회원가입/로그인
- Nav Bar & Footer, 메인페이지
- 상품 페이지
- 상품 상세 및 리뷰
- 장바구니
- 개발 일정에 맞춘 작업량 배분, 기능별 git 분기 및 merge의 중요성을 직접 느낄 수 있었으며, 차주에 진행되는 2차 프로젝트에서는 해당 경험을 통해 보다 부드러운 일정 진행이 이뤄질 수 있도록 하려고 합니다.
Front-End
- 김현주, 안수정, 이윤섭, 손가영
Back-End
- 최바다, 황재승
Front-End
- HTML, CSS(SASS), Javascript, React
Back-End
- Django, Python, MySQL, AWS(RDS, EC2), Bcrypt, JWT, django-cors
Cowork
- Git, Slack, Trello
https://www.youtube.com/watch?v=hi08z17A2s0
-
회원가입 & 로그인, 장바구니
- 회원가입 & 로그인
- 회원가입 페이지 이용약관 및 유저 정보 입력 form 구현
- 이용약관 필수 동의 체크 및 유저정보 입력에 따른 버튼 활성화 기능 구현
- 필수 동의 체크 및 유저 정보 입력 중 누락된 부분이 있을 경우 버튼 활성화 되지 않음
- 약관 중 선택 사항의 경우 체크하지 않더라도 회원 가입 가능
- 정규 표현식을 이용한 유저 정보 유효성 검증 기능 추가
- 회원 가입 버튼 클릭 시 입력 정보 및 이용 약관 별 체크여부 서버로 전달
- 리액트 컨텍스트 API를 사용하여 인증 정보를 관리
- 토큰, 로그인 여부, 로그인 기능, 로그아웃 기능을 하나의 context로 관리하여, 필요한 컴포넌트에서 해당 context를 import하여 사용할 수 있도록 구현
- 해당 context에서 사용자의 로그인 여부를 지속적으로 확인하도록 하여 페이지 이동이나 새로고침시에도 로그인 상태를 유지하도록 함
- 라우터에서 로그인 여부에 따른 접근이 가능한 컴포넌트 지정할 수 있도록 context 활용
- 장바구니
- 서버를 통해 상세페이지로부터 전달 받은 장바구니 아이템 리스트를 불러옴
- try-catch문을 활용해 에러를 처리하기 위한 로직 추가
- 체크 박스를 통해 원하는 아이템을 선택할 수 있으며 선택 된 아이템에 한해 결제 예상 금액을 실시간으로 반영하여 보여줌
- 선택 삭제를 통한 아이템 삭제 기능을 구현하였으며 해당 데이터는 DELETE 방식으로 백엔드와 통신
- DELETE 요청 이후 response의 응답에 따른 분기 처리로 업데이트 된 아이템 리스트를 서버로부터 불러옴
- 수량 변경을 통한 아이템 수정 기능을 구현하였으며 해당 데이터는 PATCH 방식으로 백엔드와 통신
- PATCH 요청 이후 response의 응답에 따른 분기 처리로 업데이트 된 아이템 리스트를 서버로부터 불러옴
- 주문 기능을 개별 상품 바로구매, 선택 상품 주문, 전체 상품 주문으로 세분화 하여 각 기능에 따라 POST 방식을 활용, 서버로 전달 되는 아이템 리스트 역시 달라지도록 구현
- 장바구니 기능 구현에 필요한 함수 및 state는 별도의 context로 관리할 수 있도록 리팩토링
- 기존의 복잡한 props와 함수 전달 구조를 context 적용을 통해 단순화
- 메인 컴포넌트인 Cart 컴포넌트는 렌더링에 집중하도록 구현함으로써, 유지보수성 및 가독성을 높임
- 단순히 context를 import함으로써 다른 컴포넌트에서 장바구니 아이템 정보에 접근할 수 있게되고, 추후 추가 기능 구현 필요시 코드의 수정을 용이하게 함