React 쇼핑몰 사이트 만들기 (1) - 구조 / 패키지 설치

[ 프로젝트 시작 ]

npm init vite

-> react / javascript

 

[ 필요한 패키지들 설치]

npm install 

[ 패키지 추가 설치]

 

npm install axios react-router-dom react-redux react-icons sass @reduxjs/toolkit react-loading-skeleton

 

[ 소스구조 만들기 ]                           

 

 

각 Pages들 안에 index.jsx파일을 생성하고 다 복사 붙여넣기 해줌 

rafce 로 페이지 이름이랑 동일하도록 컴포넌트를 만든다.

 

 

Component에는 Loader.jsx / Loader.module.scss 두가지씩 파일을 생성해줌. 

rafce로 컴포넌트 이름이랑 동일하도록 만들어줌

 

 

 

 

[ App.jsx파일에 라우팅 추가 ]

src / App.jsx 에 라우팅을 추가해줌

- 연결될 페이지 7개 연결해주기 

root경로에 global.scss추가 , ndex.css는 삭제 main.jsx에 스타일 부분은 global꺼로 바꿔줌  / App.css 도 삭제 

 

 

[ SASS ] 

Sass로 작업을 시작하면 사전 처리된 Sass파일을 웹사이트에서 사용 할 수 있는 일반 css파일로 저장함

SCSS vs SASS

- SASS : css로 컴파일 되거나 해석되는 전처리기 스크립팅 언어 + 문법 

- SCSS : css구문위에 구축되는 문법 

 

보통 scss -> sass -> css -> 웹의 구조 

https://sass-lang.com/guide

 

[ Layout 컴포넌트 ] 

header / outlet(react-router-dom에서 가져옴)  / footer

 

[ Header 컴포넌트 ] 

 

- Header Component 안에 Nav Component생성 (rafce) 

 

제일 왼쪽에 있는 Shop 부분 - header / 오른쪽 Nav 컴포넌트 

{FiShoppingCart} from 'react-icons/fi' - 리액트 아이콘 사용 

 

[ LoginPage -로그인 페이지 ]

 

- LoginPage 안에 sign-in 컴포넌트 추가 SignIn.jsx ( Form component )

 

[ ResisterPage - 회원가입 페이지 ]

- ResisterPage 안에 sing-up 컴포넌트 추가 SignUp.jsx (Form component) 

- 로그인 페이지와 UI는 똑같음