React settings

안녕하세요. 오늘은 리액트(React) 적용방법을 알아볼게요.

 

 

리액트(React) 적용방법

 

 

우선 리액트를 적용하고자 하는 프로그램 터미널을 실행시킨 후  "npm create vite@lastest 폴더이름"을 작성하고 실행시켜요. 

 

폴더이름은 여러분들이 원하는 폴더명을 작성하시면 좋아요.

 

그리고 실행 확인 알림 메세지가 출력되는데요. y작성 후 실행시킵니다.

 

 

Q) npm create vite@lastest <폴더이름> 부분 의미

부분	의미
npm	Node.js의 패키지 관리자 (Node Package Manager)
create vite@latest	vite 프로젝트 생성 도구(create-vite)의 최신 버전(@latest)을 실행
<폴더이름>	새로 만들 프로젝트(폴더)의 이름

 

 

 

다음 Select a framwork가 리스트형식으로 출력이 되는데요.

 

마우스로 클릭이 되지 않고 오직 키보드 위, 아래 버튼으로 선택할 수 있어요.

 

저희는 React 적용을 위해 React를 선택하고 다음으로 넘어갈게요.

 

 

 

다음 Select a variant 중 본인이 적용할 형식을 동일하게 선택하시면 되는데요.

 

저는 TypeScript를 선택하고 넘어가겠어요.

 

 

 

 

User rolldown-vite는 no, Install with npm and start now는 yes로 처리해 주시면

 

 

 

다음과 같이 주소값이 나오는데, 이 주소값은 ctrl + 클릭해주세요.

 

 

 

Q) User rolldown-vite & Install with npm and start now 문구 의미 선택 시 동작

 

문구	의미	선택적 동작
Install with npm and start now?	npm install 및 개발 서버 자동 실행 여부	Yes → 자동 설치 및 실행
User rolldown-vite?	Vite의 특정 템플릿(rolldown-vite) 사용할지 여부	No → 기본 React + Vite 설정 사용

 

 

 

 

 

 

그러면 인터넷 브라우저창이 열리면서 기본설정이 된 리엑트 화면이 나올 거예요.

 

 

 

그리고 프로그램 내 폴더(Explorer)에 본인이 작성한 리액트 폴더가 생성되어 있는지 확인해 주세요.

 

 

 

여기까지 간단한 세팅 방법에 알아봤는데요.

 

아래는 리액트 설치법 및 폴더 내 주요 파일내용 및 세팅방법 정리본이에요.

 

// == vite를 사용한 리액트 프로젝트 생성 ==

//? cf) npm 7+ (버전 확인 필수)
// node -v
// npm -v

//? 리액트 프로젝트 생성
// npm create vite@latest (프로젝트명첨부)

//! 프로젝트 설정 순서 (터미널에서 대화형으로 진행)
// Project name: 프로젝트 폴더명 
// Package name: package.json의 "name" 속성값 으로 지정 (소문자 작성!!)
// Select a framework: React
// Select a variant: TypeScript

// >> 명령어 실행 폴더 내에 Project name의 리액트(ts) 프로젝트가 생성
//    : 프로젝트 폴더로 이동 (cd Project-name입력 )

//! 프로젝트 초기 설정(★프로젝트 진입점에서 실행!!★)
// package.json에 명시된 의존성 설치 (node_modules 생성)
// : npm install

// 개발 서버 실행 (node_modules 폴더가 있는 프로젝트 최상단에서 실행)
// : npm run dev
// >> 브라우저에 http://localhost:5173/ 열기 

//# Vite로 생성된 React 프로젝트 구조
// 1. node_modules: 설치된 패키지
// 2. public: 정적 파일
// 3. src: source, 실제 코드 작성 폴더
//    - App.tsx: 주요 컴포넌트
//    - main.tsx: 앱 진입점
// 4. index.html: HTML 템플릿
//    : React는 S(single)P(page)A(application)
// 5. package.json: 프로젝트 정보 & 의존성
// 6. tsconfig.json: Typescript 설정
// 7. vite.config.ts: Vite 설정

//# 자주 사용하는 명령어
// 1. npm run dev: 개발 서버 실행(핫 리로딩 포함)

// cf) 핫 리로딩
// : 앱을 처음부터 다시 시작하지 않고
//   , 새로운 코드 변경에 따른 해당 변경 사항만 실시간 반영하는 기능

// 2. npm run build: 프로덕션 빌드 생성 (dist 폴더)
// 3. npm run preview: 빌드된 앱 미리보기 (build 후 사용 가능)

//* React 실행 시 자주 발생하는 에러
// 1. npm is not recognized
// : npm install
// 2. Permission denied(macOS)
// : 명령어 앞에 sudo 추가 || 권한 설정 확인

//# 1. package.json
/*
{
  "name": "korea-sleeptech-react",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": { //! npm run 이후의 명령어
    "dev": "vite", 
    "build": "tsc -b && vite build",
    "lint": "eslint .",
    "preview": "vite preview"
  },
  "dependencies": { //! 애플리케이션 동작과 연관된 의존성 라이브러리
    "react": "^19.0.0", //? 리액트 라이브러리
    "react-dom": "^19.0.0" //? 실제 DOM과 연결해주는 라이브러리
  },
  "devDependencies": { //! 애플리케이션 동작과는 무관하지만 개발 시 필요한 의존성 라이브러리 
    "@eslint/js": "^9.21.0",
    "@types/react": "^19.0.10", //? TypeScript용 리액트 타입 정의
    "@types/react-dom": "^19.0.4",
    "@vitejs/plugin-react": "^4.3.4", //? React 플러그링 (JSX 지원)
    "eslint": "^9.21.0",
    "eslint-plugin-react-hooks": "^5.1.0",
    "eslint-plugin-react-refresh": "^0.4.19",
    "globals": "^15.15.0",
    "typescript": "~5.7.2", //? TypeScript 컴파일러
    "typescript-eslint": "^8.24.1",
    "vite": "^6.2.0" //? Vite 번들러
  }
}
*/ 

//# 2. tsconfig.app.json
// : TypeScript 설정 파일

//# 3. vite.config.ts
// : Vite 설정 파일
// - Vite 프로젝트의 빌드/개발 설정 담당
// - 플러그인, 경로 alias, 서버 설정 등을 설정 가능

/*
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()], //! React JSX를 인식하기 위한 플러그인
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'), //! @ 기호를 src 폴더로 인식
    }
  }
})
*/

// src/pages/homePage/index.tsx
// @/pages/homePage/index.tsx

//# 4. index.html
// : 진입점 HTML 템플릿
// - React 앱을 실행할 HTML 뼈대를 제공
// - 개발 중에도 해당 파일을 기준으로 동작 (Vite가 해당 파일을 분석하여 앱 실행)

 

 

 

 

여기까지 리액트 적용방법을 알아봤는데요.

 

처음 리액트를 설치법을 배운다고 할 때 브라우저에 들어가서 하는 줄 알았는데 터미널에서 생성한다는 것이 신기했어요.