Skip to content

6.Express.md

Latest commit

 

History

History
257 lines (165 loc) · 6.17 KB

6.Express.md

File metadata and controls

257 lines (165 loc) · 6.17 KB

Express.js

Express Framework : 기본적으로 해야할 작업들을 대신 해주는 프레임 워크

1. What adn Why?

서버 사이드 로직을 만드는 것은 복잡하다. 들어오는 request를 받고 분류해야하고 더 많은 작업들이 있다. 이 작업들을 간소화하고 비지니스 로직을 더 견고화 하기 위해 Express를 사용한다.

2. Express 사용

  1. npm i --save express

  2. app.js에 express 가져오기

    const express = require('express');

3. Middleware

미들웨어는 들어오는 request를 분류하는 기능을 가진 함수다.

st=>start: Request
op1=>operation: Middleware ( (req, res, next) -> {...} )
op2=>operation: Middleware ( (req, res, next) -> {...} )
op3=>operation: Response

st->op1->op2->op3

Request를 받고 Response 를 돌려줄때 까지 미들웨어를 거친다. 한개를 거칠 수 도 있고 여러개를 거칠 수 도 있다.

  • 미들웨어 구조

    app.use((req, res, next) => {
  console.log('In the Middleware');
  next(); // 다음에 있는 미들웨어로 넘어감
});

  • 작동방식

    const http = require('http');

const express = require('express');

const app = express();

app.use((req, res, next) => {
  console.log('In the Middleware');
  next(); // next가 없으면 아래 라우터로 가지 못한다.
});
app.use((req, res, next) => {
  res.send('<h1>Hello from Express!<h1>'); //express 에서는 Header에 Default 값으로 text/html 을 보내준다.
});

const server = http.createServer(app);
server.listen(3000);

4. Express 사용하기

  • 서버를 만들기 위해 express를 사용할 수 있음.

    // const server = http.createServer(app);
// server.listen(3000);

app.listen(3000)

  • 경로 설정

    const express = require('express');

const app = express();


app.use('/add-product', (req, res, next) => {
  res.send(
    '<form action="/product" method="POST"><input type="text name="title><button type="submint">Add Product</button></form>'
  );
});

app.use('/product', (req, res, next) => {
  console.log(req.body);
  res.redirect('/');
});

app.use('/', (req, res, next) => {
  res.send('<h1>Hello from Express!<h1>');
  console.log('last');
});

app.listen(3000);

  • body-parser $ npm i --save body-parser

    const bodyParser = require('body-parser')
app.use(bodyParser.urlencoded({ extended: false })); // 이렇게 사용해야 값을 키 밸류 값으로 받는다.

  • Post 요청 과 Get 요청 구별하기

    app.use() // 모든 요청을 받을 수 있음
app.post() // get을 통한 (URL 을 입력해서) 접근 통제
app.get()

5. Express 라우터 사용

Express에 존재하는 Router 함수를 사용하면 파일로 프로젝트를 관리할 수 있다.

  • app.js

    const express = require('express');
const bodyParser = require('body-parser');
const app = express();

const adminRoutes = require('./routes/admin'); // 불러오기
const shopRoutes = require('./routes/shop');

app.use(bodyParser.urlencoded({ extended: false }));

app.use(adminRoutes); //adominRouts() x
app.use(shopRoutes);

app.listen(3000);

  • routes/amdin.js

    const express = require('express');

const router = express.Router();

router.get('/add-product', (req, res, next) => {
  res.send(
    '<form action="/product" method="POST"><input type="text" name="title"></input><button type="submint">Add Product</button></form>'
  );
});

router.post('/product', (req, res, next) => {
  console.log(req.body.title);
  res.redirect('/');
});

module.exports = router; // 모듈화 시킴

  • routes/shop.js

    const express = require('express');

const router = express.Router();

router.get('/', (req, res, next) => {
  res.send('<h1>Hello from Express!<h1>');
  console.log('last');
});

module.exports = router;

  • 404 페이지 만들기

    이후 없는 페이지를 작성 하기 위해 404 페이지를 만들 수 있다. 기존에는 모든 요청이 '/' 로 갔다.

    const express = require('express');
const bodyParser = require('body-parser');
const app = express();

const adminRoutes = require('./routes/admin');
const shopRoutes = require('./routes/shop');

app.use(bodyParser.urlencoded({ extended: false }));

app.use(adminRoutes); //adominRouts() x
app.use(shopRoutes);

// 미들웨어는 위에서 아래로 진행하므로 404 페이지는 맨 아래 작성!
app.use((req, res, next) => {
  res.status(404).send('<h1>Page Not Found :(');
});

app.listen(3000);

  • Express 에서 제공하는 url 필터

    라우터를 불러올 때 URL 로 필터를 설정 할 수 있다. 필터를 설정하게 되면 라우터에서는 다시 적을 필요가 없다.

    app.use(adminRoutes); // URL: http://localhost:3000/abc
app.use('/admin', adminRoutes); // URL: http://localhost:3000/admin/abc

6. 파일 보내주기

views 폴더에 html 파일을 만들어 클라이언트에게 보내주기

  • routes/shop.js

    const path = require('path');
const express = require('express');

const router = express.Router();

router.get('/', (req, res, next) => {
  // windws 와 Lunux 에서 경로 설정이 다르므로 경로에 /나 \를 사용하지 않는다.
  res.sendFile(path.join(__dirname, '../', 'views', 'shop.html'));
});

module.exports = router;

    path 에서 꼭 아래와 같이 설정하기!!!

    res.sendFile(path.join(__dirname, '../', 'views', 'shop.html'));

7. 정적파일 Public 폴더

일반적으로 프로젝트를 배포하면 파일들은 사용자가 접근할 수 없다. 하지만 public 폴더에 정적 파일들은 접근 가능하다. 따라서 여기에 들어가는 파일들을 잘 관리해야 한다.

  • app.js 에 아래 추가

    app.use(express.static(path.join(__dirname, 'public')));