🎯 express-generator를 사용하여 Express 프로젝트를 생성하고 실행합니다.

📙 Today I Learned

Express 실습

Express 프로젝트 생성

Express 공식 홈페이지를 참고하여 express-generator를 사용하여 프로젝트를 생성합니다.

1. express-generator를 설치합니다.
새 폴더를 만든 후 터미널에서 express-generator를 글로벌 패키지로 설치합니다.

$ npm install -g express-generator

2. Express 프로젝트를 생성합니다.

$ express

---

💡 Node.js 8.2.0 버전 이후
애플리케이션 생성 도구를 npx 명령어를 사용하여 빠르게 실행할 수 있습니다.
npx express-generator

---

Express 기본 구조

express 명령어를 입력하면 아래와 같은 프로젝트 구조가 생성됩니다.

📂 bin
   ├── 📄 www
📂 public
   ├── 📂 images
   ├── 📂 javascripts
   ├── 📂 stylesheets
   │      ├── 📄 style.css
📂 routes
   ├── 📄 index.js
   ├── 📄 users.js
📂 views
   ├── 🐶 error.jade
   ├── 🐶 index.jade
   ├── 🐶 layout.jade
📄 app.js
📄 package.json

• 📂 bin/ : 서버 실행 파일이 있는 폴더

  • 📄www : 서버 실행 파일 (웹 서버를 실행하는 데 필요한 설정 포함)

• 📂public/ : 정적 파일 폴더(CSS, JS, 이미지 등)

• 📂routes/ : 라우팅 설정 폴더 ( 각 경로를 담당하는 모듈이 들어있는 폴더)

  • 📄index.js : 기본 라우트 ( / )

  • 📄users.js : 유저 관련 라우트 ( /users )

• 📂views/ : Jade (Pug) 템플릿 엔진을 사용하는 폴더

  • 🐶error.jade : 에러 페이지

  • 🐶index.jade : 메인 페이지

  • 🐶layout.jade : 공통 레이아웃

• 📄app.js : Express 핵심 파일, 미들웨어, 정적 파일 설정, 라우트 등록을 처리

• 📄package.json : 프로젝트에 설치된 모듈 이름, 버전 등의 정보들이 작성된 파일

npm start

프로젝트를 실행 명령어 npm start를 터미널에 입력합니다.

package.json에 "scripts": { "start": "명령어" } 설정이 있어야 실행됩니다.

// package.json
{
  "scripts": {
    "start": "node app.js", 
  }
}

npm start 를 입력하면 "명령어"가 실행됩니다.

🚨 Cannot find module 오류 발생 및 해결

npm start 입력 시 Error: Cannot find module 'http-errors'라는 오류가 발생합니다.

⚠️ 발생한 오류

$ npm start

express-base@0.0.0 start
node ./bin/www

node:internal/modules/cjs/loader:1228
  throw err;
  ^

Error: Cannot find module 'http-errors'
Require stack:
- C:\Users\MSI\frontProject\programmers\express-base\app.js
- C:\Users\MSI\frontProject\programmers\express-base\bin\www
    at Module._resolveFilename (node:internal/modules/cjs/loader:1225:15)
    at Module._load (node:internal/modules/cjs/loader:1051:27)
    at Module.require (node:internal/modules/cjs/loader:1311:19)
    at require (node:internal/modules/helpers:179:18)
    at Object.<anonymous> (C:\Users\MSI\frontProject\programmers\express-base\app.js:1:19)    
    at Module._compile (node:internal/modules/cjs/loader:1469:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1548:10)
    at Module.load (node:internal/modules/cjs/loader:1288:32)
    at Module._load (node:internal/modules/cjs/loader:1104:12)
    at Module.require (node:internal/modules/cjs/loader:1311:19) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    'C:\\Users\\MSI\\frontProject\\programmers\\express-base\\app.js',
    'C:\\Users\\MSI\\frontProject\\programmers\\express-base\\bin\\www'
  ]
}

프로젝트의 패키지가 설치되지 않았기 때문에 발생한 오류입니다. express 설치는 매 프로젝트 폴더마다 해주어야 합니다.

💡 해결 과정
package.json에 명시된 모든 패키지를 설치하는 명령어 npm install을 이용해 폴더 내의 패키지를 다운받아주면 정상적으로 작동됩니다.

REST API 실습

Express를 활용하여 Map 객체를 기반으로 간단한 REST API를 만들었습니다.

// express 모듈 셋팅
const express = require('express');
const app = express();
app.listen(3000);

// 데이터 셋팅
let youtuber1 = {
  name: '채널십오야',
  subscribers: '688M',
  videoNum: 1500,
};

let youtuber2 = {
  name: '뜬뜬',
  subscribers: '253M',
  videoNum: 292,
};

let youtuber3 = {
  name: 'TEO 테오',
  subscribers: '124M',
  videoNum: 1200,
};

let db = new Map();
db.set(1, youtuber1);
db.set(2, youtuber2);
db.set(3, youtuber3);

// REST API 설계
app.get('/youtuber/:id', function (req, res) {
  let { id } = req.params;
  id = parseInt(id);
  const youtuber = db.get(id);
  if (youtuber === undefined) {
    res.json({
      message: '없는 유튜버입니다.',
    });
  } else {
    youtuber.id = id; // youtuber['id'] = id;
    res.json(youtuber);
  }
});

express 모듈을 통해 서버를 생성한 뒤, 유튜버 정보를 Map을 사용해서 저장하고, id를 통해 유튜버의 정보를 조회하는 API를 작성하였습니다.

---

JavaScript

JavaScript 함수 4가지 종류

• 일반 함수 선언

function add1(x, y) {
  return x + y;
}
console.log('add1(1,2) >>>', add1(1, 2)); //3

• 익명 함수를 변수에 저장

let add2 = function (x, y) {
  return x + y;
};
console.log('add2(1,2) >>>', add2(1, 2));

• 화살표 함수 (return 표시)

let add3 = (x, y) => {
  return x + y;
};
console.log('add3(1,2) >>>', add3(1, 2));

• 화살표 함수 (return 생략)

let add4 = (x, y) => x + y;
console.log('add4(1,2) >>>', add4(1, 2));

---

✏️ 한 줄 회고

Express 프로젝트를 생성 해보면서 실제 프로젝트의 기본적인 구조와 실행 과정을 익힐 수 있어서 좋았고, 하나씩 톺아보면서 공부를 열심히 해야겠다고 느꼈습니다.