[ 알아보자 ] React랑 Node.js(?)

React

React는 우리가 웹 애플리케이션을 만들 때 사용하는 프론트엔드 라이브러리로, UI를 효율적으로 구성해준다.

 

우리가 React 앱을 만들 때 단순히 브라우저에서 코드가 실행되는 것이 아니라, Node.js 기반의 개발 환경이 필요하다.

 

Node.js

React 앱을 만들 때, Node.js기반의 개발 환경이 필요하다.

 

1. 로컬 개발 서버 제공

 

React 프로젝트를 만들고 npm run start 명령어를 실행하면, Node.js가 로컬 환경에서 웹 서버를 실행한다.

이 서버는 localhost:3000에서 동작함.

 

기능

• 실시간으로 React코드를 브라우저에 표시
• 코드 변경 시에 자동으로 페이지 새로고침
• API요청 프록시 등 개발에 필요한 기능 제공

 

2. 개발 도구 및 편의성 제공

• npm(Node Package Manager) : React프로젝트의 의존성을 관리. 필요한 라이브러리를 쉽게 설치하도록 도움
• Webpack : JavaScript모듈 번들러
• ESLint : 코드 품질을 검사, 오류 검출

 

3. Create React App(CRA)

 

대부분의 React프로젝트는 Create React App이라는 도구를 사용해 시작

CRA는 Node.js기반으로 동작

React앱 개발에 필요한 모든 설정을 자동으로 구성해줌

 

 

개발 과정에도 도움을 주는 Node.js

1. 실시간 코드 반영
   코드를 수정하고 저장하면 Node.js가 변경을 감지하고 자동으로 브라우저를 업데이트
2. Hot Module Replacement (HMR)
   전체 페이지를 새로고침하지 않고 변경된 모듈만 교체할 수 있는 기능
3. 개발 서버
   실제 배포없이 로컬에서 앱을 테스트·개발 할 수 있도록 함

 

 

⬇️⬇️ 요약 ⬇️⬇️

 

1. React는 프론트엔드 UI 라이브러리지만, 개발 시 Node.js 기반 환경이 필요함

2. React 개발에서 Node.js의 세 가지 주요 역할

• 로컬 개발 서버 제공 (localhost:3000)
• 개발 도구 지원 (npm, Webpack, ESLint 등)
• Create React App(CRA)을 통한 프로젝트 설정 자동화

3. 실시간 코드 반영, Hot Module Replacement(HMR), 로컬 테스트 환경 제공 등으로 개발 과정을 효율적으로 만든다.

 

 

나 왜이렇게 모르는게 많아핑...