리액트 프로젝트를 기본적으로 세팅하고 시작하겠습니다.

npx my-react-vite-app [프로젝트 이름]

1. 기본 페이지 라우팅 하기

앱은 세 가지 페이지를 가집니다.

1. 홈페이지 : 회원의 일기 목록 정보가 나타납니다.
2. Signup 페이지 : 회원가입 폼이 존재합니다.
3. 로그인 페이지 : 로그인 폼이 존재합니다.

<aside> 💡 라우터란? 사용자가 요청한 URL에 알맞는 페이지를 보여주는 역할을 합니다. 리액트 라우터는 컴포넌트 기반의 라우팅을 설정하도록 도와줍니다.

</aside>

1. src 폴더안에 pages 폴더를 만들고 각각 우리가 만들 페이지의 폴더(home, signup, login)를 생성합니다.

2. 각각의 폴더에  컴포넌트 파일과 module.css 파일을 생성합니다.(signup 폴더는 module.css 파일을 생성하지 않습니다.) CSS를 JS파일에 모듈로 불러오기 위해서는 파일이름 뒤에 module.css 를 붙여야합니다.  아래와 같은 코드를 각 컴포넌트 별로 이름을 바꿔 사용합니다.

import styles from './Home.module.css'

export default function Home() {
    return (
        <div>
            HOME
        </div>
    )
}

1. 라우터를 사용하기 위해 react-router-dom 을 설치합니다

npm install react-router-dom