[React] 리액트(React) 개발 환경 셋팅하기 - win10

갑자기 리액트 개발에도 참여하게 되어 React 공부를 시작했습니다.

 

백엔드개발자라면 프론트개발에 대해 어느정도 할 줄 알아야한다고 생각했는데

 

이렇게 또 기회가 오네요 하하하하하하하하하

 

막상 업무를 받으니 하기 귀찮

 

먼저 환경 설정부터 시작하겠습니다.

 

 

 

 

1. Node.js (최신버전) 설치하기

 

 

Node.js는 Chrome V8 Javascript 엔진으로 만들어진 Javascript 런타임입니다.

 

※ React 개발 환경 셋팅하는데 Node.js를 왜 설치하나요?

React를 사용하기 위해 Node.js가 반드시 필요한 것은 아닙니다.  Node.js는 JavaScript 런타임 환경으로, 서버 측 애플리케이션 개발을 위해 사용됩니다. React와 Node.js는 다른 목적을 가진 도구이지만, React 앱을 개발할 때 Node.js를 사용하는 이유가 있습니다.

1. Build 및 개발 도구

 React 앱은 일반적으로 JSX(JavaScript XML)로 작성되며, 이 JSX 코드를 일반 JavaScript 코드로 변환해야 합니다. 또한 React 컴포넌트를 번들링하고 개발 서버를 실행하는 데 Node.js 기반의 도구가 사용됩니다. 예를 들어, Create React App과 같은 도구는 Node.js를 기반으로 하며 React 앱을 빠르고 효율적으로 개발할 수 있게 도와줍니다.

2. 서버 측 렌더링(SSR)

 일부 React 앱은 서버 측 렌더링(SSR)을 사용하여 초기 로드 속도를 향상시킵니다. SSR은 Node.js 서버에서 React 컴포넌트를 실행하고 HTML을 생성한 다음 클라이언트에게 전송하는 방식으로 작동합니다. 이를 통해 검색 엔진 최적화(SEO) 및 초기 로딩 성능 향상을 달성할 수 있습니다.

3. API 통신

 대부분의 React 앱은 서버와 데이터를 주고받아야 합니다. Node.js는 서버 측 로직을 작성하고 API 엔드포인트를 만드는 데 사용할 수 있습니다. 이러한 API는 React 앱에서 데이터를 요청하고 업데이트하는 데 사용됩니다.

4. 배포 및 호스팅

 Node.js는 React 앱을 서버에 배포하고 호스팅하는 데도 사용됩니다. 서버 측 로직을 실행하고 React 앱을 제공하는 데 도움이 됩니다.

따라서 React 앱을 개발하고 배포할 때 Node.js를 설치하는 것은 중요합니다. Node.js는 JavaScript를 실행하고 서버 측 작업을 수행하는 환경을 제공하여 React 앱의 개발과 실행을 용이하게 합니다.

조금 더 자세히 말하자면, Node.js는 설치하는 경우 NPM(Node Package Manager)이 같이 설치되는데 이 NPM이란 것을 통해 React 개발에 필요한 다양한 모듈들을 다운받아 사용할 수 있습니다.

 

https://nodejs.org/ko

Node.js

 위 사이트에서 Node.js를 다운받아 설치합니다. LTS 버전으로 설치하는 것을 추천합니다.

 

cmd창에서 버전확인하기

 

 

 

2. Visual Studio Code (VS Code) 설치

 

 

 

React 개발에 가장 많이 사용되는 IDE(통합 개발 환경)인 VS Code를 설치합니다.

 

https://code.visualstudio.com/?wt.mc_id=vscom_downloads 

Visual Studio Code - Code Editing. Redefined

 

 

 

3. React 프로젝트 생성하기

 

 

VS Code를 실행 → 상단 "File" 탭  → "Open Folder .." → 원하는 위치에 프로젝트 (빈)폴더 생성 → "폴더 선택" → 상단 'Terminal' 탭 → 'New Terminal'

 

저는 'React-project' 라는 빈폴더 생성하고 열었습니다.

 

 

 

1)  터미널에 아래 명령어 입력하기

 

npx create-react-app "폴더명"

 

 

React-project 폴더 안에 'hello-react' 프로젝트가 생성되있는걸 확인!

 

해당 프로젝트 안에 들어가봅니다.

 

 

2) 프로젝트 구조 알아보기

 

 

 

 

node_modules : 라이브러리 모음 폴더
public : 이미지 파일과 같은 static 파일 보관함(빌드 시에 압축되지 않음)
src : 소스 코드 보관함.
src - App.js : 메인페이지에 들어갈 HTML을 작성하는 곳

 

 

 

3) 프로젝트 실행시키기

 

npm start

 

 

http://localhost:3000/ 이 자동으로 연결됩니다!

 

이것이 React Hello World?

 

 

아까 src - App.js가 메인페이지에 들어갈 HTML을 작성하는 곳이라고 말씀드렸는데요

 

 

<p>
 Hello World!!
</p>

위 코드를 아래와 같이 작성한 뒤 'Ctrl+S'(저장) 을 눌러봅시다!

 

 

저장할 때 마다 바로바로 적용됩니다!!

 

...끝!!