리엑트(react.js) 개발환경 세팅

August 12, 2024

리엑트(ReactJS) 개발환경 세팅

리엑트 개발환경을 세팅하며 필수 프로그램이 무엇이 있는지 알아보자.

브라우저 및 에디터 설치

많은 브라우저 중 가장 많이 사용되는 구글의 크롬을 설치한다.
코드를 작성하기 위한 프로그램은 MS사의 vscode를 사용한다.

Node.js 설치

우리가 작성하는 자바스크립트 코드는 Node라는 도구에 의해서 실행이됨. LTS 버전을 설치
링크: Node.js 설치
설치 확인은 터미널에서 node -v 명령어 입력 후 확인이 가능함

yarn 설치

3-1) 터미널에서 yarn 설치

npm의 역할과 동일하지만 npm보다 조금 성능적으로 개선된 yarn을 사용함 아래의 명령어를 터미널에 입력
```
npm install -g yarn
```

3-2) yarn 설치 확인 (버전 확인)

yarn -v

3-3) yarn으로 패키지 설치 방법

yarn add [설치할 패키지 이름]
// 예시: yarn add react-router-dom

프로젝트 생성

4-1) CRA로 리엑트 프로젝트 셋업

yarn create react-app [프로잭트 명]

4-2) 생성한 리엑트 실행

// 현재 디렉토리 위치에 따라 다름
cd [생성한 프로젝트 명] 

// 현재 디렉토리 위치가 생성한 프로젝트가 맞으면 해당 명령어 입력
yarn start 

Vite로 리엑트 프로젝트 셋업

5-1) Vite 생성 명령어

yarn create vite [프로젝트 명] --template react

5-2) 생성한 Vite 실행

cd [생성한 프로젝트 명]
yarn
yarn dev

경로별칭 지정

파일을 만들다보면, 상대경로 때문에 힘든 상황이 발생할 수 있으므로 이를 방지하기 위해 경로별칭 옵션을 성정한다.

6-1) vite.config.js 파일 수정

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: [
      {
        find: "@",
        replacement: "/src",
      },
    ],
  },
});

6-2) jsconfig.json 파일 생성 후 작성

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

eslint.config.js 설정

작업 중 props 부분에서 문제가 없어도 계속 빨간 줄이 노출이되어 아래의 구문을 eslint.config.js 에 'react/prop-types': 'off',을 넣어줘서 해결함

import js from '@eslint/js'
import globals from 'globals'
import react from 'eslint-plugin-react'
import reactHooks from 'eslint-plugin-react-hooks'
import reactRefresh from 'eslint-plugin-react-refresh'

export default [
  {
    files: ['**/*.{js,jsx}'],
    ignores: ['dist'],
    languageOptions: {
      ecmaVersion: 2020,
      globals: globals.browser,
      parserOptions: {
        ecmaVersion: 'latest',
        ecmaFeatures: { jsx: true },
        sourceType: 'module',
      },
    },
    settings: { react: { version: '18.3' } },
    plugins: {
      react,
      'react-hooks': reactHooks,
      'react-refresh': reactRefresh,
    },
    rules: {
      ...js.configs.recommended.rules,
      ...react.configs.recommended.rules,
      ...react.configs['jsx-runtime'].rules,
      ...reactHooks.configs.recommended.rules,
      'react/jsx-no-target-blank': 'off',
      'react-refresh/only-export-components': [
        'warn',
        { allowConstantExport: true },
      ],
      'react/prop-types': 'off',
    },
  },
]

마무리

이전에 vue.js의 개발환경 세팅 및 실행할 때 디렉토리의 위치를 맞추지 못해서 고생했던 기억이 있다. react도 디렉토리의 위치에 맞춰 프로젝트를 실행해야 오류가 없으며, 명령어를 잘 입력하도록 하자!

Twitter Facebook LinkedIn

RARRIT