[React] Node.js 및 React 설치하기

#. 현재 JSP 및 HTML만 사용하고 있습니다.

 

#. React에 대한 기본적인 부분이라도 알고 싶어 확인해 보니 여러 플러그인을 사용하려면 Node.js가 필요했습니다.

 

#. 그래서 Node.js를 설치하고 React 프로젝트까지 설치하는 방법을 적어보고자 합니다.

 

---

• Node.js란?
  
  - 웹브라우저 외부에서 JS 코드를 실행할 수 있게 하는 JavaScript 런타임 환경이라 할 수 있습니다.
  
  - Google의 V8 JavaScript 엔진을 사용해 실행합니다.

---

• Node.js의 주요 기능
  
  1. JavaScript 런타임
  
      - Node.js를 사용하면 개발자가 JavaScript로 서버 측 코드를 작성할 수 있습니다.
  
      - 프런트엔드에서 백엔드까지 웹 개발에 일관된 언어 사용이 가능해집니다.
  
  2. 비동기 및 이벤트 중심
  
      - 이벤트 중심의 비차단 I/O 모델을 사용하므로 비동기 작업을 처리하는 데 적합합니다.
  
      - 이 모델을 사용하면 Node.js가 다른 작업을 차단하지 않고 많은 수의 동시 연결을 효율적으로 처리할 수 있어 확장성이 뛰어납니다.
  
      - 따라서 요청 및 응답이 많은 채팅, SNS 서비스에 주로 사용됩니다.
  
  3. 패키지 관리
  
      - 광범위한 오픈 소스 라이브러리 및 모듈 생태계를 호스팅 하는 패키지 매니저인 npm(Node Package Manager)이 제공되어 개발자가 애플리케이션에 추가 기능을 쉽게 통합할 수 있습니다.
  
  4. 교차 플랫폼
  
      - Windows, macOS, Linux 등 다양한 운영 체제에서 실행할 수 있어 개발자가 다양한 환경에서 작업할 수 있습니다.
  
  5. 웹 애플리케이션 구축
  
      - 일반적으로 확장 가능한 네트워크 애플리케이션, 웹 서버, 실시간 애플리케이션, API 및 백엔드 서비스를 구축에 사용됩니다.
  
      - Express.js와 같은 프레임워크는 최소한의 유연한 구조를 제공하고 Node.js를 사용하여 웹 애플리케이션을 더 쉽게 구축할 수 있게 합니다.
  
  6. 성능
  
      - 이벤트 중심 아키텍처와 V8 엔진 속도로 인해 높은 성능을 보여줍니다.
  
  7. 커뮤니티 및 지원
  
      - 지속적인 라이브러리 추가 및 툴을 정기적으로 업데이트하고 향상될 수 있도록 커뮤니티가 있습니다.
      - npmjs.com / nodejs.org
  
  8. 스트리밍 및 I/O 처리
  
      - 파일 읽기/쓰기, 네트워크 작업 및 스트림과 같은 I/O 바인딩 작업을 처리하는 데 매우 적합합니다.

---

• Node.js 설치 여부 확인
  
  - 우선 PC에 node.js가 설치되어있는지 부터 확인해봐야 합니다.
  
  - Node.js의 버전을 확인하는 명령어로 설치되지 않은 경우 아래와 같은 모른다는 답을 받을 것입니다.

node -v

 

---

• Node.js 다운로드 및 설치
  
  - https://nodejs.org/en 에 접속하여 LTS 다운합니다.(최신버전은 아니지만 안정화된 버전)

---

    - 다운로드한 파일을 실행하여 설치합니다.

    - 설치 후 터미널에 다시 확인해 보면 안다고 답을 해줄 것입니다.

 

---

• React 프로젝트 만들기
  
  - 생성할 위치의 폴더에서 아래와 같이 npx create-react-app 프로젝트명 을 입력하면 creating 될 것입니다.

d:

cd dev

npx create-react-app my-app

   
    - 이렇게 Happy hacking! 이 나오면 정상적으로 생성된 것입니다.

 

---

• React 실행하기
  
  - 위 내용에서 알 수 있듯 cd 프로젝트 > npm start를 통해 실행할 수 있습니다.

    - 아래와 같이 리액트 초기화면이 실행됩니다.

 

 

 

 

===========================================================
틀린 내용이 있거나 이견 있으시면 언제든 가감 없이 말씀 부탁드립니다!

===========================================================