[React] 리액트 개요, 환경설정 | Nodejs 설치 | VS코드 확장플러그인 추천

index는 자동으로 열린다. 
자바스크립트를 통해서 root id를 찾아서 화면을 그리는게 다 만들어진다.  dom
싱글페이지 어플리케이션 , 파일들이 다 다운로드 되어지고 vitrual dom이 생성된다.  

axios 외부의 api를 요청하는 것 , 외부의 api 스프링쪽 연동을 하기위해 데이터를 가지고 와서 javascript로 구현한다. 

⚛️ 리액트(React) 핵심 요약

1. Virtual DOM (가상 돔) : 효율적인 화면 업데이트

실제 브라우저의 DOM을 직접 건드리지 않고, 메모리상에 띄운 자바스크립트 객체 복사본을 이용해 변경 사항을 적용하는 기술입니다.

• 동작 순서:
  1. Re-render: 데이터가 바뀌면 전체 UI를 가상 돔에 일단 새로 그립니다.
  2. Diffing (비교): 변경 전의 가상 돔과 변경 후의 가상 돔을 비교하여 바뀐 부분만 찾아냅니다.
  3. Reconciliation (재조정): 바뀐 부분만 실제 DOM에 한꺼번에 적용합니다 (Batch Update).
• 장점: 실제 DOM 조작을 최소화하여 레이아웃 계산을 줄이고 성능을 최적화합니다.

2. 컴포넌트(Component) 기반 구조

• 레고 블록: 전체 페이지를 독립적인 부품(컴포넌트)으로 쪼개서 만듭니다.
• 조합: 작은 컴포넌트들을 모아 더 큰 컴포넌트나 하나의 완성된 페이지를 구성합니다.

3. 재사용성 (Reusability)

• 독립성: 다른 모듈에 의존하지 않도록 설계하여 어디서든 다시 갖다 쓸 수 있습니다.
• 유지보수: 한 번 잘 만들어둔 컴포넌트를 여러 곳에서 공통으로 사용하므로, 수정이 쉽고 관리가 용이합니다.

Node.js 브라우저에 실행될 수 없는 로직들을 nodejs환경에서 실행될수 있게 하는 환경이다. 서버사이드측에서 실행될 수 있도록 해준다. 환경을 만든다. 

 

React 설치 

1.node.js 환경 설치

https://nodejs.org/en/download

Node.js — Download Node.js®

 

Node.js는 자바스크립트로 네트워크 애플리케이션을 개발할 수 있게 해주는 환경이다. 
npm(패키지 매니저)이란 외부라이브러리 의존성을 관리하고 편하게 설치 및 삭제까지 도와주는 역할을 한다. 

🛠️ VS Code 추천 확장 프로그램 (플러그인) 리스트

1. 코드 품질 및 포맷팅 (Lint & Format)

• ESLint: 코드를 작성하는 동안 실시간으로 에러나 문법 오류를 확인해 주는 도구입니다.
• Prettier - Code formatter: 코드를 정해진 스타일(들여쓰기, 따옴표 등)에 맞춰 자동으로 다듬어 줍니다.
• CSS Formatter: 설정된 코딩 컨벤션(규칙)에 맞춰 CSS 코드를 정렬해 줍니다.

2. 코드 자동 완성 (Snippets & Assist)

• Reactjs code snippets: 리액트 관련 코드를 빠르게 작성할 수 있도록 자동 완성 기능을 제공합니다.
• JavaScript (ES6) code snippets: 최신 자바스크립트(ES6) 문법의 자동 완성 기능을 제공합니다.
• vscode-styled-components: Ctrl + Space를 통해 스타일드 컴포넌트 내의 CSS 코드를 어시스트(자동 완성) 해줍니다.
• vscode-js-import: import 구문을 편리하게 작성할 수 있게 돕는 기능입니다. (제작자: wangtao0101)

3. 생산성 및 경로 관리

• Relative Path: 현재 파일 기준으로 상대 경로에 있는 파일 위치를 편하게 작성할 수 있게 돕습니다.
• Guides: 코드의 들여쓰기 라인을 시각적인 가이드라인으로 그려주어 가독성을 높여줍니다.

4. 개발 도구 및 테스트

• Thunder Client: VS Code 내부에서 바로 HTTP 요청(API 테스트)을 생성하고 테스트할 수 있는 도구입니다. (Postman과 유사한 기능)

⚡ React 프로젝트 설정 도구 비교: CRA vs Vite

리액트 프로젝트를 시작할 때 가장 고민되는 두 가지 도구인 **CRA(Create React App)**와 Vite의 차이점을 표로 정리해 보았습니다.

📊 비교 분석표

비교 항목	Create React App (CRA)	Vite
설정 (Configuration)	자동 설정 제공 (변경 시 eject 필요)	설정이 간단하고 커스터마이징이 쉬움
개발 서버 속도	상대적으로 느림	매우 빠른 HMR(핫 모듈 교체), 즉각적인 반응
빌드 시간	상대적으로 느림	최신 모듈 기반으로 빌드 및 성능 최적화가 빠름
빌드 도구	Webpack(웹팩) 사용	Rollup(롤업) 사용, 최적화 성능 우수
브라우저 호환성	모든 브라우저에서 안정적으로 작동	최신 브라우저 최적화 (구형 브라우저 호환성 주의)
플러그인	웹팩 플러그인 생태계 사용	전용 플러그인 시스템 및 다양한 확장성 지원

📦 CRA (Create React App)

"안정성이 제일 중요한 보편적인 프로젝트"

• 안정적이고 보편적인 React 설정이 필요할 때 적합합니다.
• 프로젝트가 아주 복잡하지 않거나, 기존의 방대한 React 생태계와 높은 호환성을 원할 때 좋은 선택입니다.
• 입문자가 환경 설정에 신경 쓰지 않고 공부에만 집중하고 싶을 때 추천합니다.

🚀 Vite (비트)

"빠른 개발 속도와 성능 최적화가 필요한 프로젝트"

• 최신 웹 기술을 활용하여 빌드 및 개발 환경의 성능을 극대화하고 싶을 때 좋습니다.
• 프로젝트 규모가 커질수록 개발 속도(HMR)와 빌드 시간이 중요한데, 이때 Vite가 압도적인 효율을 보여줍니다.
• 빠른 피드백과 가벼운 설정 시스템을 선호하는 숙련된 개발자에게 추천합니다.

---

✅ 마무리 요약

과거에는 CRA가 표준이었으나, 최근에는 압도적인 속도를 자랑하는 Vite가 차세대 표준으로 자리 잡고 있습니다. 특별히 구형 브라우저 대응이 필수적인 경우가 아니라면, 쾌적한 개발 경험을 위해 Vite로 시작하는 걸 추천합니다.

프로젝트 생성 방법

npx create-react-app

 

create-react-app 은 React의 Boiler Plate 이다. 보일러 플레이트 

 반복적인 코드(Connection, Statement, ResultSet 등)를 줄여주는 Boilerplate(보일러플레이트) , Lombok이 해준다. 

---

react에서 powershell 이 열리지 않을 때 powershell 관리자권한으로 열고 아래 명령어를 실행해준다. 

Set-ExecutionPolicy RemoteSigned -Scope CurrentUser

모두 예(A)를 누르면 React 창에서 파워셸이 정상적으로 열린다. 

react 프로젝트 생성방법 #1 CRA

npx create-react-app@latest step01

연습용 5173 배포용은 4173

---

React 프로젝트 생성방법 #2  vite로 설치하기

npm create vite@latest step01-vite

React
JavaScript
No

PS C:\Edu\React\React_work> cd .\step01-vite\
PS C:\Edu\React\React_work\step01-vite> npm i

npm run dev

React vite 프로젝트 생성완료