Node.js

🚀 Node.js란? 브라우저 밖에서도 JavaScript를 실행하자!

 HTML, CSS, JavaScript를 사용해 웹사이트를 만들 때  따로 JavaScript를 설치한 적은 없을텐데

어떻게 JavaScript를 사용할 수 있었나? 

---

✅ 브라우저에서 JavaScript가 실행되는 원리

브라우저에서 JavaScript를 실행할 수 있었던 이유는 브라우저 자체에 JavaScript 엔진이 내장되어 있기 때문

• HTML과 CSS는 렌더링 엔진을 통해 해석됨.
• JavaScript는 JavaScript 엔진을 통해 실행됨.

🔹 브라우저별 JavaScript 엔진

• Chrome / Edge → V8 엔진
• Firefox → SpiderMonkey 엔진
• Safari → JavaScriptCore 엔진

 브라우저가 JavaScript를 실행할 수 있는 환경을 제공하기 때문에 별도 설치 없이 사용 가능

---

❌ JavaScript는 브라우저에서만 실행할 수 있을까?

일반적인 프로그래밍 언어(Java, Python 등)는 설치 파일을 다운로드한 후 사용해야 하지만,

JavaScript는 브라우저에서 바로 실행이가능하다.

---

🔥 Node.js의 탄생

💡 Node.js란?

JavaScript를 브라우저 바깥에서도 실행할 수 있도록 만든 환경이다.

Node.js는 기존 브라우저의 **JavaScript 엔진(V8)**을 가져와 독립 실행이 가능하도록 만들었다.

📌 Node.js의 핵심 구성

Node.js는 단순한 JavaScript 엔진이 아니라 비동기 작업을 지원하는 추가적인 기능을 포함.

• V8 엔진 → JavaScript 코드 실행
• libuv → 비동기 I/O 작업 지원

브라우저가 아니라도 JavaScript를 서버나 다양한 환경에서 사용할 수 있도록 만들어 졌다.

---

🎯 Node.js의 장점

✅ 클라이언트(프론트엔드)와 서버(백엔드)를 모두 JavaScript로 개발 가능
✅ 동일한 언어를 사용하여 개발 속도 향상
✅ 프론트엔드 & 백엔드 개발자 간 협업 증가

기존에는 서버 개발을 Java, Python 등의 언어로 해야 했지만, Node.js 덕분에 서버도 JavaScript로 작성 가능하게 되었다!

---

🛠 Node.js 설치 방법

1️⃣ 공식 사이트에서 다운로드

Node.js 공식 홈페이지(https://nodejs.org)에서 직접 설치 가능.

2️⃣ NVM(Node Version Manager) 사용 (추천)

여러 버전의 Node.js를 쉽게 관리할 수 있는 도구.

 

 

---

---

---

 

NVM(Node Version Manager) 완벽 가이드

NVM은 Node.js 버전을 쉽게 관리할 수 있도록 도와주는 도구

1. Node.js 버전 관리의 필요성

Node.js는 처음 출시된 이후로 꾸준히 버전이 업데이트되었으며, 현재(글 작성 기준) 최신 버전은 22.14 이지만 과거 버전도 여전히 사용되고 있다..

왜 Node.js 버전 관리를 해야 할까?

• 프로젝트 진행 중에도 새로운 Node.js 버전이 출시될 수 있음
• 팀원마다 다른 Node.js 버전을 사용할 가능성이 있음
• 특정 Node.js 버전에서는 정상 작동하지만, 다른 버전에서는 오류가 발생할 수 있음

이러한 문제를 해결하기 위해 NVM을 사용하면 여러 Node.js 버전을 쉽게 관리 가능

2. NVM의 주요 기능과 장점

✅ 프로젝트별 Node.js 버전 관리 가능

여러 개의 프로젝트를 진행할 때, 프로젝트별로 다른 Node.js 버전이 필요할 수 있는데  이때 NVM을 사용하면 삭제/재설치 없이 원하는 버전을 선택하여 사용이 가능하다.

✅ 기존 프로젝트에 영향 없이 새로운 버전 사용 가능

기존 프로젝트는 특정 Node.js 버전에서 실행되지만, 최신 버전을 테스트할 때 기존 환경을 유지하면서 새 버전을 설치하고 사용할 수 있다.

✅ 팀원들과의 개발 환경 통일

팀원들이 NVM을 사용하면 같은 Node.js 버전을 맞출 수 있어 환경 차이로 인한 오류를 방지할 수 있다.

3. NVM 설치 방법

아래 주소로 이동하여 개발환경을 선택하여 설치진행 하면 된다.

 

https://nodejs.org/ko/download

Node.js — Node.js® 다운로드

 

4. NVM 사용법

🔹 설치 가능한 Node.js 버전 확인

nvm ls-remote

최신 LTS 버전은 LTS(Long Term Support) 라고 표시됩니다.

🔹 node.js 특정 버전 설치

nvm install 16.20.2

위 명령어를 입력하면 Node.js 16.20.2 버전이 설치됩니다.

🔹 현재 사용 중인 node.js 버전 확인

node -v

🔹 설치된 Node.js 버전 목록 확인

nvm ls

🔹 특정 node.js 버전 사용하기

nvm use 20

위 명령어를 입력하면 Node.js 20버전을 활성화할 수 있습니다.

5. Node.js 실행 방법

🔹 터미널에서 JavaScript 코드 실행

node

이후 콘솔에서 JavaScript 코드를 입력하고 실행할 수 있습니다.

> console.log("Hello, World!");
Hello, World!

🔹 JavaScript 파일 실행

node 파일명.js

예를 들어 app.js 파일이 있을 경우:

node app.js

 

📌 정리하자면:

✅ NVM을 사용하면 여러 Node.js 버전을 쉽게 관리할 수 있음
✅ 프로젝트별로 버전을 맞춰 개발 가능
✅ 최신 버전 테스트 시 기존 환경에 영향을 주지 않음
✅ 팀원들과 동일한 개발 환경을 유지할 수 있음

 

 

 

---

---

---

npm 기초 정리

npm이란?

• npm(Node Package Manager): 자바스크립트 패키지의 설치, 배포, 관리를 도와주는 도구
• Node.js 설치 시 함께 설치됨
• npm을 만든 곳에서는 npm을 줄임말보다는 하나의 단어로 취급하도록 권장 (소문자로 표기)

자바스크립트 패키지란?

• 재사용 가능한 자바스크립트 코드 묶음
• npm에 배포된 패키지는 package.json 파일을 통해 정보 제공

package.json 생성하기

1. practice 폴더 생성 후 VS Code로 열기
2. npm.js 파일 생성 및 간단한 코드 작성
3. console.log("npm 공부하기");
4. VS Code 터미널에서 실행
5. node npm.js
6. package.json 생성
7. npm init -y
8. 생성된 package.json 파일 확인

package.json 주요 항목

• name: 패키지 이름 (예: npm-practice)
• version: 패키지 버전 (예: 1.0.0)
• main: 패키지의 메인 파일 지정 (예: npm.js)
• scripts: 실행할 스크립트 정의실행 명령어:
• npm run start
• "scripts": { "start": "node npm.js" }
• keywords: 검색 시 연관 검색어 설정 (예: npm, javascript, node)
• author: 패키지 작성자 정보
• license: 패키지 저작권 설정 (예: MIT 또는 ISC)

모듈 시스템

CommonJS 방식

내보내기

module.exports = function multiply(x, y) { 
                 return `${x} * ${y} = ${x * y}`;
                 };

 

 가져오기 

const multiply = require("./multiply");

console.log(multiply(2, 3));

ES6 방식

내보내기

export default function multiply(x, y) {
          return `${x} * ${y} = ${x * y}`;
         }

 

가져오기

import multiply from "./multiply.js";

console.log(multiply(2, 3));

 

• ES6 방식 사용을 위해서는 package.json 파일의 내용을 아래와 같이 수정 해야 한다.

{
 "type":"module"
 }

---

---

---

npm 패키지 설치 및 사용

패키지 설치

npm install 패키지명

 

또는 줄여서

npm i 패키지명

CommonJS 방식으로 사용

const dayjs = require("dayjs");
console.log(dayjs().format("YYYY-MM-DD"));

ES6 방식으로 사용

import dayjs from "dayjs";
console.log(dayjs().format("YYYY-MM-DD"));

npm 사이트 활용하기

• npm 공식 사이트: https://www.npmjs.com
• npm trends: 인기 패키지 트렌드 확인 https://npmtrends.com

정리

• npm은 자바스크립트 패키지 관리 도구
• package.json을 통해 패키지 정보를 관리
• CommonJS(require)와 ES6(import) 방식 지원
• npm install을 이용해 패키지 설치 및 활용 가능

---

---

---

 

NPX란?

1. NPX란 무엇인가?

• **NPX (Node Package Execute)**는 npm 패키지를 실행하는 도구.
• npm 5.2.0 이후 버전부터 기본 포함
• npm과 혼동할 수 있지만, npx는 npm을 더 편리하게 사용할 수 있도록 돕는 보조 도구

2. NPX를 사용하는 이유

1) 패키지를 일회성으로 실행할 때

• npm을 사용할 경우:
  1. 패키지를 다운로드
  2. 패키지를 실행
  3. 사용 후 패키지를 삭제
• npx를 사용할 경우:
  • 다운로드 없이 즉시 실행 가능, 사용 후 자동 삭제됨.

사용 예시:

npx cowsay "Hello, Tistory!"

• 결과: 소가 "Hello, Tistory!"라고 말하는 애니메이션 출력
• 추가 옵션: -e (눈 모양 변경), -T (혀 모양 변경) 등 지원

2) 프로젝트 환경을 구축할 때

• 프로젝트를 위한 패키지를 실행할 때 유용합니다.
• 최신 버전의 패키지를 자동으로 설치하여 실행 가능
• npm을 사용할 경우, 특정 버전이 고정될 가능성이 있음

사용 예시:

npx create-react-app my-react-app

• create-react-app 패키지를 설치하지 않고 최신 버전으로 프로젝트 생성 가능
• 실행하면 package.json과 node_modules이 자동으로 생성됨

3. NPX의 장점

• 패키지를 따로 설치하지 않고도 실행 가능 → 저장 공간 절약
• 일회성 실행에 적합 → 간편한 사용
• 항상 최신 버전을 실행 → 프로젝트 환경 구축 시 편리

4. 정리

비교 항목 npm npx

패키지 실행 방식	설치 후 실행	다운로드 없이 즉시 실행
일회성 사용	불편함 (설치/삭제 필요)	매우 편리함
최신 버전 유지	고정될 가능성 있음	항상 최신 버전 사용
프로젝트 초기화	여러 패키지 직접 설치 필요	단일 명령어로 가능

• npx는 npm보다 실행이 간편하고, 최신 버전 패키지를 실행할 때 유용한 도구
• 특히 일회성 패키지 실행 및 프로젝트 환경 구축 시 유용하게 활용할 수 있다.