[React] 개발자 환경 구축: Node.js, Create React App

💡React

---

React는 사용자 인터페이스(UI) 개발에 초점을 맞춘 JavaScript 프론트엔드 라이브러리로, 복잡하고 동적인 웹 페이지를 개발하는 데에 용이하다.

간단하게 말하면 React는 사용자 정의 태그를 만드는 기술이라고 할 수 있다.

실시간 대시보드, 소셜 미디어 애플리케이션, 전자상거래 플랫폼 등 다양한 분야에서 널리 사용된다.

 

React의 특징 및 장점

React는 Facebook(현 Meta)에서 개발한 JavaScript UI 라이브러리이다.

Facebook은 매우 다양한 컴포넌트와 복잡한 사용자 인터페이스를 가지고 있는데, 이러한 복잡성에 대응하기 위해 개발된 것이 React이다.

• 가상 DOM(Virtual DOM): React는 가상 DOM을 사용하여 UI 업데이트를 처리한다. 이를 통해 최소한의 DOM 조작만으로도 UI 업데이트가 가능하다.
• 컴포넌트 기반 아키텍처: React는 컴포넌트 기반 아키텍처를 채택하고 있어 UI를 작은 단위로 분리하여 개발할 수 있다. 이는 재사용성과 유지보수성을 높여준다.
• JSX 문법: React는 자바스크립트와 XML을 조합한 JSX 문법을 사용한다. 이는 UI를 선언적으로 작성할 수 있게 해 주어 가독성을 높이고, 개발자가 컴포넌트의 렌더링을 직관적으로 이해할 수 있도록 도와준다.
• 다양한 라이브러리와의 호환성: React는 다른 라이브러리나 프레임워크와의 높은 호환성을 가지고 있어, 리액트 애플리케이션을 개발할 때 다양한 라이브러리를 함께 사용할 수 있다.

 

React를 왜 사용할까?

1. React는 가볍고 유연하여 기존 프로젝트에 쉽게 통합할 수 있으며, 다른 프레임워크나 라이브러리와 혼용할 수 있다.

2. 활발한 커뮤니티와 생태계를 가지고 있어 문제 해결과 지원이 용이하다.

3. React를 활용하여 개발된 UI는 성능이 우수하며, 컴포넌트 기반 아키텍처를 통해 개발 생산성을 높일 수 있다.

 

온라인 플레이그라운드

https://codesandbox.io/p/sandbox/react-new?

https://codesandbox.io/p/sandbox/react-new?

온라인 서비스를 통해 내 컴퓨터에 React 개발환경을 세팅하지 않고 React를 이용할 수 있다.

CodePen, CodeSandbox 또는 Stackblitz에서 리액트를 사용할 수 있다.

 

💡Node.js

---

Node.js는 자바스크립트로 작성된 프로그램을 운영 체제 상에서 일반 애플리케이션 프로그램처럼 실행시켜주는 런타임 환경이다. 특히 서버 측 프로그램을 개발하는 데 많이 활용된다.

React에서 Create React App와 npx 명령어를 쓰게 되는데, npx 명령어를 사용하려면 Node.js가 필요하다. 따라서 Node.js 설치부터 진행하도록 한다.

 

Node.js 설치하기

https://nodejs.org/en

Node.js

Nodejs.org 사이트에서 OS에 맞는 Node.js를 설치하면 된다.

LTS와 현재 버전(21.4.1 Current) 중, LTS를 선택하여 node-v20.11.0-x64.msi 파일 설치를 진행한다.

LTS는 Long Term Support의 약자로, 오랫동안 지원하는 버전을 의미한다.

 

라이선스에 동의하고, 설치 위치를 지정한다. 기본 설치 위치는 C:\Program Files\nodejs\이다.

별다른 설정의 변경 없이 계속 진행하여 설치를 완료해 주면 된다.

중간에 진행하는 설정에 대해서는 아래의 Custom Setup과 Tools for Native Modules를 참고한다.

 

Custom Setup

1. Node.js runtime : Node.js 런타임 본체
2. corepack manager : 패키지 관리자
3. npm package manager : 패키지 관리자
4. Online documentation shortcuts : 온라인 문서 바로가기
5. Add to PATH : PATH 환경변수

사용자 설정 화면에서도 기본값을 사용한다.

 

Tools for Native Modules

네이티브 모듈을 설치할 건지 선택하는 화면이다. npm 모듈 중 컴파일이 필요할 때, VS Build Tools, Python 등의 필요한 도구를 자동으로 설치할 것인지를 물어보는 것이다.

체크하지 않고 설치를 진행하면 된다.

 

Node.js 설치 확인하기

node -v

cmd 명령창에서 node -v 명령어로 버전 정보를 확인할 수 있다.

이로써 설치가 정상적으로 완료되었다.

 

💡Create React App

---

Create React App은 프로젝트를 자동으로 설정해주는 도구이다. 이를 통해 리액트로 웹 애플리케이션을 개발하는 데 필요한 모든 설정이 자동으로 이루어지며, 빌드 설정을 하지 않고도 프로젝트를 시작할 수 있다.

Create React App을 실행하기 위해서는 먼저 Node.js와 npm이 설치되어 있어야 한다. 따라서 Node.js를 설치를 선행한 이후에 Create React App를 사용하도록 하자.

 

Create React App 공식 홈페이지

https://create-react-app.dev/

Create React App

아래 Create React App 시작하기의 내용은 위 페이지의 Get Started 내용을 가져온 것이다.

다음의 방법이 있다는 점만 알고, 아래의 💡React 사용하기로 넘어가도 무방하다.⤵️

 

Create React App 시작하기

npx create-react-app my-app
cd my-app
npm start

만약 이전에 npm으로 create-react-app을 전역으로 설치했다면, 항상 최신 버전을 사용하기 위해 전역 설치를 해제한 후 위의 명령을 실행하는 것이 좋다.

 

App 만들기

로컬 개발 환경에 Node.js 14 이상이 필요하다.

다음 중 하나의 방법으로 새로운 앱을 생성할 수 있다.

npx​

npx create-react-app my-app

npm​

npm init react-app my-app

Yarn​

yarn create react-app my-app

 

Template 선택하기

npx create-react-app my-app --template [템플릿-이름]

템플릿을 선택하여 프로젝트를 시작할 수도 있다. 템플릿을 사용하지 않으면 기본 템플릿으로 프로젝트가 생성된다.

 

TypeScript 앱 만들기

npx create-react-app my-app --template typescript

 

스크립트

프로젝트 폴더에서 다양한 내장된 명령을 실행할 수 있다.

1. npm start 또는 yarn start: 개발 모드에서 앱을 실행하고 http://localhost:3000에서 확인할 수 있다.
2. npm test 또는 yarn test: 테스트를 실행한다.
3. npm run build 또는 yarn build: 프로덕션 용으로 앱을 빌드한다.

 

💡React 실행하기

---

VS Code에서 간단하게 React 실습 환경을 구축해 보도록 하자.

 

2023.09.22 - [Programming/CSS] - [Client] 개발자 환경 구축: VS CODE 설치

[Client] 개발자 환경 구축: VS CODE 설치

VS Code 설치에 대해서는 위 글을 참고한다.

 

react-app 폴더 생성하기

VS Code에서 폴더 열기를 선택하여 개발할 위치에 react-app 폴더를 생성한다.

react라는 폴더명으로 폴더를 생성할 경우 에러가 발성할 수 있으므로 가급적이면 다른 이름을 사용한다.

 

새 터미널 실행하기

터미널 탭에서 새 터미널을 선택하거나 Ctrl + Shirt + ` 단축키로 새 터미널을 실행한다.

터미널을 이용하면 명령어로 VS Code를 제어할 수 있다.

 

npx 명령어 실행하기

npx create-react-app .

설치하는 데 시간이 꽤 걸리는 편이다. 중간에 다른 작업을 하면 오류가 발생할 수 있으므로 잠깐 기다려 주도록 하자.

 

Node.js를 설치했다면 터미널에서 npx 명령어를 사용할 수 있다.

npx를 이용해서 creat-react-app이라는 app을 바로 사용할 수 있으며, 이다음에 폴더 이름을 작성한다.

현재 디렉토리를 의미하는 기호인 '.'을 찍어 주었다. 또는 폴더명과 같게 'react-app'으로 해도 된다.

위 코드를 복사하고, 터미널에서 마우스 오른쪽 클릭을 하면 자동으로 붙여 넣기 된다.

 

create-react-app 오류 해결방법

npx명령어가 실행되지 않는다면 아래의 3가지 방법을 통해 오류를 해결해 보도록 하자.

 

1. npm install create-react-app

PS C:\Class\code\react-app> npx create-react-app .
npm ERR! code ENOENT
npm ERR! syscall lstat
npm ERR! path C:\Users\zhzkd\AppData\Roaming\npm
npm ERR! errno -4058
npm ERR! enoent ENOENT: no such file or directory, lstat 'C:\Users\zhzkd\AppData\Roaming\npm'
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent 

npm ERR! A complete log of this run can be found in: C:\Users\zhzkd\AppData\Local\npm-cache\_logs\2024-02-08T08_16_45_730Z-debug-0.log
PS C:\Class\code\react-app>

npm install create-react-app

ENOENT와 함께 이러한 오류가 발생한다면 npm install create-react-app 명령어를 통해 먼저 설치를 해주어야 한다.

 

2. 터미널 종류 변경

만약 이와 같이 했는데도 오류가 발생한다면, 터미널 종류를 바꿔보는 것도 하나의 방법이다.

문제가 해결되지 않으면 Command Prompt 등의 다른 터미널을 사용해 보도록 하자.

 

3. 폴더 외부에서 다시 생성하기

만약 계속해서 오류가 발생한다면 폴더를 지우고, 외부에서 다시 생성해보도록 하자.

VS Code에서 폴더 열기를 하는 창에서 폴더를 생성했더니 관리자 권한으로 폴더가 생성되어 오류가 발생했다. 따라서 외부에서 폴더를 생성하는 것을 추천한다.

내가 작업하는 공간에 위와 같이 폴더가 생성되어 있지 않다면 npx create-react-app 명령어가 제대로 실행되지 않은 것이다.

 

React 개발환경 실행하기

npm start

npm start 명령어를 입력하면 React 개발환경이 실행되면서 코딩할 수 있는 환경이 동작되기 시작한다.

3000번 포트에서 웹 브라우저와 함께 Sample React가 실행되는데, 이미 해당 포트를 사용하고 있을 경우 'Y'를 입력하면 3001번 등의 다른 포트 번호를 생성하여 실행된다.

 

참고자료

React 2022년 개정판 - 2. 실습환경구축, 생활코딩, 2022.03.17.

Getting Started, Create React App, 2024.02.08.

React란, 프론트엔드 대표 개발 도구 리액트의 특징과 이점, 이랜서, 2023.07.19.