[React] 프론트엔드 프로젝트 초기 세팅 (w/ 웹스톰)

오늘은 웹스톰에서의 React 프로젝트 초기세팅에 대해서 알아보려고 합니다👩🏻‍💻🎀

 

그럼 바로 시작해봅시당

 

 

그전에!!!!!!!

React를 사용하기 위해서는 node와 npm이 설치되어 있어야 하니

아래의 명령어로 확인해보시고 없다면 설치를 부탁드립니다.

# node가 설치되어있다면 해당 명령어를 입력했을 때 node.js의 버전이 나오게 됩니다.
node -v

# npm의 버전을 확인하는 명령어
npm -v

 

 

 

0. 깃허브 repository 생성 후 웹스톰에서 열기

개인 프로젝트를 할 때도 협업을 진행할 때도 깃허브는 굉장히 유용하므로 사용하는 것을 추천 아니 강요합니다.

 

 

아래와 같이 repository를 생성하였다면

 

 

웹스톰 상단탭에서 파일>새로만들기>버전 관리에 있는 프로젝트... 로 깃허브에 있는 레포를 받아올 수 있습니다.

 

 

그리고 잘 받아오셨다면 아래와 같은 화면을 확인하실 수 있습니다.

(README 같은 거 보이시죠!!)

 

 

 

1. Create React App으로 프로젝트 생성하기

그럼 이제 본격적으로 react 프로젝트를 만들어줄건데용

 

CRA는 사용했을 때 리액트 프로젝트 초기 설정을 자동으로 처리해주기 때문에 굉장히 편리한 도구입니당

 

 

이제 터미널을 켜서 아래의 명령을 입력하여 리액트 프로젝트를 생성해줍니다.

npx create-react-app .

 

 

그리고 이것저것 자동으로 설치가 되고 💫해피 해킹!💫이 뜨면 프로젝트가 정상적으로 생성되었음을 확인할 수 있습니다.

 

 

그리고 터미널에 npm start를 입력했을 때 아래의 창에 들어가진다면 아주아주 잘 생성이 된 것입니다.

(터미널에서 control + c 누르면 종료)

 

 

 

2. 불필요한 파일 및 코드 제거

불필요한 파일 및 코드 제거는 .. 아래의 글에 아주 자세히 나와있습미다 히히 참고 부탁드려용

 

[리액트react] 프로젝트 초기 세팅, 불필요한 코드 지우기

 

 

 

3. ESLint와 Prettier 설정

🍥 ESLint 설정

먼저 린팅이란 코드내에 있는 에러를 찾아내서 명시하는 작업을 말하는데, ESLint는 Ecma Script와 Lint를 합친 것으로 쉽게 말해 자바스크립트 코드의 에러를 표시해주는 것입니다!

 

 

1. 터미널을 통해 ESLint 설치

npm init @eslint/config

 

 

2. 위의 명령어를 입력하면 아래와 같은 질문들을 통해서 eslint.config.mjs 파일이 생성되고 eslint가 설치됩니다!

eslint/config 첫 번째 화면

 

eslint/config 두 번째 화면

 

eslint/config 세 번째 화면

 

eslint/config 네 번째 화면

 

eslint/config 다섯 번째 화면 (타입스크립트를 쓸 것인가?)

 

eslint/config 여섯 번째 화면 (자바스크립트를 어느 환경에서 실행할 것인지)

 

eslint/config 일곱 번째 화면 (eslint를 최신화 할 것인가?)

 

eslint/config 여덟 번째 화면 (최신화한 eslint 파일을 어떤 패키지 매니저로 설치할 것인가?)

 

 

3. 생성된 eslint.config.mjs 파일명을 .eslintrc.js로 바꾸고, 파일 안에 필요한 custom eslint rule을 추가합니다. (자유롭게 필요한 rule을 추가하시면 됩니다.)

module.exports = {
  // ESLint가 인식할 환경을 설정합니다.
  env: {
    browser: true, // 브라우저 환경에서 동작하는 코드
    node: true,    // Node.js 환경에서 동작하는 코드
  },
  // 기본으로 사용할 규칙 세트를 설정합니다.
  extends: [
    'eslint:recommended',        // ESLint의 기본 추천 규칙
    'plugin:react/recommended',  // React의 기본 추천 규칙
    'airbnb',                    // Airbnb 스타일 가이드
    'plugin:prettier/recommended', // Prettier와 ESLint를 통합한 추천 규칙
  ],
  parserOptions: {
    ecmaFeatures: {
      jsx: true, // JSX 구문을 파싱할 수 있도록 설정
    },
  },
  globals: {
    browser: 'readonly', // 'browser'라는 전역 변수를 읽기 전용으로 설정
  },
  plugins: [
    'react',   // React 관련 linting 규칙을 사용
    'prettier' // Prettier 관련 linting 규칙을 사용
  ],
  rules: {
    // Prettier 규칙을 위반한 경우, ESLint에서 오류로 처리
    'prettier/prettier': 'error',
    // JSX에 React가 필요하지 않으므로 비활성화
    'react/react-in-jsx-scope': 'off',
    // Stateless 함수형 컴포넌트를 권장하지 않으므로 비활성화
    'react/prefer-stateless-function': 'off',
    // JSX 파일 확장자를 .js, .jsx, .ts, .tsx로 허용
    'react/jsx-filename-extension': [
      'error',
      { extensions: ['.js', '.jsx', '.ts', '.tsx'] },
    ],
    // JSX에서 한 줄에 하나의 표현식을 강제하지 않음
    'react/jsx-one-expression-per-line': 'off',
    // 중첩된 삼항 연산자를 사용해도 오류가 발생하지 않음
    'no-nested-ternary': 'off',
    // PropTypes 검사를 비활성화
    'react/prop-types': 'off',
    // 의존성 파일 검사 비활성화
    'import/no-extraneous-dependencies': 'off',
    // 화살표 함수의 본문을 항상 중괄호로 감싸야 함
    'arrow-body-style': ['error', 'always'],
    // 함수형 컴포넌트 정의를 화살표 함수로 강제하지 않음
    'react/function-component-definition': [
      'off',
      {
        namedComponents: 'arrow-function', // 이름이 있는 컴포넌트는 화살표 함수로 정의
        unnamedComponents: 'arrow-function', // 이름이 없는 컴포넌트도 화살표 함수로 정의
      },
    ],
    // 문자열에 큰따옴표 사용을 강제
    quotes: ['error', 'double'],
  },
};

 

 

4.  설정 > 언어 및 프레임워크 > JavaScript > 코드 품질 도구 > ESLint에 들어가서 'ESLint 비활성화'를 '수동 ESLint 구성'으로 바꾸어 줍니다.

 

ESLint는 끝!😎

 

 

 

🍥 Prettier 설정

Prettier는 일관성있는 코드 스타일을 유지할 수 있게 도와주는 툴입니다!
예를 들면 줄 바꿈, 공백, 들여 쓰기 등과 같은 스타일을 교정해주는 역할을 합니당

 

 

1. 터미널을 통해 Prettier 설치

npm i -D prettier

 

설치를 하게 되면 package.json에 아래와 같이 prettier가 추가되었음을 확인할 수 있습니다. (eslint도 마찬가지)

 

 

2. 루트폴더 가장 외부에 .prettierrc 파일을 생성해줍니다.

 

 

3. .prettierrc 파일 내부에 포멧팅 규칙을 작성해줍니다. 

// 예시입니다!

{
  // 각 탭의 폭을 2칸으로 설정합니다.
  "tabWidth": 2,
  
  // 코드 끝에 세미콜론을 추가합니다.
  "semi": true,
  
  // 문자열에 단일 인용부호(')를 사용합니다.
  "singleQuote": true,
  
  // 객체 리터럴, 배열, 함수 매개변수 등에서 후행 쉼표를 항상 추가합니다.
  "trailingComma": "all",
  
  // 코드의 최대 줄 길이를 80자로 설정합니다.
  "printWidth": 80,
  
  // 화살표 함수의 매개변수가 하나일 때에도 괄호를 항상 추가합니다.
  "arrowParens": "always"
}

 

 

4. 위와 같이 입력하게 되면 웹스톰 자체에서 '이 프로젝트에 Prettier 기반의 코드 스타일을 사용하시겠어요?'라고 물어보게 되는데 여기서 '예'를 눌러줍니다.

 

 

5. 설정 > 언어 및 프레임워크 > JavaScript > Prettier에 들어가서 'Prettier 비활성화'를 '수동 Prettier 구성'으로 바꾸어 줍니다. 

 

그리고 Prettier 패키지에서 node_modules 폴더 내의 Prettier 패키지를 선택합니다. (기본적으로 WebStorm은 node_modules에서 Prettier를 자동으로 감지하여 띄워줍니다! 웹스톰아 고마오🥺👍)

 

마지막으로 '저장 시 실행'을 체크해주면 control + s를 눌렀을 때 코드가 자동으로 코드 포맷팅을 적용하게 됩니다.

그럼 Prettier도 끝!🐰💭

 

 

🍥 ESLint 와 Prettier의 충돌 방지

1. Prettier와 ESLint 간의 충돌을 막기 위해 플러그인을 설치합니다.

npm install eslint-plugin-prettier eslint-config-prettier --save-dev

 

2. .eslintrc.js 파일을 열고 extends 배열에 아래의 내용을 추가합니다.

(위에서 사용했던 .eslintrc.js 파일을 그대로 사용했다면 추가할 필요가 없습니다.)

extends: ['eslint:recommended', 'plugin:react/recommended', 'prettier'],

 

3. 터미널 창에 아래의 명령어를 입력하고 아무 오류도 일어나지 않는다면 끝!🐰💭

npx eslint .

짠! 아무일도 업슴미다

 

+) 혹시 이러한 오류가 뜬다면 아래의 명령어를 터미널에 입력해주세요!

npm install --save-dev @babel/plugin-proposal-private-property-in-object

 

+ 추가(디렉토리 구조 및 컨벤션)

 

나중에 쓸게용 히히