[React] - CRA 초기세팅

CRA

• CRA(create-react-app)는 쉽고 빠르게 React 개발 환경을 설정해주는 React 초기세팅 Tool
• 그래서 애플리케이션 구현에만 신경을 쓰면 된다.

CRA 프로젝트 생성

• npx create-react-app my-react-app
• my-react-app은 프로젝트 폴더 이름으로 폴더명 대신 . 을 입력하면 해당 경로에 설치하게 된다.
• 필요없는 파일과 주석처리가 되어 있는 코드 삭제
  • src/App.js
  • src/App.css
  • src/App.test.js
  • src/logo.svg

React router dom 설치

• Router 는 요청 경로에 맞는 컴포넌트를 매칭시켜준다.
• npm install --save react-router-dom
• src 폴더 안에 Routes.js 파일 생성
• Routes.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 Routes extends React.Component {
  render() {
    return (
      <Router>
        <Switch>
          <Route exact path="/" component={Home} />
          <Redirect path="*" to="/" />
        </Switch>
      </Router>
    );
  }
}

export default Routes;

• index.js 폴더 안에 render 함수 대상을 App 에서 Routes 로 변경

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

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

CSS Tool

• SASS
  • CSS 를 효율적으로 작성할 수 있게 도와주는 프로그램
  • npm install --save node-sass
• ESLint & Prettier 연동
  • ESLint 는 코드를 검사하여 잘못된 부분을 짚어주고 Prettier 와 연동할 경우 ESLint 규칙에 맞게 코드를 자동 정리해준다.

디렉토리 생성

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

개발서버 실행

• npm run start or npm start