Node.js
JavaScript를 실행할 수 있는 환경(runtime)
JavaScript는 주로 브라우저(클라이언트) 측에서 실행되는 스크립트 언어로 사용되었으며 이는 브라우저의 JavaScript 엔진에 의해 해석되고 실행되었다. 그렇기 때문에 서버 측에서는 JavaScript를 사용하기 위해선 JavaScript 엔진을 내장한 소프트웨어나 플러그인을 필요로 했다.(ex: Chrome-V8, Firefox-SpiderMonkey, Safari-Nitro ...)
하지만, 이러한 방식은 제한적이기 때문에 JavaScript 엔진이 서버 측에서 동작하는 독립적인 런타임 환경이 필요하였고 이를 실현한 것이 Node.js이다.
Node.js는 Chrome의 V8 엔진을 기반으로 개발된 것으로 JavaScript를 서버 측에서 실행할 수 있는 환경을 제공한다. Node.js의 사용으로 JavaScript를 서버 측에서 독립적으로 실행할 수 있게 되었고
이를 활용한 서버 측 애플리케이션 개발도 가능해졌다. 즉, 클라이언트 측뿐만 아니라 서버 측에서도
사용이 가능해졌으며 웹 개발 전체 스택에서 JavaScript를 통합하여 사용할 수 있게 되었다.
Node.js는 비동기적이고 이벤트 기반의 프로그래밍 모델을 채택하여 높은 성능과 확장성을 제공한다. 이를 통해 동시에 많은 클라이언트 요청을 처리할 수 있으며, 대용량 데이터 처리, 실시간 애플리케이션 개발, 웹 소켓 서버 등 다양한 용도로 사용된다.
Node.js 사용하기
vsCode에서 터미널을 사용하여 실행할 수 있다.
node.js를 사용하여 다른 파일에 있는 함수를 사용할 수도 있는데, 만약 talk.js가 '동물이 말을 하는 기능을 가진 파일'인 모듈이라 한다면 이 모듈을 내보낼 수 있다.(단, 이때 사용되는 함수들은 node.js가 설치되어있어야만 정상적으로 작동한다.)
npm을 사용하여 패키지 활용하기
npm(Node Package Manager)
Node.js 환경에서 패키지를 관리하기 위한 공식 패키지 관리자. npm을 사용하면 다른 개발자들이 작성한 코드나 라이브러리(package)를 쉽게 내 프로젝트에 추가하고 관리할 수 있다.
package를 관리할 폴더에 들어가서 teminal에 npm init을 작성한다.
그 후 해당 package에 대한 정보를 입력한 후 엔터를 한다.(package name은 소문자로만 작성하여야 한다.)
그럼 이렇게 package 폴더 안에 json 파일이 생성된다. 이 파일은 패키지의 구성과 정보를 정의하는 환경설정 파일로, 프로젝트의 루트 디렉토리에 위치한다.
- name: 패키지의 이름
- version: 패키지의 버전
- description: 패키지에 대한 간단한 설명
- main: 패키지의 진입점(main) 파일 정의( 이 패키지는 index.js가 진입점)
- scripts: 프로젝트에서 실행 가능한 스크립트 정의.
만약 이 곳에 "start": "ndoe index.js" 라고 작성한 후 터미널에 'npm start' 라고 작성하면 index.js 파일이 실행된다.
- author: 패키지 작성자
- license: 파키지 라이선스
다른 사람의 모듈 사용하기
npm
Bring the best of open source to you, your team, and your company Relied upon by more than 17 million developers worldwide, npm is committed to making JavaScript development elegant, productive, and safe. The free npm Registry has become the center of Java
www.npmjs.com
필요한 기능을 검색한 뒤 오른쪽의 Install을 복사하여 터미널에 붙여넣어 실행한다.
설치가 완료되면 package.json 마지막 부분에 dependencies가 추가된 것을 확인할 수 있고 package 폴더 안에도 node_modules, package-lock.json 파일이 추가된 것 또한 확인할 수 있다.
다운받은 페이지에서 모듈의 사용법을 참고하여 실행해보자.
// 모듈 import (외부에서 다운받은 모듈은 경로를 작성할 필요가 없다. )
const randomColor = require('randomcolor');
let color1 = randomColor();
let color2 = randomColor();
let color3 = randomColor();
console.log(color1);
console.log(color2);
console.log(color3);
React와의 연관성
Node.js와 React는 상호보완적인 역할을 수행할 수 있다. Node.js를 사용하여 서버 측에서 데이터를 가져와 React로 UI를 렌더링하고 클라이언트에 전달할 수 있다. 또한 Node.js를 사용하여 React 애플리케이션의 백엔드 서버를 구축하고 API 엔드포인트를 제공할 수도 있다. 즉, Node.js는 서버 측 개발을 위한 환경이고 React는 클라이언트 측 UI 개발을 위한 라이브러리로, 둘을 함께 사용하면 풀스택 웹 개발이 가능하며 서버와 클라이언트 간의 통합이 원할해지며 생산성과 유지보수성이 향상될 수 있다.
'JS > React' 카테고리의 다른 글
6. React 프로젝트 만들기 (0) | 2023.05.22 |
---|---|
5. React? (0) | 2023.05.21 |
3. React dev - Tic Tac Toe 게임 만들기 (0) | 2023.05.12 |
2. React Quick Start - React.dev 정리2 (0) | 2023.05.09 |
1. React Quick Start - React.dev 정리 (0) | 2023.05.08 |