📘 17.5.1 npm이란? - 거대한 코드 도서관 탐험하기
지금까지 Node.js로 멋진 프로그램들을 만들어봤죠? 이제 정말 신나는 새로운 세계를 탐험해볼 시간이에요. 바로 npm이라는 거대한 온라인 도서관에서 말이에요!
이곳에는 전 세계 개발자들이 만든 수백만 개의 유용한 코드들이 보물처럼 저장되어 있어요. 마치 레고 블록 상점에서 원하는 부품을 골라 멋진 작품을 만드는 것처럼, npm에서도 필요한 코드를 쉽게 가져와서 우리만의 특별한 프로그램을 만들 수 있답니다.
🧠 먼저 용어를 알아볼까요?
거대한 npm 세계로 떠나기 전에, 알아야 할 중요한 용어들과 친해져 보겠습니다.
| 용어 | 의미 |
|---|---|
| npm | Node 패키지 관리자의 줄임말이에요. Node.js용 패키지를 관리해주는 특별한 도구입니다. |
| 패키지 | 다른 사람들이 만들어 놓은 유용한 코드 덩어리를 말해요. |
| 필수 요소 | 우리 프로젝트가 제대로 작동하기 위해 꼭 필요한 다른 패키지들이에요. |
| 패키지 창고 | 모든 npm 패키지들이 저장되어 있는 거대한 창고예요. |
✨ npm의 핵심 개념
npm은 마치 세상에서 가장 큰 코드 도서관과 같아요. 이 도서관에는 전 세계 개발자들이 정성스럽게 만든 수백만 개의 유용한 코드 패키지들이 진열되어 있답니다.
우리가 프로그램을 만들 때, 모든 것을 처음부터 직접 만들 필요가 없어요. 예를 들어, 웹사이트를 만들고 싶다면 Express라는 패키지를 가져다 쓰면 되고, 예쁜 색깔의 글자를 출력하고 싶다면 chalk라는 패키지를 사용하면 돼요. 마치 레고 블록으로 집을 지을 때, 이미 만들어진 문이나 창문 블록을 사용하는 것과 같아요.
npm의 가장 아름다운 점은 단 한 줄의 명령어로 원하는 패키지를 우리 컴퓨터로 가져올 수 있다는 거예요. npm install express라고 입력하기만 하면, Express 패키지가 자동으로 다운로드되고 설치되어 바로 사용할 수 있게 됩니다.
또한 package.json이라는 특별한 파일을 통해 우리 프로젝트에 어떤 패키지들이 필요한지 목록을 관리할 수 있어요. 마치 쇼핑 목록처럼 필요한 것들을 적어두면, 나중에 한 번에 모든 패키지를 설치할 수 있답니다.
비유로 이해하기: 거대한 레고 블록 상점
npm을 더 쉽게 이해하기 위해 '세계에서 가장 큰 레고 블록 상점'에 비유해보겠습니다.
상상해보세요. 어마어마하게 큰 레고 상점이 있어요. 그곳에는 수백만 개의 서로 다른 레고 세트가 있답니다. 성을 만들 수 있는 세트, 자동차를 만들 수 있는 세트, 로봇을 만들 수 있는 세트... 정말 상상할 수 있는 모든 것들이 다 있어요.
여러분이 멋진 레고 도시를 만들고 싶다고 해볼게요. 모든 블록을 직접 만들 수는 없으니까, 이 상점에서 필요한 부품들을 골라서 가져오는 거예요. "집을 짓는 세트 하나, 자동차 세트 하나, 나무 세트 하나 주세요!"라고 말하면, 점원이 친절하게 원하는 세트들을 모두 가져다 줍니다.
npm도 정확히 이와 같아요. "웹서버를 만드는 코드 하나, 예쁜 색깔 글자를 만드는 코드 하나, 날짜를 다루는 코드 하나 주세요!"라고 명령어를 입력하면, npm이 자동으로 그 코드들을 우리 컴퓨터로 가져다 줍니다.
그리고 쇼핑 목록(package.json)에 필요한 것들을 적어두면, 친구들도 같은 목록을 보고 똑같은 재료들을 준비할 수 있어요. 이렇게 해서 모두가 같은 환경에서 함께 프로젝트를 만들 수 있답니다.
🎯 npm을 배우는 이유
그렇다면 우리는 왜 npm을 배워야 할까요? 정말 소중한 이유들이 많이 있어요.
첫째, 시간을 엄청나게 절약할 수 있어요. 웹사이트를 만들고 싶을 때, 서버 코드를 처음부터 모두 작성하려면 몇 주가 걸릴 수도 있어요. 하지만 Express 같은 패키지를 사용하면 몇 분 만에 간단한 웹서버를 만들 수 있답니다.
둘째, 더 안전하고 믿을 수 있는 코드를 사용할 수 있어요. npm에 있는 패키지들은 전 세계 수많은 개발자들이 검토하고 개선해온 것들이에요. 혼자서 만든 코드보다 훨씬 더 완성도가 높고 안전해요.
셋째, 전 세계 개발자들과 협력할 수 있게 돼요. 다른 사람들이 만든 유용한 도구를 사용하고, 우리가 만든 도구도 다른 사람들과 공유할 수 있어요. 마치 큰 개발자 가족의 일원이 되는 기분이에요.
마지막으로, 실제 회사에서 사용하는 방식을 배울 수 있어요. 현실에서 일하는 프로그래머들은 모두 npm을 사용해서 프로젝트를 만들어요. 미리 익혀두면 나중에 큰 도움이 될 거예요.
⚙️ npm 기본 사용법 배우기
이제 npm을 실제로 사용하는 방법을 배워보겠습니다.
가장 기본적인 명령어들:
# 새 프로젝트 시작하기 (package.json 만들기)
npm init
# 패키지 설치하기
npm install 패키지이름
# 개발할 때만 필요한 패키지 설치하기
npm install 패키지이름 --save-dev
# 설치된 패키지 목록 보기
npm list
# 패키지 제거하기
npm uninstall 패키지이름package.json 파일의 역할:
이 파일은 우리 프로젝트의 신분증과 같아요. 프로젝트 이름, 버전, 필요한 패키지 목록 등 모든 중요한 정보가 들어있답니다.
🧪 첫 번째 npm 모험 시작하기
이제 실제로 npm을 사용해서 멋진 프로젝트를 만들어보겠습니다.
🔹 예제 1: 첫 번째 npm 프로젝트 만들기
먼저 새로운 프로젝트를 시작해보겠습니다.
# 1단계: 새 폴더 만들기
mkdir my-awesome-project
cd my-awesome-project
# 2단계: npm 프로젝트 초기화하기
npm init -y이렇게 하면 package.json 파일이 생겨요. 이 파일을 열어보면 다음과 같은 내용이 들어있을 거예요:
{
"name": "my-awesome-project",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}이것이 바로 우리 프로젝트의 신분증이에요!
🔹 예제 2: 첫 번째 패키지 설치하고 사용하기
이제 색깔이 있는 예쁜 글자를 출력할 수 있는 chalk 패키지를 설치해보겠습니다.
# chalk 패키지 설치하기
npm install chalk설치가 완료되면 다음과 같은 파일을 만들어보세요:
// colorful.js 파일을 만들어주세요
// chalk 패키지를 사용해서 예쁜 색깔 글자를 만들어보겠습니다!
// chalk 패키지를 가져와요
const chalk = require('chalk');
// 환영 메시지를 예쁘게 출력해보겠습니다
console.log(chalk.blue('🌟 npm 세계에 오신 것을 환영합니다! 🌟'));
console.log(''); // 빈 줄 추가
// 다양한 색깔로 글자를 출력해보겠습니다
console.log(chalk.red('❤️ 빨간색 글자예요!'));
console.log(chalk.green('💚 초록색 글자예요!'));
console.log(chalk.yellow('💛 노란색 글자예요!'));
console.log(chalk.blue('💙 파란색 글자예요!'));
console.log(chalk.magenta('💜 보라색 글자예요!'));
console.log(''); // 빈 줄 추가
// 배경색도 바꿔보겠습니다
console.log(chalk.white.bgBlue(' 파란 배경에 흰 글자 '));
console.log(chalk.black.bgYellow(' 노란 배경에 검은 글자 '));
console.log(''); // 빈 줄 추가
// 굵은 글자와 밑줄도 해보겠습니다
console.log(chalk.bold('이것은 굵은 글자예요!'));
console.log(chalk.underline('이것은 밑줄 글자예요!'));
console.log(''); // 빈 줄 추가
console.log(chalk.green('✅ chalk 패키지 테스트가 완료되었습니다!'));이제 실행해보세요:
node colorful.js터미널에 무지개 색깔의 예쁜 글자들이 나타날 거예요!
🔹 예제 3: 간단한 웹서버 만들기
이번에는 express 패키지를 사용해서 우리만의 웹서버를 만들어보겠습니다.
# express 패키지 설치하기
npm install express그리고 다음과 같은 파일을 만들어주세요:
// server.js 파일을 만들어주세요
// express 패키지를 사용해서 간단한 웹서버를 만들어보겠습니다!
// express 패키지를 가져와요
const express = require('express');
// express 애플리케이션을 만들어요
const app = express();
// 서버가 실행될 포트 번호를 정해요
const port = 3000;
// 메인 페이지 만들기
app.get('/', (req, res) => {
// 사용자가 우리 웹사이트에 방문했을 때 보여줄 내용이에요
res.send(`
<h1>🎉 안녕하세요! npm으로 만든 웹서버입니다!</h1>
<p>이 서버는 Express 패키지를 사용해서 만들었어요.</p>
<p>npm이 정말 유용하죠? 😊</p>
<p><a href="/about">소개 페이지 보러가기</a></p>
`);
});
// 소개 페이지 만들기
app.get('/about', (req, res) => {
res.send(`
<h1>📖 소개 페이지</h1>
<p>이 웹서버는 Node.js와 Express를 사용해서 만들었어요.</p>
<p>npm 덕분에 몇 줄의 코드만으로 웹서버를 만들 수 있었답니다!</p>
<p><a href="/">홈으로 돌아가기</a></p>
`);
});
// 서버 시작하기
app.listen(port, () => {
console.log(`🚀 서버가 시작되었습니다!`);
console.log(`🌐 웹브라우저에서 http://localhost:${port} 를 열어보세요!`);
console.log(`⏹️ 서버를 종료하려면 Ctrl+C를 누르세요.`);
});서버를 실행해보세요:
node server.js그리고 웹브라우저에서 http://localhost:3000을 열어보세요. 우리가 만든 웹사이트가 나타날 거예요!
🔄 npm 사용 과정 정리
npm을 사용하는 전체 과정을 차근차근 정리해보겠습니다.
1단계: 프로젝트 준비하기
- 새 폴더를 만들고 그 안에서
npm init을 실행해요 - package.json 파일이 생성되어 프로젝트 정보가 저장돼요
2단계: 필요한 패키지 찾기
- npmjs.com 웹사이트에서 원하는 기능의 패키지를 검색해요
- 패키지의 사용법과 평점을 확인해요
3단계: 패키지 설치하기
npm install 패키지이름명령어로 설치해요- node_modules 폴더에 패키지 파일들이 저장돼요
- package.json에 설치된 패키지 정보가 자동으로 추가돼요
4단계: 패키지 사용하기
require()로 패키지를 가져와요- 패키지의 함수나 기능을 우리 코드에서 사용해요
5단계: 프로젝트 공유하기
- node_modules 폴더는 공유하지 않아요 (너무 커요!)
- package.json 파일만 공유하면 다른 사람이
npm install로 똑같은 환경을 만들 수 있어요
🧚♀️ 이야기로 다시 배우기: 온라인 도서관 모험
지금까지 배운 내용을 하나의 이야기로 다시 정리해볼게요.
한때 한 학생이 멋진 웹사이트를 만들고 싶어했어요. 하지만 혼자서 모든 것을 만들기에는 너무 어려웠어요.
그러던 어느 날, 선생님이 npm이라는 거대한 온라인 도서관에 대해 알려주었어요. "그곳에 가면 전 세계 개발자들이 만든 놀라운 코드들을 빌려올 수 있단다!"
학생은 호기심에 가득 차서 npm 도서관을 찾아갔어요. 정말 놀라웠어요. 수백만 개의 유용한 코드 패키지들이 깔끔하게 정리되어 있었거든요.
"웹서버를 만들고 싶어요!"라고 말하니, 도서관 사서가 Express라는 코드 모음을 추천해 주었어요. "이 코드를 사용하면 몇 분 만에 웹서버를 만들 수 있어요."
"예쁜 색깔 글자를 만들고 싶어요!"라고 하니, Chalk라는 색칠 도구를 주었어요. "이 도구로 글자에 원하는 색깔을 칠할 수 있어요."
학생은 대출 목록(package.json)에 필요한 코드들의 목록을 적어두었어요. 그러면 나중에 한 번에 모든 코드를 다시 빌려올 수 있었거든요.
집에 돌아와서 빌려온 코드들을 사용해보니 정말 놀라웠어요. 며칠이 걸릴 줄 알았던 일이 몇 시간 만에 끝났어요! "npm 덕분에 정말 멋진 프로그램을 만들 수 있게 되었구나!"
그때부터 학생은 새로운 프로젝트를 시작할 때마다 npm 도서관을 찾아가서 필요한 코드들을 빌려오게 되었답니다. 그리고 나중에는 자신이 만든 유용한 코드를 다른 사람들과 공유하기도 했어요.
🧠 자주 하는 실수와 주의할 점
npm을 사용할 때 자주 하는 실수들을 미리 알아두면 도움이 될 거예요.
❌ 실수 1: node_modules 폴더를 공유하려고 하기
# 이렇게 하면 안 돼요!
# node_modules 폴더는 매우 크고 불필요해요node_modules 폴더는 설치된 패키지들이 저장되는 곳이에요. 이 폴더는 매우 크기 때문에 친구들과 프로젝트를 공유할 때는 보내지 마세요. 대신 package.json 파일만 공유하면 돼요.
❌ 실수 2: 패키지 이름을 잘못 입력하기
# 이렇게 하면 안 돼요!
npm install expres # 's'가 빠졌어요
npm install cholk # 'a'가 빠졌어요패키지 이름을 정확히 입력해야 해요. 철자를 틀리면 설치가 되지 않거나 다른 패키지가 설치될 수 있어요.
❌ 실수 3: package.json 없이 패키지 설치하기
# npm init을 하지 않고 바로 패키지를 설치하면
# 패키지 정보가 제대로 저장되지 않아요항상 npm init으로 package.json 파일을 먼저 만든 다음에 패키지를 설치하는 것이 좋아요.
✏️ 연습문제로 개념 다지기
조용히 스며드는 오후 햇살처럼, npm의 세계가 우리에게 다가옵니다. 이제 실습을 통해 이 새로운 지식을 우리 것으로 만들어볼까요.
Ex1) 나만의 인사말 프로젝트를 만들어보자
# 1단계: 프로젝트 폴더 만들기
mkdir greeting-project
cd greeting-project
# 2단계: npm 프로젝트 초기화하기
npm init -y
# 3단계: chalk 패키지 설치하기
npm install chalk// greeting.js 파일을 만들어주세요
// 나만의 특별한 인사말 프로그램입니다!
// chalk 패키지를 가져와요
const chalk = require('chalk');
// 나의 정보를 변수에 저장해요
const myName = "여러분의 이름"; // 여러분의 이름으로 바꿔주세요
const myAge = 11; // 여러분의 나이로 바꿔주세요
const mySchool = "꿈나무 초등학교"; // 여러분의 학교로 바꿔주세요
// 예쁜 인사말을 만들어보겠습니다
console.log(chalk.blue('='.repeat(40))); // 파란색 선으로 구분
console.log(chalk.green('🌟 특별한 자기소개 🌟'));
console.log(chalk.blue('='.repeat(40)));
console.log('');
console.log(chalk.yellow(`👋 안녕하세요! 저는 ${chalk.bold(myName)}입니다!`));
console.log(chalk.cyan(`🎂 나이: ${myAge}살`));
console.log(chalk.magenta(`🏫 학교: ${mySchool}`));
console.log('');
console.log(chalk.green('💻 npm을 배우고 있어요!'));
console.log(chalk.red('❤️ 앞으로 멋진 프로그램을 많이 만들고 싶어요!'));
console.log('');
console.log(chalk.blue('='.repeat(40)));Ex2) 간단한 계산기 웹사이트를 만들어보자
# express 패키지 설치하기
npm install express// calculator-server.js 파일을 만들어주세요
// 간단한 계산기 웹사이트입니다!
// express 패키지를 가져와요
const express = require('express');
const app = express();
const port = 3000;
// 메인 페이지 (계산기)
app.get('/', (req, res) => {
res.send(`
<h1>🧮 간단한 계산기</h1>
<p>아래 링크를 클릭해서 계산해보세요!</p>
<ul>
<li><a href="/add/10/5">10 + 5 계산하기</a></li>
<li><a href="/subtract/20/8">20 - 8 계산하기</a></li>
<li><a href="/multiply/6/7">6 × 7 계산하기</a></li>
<li><a href="/divide/15/3">15 ÷ 3 계산하기</a></li>
</ul>
<p>다른 숫자로도 계산해보세요! 주소에서 숫자를 바꿔보세요.</p>
`);
});
// 더하기 기능
app.get('/add/:num1/:num2', (req, res) => {
const num1 = parseInt(req.params.num1); // 첫 번째 숫자를 정수로 바꿔요
const num2 = parseInt(req.params.num2); // 두 번째 숫자를 정수로 바꿔요
const result = num1 + num2; // 더하기 계산을 해요
res.send(`
<h1>➕ 더하기 계산 결과</h1>
<h2>${num1} + ${num2} = ${result}</h2>
<p><a href="/">메인 페이지로 돌아가기</a></p>
`);
});
// 빼기 기능
app.get('/subtract/:num1/:num2', (req, res) => {
const num1 = parseInt(req.params.num1); // 첫 번째 숫자를 정수로 바꿔요
const num2 = parseInt(req.params.num2); // 두 번째 숫자를 정수로 바꿔요
const result = num1 - num2; // 빼기 계산을 해요
res.send(`
<h1>➖ 빼기 계산 결과</h1>
<h2>${num1} - ${num2} = ${result}</h2>
<p><a href="/">메인 페이지로 돌아가기</a></p>
`);
});
// 서버 시작하기
app.listen(port, () => {
console.log(`🚀 계산기 서버가 시작되었습니다!`);
console.log(`🌐 http://localhost:${port} 에서 확인해보세요!`);
});Ex3) package.json 파일을 직접 수정해보자
{
"name": "my-first-npm-adventure",
"version": "1.0.0",
"description": "npm을 배우면서 만든 첫 번째 프로젝트입니다!",
"main": "index.js",
"scripts": {
"start": "node index.js",
"greeting": "node greeting.js",
"server": "node calculator-server.js"
},
"keywords": ["npm", "learning", "nodejs", "beginner"],
"author": "꼬마 개발자",
"license": "MIT",
"dependencies": {
"chalk": "^4.1.2",
"express": "^4.17.1"
}
}이제 다음과 같은 명령어로 프로그램을 실행할 수 있어요:
npm run greeting # 인사말 프로그램 실행
npm run server # 계산기 서버 실행지금까지 npm이라는 놀라운 도구에 대해 자세히 알아보았습니다. npm은 전 세계 개발자들이 만든 보물 같은 코드들을 쉽게 가져다 쓸 수 있게 해주는 거대한 도서관이에요. 이제 여러분도 npm을 사용해서 더 멋지고 강력한 프로그램들을 만들 수 있게 되었답니다!
📝 복습 문제 - 이전 단원 내용 기억하기
이번 시간에 새로운 내용을 배웠으니, 이전에 배운 중요한 내용도 복습해볼까요?
🔢 터미널에서 자바스크립트 실행하기 복습 (17.4.3단원에서 배운 내용)
문제 1: 터미널에서 자바스크립트를 실행하는 두 가지 방법을 설명해보세요.
해답:
파일 실행 방식: 자바스크립트 코드를
.js파일로 저장한 후,node 파일이름.js명령어로 실행하는 방법이에요. 복잡한 프로그램을 만들 때 주로 사용해요.대화형 모드(REPL): 터미널에서
node만 입력해서 대화형 환경에 들어가는 방법이에요. 간단한 코드를 즉석에서 테스트하거나 빠른 계산을 할 때 유용해요.
문제 2: 다음 중 터미널에서 자주 하는 실수가 아닌 것은?
A. 파일 이름에 .js 확장자를 빼먹기
B. 파일 이름을 잘못 입력하기
C. 대화형 모드에서 나가지 못하기
D. npm 패키지를 설치하지 않기
해답: D. npm 패키지를 설치하지 않기
npm 패키지 설치는 터미널에서 자바스크립트를 실행할 때 꼭 필요한 것이 아니라, 추가 기능이 필요할 때만 하는 것이에요. A, B, C는 모두 터미널에서 자바스크립트를 실행할 때 자주 하는 실수들입니다.
해설: 터미널에서 Node.js로 자바스크립트를 실행하는 것은 브라우저에서 실행하는 것과 다른 환경이에요. 파일 실행과 대화형 모드 두 가지 방법을 잘 구분해서 사용하는 것이 중요해요.
✅ 학습 완료 체크리스트
이번 시간에 배운 내용들을 모두 이해했는지 확인해보세요!
| 학습 내용 | 이해했나요? |
|---|---|
| npm의 기본 개념 | ✅ |
| 패키지 설치와 사용법 | ✅ |
| package.json 파일의 역할 | ✅ |
| 자주 하는 실수들 | ✅ |
| 실전 예제 이해 | ✅ |
📂 마무리 정보
오늘 배운 17.5.1 내용이 여러분의 자바스크립트 지식 상자에 잘 저장되었나요? npm은 Node.js 개발에서 없어서는 안 될 중요한 도구예요. 전 세계 개발자들이 만든 유용한 코드들을 활용해서 더 빠르고 효율적으로 프로그램을 만들 수 있게 해주죠. 다음 시간에는 npm 패키지를 실제로 설치하고 사용하는 방법에 대해 더 자세히 알아볼 거예요!
기억할 점: npm은 마치 거대한 코드 도서관 같아서, 필요한 기능을 직접 만들지 않고도 다른 사람들이 만든 완성도 높은 코드를 가져다 쓸 수 있다는 점을 꼭 기억해두세요.
무료 JavaScript 학습 플랫폼에서 단계별 학습과 실시간 코드 실행을 통해
더욱 효과적이고 재미있게 학습하실 수 있습니다.
'17. 코드 정리하고 나누기 (모듈 시스템) > 17.5 npm이란? 사용법' 카테고리의 다른 글
| 17.5.3 scripts 작성하기 - npm으로 편리한 단축키 만들기 (0) | 2025.07.26 |
|---|---|
| 17.5.2 패키지 설치해보기 - npm으로 유용한 도구 가져오기 (0) | 2025.07.26 |