본문 바로가기

전체 글

 (166)
react로 쇼핑몰 만들기(5) - 상세페이지, 장바구니, MockAPI 상세페이지 데이터 생성하기 product.slice.js코드입니다. store폴더안의 index.js에 productSlice를 등록합니다. DetailPage폴더안의 index.jsx의 코드입니다. 상세페이지 UI 생성하기 左1) Loader.jsx의 코드입니다. 中, 右) Loader.module.scss의 코드입니다. DetailPage.module.scss의 코드입니다. DetailPage폴더안의 index.jsx의 추가 코드입니다. 장바구니 기능 생성하기 cart.slice.js의 변경 및 추가 코드입니다. 下1,2)는 cartSlice의 reducers부분입니다. 左) SignIn.jsx의 추가 코드입니다. 右) SignUp.jsx의 추가 코드입니다. 장바구니 페이지 생성하기 우선 src폴더 ..
react로 쇼핑몰 만들기(4) - Product 불러오기 Product 데이터 가져오기(fake store api) 가짜 쇼핑몰 api 활용하기: https://fakestoreapi.com/ products.slice.js의 코드입니다. 해당 slice를 store폴더의 index.js에 등록합니다. 左) CardList.jsx의 코드입니다. 여기서 방금 productsSlice의 fetchProducts를 사용합니다. 右) CardList.module.scss의 코드입니다. CardList.jsx를 HomePage폴더의 index.jsx에 등록합니다. CardItem 컴포넌트 생성하기 左) cart.slice.js의 코드입니다. 右) 해당 slice를 store폴더의 index.js에 등록합니다. CardItem.jsx의 코드입니다. 상품을 장바구니에 담으..
react로 쇼핑몰 만들기(3) - Category 컴포넌트 이번 포스트에서 위와 같은 부분을 작업합니다. Redux 사용 준비 npm i react-redux 위 명령어를 통해 redux를 설치합니다. src폴더 안에 store폴더내 각각 slice.js파일을 만듭니다. 그리고 메인페이지인 index.js도 생성합니다. user.slice.js파일의 코드입니다. store폴더 안에 index.js의 코드입니다. 루트경로에 main.jsx파일의 변경코드입니다. SignIn.jsx와 SignUp.jsx파일의 추가 코드입니다. 홈페이지 생성하기 홈페이지는 위와 같은 구조로 이뤄집니다. HomePage폴더 안에 위와 같이 폴더를 생성 후 각 폴더 내 .jsx와 .module.scss파일을 생성합니다. Category 컴포넌트 생성하기 左) store폴더 안에 categ..

티스토리툴바