17.5.3 scripts 작성하기 - npm으로 편리한 단축키 만들기

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

17.5.3 scripts 작성하기 - npm으로 편리한 단축키 만들기

thejavascript4kids 2025. 7. 26. 20:14

📘 17.5.3 scripts 작성하기 - npm으로 편리한 단축키 만들기

때로는 가장 복잡한 것들을 가장 간단하게 만드는 방법을 아는 것이 진정한 지혜일지도 모릅니다. 지금까지 npm으로 패키지를 설치하고 사용하는 방법을 배웠는데, 이제 정말 아름다운 새로운 기능을 배워볼 시간이에요. 바로 npm scripts라는 특별한 단축키 기능이랍니다!

이 기능을 사용하면 길고 복잡한 명령어를 짧고 간단한 단어로 바꿀 수 있어요. 마치 "ctrl+c"로 복사하고 "ctrl+v"로 붙여넣기 하는 것처럼 말이에요!

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

새로운 세상의 문을 열기 전에, 우리가 함께 사용할 소중한 단어들의 의미를 차근차근 알아보겠습니다.

용어	의미
npm scripts	package.json 파일에 저장하는 특별한 명령어 단축키들을 말해요.
package.json	프로젝트의 모든 정보와 설정이 들어있는 중요한 파일이에요.
npm run	우리가 만든 script를 실행하기 위해 사용하는 명령어예요.
빌드 스크립트	우리가 만든 코드를 완성된 프로그램으로 만드는 명령어예요.

✨ npm scripts의 핵심 개념

npm scripts는 마치 할머니의 요리책에 적힌 비법 레시피와 같아요. 요리책에 "우리집 특제 찌개"라고 써있으면, 그 아래에 "된장 2숟가락 넣고, 두부 한 모 넣고, 파 송송 썰어서 넣고..." 같은 자세한 과정이 적혀있죠.

npm scripts도 그와 같아요. package.json 파일에 "dev"라는 간단한 이름을 적어두고, 그 옆에 "nodemon server.js"라는 복잡한 명령어를 연결해두는 거예요. 그러면 나중에 npm run dev라고 한 마디만 하면, 컴퓨터가 알아서 그 복잡한 명령어를 실행해줍니다.

이것의 가장 아름다운 점은 팀 전체가 같은 단축키를 사용할 수 있다는 거예요. 새로 합류한 팀원도 "개발 서버를 시작하려면 어떤 명령어를 써야 하지?"라고 고민할 필요 없이, 그냥 npm run dev만 입력하면 되거든요.

또한 scripts에는 특별한 기능이 있어요. "start"나 "test" 같은 특별한 이름들은 npm start, npm test처럼 run을 생략하고 바로 실행할 수 있답니다. 마치 자주 사용하는 단축키는 더 짧게 만들 수 있는 것처럼요!

비유로 이해하기: 학교 방송실의 단축번호

npm scripts를 더 가까이에서 이해하기 위해 '학교 방송실의 단축번호'에 비유해보겠습니다.

학교 방송실에는 여러 가지 상황에 맞는 안내 방송 대본이 준비되어 있어요. 급식 시간이 되면 방송부 학생이 긴 안내문을 읽어야 하는데, 매번 전체 문장을 읽기는 너무 번거로워요.

그래서 방송실에서는 단축번호 시스템을 만들었어요:

1번: "급식 시간입니다. 손을 깨끗이 씻고 급식실로 오세요."
2번: "청소 시간입니다. 각자 맡은 구역을 깨끗이 청소해주세요."
3번: "하교 시간입니다. 안전하게 집에 가세요."

이제 방송부 학생은 "1번 방송 해주세요"라고 말하기만 하면, 긴 급식 안내 방송이 자동으로 나가는 거예요.

npm scripts도 정확히 이와 같아요:

"dev": "nodemon server.js --watch src"
"build": "webpack --mode production"
"test": "jest --coverage"

개발자가 npm run dev라고 입력하면, 컴퓨터가 알아서 그 복잡한 명령어를 실행해주는 거죠!

🎯 npm scripts를 만드는 이유

그렇다면 우리는 왜 이런 단축키를 만들어야 할까요? 여러 가지 소중한 이유들이 있어요.

첫째, 명령어를 기억하기 쉬워져요. "웹서버를 개발 모드로 시작하려면 nodemon을 사용해서 파일 변경을 감지하면서 server.js를 실행해야 해"라는 복잡한 과정을 기억할 필요 없이, 그냥 npm run dev만 기억하면 되거든요.

둘째, 팀 전체가 같은 방식으로 작업할 수 있어요. 새로운 개발자가 프로젝트에 참여해도, package.json 파일만 보면 어떤 명령어들을 사용할 수 있는지 바로 알 수 있어요.

셋째, 실수를 줄일 수 있어요. 긴 명령어를 매번 직접 입력하다 보면 오타가 나거나 옵션을 빼먹을 수 있는데, scripts를 사용하면 항상 정확한 명령어가 실행돼요.

마지막으로, 복잡한 작업을 간단하게 만들 수 있어요. 여러 단계의 작업을 하나의 script로 묶어서, 한 번에 실행할 수 있답니다.

⚙️ scripts 작성법 배우기

이제 실제로 npm scripts를 작성하는 방법을 배워보겠습니다.

scripts는 package.json 파일의 "scripts" 부분에 작성해요:

{
  "name": "my-project",
  "version": "1.0.0",
  "scripts": {
    "start": "node index.js",
    "dev": "nodemon index.js",
    "test": "jest",
    "build": "webpack --mode production"
  }
}

실행하는 방법:

# 일반적인 script 실행
npm run dev
npm run build

# 특별한 script들은 run 없이도 실행 가능
npm start
npm test

🧪 첫 번째 scripts 실습

이제 실제로 npm scripts를 만들어서 사용해보는 실습을 시작해보겠습니다!

🔹 예제 1: 기본 scripts 만들기

먼저 새로운 실습 환경을 준비해보겠습니다.

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

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

# 3단계: 필요한 도구들 설치하기
npm install express
npm install nodemon --save-dev

간단한 웹서버를 만들어보겠습니다:

// server.js 파일을 만들어주세요
// 우리의 첫 번째 웹서버입니다!

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

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

// 환경 정보를 확인해요
const env = process.env.NODE_ENV || 'development';

// 메인 페이지 만들기
app.get('/', (req, res) => {
  res.send(`
    <h1>🚀 Scripts로 만든 웹서버</h1>
    <p>현재 ${env} 환경에서 실행 중이에요!</p>
    <p>현재 시간: ${new Date().toLocaleString()}</p>
    <p>이 서버는 npm scripts로 실행되었어요! ✨</p>
  `);
});

// 웹서버 시작하기
app.listen(port, () => {
  console.log(`🌟 웹서버가 시작되었습니다!`);                  
  console.log(`🌐 http://localhost:${port} 에서 확인해보세요!`); 
  console.log(`⚡ 환경: ${env}`);                             
  console.log(`📦 scripts로 실행된 서버예요!`);                
});

이제 package.json 파일을 열어서 scripts를 추가해보겠습니다:

{
  "name": "script-practice",
  "version": "1.0.0",
  "scripts": {
    "start": "node server.js",
    "dev": "nodemon server.js",
    "hello": "echo '안녕하세요! scripts 연습 중입니다!'",
    "time": "echo '현재 시간:' && date"
  },
  "dependencies": {
    "express": "^4.17.1"
  },
  "devDependencies": {
    "nodemon": "^2.0.7"
  }
}

이제 우리의 명령어들을 사용해보겠습니다:

# 인사말 출력
npm run hello

# 시간 확인
npm run time

# 개발 서버 시작 (자동 재시작)
npm run dev

# 일반 서버 시작
npm start

🔹 예제 2: 여러 명령어를 연결하는 강력한 기능

이번에는 여러 단계의 작업을 하나로 연결하는 강력한 기능을 만들어보겠습니다.

먼저 테스트용 파일들을 만들어보겠습니다:

// test1.js 파일을 만들어주세요
console.log('🧪 테스트 1 시작!');                    
console.log('   - 더하기 함수 테스트 중...');         
const result1 = 2 + 3 === 5;                       // 더하기 계산 테스트
console.log('   - 결과:', result1 ? '✅ 성공!' : '❌ 실패!'); 
console.log('🎉 테스트 1 완료!');

// test2.js 파일을 만들어주세요
console.log('🧪 테스트 2 시작!');                    
console.log('   - 문자열 연결 테스트 중...');         
const result2 = 'Hello' + ' World' === 'Hello World'; // 문자열 연결 테스트
console.log('   - 결과:', result2 ? '✅ 성공!' : '❌ 실패!'); 
console.log('🎉 테스트 2 완료!');

// build-simulator.js 파일을 만들어주세요
console.log('🏗️  빌드 시뮬레이터 시작!');            
console.log('   - 파일 압축 중...');                
console.log('   - 이미지 최적화 중...');             
console.log('   - 코드 정리 중...');                
console.log('✨ 빌드 완료! 모든 파일이 준비되었습니다.');

이제 package.json에 더 복잡한 scripts를 추가해보겠습니다:

{
  "scripts": {
    "start": "node server.js",
    "dev": "nodemon server.js",

    "test:1": "node test1.js",
    "test:2": "node test2.js",
    "test:all": "npm run test:1 && npm run test:2",

    "build:simulate": "node build-simulator.js",
    "build:clean": "echo '🧹 이전 빌드 결과 정리 중...'",
    "build:prepare": "echo '📁 새 빌드 폴더 생성 중...'",
    "build": "npm run build:clean && npm run build:prepare && npm run build:simulate",

    "full-check": "npm run test:all && npm run build",
    "welcome": "echo '🌟 프로젝트에 오신 것을 환영합니다!' && echo '사용 가능한 명령어: start, dev, test:all, build'"
  }
}

이제 우리의 강력한 연결 기능들을 사용해보겠습니다:

# 환영 메시지 보기
npm run welcome

# 개별 테스트 실행
npm run test:1
npm run test:2

# 모든 테스트 한 번에 실행
npm run test:all

# 단계별 빌드 실행
npm run build

# 테스트와 빌드를 모두 실행
npm run full-check

🔹 예제 3: 환경별 설정 기능

이번에는 서로 다른 환경(개발용, 완성품용)에서 다르게 작동하는 기능을 만들어보겠습니다.

server.js 파일을 조금 수정해보겠습니다:

// server.js (환경별 설정 추가)
const express = require('express');
const app = express();

// 환경에 따라 다른 설정 사용하기
const env = process.env.NODE_ENV || 'development';      
const isDevelopment = env === 'development';            // 개발 모드인지 확인

// 개발 모드일 때만 자세한 로그 출력
if (isDevelopment) {                                    // 만약 개발 모드라면
  console.log('🔧 개발 모드로 실행 중입니다.');          
  console.log('📁 파일 변경을 감시하고 있어요.');        
} else {                                                // 완성품 모드라면
  console.log('🚀 완성품 모드로 실행 중입니다.');        
}

// 환경에 따라 다른 포트 사용
const port = isDevelopment ? 3000 : 8080;               

// 메인 페이지
app.get('/', (req, res) => {
  const statusColor = isDevelopment ? 'orange' : 'green';  
  const statusText = isDevelopment ? '개발 중' : '서비스 중'; 

  res.send(`
    <h1>🌟 환경별 설정 서버</h1>
    <p style="color: ${statusColor}; font-size: 20px; font-weight: bold;">
      현재 상태: ${statusText}
    </p>
    <p>환경: ${env}</p>
    <p>포트: ${port}</p>
    <p>시간: ${new Date().toLocaleString()}</p>
    ${isDevelopment ? '<p style="color: orange;">⚡ 개발자 모드 - 파일 변경 시 자동 재시작</p>' : ''}
  `);
});

app.listen(port, () => {
  console.log(`🌐 서버가 http://localhost:${port} 에서 실행 중입니다.`); 
  console.log(`⚡ 환경: ${env} (${statusText})`);                      
});

이제 환경별 scripts를 추가해보겠습니다:

{
  "scripts": {
    "start": "node server.js",
    "dev": "NODE_ENV=development nodemon server.js",
    "prod": "NODE_ENV=production node server.js",

    "dev:win": "set NODE_ENV=development && nodemon server.js",
    "prod:win": "set NODE_ENV=production && node server.js",

    "help": "echo '사용법:' && echo '  개발용: npm run dev' && echo '  완성품용: npm run prod'"
  }
}

환경별 기능을 사용해보겠습니다:

# 도움말 보기
npm run help

# 개발 환경으로 실행 (맥/리눅스)
npm run dev

# 완성품 환경으로 실행 (맥/리눅스)
npm run prod

# 윈도우에서 사용할 때
npm run dev:win
npm run prod:win

🔄 scripts 사용 과정 정리

npm scripts를 만들고 사용하는 전체 과정을 차근차근 정리해보겠습니다.

1단계: 계획 세우기

어떤 작업들을 자주 반복하는지 생각해보기
팀원들이 공통으로 사용할 명령어들 정리하기

2단계: scripts 작성하기

package.json 파일의 "scripts" 부분에 명령어 추가하기
이름은 짧고 기억하기 쉽게, 명령어는 정확하게 작성하기

3단계: 테스트하기

npm run 스크립트이름으로 잘 작동하는지 확인하기
오류가 있으면 수정하고 다시 테스트하기

4단계: 문서화하기

README 파일이나 주석으로 각 script가 무엇을 하는지 설명하기
팀원들이 쉽게 이해할 수 있도록 가이드 만들기

5단계: 함께 사용하기

팀 전체가 같은 scripts를 사용해서 일관성 유지하기
필요에 따라 새로운 scripts 추가하기

🧚‍♀️ 이야기로 다시 배우기: 편리한 단축키 만들기

지금까지 배운 내용을 따뜻한 이야기로 다시 정리해볼게요.

컴퓨터 교실에 다니는 조용한 학생이 있었어요. 이 아이는 매우 열심히 공부하는 학생이었지만, 한 가지 어려움이 있었어요. 프로그램을 실행하는 명령어들이 너무 길고 복잡해서 자꾸 잊어버리는 거였어요.

예를 들어, 웹서버를 시작하는 명령어는 "nodemon --watch src server.js"라는 긴 명령어였어요. 테스트를 실행하는 명령어도 복잡했고요.

이 학생은 매번 이런 긴 명령어를 외우기가 너무 어려웠어요. 그래서 지혜로운 아이디어를 생각해냈답니다!

편리한 단축키 목록을 만든 거예요. 이 특별한 목록에는 다음과 같이 적혀있었어요:

"start" → "node server.js"
"dev" → "nodemon server.js"
"test" → "node test.js"

이제 이 학생은 "npm run dev"라고 한 마디만 하면, 컴퓨터가 알아서 긴 명령어를 실행해주었어요. 훨씬 간단해졌죠!

더 놀라운 건, 여러 명령어를 연결하는 것도 가능했어요. "full-test"라고 하면:

먼저 코드를 정리하고
그다음 테스트를 실행하고
마지막으로 결과를 정리하는

세 단계의 작업이 자동으로 순서대로 실행되었답니다!

친구들도 이 단축키 목록을 보고 감탄했어요. "와! 나도 이 목록 하나만 있으면 프로그래밍을 쉽게 할 수 있겠다!" 그래서 컴퓨터 교실 전체에서 이런 단축키 목록을 사용하게 되었어요.

이것이 바로 npm scripts의 기능이에요. 긴 명령어를 짧은 이름으로 저장해두고, 필요할 때마다 쉽게 사용할 수 있게 해주는 거랍니다!

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

npm scripts를 사용할 때 자주 하는 실수들을 미리 알아두면 도움이 될 거예요.

❌ 실수 1: JSON 문법을 틀리게 작성하기

// 이렇게 하면 안 돼요!
{
  "scripts": {
    "start": "node server.js",  // 마지막 줄에는 쉼표가 없어야 해요
    "dev": "nodemon server.js", // 이 줄은 쉼표가 있으면 에러!
  }
}

올바른 방법:

{
  "scripts": {
    "start": "node server.js",
    "dev": "nodemon server.js"
  }
}

❌ 실수 2: script 이름을 틀리게 입력하기

# 이렇게 하면 안 돼요!
npm run development  # 실제로는 "dev"라고 정의했는데...
npm start-dev        # npm run을 빠뜨렸어요

정확한 script 이름을 사용하고, 특별한 script(start, test)가 아니라면 npm run을 꼭 붙여야 해요.

❌ 실수 3: 필요한 패키지를 설치하지 않기

{
  "scripts": {
    "dev": "nodemon server.js"  // nodemon이 설치되지 않았으면 에러!
  }
}

script에서 사용하는 도구들은 미리 설치해야 해요:

npm install nodemon --save-dev

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

코드를 하나씩 써내려가는 것은 마치 시를 쓰는 일과 닮아있습니다. 각각의 줄이 서로를 이해하고 받아들이며, 하나의 완전한 이야기를 만들어내죠. 이제 배운 내용을 연습문제를 통해 차근차근 익혀보겠습니다.

Ex1) 학생 정보 관리 프로그램의 scripts를 만들어보자

// student-info.js 파일을 만들어주세요
// 학생 정보 관리 프로그램입니다!

const students = [                                       
  { name: "민수", age: 11, grade: 5, subject: "수학" },
  { name: "영희", age: 10, grade: 4, subject: "과학" },
  { name: "철수", age: 12, grade: 6, subject: "국어" }
];

console.log('📚 학생 정보 관리 시스템');                 
console.log('='.repeat(30));                           

students.forEach((student, index) => {                 
  console.log(`${index + 1}. ${student.name} (${student.age}살, ${student.grade}학년)`); 
  console.log(`   좋아하는 과목: ${student.subject}`);   
});

console.log('='.repeat(30));                           
console.log(`총 ${students.length}명의 학생이 등록되어 있습니다.`);

// grade-calculator.js 파일을 만들어주세요
// 성적 계산기입니다!

const scores = [85, 92, 78, 95, 88];                   

const total = scores.reduce((sum, score) => sum + score, 0); 
const average = total / scores.length;                  
const highest = Math.max(...scores);                    
const lowest = Math.min(...scores);                     

console.log('📊 성적 계산 결과');                       
console.log('='.repeat(25));                           
console.log(`점수들: ${scores.join(', ')}`);            
console.log(`총점: ${total}점`);                        
console.log(`평균: ${average.toFixed(1)}점`);           
console.log(`최고점: ${highest}점`);                    
console.log(`최저점: ${lowest}점`);

이제 package.json에 scripts를 추가해보세요:

{
  "scripts": {
    "student": "node student-info.js",
    "grade": "node grade-calculator.js",
    "all": "npm run student && echo '' && npm run grade",
    "info": "echo '사용 가능한 명령어:' && echo '  npm run student - 학생 정보 보기' && echo '  npm run grade - 성적 계산하기' && echo '  npm run all - 모든 정보 보기'"
  }
}

Ex2) 간단한 웹사이트 개발 scripts를 만들어보자

# 필요한 패키지 설치하기
npm install express
npm install nodemon --save-dev

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

const express = require('express');                     
const app = express();                                  
const port = 3000;                                     

// 정적 파일 제공하기 (CSS, 이미지 등)
app.use(express.static('public'));                     

// 메인 페이지
app.get('/', (req, res) => {                           
  res.send(`
    <h1>🌐 우리 웹사이트</h1>
    <p>npm scripts로 관리되는 웹사이트입니다!</p>
    <ul>
      <li><a href="/about">소개 페이지</a></li>
      <li><a href="/contact">연락처 페이지</a></li>
    </ul>
  `);
});

// 소개 페이지
app.get('/about', (req, res) => {                      
  res.send(`
    <h1>📖 소개</h1>
    <p>이 웹사이트는 초등학생이 만든 특별한 사이트입니다!</p>
    <p><a href="/">홈으로 돌아가기</a></p>
  `);
});

// 연락처 페이지
app.get('/contact', (req, res) => {                    
  res.send(`
    <h1>📞 연락처</h1>
    <p>이메일: student@example.com</p>
    <p><a href="/">홈으로 돌아가기</a></p>
  `);
});

app.listen(port, () => {                               
  console.log(`🚀 웹사이트가 http://localhost:${port} 에서 실행 중입니다!`); 
});

package.json에 웹사이트 개발용 scripts를 추가해보세요:

{
  "scripts": {
    "start": "node website.js",
    "dev": "nodemon website.js",
    "check": "echo '📋 프로젝트 파일 확인 중...' && echo '✅ 모든 파일이 정상입니다!'",
    "setup": "npm run check && echo '✅ 설정 확인 완료'",
    "build": "echo '🏗️  웹사이트 빌드 중...' && echo '✨ 빌드 완료!'",
    "serve": "npm run build && npm start",
    "help": "echo '🌟 웹사이트 개발 도구' && echo '  npm run dev - 개발 서버 시작' && echo '  npm run build - 웹사이트 빌드' && echo '  npm run serve - 빌드 후 서버 시작'"
  }
}

📚 17.5.2단원 복습 문제

지난 시간에 배운 npm 패키지 설치를 복습해보겠습니다!

복습 문제 1: 패키지 설치와 scripts 연결하기

# 다음 패키지들을 설치하고 scripts로 사용해보세요
npm install colors lodash
npm install nodemon --save-dev

// package-demo.js 파일을 만들어보세요
// 여러 패키지를 사용하는 예제입니다

// 설치한 패키지들을 가져와요
const colors = require('colors');
const _ = require('lodash');

// colors 패키지로 예쁜 출력하기
console.log('📦 패키지 사용 예제'.rainbow.bold);
console.log('='.repeat(30).blue);

// lodash 패키지로 배열 다루기
const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const evenNumbers = _.filter(numbers, num => num % 2 === 0);
const sum = _.sum(numbers);

console.log('📊 배열 처리 결과:'.green.bold);
console.log(`   원본 배열: [${numbers.join(', ')}]`.white);
console.log(`   짝수만 골라낸 결과: [${evenNumbers.join(', ')}]`.yellow);
console.log(`   모든 숫자의 합: ${sum}`.cyan);

console.log('='.repeat(30).blue);
console.log('✨ lodash와 colors 패키지를 잘 사용했어요!'.green.bold);

package.json에 다음 scripts를 추가해보세요:

{
  "scripts": {
    "demo": "node package-demo.js",
    "demo:dev": "nodemon package-demo.js",
    "packages": "npm list --depth=0",
    "info": "echo '설치된 패키지를 사용하는 예제입니다' && npm run demo"
  }
}

해답 설명: npm으로 설치한 패키지들을 require()로 가져와서 사용하고, 그 과정을 scripts로 간편하게 실행할 수 있어요. 패키지 설치와 scripts 작성을 함께 사용하면 더욱 효율적으로 개발할 수 있답니다.

복습 문제 2: dependencies와 devDependencies의 차이점을 scripts에서 활용하기

# 다음과 같이 서로 다른 방식으로 패키지를 설치해보세요
npm install express    # 일반 의존성
npm install nodemon jest --save-dev    # 개발 의존성

// main-app.js (실제 애플리케이션)
const express = require('express');

const app = express();
const port = 3000;

app.get('/', (req, res) => {
  const now = new Date().toLocaleString();
  res.send(`
    <h1>📅 시간 알림 앱</h1>
    <p>현재 시간: ${now}</p>
    <p>이 앱은 express 패키지를 사용합니다.</p>
  `);
});

app.listen(port, () => {
  console.log(`앱이 http://localhost:${port}에서 실행 중입니다.`);
});

// test-app.js (개발용 테스트)
console.log('🧪 개발 환경에서만 실행되는 테스트입니다.');

// 간단한 테스트 시뮬레이션
const testCases = [
  { name: '더하기 테스트', result: 2 + 3 === 5 },
  { name: '문자열 테스트', result: 'Hello' + ' World' === 'Hello World' },
  { name: '배열 테스트', result: [1, 2, 3].length === 3 }
];

testCases.forEach(test => {
  console.log(`   ${test.name}: ${test.result ? '✅ 통과' : '❌ 실패'}`);
});

console.log('테스트 완료!');

package.json 파일:

{
  "dependencies": {
    "express": "^4.17.1"
  },
  "devDependencies": {
    "nodemon": "^2.0.7",
    "jest": "^26.6.3"
  },
  "scripts": {
    "start": "node main-app.js",
    "dev": "nodemon main-app.js",
    "test": "node test-app.js",
    "test:watch": "nodemon test-app.js",
    "production": "NODE_ENV=production npm start",
    "install:prod": "npm install --production",
    "help": "echo '개발용 명령어: npm run dev, npm run test' && echo '운영용 명령어: npm start, npm run production'"
  }
}

해답 설명:

dependencies: 실제 애플리케이션 실행에 필요한 패키지 (express)
devDependencies: 개발 과정에서만 필요한 도구들 (nodemon, jest)
npm install --production 명령으로 운영 환경에서는 devDependencies를 제외하고 설치할 수 있어요
scripts를 통해 개발용과 운영용 명령어를 구분해서 관리할 수 있어요

지금까지 npm scripts라는 편리한 단축키 기능에 대해 자세히 알아보았습니다. 이제 여러분도 복잡한 명령어들을 간단한 이름으로 저장해두고, 팀 전체가 같은 방식으로 작업할 수 있는 멋진 도구를 만들 수 있게 되었어요. 다음에는 더 고급 기능들을 배워보면서 진짜 프로 개발자처럼 일하는 방법을 익혀보겠습니다!

✅ 학습 완료 체크리스트

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

학습 내용	이해했나요?
npm scripts 기본 개념	✅
scripts 작성 방법	✅
여러 명령어 연결하기	✅
환경별 설정하기	✅
자주 하는 실수들	✅
17.5.2단원 복습 내용	✅

📂 마무리 정보

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

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

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

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

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

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

💻 무료로 학습하러 가기

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

17.5.2 패키지 설치해보기 - npm으로 유용한 도구 가져오기 (0)	2025.07.26
17.5.1 npm이란? - 거대한 코드 도서관 탐험하기 (0)	2025.07.26

현재글17.5.3 scripts 작성하기 - npm으로 편리한 단축키 만들기

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

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

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

Today :
Yesterday :

일	월	화	수	목	금	토
					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.3 scripts 작성하기 - npm으로 편리한 단축키 만들기

📘 17.5.3 scripts 작성하기 - npm으로 편리한 단축키 만들기

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

✨ npm scripts의 핵심 개념

비유로 이해하기: 학교 방송실의 단축번호

🎯 npm scripts를 만드는 이유

⚙️ scripts 작성법 배우기

🧪 첫 번째 scripts 실습

🔹 예제 1: 기본 scripts 만들기

🔹 예제 2: 여러 명령어를 연결하는 강력한 기능

🔹 예제 3: 환경별 설정 기능

🔄 scripts 사용 과정 정리

🧚‍♀️ 이야기로 다시 배우기: 편리한 단축키 만들기

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

❌ 실수 1: JSON 문법을 틀리게 작성하기

❌ 실수 2: script 이름을 틀리게 입력하기

❌ 실수 3: 필요한 패키지를 설치하지 않기

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

Ex1) 학생 정보 관리 프로그램의 scripts를 만들어보자

Ex2) 간단한 웹사이트 개발 scripts를 만들어보자

📚 17.5.2단원 복습 문제

복습 문제 1: 패키지 설치와 scripts 연결하기

복습 문제 2: dependencies와 devDependencies의 차이점을 scripts에서 활용하기

✅ 학습 완료 체크리스트

📂 마무리 정보

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

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

티스토리툴바

17.5.3 scripts 작성하기 - npm으로 편리한 단축키 만들기

📘 17.5.3 scripts 작성하기 - npm으로 편리한 단축키 만들기

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

✨ npm scripts의 핵심 개념

비유로 이해하기: 학교 방송실의 단축번호

🎯 npm scripts를 만드는 이유

⚙️ scripts 작성법 배우기

🧪 첫 번째 scripts 실습

🔹 예제 1: 기본 scripts 만들기

🔹 예제 2: 여러 명령어를 연결하는 강력한 기능

🔹 예제 3: 환경별 설정 기능

🔄 scripts 사용 과정 정리

🧚‍♀️ 이야기로 다시 배우기: 편리한 단축키 만들기

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

❌ 실수 1: JSON 문법을 틀리게 작성하기

❌ 실수 2: script 이름을 틀리게 입력하기

❌ 실수 3: 필요한 패키지를 설치하지 않기

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

Ex1) 학생 정보 관리 프로그램의 scripts를 만들어보자

Ex2) 간단한 웹사이트 개발 scripts를 만들어보자

📚 17.5.2단원 복습 문제

복습 문제 1: 패키지 설치와 scripts 연결하기

복습 문제 2: dependencies와 devDependencies의 차이점을 scripts에서 활용하기

✅ 학습 완료 체크리스트

📂 마무리 정보

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

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

관련글

티스토리툴바