React 설치 & 실행

React / 리액트

1. 정의

페이스북(메타)에서 개발한 자바스크립트 라이브러리(함수 집합)

---

2. 목적

1. 자바스크립트에서 부족한 UI 조작과 효율성 보완
2. 웹/앱에서 유연한 UI 제공
3. 트렌디한 변화에 빠르게 대응

---

3. 특징

1. 화면(HTML)을 컴포넌트(함수) 기반으로 구성, 재사용 가능
2. 가상 DOM: 가상(가짜) HTML 사용하여 성능 최적화, HTML의 존재하지 않는 마크업 생성
3. 훅(Hooks) 지원: 함수형 프로그래밍 방식으로 다양한 기능 지원

---

4. 사용처

1. 웹 개발: React
2. 앱 개발: React Native
3. 웹/앱 개발: React Native Web

• 현재 트렌드: Spring + React.js + Next.js

---

5. SPA vs MPA

SPA (Single Page Application)

1. HTML 한 장으로 구성, CSR(Client Side Rendering) 방식
2. 클라이언트 사이드 렌더링: 사용자 브라우저에서 화면 전환
3. 장점: 빠름, 서버 부담 적음
4. 단점: 최초 로딩 느림, SEO 불리

• 예시: React(web2)
• 단점 보완: 서버 사이드 렌더링 위해 Next.js 도입

MPA (Multi Page Application)

1. HTML 여러 장으로 구성, SSR(Server Side Rendering) 방식
2. 서버 사이드 렌더링: 서버가 제공하여 사용자 브라우저에서 화면 전환
3. 장점: SEO 유리, 초기 로딩 빠름, 필요한 데이터만 사용
4. 단점: 새로고침 시 깜빡거림, 서버 부담 큼

• 예시: JSP(web1)

---

React 환경 설치

Node.js

• 정의: 크롬 브라우저 엔진을 사용하여 HTML에 종속되지 않고 자체적으로 자바스크립트를 실행하는 라이브러리

NPM(Node Package Manager)

• Node.js 기반 라이브러리(패키지)를 설치/관리하는 프로그램 (자바의 Gradle과 유사)

---

1. Node.js 설치

1. 공식 홈페이지: https://nodejs.org/ko/
2. 설치 페이지: https://nodejs.org/ko/download
3. Windows 설치 프로그램(.msi) 클릭
   • 강의 기준: v22.19.0 LTS
4. 'node-v22.19.0-x64.msi' 실행
5. 설치 진행: [Next] → (I accept) 체크 → [Next] → (기본폴더) → [Next] → [Install]

---

2. Node.js 버전 확인

• CMD(명령 프롬프트) 실행 후:

node -v   # 출력 예: v22.19.0 (버전 20 이상 가능)
npm -v    # 출력 예: 10.9.3 (버전 8 이상 가능)
npx -v   # 출력 예: 10.9.3 (버전 8 이상 가능)

React 설치 / 프로젝트 구조

---

1. 설치할 폴더 이동

1. 설치할 폴더 생성/선정 후 이동
   • 강의 기준: 강의web2프로젝트 -> src -> main
2. src -> main 폴더 오른쪽 클릭 → [통합 터미널 열기] 클릭

---

2. Vite로 React 프로젝트 생성

1. 형식: npm create vite@latest 프로젝트명 --template react
2. 첫 설치 문제점
   • node -v에서 오류 발생 시: VSCode 종료 후 재실행
   • npm -v에서 오류 발생 시: 터미널 권한 변경
     • Get-ExecutionPolicy → Restricted 출력
     • Set-ExecutionPolicy -Scope CurrentUser -ExecutionPolicy RemoteSigned 입력
     • Get-ExecutionPolicy → RemoteSigned 출력

---

3. 설치 확인

Need to install the following packages:
create-vite@7.1.1
Ok to proceed? (y)

• 설치 패키지 확인 후 y 입력

---

4. 프레임워크 선택

        ◆  Select a framework:
        │  ○ Vanilla
        │  ○ Vue
        │  ● React
        │  ○ Preact
        │  ○ Lit
        │  ○ Svelte
        │  ○ Solid
        │  ○ Qwik
        │  ○ Angular
        │  ○ Marko
        │  ○ Others

• 방향키로 React 선택 후 엔터

---

5. 변형 선택

        ◆  Select a variant:
        │  ○ TypeScript
        │  ○ TypeScript + SWC
        │  ○ JavaScript
        │  ● JavaScript + SWC
        │  ○ React Router v7 ↗
        │  ○ TanStack Router ↗
        │  ○ RedwoodSDK ↗
        │  ○ RSC ↗

• 방향키로 JavaScript + SWC 선택 후 엔터

---

6. 최초 React 실행

1. 프로젝트 폴더 이동: cd reactapp
2. 라이브러리 설치: npm install
3. React 실행: npm run dev
4. 브라우저 접속: http://localhost:5173/

---

7. React 종료 방법

1. VSCode 종료
2. 터미널 종료
3. 터미널에서 Ctrl + C 입력 후 종료

---

8. 이미 설치된 React 재 실행

1. src -> main -> reactapp 폴더에서 [통합 터미널 열기]
2. npm run dev
3. 코드 변경 시 서버 실행 중이면 자동 리빌딩

---

9. React 프로젝트 구조

• node_modules : 설치된 라이브러리 (Git commit X)
  • 없으면 npm install로 자동 생성
• public : 정적 파일 (로고, 파비콘 등)
• src : 코드 파일
  • App.css : 컴포넌트 CSS, 삭제 가능
  • App.jsx : 최상위 컴포넌트, 삭제 가능
  • main.jsx : 최상위 컴포넌트를 렌더링하는 파일
  • main.css : 최상위 CSS 파일
  • 폴더 구성 예시
    • components
    • pages
    • api
• index.html : React(SPA) 최상위 HTML
• package.json : 프로젝트 설정 및 라이브러리 의존성 정보