React 쇼핑몰 프로젝트

📖 서비스 내용

• 운동화의 상세정보를 보고 구매를 하는 프로젝트입니다.

🖥 개발 내용

• axios를 사용한 API를 통해 운동화의 정보를 보여준다.
• 상품 클릭 시 상품의 상세정보를 보여준다.
• 상세정보의 주문하기 버튼 클릭 시 상품이 장바구니에 담긴다.
• setTimeout를 사용하여 안내문구를 보여준다
• react-router-dom의 Routes, Navigate를 사용하여 페이지 이동을 한다.
• lazy함수를 사용하여 필요시에만 Rendering 되도록 구현.
• Redux를 사용하여 공통Props를 사용

💡 성장 경험

React에 대한 이해

React의 여러 함수들을 사용하며 로직을 조금 더 간편히 구현할 수 있었습니다.

React의 Redux 및 router-dom 그리고 AXIOS

Redux라이브러리를 설치 사용하며 Props를 더 편리하게 사용할 수 있었고 router-dom의 Routes, Nav를 사용하여 path경로에 따라 페이지 이동을 할 수 있음을 경험 했습니다. 또한 axios를 사용한 api연동을 통해 받아온 데이터 객체를 다룰 수 있게 되었습니다.

👀 서비스 화면

(메인 화면)

(디테일 화면)

(동작 화면)