TIL 82일차_리액트(CRA) 프로젝트 초기세팅하기

프로젝트를 시작하기 전에,
작은페이지라도 처음부터 만들어봐야겠다는 생각이 들어서
CRA로 시작하는 초기세팅을 해보려한다.

CRA 설치

npx create-react-app <프로젝트명>

이후
public폴더안의 index.html과
src폴더 안의 index.js 를 제외하고 다 삭제해준다.

라이브러리 설치 (예시: React Router)

React Router 설치

npm install --save react-router-dom

src 폴더 안에 Router.js파일 생성

Router.js 파일 세팅
<Route /> 요청 경로와 렌더링할 컴포넌트 설정한다.
<Switch /> 하위 라우터 중 하나를 선택한다.
<Redirect /> 요청 경로를 다른 경로로 리다이렉션 한다.
(아래의 경우로 예를 들면, 설정하지 않는 경로 요청 시 "/" Home 경로로 이동한다는 말이다.

import React from "react";
import {
  BrowserRouter as Router,
  Route,
  Switch,
  Redirect,
} from "react-router-dom";
import Home from "./Home/Home";

class Router extends React.Component {
  render() {
    return (
      <Router>
        <Switch>
          <Route exact path="/" component={Home} />
          <Redirect path="*" to="/" />
        </Switch>
      </Router>
    );
  }
}

export default Router;

src/index.js 파일의 render 대상을 Router로 지정

import React from "react";
import ReactDOM from "react-dom";
import Router from "./Router";

ReactDOM.render(
  <React.StrictMode>
    <Router /> // 이곳! 
  </React.StrictMode>,
  document.getElementById("root")
);

프로젝트 폴더 구조 세팅

앞서 말했듯이, src폴더 안에서 index.js 파일을 제외한 뒤,
폴더 구조를 잡는다.

일반적으로 Components 폴더는 여러페이지에서 사용될 컴포넌트를 관리하는 역할을 하고,
Pages폴더는 웹 사이트를 구성하는 각 페이지의 레이아웃에 해당하는 부모 컴포넌트를 관리한다.

components : 공통 컴포넌트 관리
pages : 메인 페이지 컴포넌트 관리
styles: reset.scss, common.scss, media.scss ...
images : 이미지 파일 관리

+@ 프로젝트 루트 설정, ESLint와 Prettier 추가

프로젝트 루트 설정 (절대경로 설정)

프로젝트 root에 jsconfig.json 이름의 파일을 추가하고 아래 내용을 입력한다.

{
  "compilerOptions": {
    "baseUrl": "src"
  },
  "include": ["src"]
}

이제 import SampleComponent from "../src/Components/SampleComponent" 와 같이 불러오는 대신에
import SampleComponet from "Components/SampleComponent" 와 같은 형식으로 불러올 수 있다.

ESLint와 Prettier 추가하기

VSCode Extension을 열어 ESLint와 Prettier를 설치한다.
ESLint로 스타일을 체크하고 Prettier로 포맷팅을 처리하기 위해서 다음과 같이 패키지를 추가로 설치한다.

npm install prettier eslint-config-prettier eslint-plugin-prettier

설치가 완료되면, 프로젝트 root에 .eslintrc.json을 추가하고 아래 내용을 입력한다.

{
  "extends": ["react-app", "plugin:prettier/recommended"]
}

VSCode Settings에 아래의 설정을 추가해준다.

{
  "editor.formatOnSave": true,
  "[javascript]": {
    "editor.formatOnSave": false
  },
  "editor.codeActionsOnSave": { "source.fixAll.eslint": true },
  "eslint.alwaysShowStatus": true,
  "prettier.disableLanguages": ["js"],
  "files.autoSave": "onFocusChange",
  "javascript.updateImportsOnFileMove.enabled": "always"
}

---

Reference

빠른손김참치
개발초보