17.5.2 패키지 설치해보기 - npm으로 유용한 도구 가져오기

17. 코드 정리하고 나누기 (모듈 시스템)/17.5 npm이란? 사용법

17.5.2 패키지 설치해보기 - npm으로 유용한 도구 가져오기

thejavascript4kids 2025. 7. 26. 20:13

📘 17.5.2 패키지 설치해보기 - npm으로 유용한 도구 가져오기

지난 시간에 npm이라는 코드 도구 상점에 대해 배웠으니, 이제 정말 신나는 일을 해볼 시간이에요. 바로 실제로 상점에서 필요한 패키지들을 가져와 보는 거예요!

마치 처음으로 문구점에서 학용품을 사는 것처럼, 설레면서도 조금 긴장되지 않나요? 하지만 걱정하지 마세요. 우리가 천천히, 차근차근 함께 배워나갈 테니까요!

🧠 먼저 용어를 알아볼까요?

npm에서 쇼핑을 시작하기 전에, 알아야 할 중요한 용어들과 먼저 친해져 보겠습니다.

용어	의미
패키지 설치	npm을 사용해서 다른 사람이 만든 유용한 코드를 우리 프로젝트로 가져오는 것이에요.
프로젝트 전용 설치	현재 작업 중인 프로젝트에만 패키지를 설치하는 방법이에요.
컴퓨터 전체 설치	컴퓨터 전체에서 언제든 사용할 수 있도록 패키지를 설치하는 방법이에요.
패키지 보관함	설치한 패키지들이 실제로 저장되는 특별한 폴더예요.

✨ 패키지 설치의 핵심 개념

패키지를 설치한다는 것은 마치 문구점에서 필요한 학용품을 사오는 것과 같아요. 우리가 멋진 그림을 그리고 싶다면, 색연필, 스케치북, 지우개 등 필요한 도구들을 사와야 하는 것처럼, 프로그램을 만들 때도 필요한 기능의 패키지들을 설치해야 해요.

npm install이라는 명령어를 사용하면, 전 세계 어디에 있는 패키지든 몇 초 만에 우리 컴퓨터로 가져올 수 있어요. 정말 편리하지 않나요?

패키지를 설치하는 방법에는 두 가지 주요한 방식이 있어요. 첫 번째는 프로젝트 전용 설치로, 현재 우리가 작업하고 있는 프로젝트에만 패키지를 설치하는 방법이에요. 이는 마치 우리 방에만 학용품을 가져다 두는 것과 같아요.

두 번째는 컴퓨터 전체 설치로, 컴퓨터 전체에서 언제든 사용할 수 있도록 설치하는 방법이에요. 이는 마치 집 전체에서 공용으로 쓸 수 있는 도구를 사는 것과 같답니다.

비유로 이해하기: 학교 준비물 준비하기

패키지 설치를 더 쉽게 이해하기 위해 '학교 준비물 준비하기'에 비유해보겠습니다.

미술 시간에 수채화를 그리기로 했다고 생각해보세요. 선생님이 필요한 준비물 목록을 주셨어요: 물감, 붓, 팔레트, 스케치북...

npm 상점은 마치 학교 앞 문구점과 같아요. 그곳에는 우리가 필요한 모든 준비물이 다 있어요. "물감 하나 주세요"(npm install colors)라고 말하면, 점원 아저씨가 친절하게 물감을 가져다 주시죠.

프로젝트 전용 설치는 개인 필통에 준비물을 넣는 것과 같아요. 내가 미술 수업에서만 쓸 물감과 붓을 내 필통에 넣어두는 거예요. 다른 친구들은 내 필통 속 준비물을 쓸 수 없죠.

컴퓨터 전체 설치는 교실 공용 장에 준비물을 두는 것과 같아요. 반 전체가 함께 쓸 수 있는 큰 물통이나 걸레를 교실에 두는 거예요. 누구든 필요할 때 사용할 수 있어요.

준비물 목록(package.json)에 필요한 것들을 적어두면, 다른 친구들도 똑같은 준비물을 준비할 수 있어요. "우리 반 미술 수업 준비물 목록이에요!"

🎯 패키지를 설치하는 이유

그렇다면 우리는 왜 패키지를 설치해야 할까요? 정말 좋은 이유들이 많이 있어요.

첫째, 이미 만들어진 도구를 사용할 수 있어요. 다른 똑똑한 개발자들이 이미 만들어 놓은 훌륭한 도구들을 사용하면, 우리는 더 중요한 일에 집중할 수 있어요.

둘째, 시간을 엄청나게 절약할 수 있어요. 색깔 있는 글자를 출력하는 기능을 직접 만들려면 며칠이 걸릴 수도 있지만, colors 패키지를 사용하면 5분 만에 끝낼 수 있어요.

셋째, 더 안전하고 완성도 높은 코드를 사용할 수 있어요. npm에 있는 패키지들은 전 세계 수많은 개발자들이 함께 개선해온 것들이에요. 버그도 적고, 다양한 상황에서 잘 작동하도록 만들어져 있어요.

마지막으로, 신기한 기능들을 쉽게 추가할 수 있어요. QR코드 만들기, 이미지 편집하기 같은 고급 기능들도 패키지를 설치하면 쉽게 사용할 수 있답니다.

⚙️ 패키지 설치 명령어 배우기

이제 실제로 패키지를 설치하는 명령어들을 배워보겠습니다.

가장 기본적인 설치 명령어:

# 기본 설치 (프로젝트 전용)
npm install 패키지이름

# 줄여서 쓸 수도 있어요
npm i 패키지이름

특별한 상황에서 사용하는 명령어들:

# 개발할 때만 필요한 패키지 설치
npm install 패키지이름 --save-dev

# 컴퓨터 전체에서 사용할 수 있게 설치
npm install 패키지이름 -g

# 특정 버전을 지정해서 설치
npm install 패키지이름@1.2.3

🧪 첫 번째 패키지 설치 실습

이제 실제로 패키지를 설치해서 사용해보는 실습을 시작해보겠습니다!

🔹 예제 1: 색깔 있는 글자 만들기

먼저 예쁜 색깔 글자를 만들 수 있는 colors 패키지를 설치해보겠습니다.

# 1단계: 새 프로젝트 폴더 만들기
mkdir color-practice
cd color-practice

# 2단계: npm 프로젝트 시작하기
npm init -y

# 3단계: colors 패키지 설치하기
npm install colors

설치가 완료되면 다음과 같은 코드를 만들어보세요:

// color-practice.js 파일을 만들어주세요
// colors 패키지로 예쁜 글자를 만들어보겠습니다!

// colors 패키지를 우리 프로그램으로 가져와요
const colors = require('colors');

// 색깔 글자 만들기 시작!
console.log('🎨 색깔 글자의 세계에 오신 것을 환영합니다! 🎨'.rainbow);
console.log(''); // 빈 줄로 구분해요

// 기본 색깔들로 인사해보겠습니다
console.log('안녕하세요!'.red);                    // 빨간색으로 인사
console.log('저는 빨간색이에요!'.red);             // 빨간색 소개
console.log('');

console.log('반갑습니다!'.green);                  // 초록색으로 인사
console.log('저는 초록색이에요!'.green);           // 초록색 소개
console.log('');

console.log('좋은 하루예요!'.blue);                // 파란색으로 인사
console.log('저는 파란색이에요!'.blue);            // 파란색 소개
console.log('');

// 배경색도 바꿔보겠습니다
console.log('  저는 노란 배경에 검은 글자예요!  '.black.bgYellow);  
console.log('  저는 파란 배경에 흰 글자예요!  '.white.bgBlue);      
console.log('');

// 특별한 효과도 해보겠습니다
console.log('저는 굵은 글자예요!'.bold);            // 굵은 글자 효과
console.log('저는 밑줄 글자예요!'.underline);       // 밑줄 효과
console.log('');

// 여러 효과를 조합해보겠습니다
console.log('멋진 무지개 글자!'.rainbow.bold);      // 무지개색 + 굵은 글자
console.log('신나는 파티 글자!'.yellow.bgMagenta.bold); // 노란 글자 + 보라 배경 + 굵게
console.log('');

console.log('🌟 색깔 글자 만들기가 완료되었습니다! 🌟'.green.bold);

이제 우리의 첫 번째 프로그램을 실행해보세요:

node color-practice.js

터미널에 무지개 색깔의 예쁜 글자들이 나타날 거예요!

🔹 예제 2: 간단한 날짜 다루기

이번에는 자바스크립트의 기본 Date 객체를 사용해서 시간을 다뤄보겠습니다.

// time-practice.js 파일을 만들어주세요
// 자바스크립트로 시간을 다뤄보겠습니다!

// 시간 다루기 시작!
console.log('⏰ 시간 다루기 연습에 오신 것을 환영합니다! ⏰');
console.log(''); // 빈 줄

// 현재 시간을 다양한 방법으로 보여주겠습니다
const now = new Date();                            // 현재 시간을 가져와요

console.log('📅 오늘의 날짜와 시간:');
console.log('   기본 형식:', now.toString());      // 기본 형식으로 출력
console.log('   날짜만:', now.toDateString());     // 날짜만 영어로
console.log('   시간만:', now.toTimeString());     // 시간만 출력
console.log('');

// 한국어 형식으로 출력해보겠습니다
console.log('🇰🇷 한국어 형식:');
console.log('   년:', now.getFullYear() + '년');                    // 연도
console.log('   월:', (now.getMonth() + 1) + '월');                // 월 (0부터 시작하므로 +1)
console.log('   일:', now.getDate() + '일');                       // 일
console.log('   시간:', now.getHours() + '시 ' + now.getMinutes() + '분'); // 시간과 분
console.log('');

// 과거와 미래로 시간 여행을 해보겠습니다
console.log('🚀 시간 여행하기:');

const yesterday = new Date(now);                   // 오늘 날짜를 복사해요
yesterday.setDate(now.getDate() - 1);             // 하루를 빼요
console.log('   어제:', yesterday.getMonth() + 1 + '월 ' + yesterday.getDate() + '일');

const tomorrow = new Date(now);                    // 오늘 날짜를 복사해요
tomorrow.setDate(now.getDate() + 1);              // 하루를 더해요
console.log('   내일:', tomorrow.getMonth() + 1 + '월 ' + tomorrow.getDate() + '일');

const nextWeek = new Date(now);                    // 오늘 날짜를 복사해요
nextWeek.setDate(now.getDate() + 7);              // 7일을 더해요
console.log('   일주일 후:', nextWeek.getMonth() + 1 + '월 ' + nextWeek.getDate() + '일');
console.log('');

// 특별한 날들을 계산해보겠습니다
const myBirthday = new Date('2014-03-15');         // 생일을 여러분의 생일로 바꿔보세요!
const ageInDays = Math.floor((now - myBirthday) / (1000 * 60 * 60 * 24)); // 일 단위로 계산
console.log('🎂 생일 계산하기:');
console.log(`   내가 태어난 지 ${ageInDays}일이 지났어요!`);
console.log('');

console.log('✨ 시간 다루기가 완료되었습니다! ✨');

실행해보세요:

node time-practice.js

🔹 예제 3: 웹서버 만들기

이번에는 express 패키지로 진짜 웹서버를 만들어보겠습니다!

# express 패키지 설치하기
npm install express

// web-server.js 파일을 만들어주세요
// express 패키지로 웹서버를 만들어보겠습니다!

// express 패키지를 가져와요
const express = require('express');

// 웹서버 앱을 만들어요
const app = express();
const port = 3000;

// 메인 페이지 만들기
app.get('/', (req, res) => {
  // 방문자에게 보여줄 예쁜 웹페이지를 만들어요
  res.send(`
    <h1>🎉 안녕하세요! 저는 Express 웹서버예요!</h1>
    <p>이 웹사이트는 npm에서 가져온 Express 패키지로 만들었어요!</p>
    <p>정말 신기하죠? 😊</p>

    <h2>🌟 다른 페이지들도 구경해보세요:</h2>
    <ul>
      <li><a href="/hello">인사말 페이지</a></li>
      <li><a href="/time">현재 시간 페이지</a></li>
      <li><a href="/random">랜덤 숫자 페이지</a></li>
    </ul>

    <p style="color: blue; font-size: 18px;">
      🚀 npm 덕분에 이런 멋진 웹사이트를 쉽게 만들 수 있어요!
    </p>
  `);
});

// 인사말 페이지 만들기
app.get('/hello', (req, res) => {
  res.send(`
    <h1>👋 안녕하세요!</h1>
    <p>저는 Express 패키지가 만든 특별한 인사말이에요!</p>
    <p><a href="/">홈으로 돌아가기</a></p>
  `);
});

// 시간 페이지 만들기
app.get('/time', (req, res) => {
  const now = new Date();                     // 현재 시간을 가져와요
  res.send(`
    <h1>⏰ 현재 시간</h1>
    <p>지금은 ${now.toLocaleString()}입니다!</p>
    <p>페이지를 새로고침하면 시간이 바뀔 거예요!</p>
    <p><a href="/">홈으로 돌아가기</a></p>
  `);
});

// 랜덤 숫자 페이지 만들기
app.get('/random', (req, res) => {
  const randomNumber = Math.floor(Math.random() * 100) + 1; // 1~100 랜덤 숫자

  res.send(`
    <h1>🎲 랜덤 숫자</h1>
    <p style="font-size: 24px; color: purple;">
      오늘의 행운 숫자: <strong>${randomNumber}</strong>
    </p>
    <p>페이지를 새로고침하면 다른 숫자가 나타날 거예요!</p>
    <p><a href="/">홈으로 돌아가기</a></p>
  `);
});

// 웹서버 시작하기!
app.listen(port, () => {
  console.log('🌟 웹서버가 시작되었습니다!');                     
  console.log(`🌐 웹브라우저에서 http://localhost:${port} 를 열어보세요!`); 
  console.log('⏹️  서버를 종료하려면 Ctrl+C 를 누르세요.');             
  console.log('');
  console.log('📦 이 멋진 웹서버는 npm의 Express 패키지로 만들어졌어요!');
});

웹서버를 시작해보세요:

node web-server.js

그리고 웹브라우저에서 http://localhost:3000을 열어보세요. 우리가 만든 웹사이트가 나타날 거예요!

🔄 패키지 설치 과정 정리

패키지를 설치하고 사용하는 전체 과정을 차근차근 정리해보겠습니다.

1단계: 프로젝트 준비하기

새 폴더를 만들고 npm init -y로 프로젝트를 시작해요
package.json 파일이 생성되어 프로젝트의 신분증 역할을 해요

2단계: 필요한 패키지 찾기

npmjs.com 웹사이트에서 원하는 기능의 패키지를 검색해요
다운로드 수, 평점, 문서를 확인해서 좋은 패키지를 골라요

3단계: 패키지 설치하기

npm install 패키지이름 명령어로 설치해요
node_modules 폴더에 패키지 파일들이 저장돼요
package.json에 설치된 패키지 정보가 자동으로 기록돼요

4단계: 패키지 사용하기

const 패키지이름 = require('패키지이름');으로 가져와요
패키지의 함수나 기능을 우리 코드에서 사용해요

5단계: 프로젝트 공유하기

친구들과 프로젝트를 공유할 때는 node_modules 폴더는 제외해요
package.json 파일만 공유하면 npm install로 똑같은 환경을 만들 수 있어요

🧚‍♀️ 이야기로 다시 배우기: 도구 상점에서 쇼핑하기

지금까지 배운 내용을 하나의 이야기로 다시 정리해볼게요.

한때 한 학생이 멋진 로봇을 만들고 싶어했어요. 하지만 혼자서 모든 부품을 만들기에는 너무 어려웠죠.

그러던 어느 날, 마을에 npm이라는 특별한 도구 상점이 열렸다는 소식을 들었어요. "그곳에 가면 전 세계 발명가들이 만든 놀라운 부품들을 쉽게 살 수 있다더라!"

학생은 신이 나서 npm 상점을 찾아갔어요. 와! 정말 놀라웠어요. 수백만 개의 부품들이 깔끔하게 정리되어 있었거든요.

"색깔을 바꿀 수 있는 LED가 필요해요!"라고 말하니, 상점 직원이 colors라는 LED 세트를 추천해주었어요. "npm install colors"라는 명령어를 사용하니, 순식간에 부품이 배달되어 왔어요.

"시간을 알려주는 기능이 필요해요!"라고 하니, 자바스크립트에 원래 들어있는 Date라는 시계를 사용하는 방법을 알려주었어요. 별도 부품을 사지 않고도 시간을 다룰 수 있었어요.

"인터넷에 연결할 수 있는 부품이 필요해요!"라고 하니, Express라는 통신 장치를 주었어요. 이 장치로 전 세계 사람들과 소통할 수 있는 로봇을 만들 수 있었어요.

학생은 부품 목록(package.json)에 구매한 부품들을 꼼꼼히 적어두었어요. 그러면 나중에 같은 로봇을 또 만들고 싶을 때, 이 목록만 보고 똑같은 부품들을 다시 구할 수 있었거든요.

집에 돌아와서 부품들을 조립해보니 정말 놀라웠어요. 며칠이 걸릴 줄 알았던 로봇이 몇 시간 만에 완성되었어요! 색깔도 바뀌고, 시간도 알려주고, 인터넷으로 사람들과 대화까지 할 수 있는 멋진 로봇이었답니다.

🧠 자주 하는 실수와 주의할 점

패키지를 설치할 때 자주 하는 실수들을 미리 알아두면 도움이 될 거예요.

❌ 실수 1: npm init을 하지 않고 패키지 설치하기

# 이렇게 하면 안 돼요!
# package.json 파일이 없는 상태에서 설치하면
# 패키지 정보가 제대로 기록되지 않아요
npm install express

항상 npm init -y를 먼저 실행해서 package.json 파일을 만든 다음에 패키지를 설치하세요.

❌ 실수 2: 패키지 이름을 틀리게 입력하기

# 이렇게 하면 안 돼요!
npm install expres     # express에서 's'가 빠졌어요
npm install color      # colors에서 's'가 빠졌어요

패키지 이름을 정확히 입력해야 해요. npmjs.com에서 정확한 이름을 확인하고 설치하세요.

❌ 실수 3: node_modules 폴더를 친구들과 공유하려고 하기

# 이렇게 하면 안 돼요!
# node_modules 폴더는 너무 크고 불필요해요
zip -r project.zip . # 모든 파일을 압축하면 안 돼요

프로젝트를 공유할 때는 node_modules 폴더는 제외하고, package.json 파일만 공유하세요.

❌ 실수 4: 패키지를 설치했는데 require를 하지 않기

// 이렇게 하면 안 돼요!
// colors 패키지를 설치했지만 가져오지 않았어요
console.log('빨간색 글자'.red); // 에러 발생!

// 이렇게 해야 해요!
const colors = require('colors');
console.log('빨간색 글자'.red); // 정상 작동!

✏️ 연습문제로 개념 다지기

하늘이 짙은 파란색으로 물들어가는 저녁 시간처럼, 우리의 npm 여행도 깊어집니다. 이제 직접 손으로 만져보며 이 새로운 도구들과 친해져볼까요. 마치 피아니스트가 건반을 하나씩 눌러보며 소리를 익히듯이, 우리도 차근차근 연습해보겠습니다.

Ex1) 나만의 인사말 생성기를 만들어보자

# 필요한 패키지들 설치하기
npm install colors figlet

// greeting-generator.js 파일을 만들어주세요
// 여러 패키지를 조합한 멋진 인사말 생성기입니다!

// 필요한 패키지들을 가져와요
const colors = require('colors');
const figlet = require('figlet');

// 사용자 정보를 설정해요
const userName = "여러분의 이름";              // 여러분의 이름으로 바꿔주세요
const userGrade = 5;                         // 여러분의 학년으로 바꿔주세요

// 큰 글자로 이름을 출력해요
figlet(userName, (err, data) => {
  if (err) {                                 // 만약 오류가 생겼다면
    console.log('글자를 만드는 중 오류가 발생했어요');
    return;                                  // 함수를 종료해요
  }

  // 무지개 색깔로 큰 이름을 출력해요
  console.log(data.rainbow);
  console.log('');

  // 예쁜 색깔로 정보를 출력해요
  console.log('🌟 특별한 자기소개 🌟'.yellow.bold);
  console.log('='.repeat(30).blue);
  console.log(`👋 안녕하세요! 저는 ${userName}입니다!`.green);     
  console.log(`📚 저는 ${userGrade}학년이에요!`.cyan);            
  console.log(`💻 npm으로 프로그래밍을 배우고 있어요!`.magenta);   
  console.log('='.repeat(30).blue);
  console.log('');
  console.log('✨ 앞으로 멋진 프로그램을 많이 만들고 싶어요! ✨'.green.bold);
});

Ex2) 간단한 할 일 관리 웹사이트를 만들어보자

# express 패키지 설치하기
npm install express

// todo-website.js 파일을 만들어주세요
// 간단한 할 일 관리 웹사이트입니다!

// express 패키지를 가져와요
const express = require('express');
const app = express();
const port = 3000;

// 할 일 목록을 저장할 배열 (실제로는 데이터베이스를 사용해요)
let todoList = [
  '숙제하기',
  '친구와 놀기', 
  '프로그래밍 공부하기'
];

// 메인 페이지 - 할 일 목록 보여주기
app.get('/', (req, res) => {
  let todoHTML = '<h1>📝 나의 할 일 목록</h1>';
  todoHTML += '<ul>';

  todoList.forEach((todo, index) => {        // 할 일 목록을 하나씩 확인하면서
    todoHTML += `<li>${index + 1}. ${todo}</li>`; // HTML 리스트로 만들어요
  });

  todoHTML += '</ul>';
  todoHTML += '<h2>🎯 새 할 일 추가하기</h2>';
  todoHTML += '<p><a href="/add/책읽기">책읽기 추가</a></p>';
  todoHTML += '<p><a href="/add/운동하기">운동하기 추가</a></p>';
  todoHTML += '<p><a href="/add/그림그리기">그림그리기 추가</a></p>';
  todoHTML += '<p style="color: gray;">주소에서 할 일 이름을 바꿔서 다른 일도 추가해보세요!</p>';

  res.send(todoHTML);                        // 완성된 HTML을 전송해요
});

// 새 할 일 추가하기
app.get('/add/:newTodo', (req, res) => {
  const newTodo = req.params.newTodo;        // 주소에서 새 할 일을 가져와요
  todoList.push(newTodo);                    // 할 일 목록에 추가해요

  res.send(`
    <h1>✅ 할 일이 추가되었습니다!</h1>
    <p><strong>"${newTodo}"</strong>가 할 일 목록에 추가되었어요!</p>
    <p><a href="/">할 일 목록 보러가기</a></p>
  `);
});

// 서버 시작하기
app.listen(port, () => {
  console.log('📝 할 일 관리 웹사이트가 시작되었습니다!');           
  console.log(`🌐 http://localhost:${port} 에서 확인해보세요!`);    
  console.log('⏹️  서버를 종료하려면 Ctrl+C 를 누르세요.');          
});

Ex3) 개발용 도구를 사용해보자

# nodemon을 개발용 패키지로 설치하기
npm install nodemon --save-dev

package.json 파일의 scripts 부분을 다음과 같이 수정해보세요:

{
  "scripts": {
    "start": "node todo-website.js",
    "dev": "nodemon todo-website.js"
  }
}

이제 다음 명령어로 개발 모드로 서버를 실행할 수 있어요:

npm run dev

코드를 수정하고 저장하면 자동으로 서버가 다시 시작될 거예요!

📚 16단원 복습 문제

지난 시간에 배운 프로토타입과 상속을 복습해보겠습니다!

복습 문제 1: 프로토타입으로 메서드 추가하기

// 생성자 함수를 만들어보세요
function Student(name, grade) {
  this.name = name;
  this.grade = grade;
}

// 프로토타입에 메서드를 추가해보세요
Student.prototype.introduce = function() {
  return `안녕하세요! 저는 ${this.name}이고, ${this.grade}학년입니다.`;
};

Student.prototype.study = function(subject) {
  return `${this.name}이(가) ${subject}를 공부하고 있어요.`;
};

// 학생 인스턴스를 만들어보세요
const student1 = new Student('민수', 5);
const student2 = new Student('영희', 6);

// 메서드를 사용해보세요
console.log(student1.introduce()); // 안녕하세요! 저는 민수이고, 5학년입니다.
console.log(student2.study('수학')); // 영희이(가) 수학을 공부하고 있어요.

해답 설명: 생성자 함수의 prototype 속성에 메서드를 추가하면, 그 생성자 함수로 만든 모든 인스턴스가 그 메서드를 사용할 수 있어요. 이렇게 하면 메모리도 절약하고 코드도 깔끔해져요.

복습 문제 2: 간단한 상속 만들어보기

// 동물 생성자 함수
function Animal(name) {
  this.name = name;
}

Animal.prototype.speak = function() {
  return `${this.name}이(가) 소리를 내요.`;
};

// 강아지 생성자 함수
function Dog(name, breed) {
  Animal.call(this, name); // 부모 생성자 호출
  this.breed = breed;
}

// Dog가 Animal을 상속받도록 설정
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;

// Dog만의 메서드 추가
Dog.prototype.bark = function() {
  return `${this.name}이(가) 멍멍 짖어요!`;
};

const myDog = new Dog('바둑이', '진돗개');

console.log(myDog.speak()); // "바둑이이(가) 소리를 내요."
console.log(myDog.bark());  // "바둑이이(가) 멍멍 짖어요!"

해답 설명: Dog 생성자 함수가 Animal을 상속받았기 때문에, Dog 인스턴스는 Animal의 메서드도 사용할 수 있어요. 프로토타입 체인을 통해 상위 객체의 메서드와 속성에 접근할 수 있답니다.

지금까지 npm 패키지 설치 방법에 대해 자세히 알아보았습니다. 이제 여러분도 npm이라는 도구 상점에서 필요한 도구들을 자유자재로 가져와서 멋진 프로그램을 만들 수 있게 되었어요! 다음에는 더 고급 기능들을 배워보면서 프로그래밍 실력을 한 단계 더 향상시켜보겠습니다.

✅ 학습 완료 체크리스트

이번 시간에 배운 내용들을 모두 이해했는지 확인해보세요!

학습 내용	이해했나요?
npm 패키지 설치 개념	✅
기본 설치 명령어 사용법	✅
패키지 사용 방법	✅
자주 하는 실수들	✅
실전 예제 이해	✅
16단원 복습 내용	✅

📂 마무리 정보

오늘 배운 17.5.2 내용이 여러분의 자바스크립트 지식에 잘 저장되었나요? 다음 시간에는 더 재미있는 내용으로 만나요!

기억할 점: 오늘 배운 내용을 꼭 연습해보시고, 궁금한 점이 있으면 언제든 다시 돌아와서 읽어보세요.

🚀 더 체계적인 JavaScript 학습을 원하신다면?

이 포스팅에서 다룬 내용을 실제로 실습해보세요!
무료 JavaScript 학습 플랫폼에서 단계별 학습과 실시간 코드 실행을 통해
더욱 효과적이고 재미있게 학습하실 수 있습니다.

📝 실시간 코드 실행 📊 학습 진도 관리 👥 체계적 커리큘럼

📚 171개 체계적 학습레슨 · 📋 855개 4지선다 연습문제 · 🆓 완전 무료 · ⚡ 즉시 시작

💻 무료로 학습하러 가기

'17. 코드 정리하고 나누기 (모듈 시스템) > 17.5 npm이란? 사용법' 카테고리의 다른 글

17.5.3 scripts 작성하기 - npm으로 편리한 단축키 만들기 (0)	2025.07.26
17.5.1 npm이란? - 거대한 코드 도서관 탐험하기 (0)	2025.07.26

현재글17.5.2 패키지 설치해보기 - npm으로 유용한 도구 가져오기

초중고등학생 자바스크립트 교재

이 교재는 초등학생부터 성인까지, 누구나 자바스크립트를 쉽게 배우고 스스로 코딩을 즐겁게 경험할 수 있도록 AI와 함께 정성껏 설계하였습니다. 프로그래밍이 처음이신가요? 걱정하지 않으셔도 됩니다.

자바스크립트교재, 코딩교재, JavaScript, 중등코딩교육, 논리연산자, 초등코딩, Export, 싱글턴패턴, Import, 모듈패턴, 모듈, setTimeout, 자바스크립트, 산술연산자, Promise, 연산자, ES6모듈, 비동기, 비교연산자, async_await,

Today :
Yesterday :

초중고등학생 자바스크립트 교재

17.5.2 패키지 설치해보기 - npm으로 유용한 도구 가져오기

📘 17.5.2 패키지 설치해보기 - npm으로 유용한 도구 가져오기

🧠 먼저 용어를 알아볼까요?

✨ 패키지 설치의 핵심 개념

비유로 이해하기: 학교 준비물 준비하기

🎯 패키지를 설치하는 이유

⚙️ 패키지 설치 명령어 배우기

🧪 첫 번째 패키지 설치 실습

🔹 예제 1: 색깔 있는 글자 만들기

🔹 예제 2: 간단한 날짜 다루기

🔹 예제 3: 웹서버 만들기

🔄 패키지 설치 과정 정리

🧚‍♀️ 이야기로 다시 배우기: 도구 상점에서 쇼핑하기

🧠 자주 하는 실수와 주의할 점

❌ 실수 1: npm init을 하지 않고 패키지 설치하기

❌ 실수 2: 패키지 이름을 틀리게 입력하기

❌ 실수 3: node_modules 폴더를 친구들과 공유하려고 하기

❌ 실수 4: 패키지를 설치했는데 require를 하지 않기

✏️ 연습문제로 개념 다지기

Ex1) 나만의 인사말 생성기를 만들어보자

Ex2) 간단한 할 일 관리 웹사이트를 만들어보자

Ex3) 개발용 도구를 사용해보자

📚 16단원 복습 문제

복습 문제 1: 프로토타입으로 메서드 추가하기

복습 문제 2: 간단한 상속 만들어보기

✅ 학습 완료 체크리스트

📂 마무리 정보

'17. 코드 정리하고 나누기 (모듈 시스템) > 17.5 npm이란? 사용법' 카테고리의 다른 글

'17. 코드 정리하고 나누기 (모듈 시스템)/17.5 npm이란? 사용법'의 다른글

티스토리툴바

« 2025/08 »
일	월	화	수	목	금	토
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30
31

17.5.2 패키지 설치해보기 - npm으로 유용한 도구 가져오기

📘 17.5.2 패키지 설치해보기 - npm으로 유용한 도구 가져오기

🧠 먼저 용어를 알아볼까요?

✨ 패키지 설치의 핵심 개념

비유로 이해하기: 학교 준비물 준비하기

🎯 패키지를 설치하는 이유

⚙️ 패키지 설치 명령어 배우기

🧪 첫 번째 패키지 설치 실습

🔹 예제 1: 색깔 있는 글자 만들기

🔹 예제 2: 간단한 날짜 다루기

🔹 예제 3: 웹서버 만들기

🔄 패키지 설치 과정 정리

🧚‍♀️ 이야기로 다시 배우기: 도구 상점에서 쇼핑하기

🧠 자주 하는 실수와 주의할 점

❌ 실수 1: npm init을 하지 않고 패키지 설치하기

❌ 실수 2: 패키지 이름을 틀리게 입력하기

❌ 실수 3: node_modules 폴더를 친구들과 공유하려고 하기

❌ 실수 4: 패키지를 설치했는데 require를 하지 않기

✏️ 연습문제로 개념 다지기

Ex1) 나만의 인사말 생성기를 만들어보자

Ex2) 간단한 할 일 관리 웹사이트를 만들어보자

Ex3) 개발용 도구를 사용해보자

📚 16단원 복습 문제

복습 문제 1: 프로토타입으로 메서드 추가하기

복습 문제 2: 간단한 상속 만들어보기

✅ 학습 완료 체크리스트

📂 마무리 정보

'17. 코드 정리하고 나누기 (모듈 시스템) > 17.5 npm이란? 사용법' 카테고리의 다른 글

'17. 코드 정리하고 나누기 (모듈 시스템)/17.5 npm이란? 사용법'의 다른글

관련글

티스토리툴바