현재 오즈코딩스쿨 강의를 통해 프론트엔드를 학습하고 있습니다.
본 포스트는 해당 강의에 대한 내용 정리를 목적으로 합니다.

1. Node.js

1) 등장

Node.js는 자바스크립트를 서버에서도 실행할 수 있도록 하기 위해 등장. 비동기 처리와 높은 성능을 제공하여 효율적인 서버 개발이 가능하게 만들었다.

기존에는 자바스크립트가 브라우저에서만 실행되었지만, Node.js는 Chrome V8 엔진을 기반으로 한 런타임 환경을 제공하여 서버 측에서도 자바스크립트를 사용할 수 있게 만들었다. 이를 통해, 비동기 처리와 높은 성능을 제공하는 서버 개발이 가능해졌으며, 기존의 PHP, Java, Python 등과 경쟁할 수 있는 백엔드 기술로 자리 잡게 되었다.

2) Node.js 장점

• 비동기 & 이벤트 기반 → I/O 작업이 많은 애플리케이션에서 빠른 성능 제공

• 단일 언어(JavaScript) 사용 → 프론트엔드와 백엔드를 통합하여 개발 생산성 향상

• 경량 & 높은 확장성 → 마이크로서비스 구조에 적합하고, 가벼운 서버 환경 제공

• 활발한 생태계 → npm(Node Package Manager)을 통해 수많은 오픈소스 라이브러리 활용 가능

• 빠른 처리 속도 → Chrome V8 엔진 기반으로 높은 실행 속도 제공

이러한 이유로 실시간 채팅, 스트리밍 서비스, API 서버 등 고성능이 필요한 웹 애플리케이션에서 많이 사용.

3) nvm(Node Version Manager)

NVM이란 Node.js의 여러 버전을 손쉽게 관리할 수 있도록 해주는 도구

a. NVM을 사용하는 이유

• 버전별 프로젝트 관리 → 프로젝트마다 다른 Node.js 버전이 필요할 때 유용

• 업데이트 및 변경 용이 → 간단한 명령어로 Node.js 버전 업그레이드/다운그레이드 가능

• 글로벌 설치 영향 없음 → 특정 프로젝트에 맞는 버전을 개별적으로 사용할 수 있음

• 팀원들과의 개발 환경 통일 용이

b. 설치

node.js 이동 https://nodejs.org/ko

다운로드 클릭 → 버전 확인 후 클립보드에 복사

터미널 실행 → 클립보드에 복사 한 코드 붙여넣기

c. 주요 명령어

• nvm install <버전> → 특정 버전의 Node.js 설치

• nvm use <버전> → 특정 버전으로 변경

• nvm list → 설치된 Node.js 버전 목록 확인

• nvm alias default <버전> → 기본 사용 버전 설정

🛠️ NVM을 활용하면 Node.js 버전 충돌 없이 효율적인 개발 환경을 유지할 수 있다.

4) npm(Node Package Manager)

NPM은 Node.js의 패키지 관리자로, 오픈소스 라이브러리(패키지)를 쉽게 설치, 관리, 공유할 수 있도록 도와준다.

a. NPM의 주요 기능

• 패키지 설치/삭제/업데이트

• 프로젝트 의존성 관리 (package.json)

• 전역(Global) 및 로컬(Local) 패키지 관리

• NPM 레지스트리에서 오픈소스 라이브러리 검색 및 사용

b. 주요 명령어

• NPM 초기화 (package.json 생성)

npm init           # 설정하면서 초기화
npm init -y        # 기본값으로 자동 초기화

• 패키지 설치

npm install <패키지명>        # 로컬 패키지 설치 (현재 프로젝트)
npm install -g <패키지명>     # 글로벌 패키지 설치 (시스템 전체)
npm install <패키지명>@<버전> # 특정 버전 설치

• 패키지 삭제

npm uninstall <패키지명>      # 로컬 패키지 삭제
npm uninstall -g <패키지명>   # 글로벌 패키지 삭제

• 패키지 목록 확인

npm list       # 현재 프로젝트의 설치된 패키지 목록
npm list -g    # 글로벌 패키지 목록

• 패키지 업데이트

npm update <패키지명>       # 특정 패키지 업데이트
npm update                # 모든 패키지 업데이트

c. NPM을 사용하는 이유

• 손쉬운 패키지 관리 → 개발에 필요한 라이브러리를 빠르게 설치

• 의존성 관리 (package.json) → 협업 시 동일한 환경 유지 가능

• 오픈소스 활용 → 다양한 패키지를 쉽게 가져와 사용

👉 Node.js 개발을 효율적으로 하기 위해 필수적인 도구! 🚀

5) package.json

{
  "name": "npm_practie", // 내가 배포할 패키지 이름
  "version": "1.4.3", // 이 패키지 버전
  "main": "npm.js", // 패키지 안에 제일 메인이 되는 파일
  "scripts": { // 터미널로 실행 시킬 스크립트 작성
    // 터미널에 npm run 실행할 명칭(ex.test)
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node npm.js"
  },
  "keywords": ["npm", "javascript", "node"], 
  // 패키지를 npm에 배포할 경우 어떤 키워드 npm 검색을 했을 때 어떤 키워드 검색을 하면 이 패키지가 연관 검색어로 뜨도록!
  "author": "oz coding <ella6010@gmail.com>", // 패키지를 만든 사람, 이름 <이메일> 작성
  "license": "ISC / MIT", // 패키지의 저작권 정리
  "description": "npm 공부하기 라는 문자열을 console로 표시하는 패키지" // 패키지 설명
}

ISC

ISC (Internet Systems Consortium) 라이선스는 MIT 라이선스와 유사한 오픈소스 라이선스로, 가장 간단하고 자유로운 라이선스 중 하나.

• 자유로운 사용 → 누구나 코드 사용, 수정, 배포 가능

• 저작권 표기 필요 → 원작자의 저작권 고지를 유지해야 함

• 책임 부인 (No Warranty) → 개발자는 소프트웨어 사용으로 인한 문제에 책임을 지지 않음

MIT

MIT 라이선스는 가장 널리 사용되는 오픈소스 라이선스 중 하나로, 자유롭게 소프트웨어를 사용, 수정, 배포할 수 있도록 허용하는 매우 관대한 라이선스.

• 자유로운 사용 → 누구나 소프트웨어를 상업적, 비상업적 용도로 사용 가능

• 수정 및 배포 가능 → 원본을 수정하거나, 수정된 버전을 배포할 수 있음

• 저작권 표기 필수 → 소프트웨어를 배포할 때 저작권 및 라이선스 고지를 유지해야 함

• 책임 부인(No Warranty) → 개발자는 소프트웨어 사용으로 발생한 문제에 대해 책임을 지지 않음

javascript 모율 사용법

📌 Node.js에서는 최신 버전(13+)부터 import/export(ESM)을 지원하지만, 기본적으로는 CommonJS (require)를 사용함. 👉 브라우저에서는 ESM을 기본적으로 사용! 🚀

a. package.json의 주요 역할

1. 프로젝트 정보 관리
   • 프로젝트의 이름, 버전, 설명, 저자, 라이선스 등 기본 정보를 저장합니다
   • 프로젝트의 메타데이터를 한눈에 파악할 수 있게 해준다.

2. 의존성 관리
   • dependencies: 프로젝트 실행에 필요한 외부 패키지 목록.
   • devDependencies: 개발 과정에만 필요한 패키지 목록.

3. 스크립트 관리
   • scripts 섹션에서 자주 사용하는 명령어를 단축키처럼 등록.
   • 빌드, 테스트, 배포 등의 작업을 자동화할 수 있다.

4. npm/yarn 패키지 관리 기반
   • npm install 또는 yarn 을 실행할 때 참조되는 설정 파일.
   • 프로젝트 복제 시, 필요한 모든 패키지를 쉽게 설치할 수 있다.

b. package.json의 중요성

1. 프로젝트 표준화
   • Node.js 생태계의 표준 명세 파일로, 모든 프로젝트가 동일한 구조로 정보를 관리.
   • 개발자 간 프로젝트 구조 이해와 협업을 용이하게 한다.

2. 재현 가능한 개발 환경
   • 어떤 환경에서도 동일한 의존성 구성을 보장.

3. 패키지 생태계 활용
   • npm 레지스트리의 수많은 오픈소스 패키지를 쉽게 통합할 수 있다.
   • 코드 재사용성을 높이고 개발 속도를 향상시킨다.

4. 배포 및 CI/CD 파이프라인 구성
   • 빌드, 테스트, 배포 과정에서 package.json의 scripts를 활용.

c. package.json 역할

필드명	역할
name	프로젝트 명
version	프로젝트 버전
main	패키지의 진입점 "npm.js” 로 설정하면 require(”npm_practice”)를 할 경우 npm.js가 생성된다.
type	JavaScript 모듈 시스템을 결정 "module"이면 ES 모듈 "commonjs"이면 CommonJS를 사용한다.
scripts	npm에서 실행할 커스텀 명령어를 정의하는 곳 "start": "node npm.js"라고 설정하면 npm start 명령어로 npm.js 파일을 실행할 수 있다.
description	프로젝트 설명

6) npx(Node Package eXecute)

npx(Node Package eXecute)는 NPM 패키지를 실행하는 도구로, Node.js 5.2.0 이상에서 기본 포함.

a. npx의 필요성

• 전역(Global) 설치 없이 패키지 실행 가능

npx create-react-app my-app  # 설치 없이 바로 실행

📌npm install -g 없이 패키지를 실행할 수 있어 불필요한 글로벌 설치를 줄임

• 최신 버전 실행 가능

npx eslint myfile.js  # 항상 최신 ESLint 실행

📌npx는 항상 최신 버전의 패키지를 실행하므로, 업데이트를 신경 쓸 필요 없음

• 프로젝트 로컬 패키지 실행 가능

npx jest  # 로컬에 설치된 jest 실행

📌 node_modules/.bin/에 설치된 패키지를 직접 실행할 필요 없이 npx로 실행 가능

• 특정 버전의 패키지 실행 가능

npx eslint@7.32.0 myfile.js  # 특정 버전 실행

📌 특정 버전의 패키지를 설치 없이 바로 실행 가능

b. npm vs npx 차이

구분	npm	npx
역할	패키지 설치/관리	패키지 실행
사용 방식	npm install -g <패키지명> 후 실행	설치 없이 바로 실행
예시	npm install -g create-react-app → create-react-app my-app	npx create-react-app my-app

📌 npx는 일회성 실행이 가능해, 필요 없는 글로벌 패키지 설치를 줄일 수 있어 편리함 🚀

끝맺음.

신통방통하다...리액트..신기하고 뭔가 신비롭다!