[과제] Express 구조

 

Express - Node.js web application framework

 

✔️ Express

Node.js를 위한 빠르고 개방적인 간결한 웹 프레임워크

= 내가 만들고 싶은 웹 서비스를 구현하는데 필요한 모든 일을 틀 안에서 할 수 있는 것 

 

http모듈을 보다 더 간결하고 편리하세 사용할 수 있도록 도와주는 모듈 

 

• Hello World 예제 

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

app.get('/', (req, res) => {
  res.send('Hello World!')
})

app.listen(port, () => {
  console.log(`Example app listening on port ${port}`)
})

express모듈을 app에 담아주고, port를 3000으로 설정 '/'로 요청이 오면 Hello World를 반환해주는 콜백함수 호출 

 

 

✔️ Express Generator

기본 폴더 구조까지 신속하게 작성해주는 애플리케이션 생성기 도구 

프로젝트 규모가 크거나, 체계적으로, 설정할 것도 많아지는 경우 사용

 

• 설치

$ npm install express-generator -g

 

• 구조

express라는 명령어를 쳐보면 자동으로 다음과 같은 폴더들이 자동으로 세팅됨 

├── app.js
├── bin
│   └── www
├── package.json
├── public
│   ├── images
│   ├── javascripts
│   └── stylesheets
│       └── style.css
├── routes
│   ├── index.js
│   └── users.js
└── views
    ├── error.pug
    ├── index.pug
    └── layout.pug

7 directories, 9 files

 

📂 app.js

• 핵심적인 서버 역할 담당
• 여러 미들웨어 관리

미들웨어란,
양 쪽을 연결해 데이터를 주고 받을 수 있도록 중간에서 매개 역할 하는 소프트웨어

 

var express = require('express');
var app = express();

express 모듈을 불러다 app에 담음

 

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'pug');

view 관련 추가 세팅

 

app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

app.use('/', indexRouter);
app.use('/users', usersRouter);

미들웨어 관련 세팅

 

http 모듈을 기반으로 여러 모듈을 감싸가지고 만든 편한 모듈이 express
http 모듈을 제외한 다른 모듈들을 미들웨어라고 함

 

📂 bin > www

서버를 실행하는 스크립트로 http 모듈에 express 모듈을 연결하고 프로젝트가 실행되는 포트 지정 

var app = require('../app'); // app.js 모듈을 가져옴 
var debug = require('debug')('expressbase:server'); // debug 모듈은 콘솔 창에 어떤 부분이 돌아가고 있는 지 로그를 찍어줌 
var http = require('http'); // http 모듈을 가져옴

필요한 모듈을 가져오는 코드

 

var port = normalizePort(process.env.PORT || '3000');
app.set('port', port); // 포트 기본값은 3000이지만 다른 값으로 설정하면 그걸로 설정하겠다

포트 설정

 

var server = http.createServer(app); // express가 자동으로 create server를 해주고 있었음

서버 생성 

 

📂 package.json

프로젝트의 실행 명령어, 사용 패키지들과 같은 기록 

 

📂public 

브라우저 등 클라이언트가 접근 가능한 폴더

외부에서 접근 가능한 파일들이 모여있는 폴더 

 

• /images : 그림파일
• /javascripts : 자바스크립트 파일
• /stylesheets : CSS 파일

 

📂routes

주소별 라우터 파일 

앤드포인트 파일들을 저장해놓는 폴더 

 

• index.js로 라우팅 관리 

 

📂 views

html 파일들이 모여있는 폴더 

웹 서버 사용 시 이 폴더의 파일들을 사용해 렌더링