[React] 프론트엔드 세팅하기

DevSeong2·2021년 9월 14일

React setting

React

목록 보기

3/5

React 개발환경 세팅

VSCode + CRA + JavaScript 를 기반으로 한 세팅입니다.

1. 프로젝트 생성

CRA를 이용한 프로젝트 생성(권장)

2. 확장 프로그램 설치 & 설정

VSCode 편집기에서 제공하는 플러그인을 설치하여 사용합니다.

Prettier: 코드 자동 정렬 도구

VSCode Prettier 설치
npm i -D prettier eslint-plugin-prettier eslint-config-prettier

📄 .prettierrc	// 프로젝트 루트 폴더에 생성

{
  "printWidth": 120,		// 줄 바꿈할 줄 길이
  "tabWidth": 2,		// 탭 너비
  "singleQuote": true,		// 작은 따옴표 사용
  "trailingComma": "all",	// 후행 콤마 사용 (https://heygyun.tistory.com/49)
  "semi": true			// 세미콜론 사용 여부
}

ESLint: 자바스크립트 문법 유효성 검사 도구

VSCode ESLint 설치
npm i -D eslint

🚨 Error: Parsing error: Unexpected token < eslint
원인: ESLint가 ES6 이상을 파싱할 때 생기는 문제
ESLint는 구문 분석을 위해 기본적으로 Espree 파서를 사용
해결: babel-eslint 패키지를 설치 npm install babel-eslint
.eslintrc 파일에 "parser": "babel-eslint" 추가

🚨 Error: Delete ␍eslint prettier/prettier
원인 & 해결: https://codingcoding.tistory.com/175

🚨 The react-scripts package provided by Create React App requires a dependency:
"eslint": "^7.32.0"
원인: React 프로젝트에서 요구하는 버전과 맞지 않아서 발생한 에러 (설치된 eslint 버전은 8.3.0 - 21.11.25 기준)
해결: eslint 버전을 낮추어 설치 npm i -D eslint@7.32.0

📄 .eslintrc	// 프로젝트 루트 폴더에 생성

{
  "extends": ["plugin:prettier/recommended", "react-app"],
  "parserOptions": {
    "sourceType": "module",
    "ecmaVersion": 2021
  },
  "rules": {
    "prettier/prettier": ["error", {
      "endOfLine":"auto"
     }]
  }
}

Reactjs code snippets: React 관련 템플릿을 단축키로 작성

참고: Reactjs code snippets - Visual Studio Marketplace

파일 생성 후 rsc + Tap 하면 함수형 컴포넌트 기본형을 자동으로 생성해줍니다.

import React from 'react';

const App = () => {
  return (
    <div>
      
    </div>
  );
};

export default App;

3. 폴더 구조와 라우터 설정

리액트 폴더 구조

함수형 컴포넌트 기반 (+hooks)

📁 Project
ㄴ 📁 components	// 리액트 컴포넌트
ㄴ 📁 hooks		// 리액트 hook
ㄴ 📁 layouts		// 공통 레이아웃
   ㄴ App.jsx
ㄴ 📁 pages		// 서비스 페이지(페이지 진입점)
ㄴ 📁 utils		// 자주 쓰이는 함수

위의 폴더 구조는 고정적인 것이지 않고 자유롭게 설정하셔도 됩니다.
(+) React 프로젝트 구조를 설계하기 위해 추천할 만한 방법이 있을까요?

라우터 설정

npm i react-router react-router-dom

📄 App.jsx

import React from 'react';
import LogIn from '../pages/LogIn';
import SignUp from '../pages/SignUp';
import { BrowserRouter, Switch, Route } from 'react-router-dom';

const App = () => {
  return (
    <BrowserRouter>
      <Switch>
        <Route exact path="/" component={LogIn} />
        <Route path="/signUp" component={SignUp} />
      </Switch>
    </BrowserRouter>
  );
};

export default App;

절대경로 설정

npm i @craco/craco craco-alias

📄 package.json 수정

"scripts": {
  "start": "craco start",
  "build": "craco build",
  "test": "craco test",
  "eject": "react-scripts eject"
},

📄 jsconfig.json 생성	// 프로젝트 루트 폴더에 생성

{
  "compilerOptions": {
      "baseUrl": "src",
      "paths": {
        "@components/*": ["src/components/*"],
        "@layouts/*": ["src/layouts/*"],
        "@pages/*": ["src/pages/*"],
        "@utils/*": ["src/utils/*"],
        "@hooks/*": ["src/hooks/*"]
      }
  },
  "include": [
      "src"
  ]
}

📄 craco.config.js 생성	// 프로젝트 루트 폴더에 생성

const CracoAlias = require('craco-alias');
module.exports = {
  plugins: [
    {
      plugin: 'CracoAlias',
      options: {
        source: 'jsconfig',
        jsConfigPath: 'jsconfig.paths.json',
      },
    },
  ],
};

4. 코드 스플리팅 (절대경로 적용)

npm i @loadable/component

📄 App.jsx

import React from 'react';
import loadable from '@loadable/component';
import { BrowserRouter, Switch, Route } from 'react-router-dom';

const LogIn = loadable(() => import('@pages/LogIn'));
const SignUp = loadable(() => import('@pages/SignUp'));

const App = () => {
  return (
    <BrowserRouter>
      <Switch>
        <Route exact path="/" component={LogIn} />
        <Route path="/signUp" component={SignUp} />
      </Switch>
    </BrowserRouter>
  );
};

export default App;