[React]초기세팅

초기 세팅

1. Node.js 설치

React 프로젝트를 시작하기 전에 Node.js가 설치되어 있어야 합니다. Node.js는 공식 웹사이트에서 다운로드할 수 있습니다.

 

2. Create React App 설치

터미널을 열고 다음 명령어를 입력하여 Create React App을 전역으로 설치합니다. (이미 설치되어 있다면 이 단계는 건너뛸 수 있습니다.)

npm install -g create-react-app

 

3-1. 새 React 프로젝트 생성(CRA)

프로젝트를 생성하고자 하는 디렉토리로 이동한 다음, 다음 명령어를 실행하여 새 React 프로젝트를 생성합니다.

npx create-react-app my-app

여기서 my-app은 프로젝트의 이름으로, 원하는 이름으로 변경할 수 있습니다.

3-2. 새 React 프로젝트 생성(Vite)

[React]Vite, Redux

[React]Vite, Redux

 

4. 프로젝트 디렉토리로 이동

생성된 프로젝트 폴더로 이동합니다.

cd my-app

 

5. 개발 서버 시작

다음 명령어를 사용하여 개발 서버를 시작합니다.

npm start / npm run dev

이 명령을 실행하면 기본 브라우저에서 http://localhost:3000 주소로 자동으로 열리며, React 애플리케이션을 볼 수 있습니다.

 

6. 프로젝트 구조 이해

my-app 폴더 내부를 살펴보면, 주요 파일 및 폴더는 다음과 같습니다.

• public/: 정적 파일(HTML, 이미지 등)을 저장하는 폴더.
• src/: React 컴포넌트와 JavaScript 파일을 저장하는 폴더.
• package.json: 프로젝트의 메타데이터와 의존성을 관리하는 파일.

my-app/
├── public/
│   ├── index.html
│   ├── favicon.ico
│   └── manifest.json
├── src/
│   ├── assets/                  # 정적 자원
│   │   ├── img/
│   ├── components/              # 재사용 가능한 컴포넌트
│   │   ├── common/
│   │   │   ├── Header.jsx
│   │   │   ├── Footer.jsx
│   │   │   ├── Layout.jsx
│   │   │   ├── PlainLayout.jsx
│   │   ├── home/
│   │   │   ├── Card.jsx
│   │   ├── class/
│   │   │   ├── Card.jsx
│   ├── pages/                   # 페이지 컴포넌트
│   │   ├── home/
│   │   │   ├── HomePage.jsx
│   │   ├── class/
│   │   │   ├── ClassListPage.jsx
│   │   │   ├── ClassDetailPage.jsx
│   │   ├── board/
│   │   │   ├── BoardListPage.jsx
│   │   │   ├── BoardDetailPage.jsx
│   │   │   ├── BoardCreatePage.jsx
│   │   │   ├── BoardUpdatePage.jsx
│   ├── routes/                  # 라우팅
│   │   ├── route.jsx
│   │   ├── privateRoute.jsx
│   ├── app/                     # 리덕스
│   │   ├── store.js
│   ├── features/                # 리덕스
│   │   ├── auth/
│   │   │   ├── authSlice.js
│   │   ├── counter/
│   │   │   ├── counterSlice.js
│   ├── utils/                   # 유틸리티 함수
│   │   ├── validator.js
│   ├── hooks/                   # 커스텀 훅
│   │   ├── useCustomHook.js
│   ├── styles/                  # 스타일
│   │   ├── color.css
│   │   ├── global.css
│   ├── App.jsx
│   ├── main.jsx
├── .eslintrc.cjs                # ESLint 설정 파일
├── .gitignore
├── .prettierrc                  # Prettier 설정 파일
├── index.html                   # 애플리케이션의 진입점 HTML 파일 (Vite 설정 관련)
├── yarn.lock (또는 package-lock.json) # 의존성 트리 고정 파일
├── package.json                 # 프로젝트 메타데이터 및 의존성 정의
├── README.md
└── vite.config.js               # Vite 설정 파일

🛠주요 구성 요소 설명

public/: 정적 파일들을 보관하는 폴더

src/: 소스 코드가 위치하는 폴더

• assets/: 이미지 파일과 같은 정적 자원들을 보관합니다.
• components/: 재사용 가능한 React 컴포넌트들이 위치하며, 공통 컴포넌트와 페이지별(도메인별) 컴포넌트로 구분됩니다.
• pages/: 각각의 페이지 컴포넌트들이 위치하며, 홈, 클래스, 게시판 등 여러 페이지로 나뉩니다.
• routes/: 애플리케이션의 라우팅 설정 파일들이 위치합니다.
• app/: 리덕스 스토어 설정 파일이 위치합니다.
• features/: 리덕스 슬라이스들이 위치합니다.
• utils/: 유틸리티 함수들이 위치합니다. 프로젝트 전역에서 사용되는 특정 기능 및 작업을 수행하는데 도움을 주는 함수들이 위치합니다.
• hooks/: 커스텀 훅들이 위치합니다.
• styles/: 스타일 파일들이 위치합니다.
• App.jsx: 주요 React 컴포넌트로, 애플리케이션의 구조를 정의합니다.
• main.jsx: ReactDOM을 사용해 React 애플리케이션을 HTML DOM에 렌더링하는 파일입니다.

 

🛠.eslintrc.cjs

Triple에서 제공하는 기본 ESLint, 프론트엔드, Prettier 설정을 기반으로 한다.작성된 설정 파일은 Triple의 프리티어(Prettier) 설정을 자동으로 적용한다. (npm i @titicaca/eslint-config-triple)

module.exports = {
  root: true, // 이 설정 파일이 프로젝트의 루트에 있는지 여부를 나타낸다.
  env: {
    browser: true, // 브라우저 환경을 설정한다.
    es2021: true, // ECMAScript 2021(ES12) 환경을 설정한다.
  },
  extends: [
    "eslint:recommended", // ESLint에서 권장하는 기본 규칙을 사용한다.
    "@titicaca/eslint-config-triple", // Triple의 ESLint 기본 설정을 확장합니다.
    "@titicaca/eslint-config-triple/frontend", // Triple의 프론트엔드 설정을 확장합니다.
    "@titicaca/eslint-config-triple/prettier", // Triple의 Prettier 설정을 확장합니다.
    "plugin:react/recommended", // React 관련 권장 규칙을 사용한다.
    "plugin:prettier/recommended", // Prettier와 연동된 규칙을 사용한다.
    "plugin:react/jsx-runtime", // 새로운 JSX 변환을 지원하는 규칙을 사용한다.
    // 'plugin:react-hooks/recommended', // React Hooks 사용에 대한 권장 규칙을 사용한다.
  ],
  ignorePatterns: ["dist", ".eslintrc.cjs", "vite.config.js"], // ESLint가 무시할 파일 혹은 디렉토리를 설정한다.
  parserOptions: {
    ecmaFeatures: {
      jsx: true, // JSX를 파싱할 수 있게 설정한다.
    },
    ecmaVersion: 12, // ECMAScript 2021(버전 12) 문법을 사용한다.
    sourceType: "module", // ECMAScript 모듈을 사용한다.
  },
  settings: {
    react: {
      version: "detect", // 설치된 React 버전을 자동으로 감지한다.
    },
    "import/resolver": {
      node: {
        extensions: [".js", ".jsx", ".ts", ".tsx"], // 사용할 파일 확장자를 설정한다.
        paths: ["./src"], // import 경로의 기본 폴더를 설정한다.
      },
    },
  },
  plugins: ["react", "react-refresh"], // 사용될 ESLint 플러그인을 설정한다.
  rules: {
    "react/prop-types": "off", // PropTypes를 사용하지 않아도 경고나 오류를 발생시키지 않는다.
    "react/jsx-no-target-blank": "warn", // 관련 보안 경고를 유지한다.
    "react-refresh/only-export-components": [
      "warn", // React Refresh에서 컴포넌트만 내보내도록 경고한다.
      {
        allowConstantExport: true, // 상수로 내보내는 것을 허용한다.
      },
    ],
    "react/react-in-jsx-scope": "off", // React가 JSX 범위 내에 있어야 한다는 규칙을 비활성화한다.
    "import/order": [
      "error",
      {
        groups: [
          ["builtin", "external"],
          "internal",
          "parent",
          "sibling",
          "index",
        ],
        "newlines-between": "always",
      },
    ],
  },
};

 

🛠적용방법

ESLint 검사: npm run lint:es

ESLint 검사+자동 수정: npm run lint:es:fix

Prettier 검사: npx prettier —check .

Prettier 검사+자동 수정: npx prettier —write .

(VSCode에서 extension을 설치하면 즉각적으로 확인할 수 있다.)

 

7. 개발 시작

이제 기본 설정이 모두 완료되었으니, src/App.js 파일을 수정하여 개발을 시작할 수 있습니다.

이러한 단계를 통해 React 프로젝트를 쉽게 시작할 수 있습니다. 추가적으로 필요한 라이브러리나 도구들은 npm을 사용하여 설치할 수 있습니다.