[#49] React 설정

React 설치(feat. Vite)

npm create vite

Project name: my-react-app
Select a framework: React
Select a variant: JavaScript

npm install
npm run dev

✨ Vite를 사용하는 이유

1. 빠른 개발 서버

Vite는 번들링 없이 네이티브 ES 모듈을 활용하여 매우 빠른 개발 서버를 제공

기존의 webpack 기반 도구(create-react-app)보다 훨씬 빠르게 시작

2. 빠른 핫 모듈 교체(HMR)

코드를 변경할 때 페이지가 거의 즉시 업데이트되어 개발 경험이 크게 향상

3. 최적화된 빌드

프로덕션 빌드 시 Rollup(JavaScript 파일들을 번들링해주는 툴)을 사용하여 최적화된 결과물을 생성

> 번들링: 여러 개의 파일을 한 덩어리로 묶어서, 최종적으로 브라우저가 쉽게 읽을 수 있게 만드는 과정

4. 간소화된 설정

기본 설정이 잘 되어 있어 추가 구성 없이도 바로 사용 가능

5. TypeScript 및 JSX 기본 지원

별도의 설정 없이 TypeScript와 JSX를 즉시 사용 가능

6. 다양한 프레임워크 템플릿

React 외에도 Vue, Preact, Lit 등 다양한 프레임워크 템플릿을 지원

7. 가벼운 의존성

create-react-app에 비해 의존성이 적어 설치 크기가 작음

8. 최신 웹 표준 활용

ES 모듈을 기반으로 하여 최신 웹 표준을 적극 활용

➡️ Vite는 특히 대규모 어플리케이션에서 개발 서버 시작 시간과 HMR 성능이 향상되어, 개발자 경험을 크게 개선

 

VSCode 확장 프로그램 설치

• ESLint: 코드 품질 및 스타일 검사
• Prettier - Code formatter: 코드 자동 포맷팅
• ES7+ React/Redux/React-Native snippets: React 관련 코드 스니펫
• Auto Import: 자동 임포트 기능
• Path Intellisense: 파일 경로 자동 완성
• IntelliSense for CSS: CSS 클래스 자동 완성

 

ESLint 및 Prettier 설정

1️⃣ ESLint 설정 파일 생성

• eslint.config.js
  • React v19에는 기본적으로 생성이 되어있음
  • prettier 설정 추가

import js from "@eslint/js";
import globals from "globals";
import reactHooks from "eslint-plugin-react-hooks";
import reactRefresh from "eslint-plugin-react-refresh";
import prettier from "eslint-plugin-prettier";
import prettierConfig from "eslint-config-prettier";

export default [
  { ignores: ["dist"] },
  prettierConfig, // ESLint와 Prettier 충돌 방지
  {
    files: ["**/*.{js,jsx}"],
    languageOptions: {
      ecmaVersion: 2020,
      globals: globals.browser,
      parserOptions: {
        ecmaVersion: "latest",
        ecmaFeatures: { jsx: true },
        sourceType: "module",
      },
    },
    plugins: {
      "react-hooks": reactHooks,
      "react-refresh": reactRefresh,
      prettier: prettier, // Prettier 플러그인 추가
    },
    rules: {
      ...js.configs.recommended.rules,
      ...reactHooks.configs.recommended.rules,
      "prettier/prettier": "error", // Prettier 규칙 위반 시 에러 표시
      "no-unused-vars": ["error", { varsIgnorePattern: "^[A-Z_]" }],
      "react-refresh/only-export-components": [
        "warn",
        { allowConstantExport: true },
      ],
    },
  },
];

✨ ESLint 역할

1. 코드 오류를 자동으로 감지
2. 코드 스타일을 일관되게 유지
3. 잠재적 문제를 사전에 발견
4. 개발자 간 코드 작성 규칙 통일

 

2️⃣ Prettier 설정 파일 생성

• .prettierrc

{
  "semi": false, // 세미콜론(;) 사용 안 함 - 문장 끝에 세미콜론을 자동으로 추가하지 않음
  "singleQuote": true, // 작은따옴표(') 사용 - 문자열을 큰따옴표("") 대신 작은따옴표('')로 표시
  "tabWidth": 2, // 탭 너비 2칸 - 들여쓰기에 사용되는 공백 수를 2칸으로 설정
  "trailingComma": "es5", // 후행 쉼표 설정 - ES5에서 허용하는 위치(객체, 배열 등)에 마지막 항목 뒤에 쉼표를 추가
  "printWidth": 100, // 줄 길이 제한 - 한 줄의 최대 길이를 100자로 설정하고, 이를 초과하면 자동으로 줄바꿈
  "bracketSpacing": true, // 중괄호 간격 - 객체 리터럴의 중괄호 내부에 공백을 넣음 (예: { foo: bar })
  "arrowParens": "avoid", // 화살표 함수 괄호 - 매개변수가 하나일 때 괄호를 생략 (예: x => x * 2)
  "endOfLine": "auto" // 줄 끝 문자 - 운영체제에 따라 자동으로 줄 끝 문자(LF 또는 CRLF)를 결정
}

✨ Prettier 역할

1. 코드 포맷팅 자동화: 들여쓰기, 줄 바꿈, 따옴표 스타일 등을 자동으로 정리
2. 일관된 코드 스타일 유지: 모든 개발자가 동일한 포맷 규칙을 따르도록 보장
3. 코드 리뷰 효율화: 스타일 관련 논쟁을 줄이고 코드 품질에 집중할 수 있게 함

 

3️⃣ eslint-plugin-prettier와 관련된 필요한 패키지 설치

• 통합 플러그인이 충돌 없이 사용 가능하게 해줌

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

 

4️⃣ VSCode Workspace 설정(Settings.json)

• .vscode/settings.json 생성

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "explorer.fileNesting.enabled": true,
  "explorer.fileNesting.patterns": {
    "package.json": ".gitignore, .prettierignore, .prettierrc, eslint.config.js, package-lock.json, vite.config.js"
  }
}

 

5️⃣ Prettier 무시 파일 생성

• .prettierignore

node_modules
dist
build
.vscode

 

6️⃣ package.json에 스크립트 추가

 "scripts": {
    "dev": "vite",
    "build": "vite build",
    "lint": "eslint . --config eslint.config.js --fix",
    "format": "prettier --write \"src/**/*.{js,jsx,css,json}\"",
    "preview": "vite preview"
  },

 

7️⃣ 설정 완료 후 확인

npm run lint
npm run format

npm run dev

구분	ESLint	Prettier	settings.json
목적	코드 오류, 문제 잡아줌 (문법 체크, 베스트 프랙티스)	코드 모양 통일 (들여쓰기, 세미콜론, 따옴표 통일)	에디터(=VS Code)의 동작 설정 (자동 저장, 포맷터 지정 등)
주요 기능	- 변수 안 쓰면 경고 - ; 안 찍으면 에러 - 타입 문제 지적	- 들여쓰기 2칸 - 작은따옴표(')로 통일 - 줄바꿈 스타일 맞춤	- 저장할 때 포맷팅 - Prettier를 기본 포맷터로 지정 - 특정 파일 무시
비유	코드 검사하는 선생님	코드 단장하는 스타일리스트	학교 규칙을 정리한 매뉴얼
필요성	버그 줄이고 품질 올림	코드 보기 쉽게 통일	개발환경 쾌적하게 맞춤

 

 

CSS 선택자 - :root, html, body, *

선택자	용도	주로 하는 일
:root	전역 변수 설정	CSS 변수(--color-main) 정의
html	기본 단위 설정	폰트 사이즈, 스크롤 관련
body	실제 페이지 영역, 전역 스타일 선언	레이아웃, 배경, 폰트 적용
*	모든 요소 초기화	margin, padding 제거

참고하기 > https://velog.io/@iamminzzy/CSS-selector-root-html-body-%EC%B0%A8%EC%9D%B4

 

폰트

강사님은 에스코어드림 폰트 추천!

https://noonnu.cc/font_page/223

눈누

 

nth-child vs nth-of-type

구분	설명	예시
nth-child(n)	부모의 모든 자식 기준으로 n번째 선택 (타입 안 봄)	div:nth-child(2) → 두 번째 자식이 어떤 태그든 고름
nth-of-type(n)	같은 타입(tag) 중에서 n번째 선택	div:nth-of-type(2) → div 중 두 번째 div만 고름

 

 

JavaScript에서 Object는 힙 영역

원시 타입 (Primitive)	스택 (Stack)	number, string, boolean, null, undefined, symbol, bigint
참조 타입 (Reference)	힙 (Heap)	object, array, function

예를 들어 버튼 클릭 이벤트로 함수를 실행할 때 함수 그 자체를 호출하는 게 아니라 함수의 메모리 주소를 통해 실행

 

StrictMode

개발 환경에서만 동작하는 검사기, 배포 환경에서는 영향 X

✅ 역할

• 코드 이상한 부분 감지
• 사이드 이펙트 체크
• 옛날 API 경고
• 개발 환경에서 렌더링을 2번 수행하여 문제 찾기

 

---

실습

React로 컴포넌트 분리하여 화면 만들어보기

import React, { useState } from 'react'
import Header from './components/Header'
import './index.css'
import InputField from './components/InputField'
import PostList from './components/PostList'

const App = () => {
  const list = ['송도', '인천', '서울', '부산']
  const [data, setData] = useState(list)
  console.log('data---', data)

  const changeList = () => {
    setData(prev => [...prev, '새로운 지역'])
  }

  return (
    <>
      <button onClick={changeList}>내용 변경</button>
      <Header />
      <InputField />
      <PostList data={data} />
    </>
  )
}

export default App