MacOS M2 기준으로 작성되었습니다.

설치

Node.js 설치

• (Homebrew 설치 후)
  - 터미널에서brew install node입력하여 설치
  - node -v 입력하여 제대로 설치되었는지 확인 (v20.6.0)
  

Create React App

• VSCode 실행 (터미널 띄우기 : Ctrl + Shift + backtick)
  npx creat-react-app <project name> //현재 디렉토리에 리액트 앱 만들기
• 리액트 실행
  npm start

• 최종 실행 화면![[Pasted image 20230903153010.png]]

VSCode 설치

• 🔗홈페이지에서 MacOS 다운로드

---

VSCode Extentions 설치

• Prettier

  • 코드 스타일 정리 도구로 들여쓰기, 줄 바꿈, 공백, 주석, 따옴표 등의 형식을 지켜주며 가독성을 향상시켜 준다.
    1. VSCode > Extensions 탭 > Prettier 검색하여 다운로드![[Pasted image 20230908101939.png]]
    2. Ctrl + , 로 Settings 창 열어서 formatter 검색
       • Deafault Formatter (기본 포매터) : Prettier로 변경
       • Format On Paste : 붙여 쓰기시 자동 포매팅
       • Format On Save : 저장시 자동 포매팅![[Pasted image 20230908102751.png]]
    3. 디렉토리에 .prettierrc 파일 생성 ![[Screenshot 2023-09-10 at 11.50.04 AM.png]]
    4. 코드 스타일 설정하기
       • singleQuote : 작은따옴표 사용 여부 (false : 큰따옴표)
       • Semi : 세미콜론 사용 여부
       • useTabs, tabWidth : 탭 사용 여부, 들여쓰기 너비
       • printWidth : 출력 너비

       {
       	"singleQuote": true,
       	"semi": true,
       	"useTabs": false,
       	"tabWidth": 2,
       	"printWidth": 120
       }

• ESLint

  • 자바스크립트 코드의 문법 및 코딩 스타일 검사 도구
  • Extentions 탭에서 검색하여 다운로드
  • 터미널을 통해 다운로드, 실행
    1. npm -g add eslint ESLint 다운로드
    2. eslint --init ESLint 시작
    3. 환경에 따라 엔터로 설정 설정값 하단 이미지 참고![[Pasted image 20230908111416.png]]
    • How would you like to use ESlint ? : 구문, 문제, 스타일
    • What type of modiles does your project use? : 사용하는 모듈
    • Which framework does your project use? : 사용하는 프레임워크
    • Does your project use TypeScript? : 타입스크립트 사용 여부
    • Where does your code run? : 코드가 어디에서 실행되는가
    • How would you like to define a style for your project? : 프로젝트 스타일 정의 방법
    • Which style guide do you want to follow? : 스타일 가이드
    • What format do you want your config file to be in? : config파일의 형식
    • Which package manager do you want to use? : 사용하려는 패키지 매니저
      

• ES7+ React/Redux/React-Native snippets

  • 문법 자동 완성 플러그인, 단축 트리거 입력을 통해 자주 사용하는 코드를 빠르게 입력할 수 있다
  • Extentions 탭에서 다운로드 및 활성화
  • 🔗단축 트리거 목록, cmd + shitf + R 로 검색 가능

---

에러 발생시 해결 방법

ESLint, Prettier 충돌

• 설치 완료시 충돌 발생 => Prettier과 충돌하는 ESLint 규칙을 꺼주는 패키지 실행
  1. npm install eslint-config-prettier 입력
  2. .eslintrc.js 파일에 아래 extends 추가

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

ESLint 업데이트

• [eslint] Failed to load plugin 'prettier' declared in '.eslintrc.js': Cannot find module 'eslint-plugin-prettier'
  • 터미널에 입력하여 플러그인 업데이트
    • npm i eslint-plugin-prettier@latest -D

ESLint 에러 => .eslintrc.js 파일 조건 추가

1. React must be in scope when using JSX
   • 해당 라인에 import React from 'react'; 추가
   • 또는 eslint.js파일에 아래 조건 추가
     • rules: { 'react/react-in-jsx-scope':'off'}
2. 'list' is missing in props validation
   • 조건 추가 rules: {'react/prop-types': 'off'}
3. Missing JSDoc comment
   • 조건 추가 rules: {'require-jsdoc' : 0}

rules: {
'react/react-in-jsx-scope': 'off',
'react/prop-types': 'off',
'requre-jsdoc': 0,
},

• 크롬 리액트 익스텐션 설치하기
  • 🔗React Developer Tools