React 프로젝트 세팅 방법 및 순서

0. 사전 준비

1. 구글 크롬 설치
2. IDE 설치
3. git 설치
4. Node 설치
5. yarn 설치(npm 그냥 써도 됨. 말리지 않음)

 

1.  리액트 프로젝트 생성(Create-react-app)

터미널로 내가 프로젝트를 만들기 원하는 폴더로 이동, 혹은 VScode로 해당하는 폴더 열기

yarn create react-app 프로젝트명

그럼 프로젝트명으로 된 폴더가 생성되고 그 아래에 node_modules, public, src 등등 리액트의 프로젝트의 기본세팅이 만들어진다.

VS code 폴더 열기로 생성된 프로젝트 폴더를 열었다.

• node_modules는 이미 깔려있는 혹은 앞으로 깔 라이브러리나 패키지에 관한 것들이 들어있다.
• public은 로고나 favicon 등을 관리하는 폴더이다.
• src가 실제 작업하는 폴더라고 생각하면 된다. 이 폴더 아래에 있는 app과 index파일은 삭제하면 안된다. 다 용도가 있기 때문에 안에 뭐가 들었는지 정도는 확인해 보는 것이 좋다.
• 개인적으로 app.css는 지워도 상관없다고 생각한다.
• [src] 폴더 안에 [components] 폴더를 만들어서 거기에 컴포넌트를 나누면 된다.

 

2. 리덕스, 리덕스 툴킷 설치

yarn add react-redux @reduxjs/toolkit

1. [src] 폴더 안에 [store] 폴더를 생성

2. [store] 폴더 아래 [config], [modules] 폴더 생성

3. [config] 폴더 안에 configStore.js 파일생성

- modules 폴더 안에 모듈Slice.js 파일들이 만들어짐.

- 만든 slice 들은 configStore에 import 해서 reducer 안에 모듈이름:모듈Slice의 형태(키:밸류)로 넣어준다. 여기서 설정하는 키값이 useSelector로 state를 불러올때 사용할 모듈의 이름이 된다.

 

configStore, index.js에 보일러 플레이트 깔기!

// configStore.js
import { configureStore } from "@reduxjs/toolkit";
/* import slice.reducer*/

/* 모듈(Slice)이 여러개인 경우 reducer 안에 각 모듈의 slice.reducer를 추가 */
const store = configureStore({
  reducer: {}, //모듈이름:모듈Slice 형태로 추가
});

export default store;

//index.js

import ReactDOM from "react-dom/client";
import App from "./App";
import { Provider } from "react-redux";
import store from "./store/config/configStore";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <Provider store={store}>
    <App />
  </Provider>
);

 

3. 라우터 세팅

리액트 라우터 돔 설치

yarn add react-router-dom

1. [src] 폴더 아래 [pages], [shared] 폴더 생성
   - pages 안에는 각 페이지의 js 파일이 들어감
2. [shared] 폴더 아래 Router.js 파일 생성
3. Router.js 파일에 보일러 플레이트 깔기(⬇️)

import React from "react";
import { BrowserRouter, Route, Routes } from "react-router-dom";
// import pages components

const Router = () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route></Route> // import한 페이지들을 경로에 맞게 넣어줄 곳
      </Routes>
    </BrowserRouter>
  );
};

export default Router;

 

Router.js 파일 사용 예시

import { BrowserRouter, Route, Routes } from "react-router-dom";
import Home from "../pages/Home";
import Detail from "../pages/Detail";

const Router = () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="detail" element={<Detail />} />
        <Route path="detail/:id" element={<Detail />} /> 
        /* parameter를 이용해서 페이지를 이동하는 경우, :id를 붙여주고, 
        해당 페이지 컴포넌트에서 useParams를 사용해서 조회함 */
      </Routes>
    </BrowserRouter>
  );
};

detail 페이지에서 useParams 적용하는 방법

import { useParams } from "react-router-dom";

const Detail = () => {
  const { id } = useParams(); 
  //위에서 id 라는 이름으로 준다고 했으므로 id를 parameter로 넘겨준다는 의미

  return <div> parameter 사용 </div>
}

 

4. json-server

1. 설치

yarn add json-server

2. 설치 후 서버 실행

yarn json-server --watch db.json --port 3001

첫 실행의 경우 db.json이 생기고, 안에 자료 예시가 들어가게 됨

예시 data를 만들때는 꼭 "id"를 만들도록 한다.

그렇지 않으면 에러남...아래 링크 참고

[Study Log/Error Log] - Json-server POST 요청 시 message:'Request failed with …tatus:500

 

5. Axios

1. 설치 : Thunk는 리덕스 툴킷 설치시 자동으로 설치되기 때문에 추가로 설치하지 않음

yarn add axios

2. 세팅

1. [src]-[store]-[modules] 폴더 아래에 API.js 파일 생성
2. 보일러 플레이트 깔기

import axios from "axios";

export const BASE_URL = "http://localhost:3001"; 
// 나중에 서버 주소를 받으면 여기서 서버 주소만 수정하면 됨

export const api = axios.create({
  baseURL: BASE_URL,
  withCredentials: true,
  validateStatus: (status) => {
    return status < 500;
  },
});

 

3. Slice 파일에서 API 파일 사용하기

 - API.js 파일 import

 - axios 명령어를 axios로 쓰지말고 api로 대신하기

import { createAsyncThunk, createSlice } from "@reduxjs/toolkit";
import { api } from "./API"; // api 파일 import

export const __getComment = createAsyncThunk(
  "comments/getComment",
  async (payload, thunkAPI) => {
    try {
      const { data } = await api.get(`/${payload}`); 
      // axios.get대신 api.get으로 사용
      return thunkAPI.fulfillWithValue(data);
    } catch (error) {
      return thunkAPI.rejectWithValue(error);
    }
  }
);

 

추가. 서버 주소 숨기기

1. 프로젝트 폴더 바로 아래에 .env 파일 생성 후 REACT_APP_BASE_URL=서버주소를 써준다 - 띄어쓰기, 따옴표 금지
   
2. .gitignore 파일에 .env 파일 추가
   
3. API.js 파일에서 서버주소 REACT_APP_BASE_URL로 수정
   

 

프로젝트 켤때 주의 사항

json server 까지 설치해서 db에 연결했을 때는 yarn start만 하면 안되고, 터미널을 추가해서 

yarn json-server --watch db.json --port 3001

이 명령어로 서버도 반드시 켜줘야 한다.