쿠쿠더님의 블로그

Express 과 라우팅이란? 본문

CSS , HTML

Express 과 라우팅이란?

쿠쿠더 2025. 2. 24. 19:03
  • Express 란?
  • 라우팅이란? 
  • 미들 웨어란? 

Express 란?

- Express는 웹 및 모바일 애플리케이션을 위한 일련의 강력한 기능을 제공하는 간결하고 유연한

  Node.js 웹 어플리케이션 프레임워크이다. 

- Express란 Node.js를 사용하여 쉽게 서버를 구성할 수 있게 만든 클래스와 라이브러리의 집합체.

 

Express 장점

1. 코드의 간결성 최소의 코드로 서버로직을 작성할수 있다.

2. 미들웨어 사용도 간단해진다. 요청과 응답 간에 기능을 추가 라우팅의 코드 간결성 API를 쉽게 구성할수 있다.

3. 템플릿 엔진 지원 서버측에서 문자열로 페이지를 구성하고 자바스크립트 영역에 내용을 포함시킨뒤 페이지를 

    완성해서 응답을 해주는 엔진

 

Express 설치

npm init  - package.json 파일을 만들기 위해 사용하는 명령어 

npm init -y  - 위에 내용처럼 만들기 위해 하지만 모든걸 yes하고 바로 만들수 있는 명령어 

 

그럼 여기서 package.json이란 설치한 라이브러리 목록을 자동으로 기록해주는 파일입니다.

 

npm i [설치할 라이브러리]

npm i express - express를 설치하겠다 

npm uninstall - 설치한 라이브러리 삭제 (주의 이것은 다 써야 지워진다.)

npm i [] [] [] - 이렇게 여러개도 설치할수 있다 

 

여기서 하나  라우터란?

- 클라이언트의 요청 경로(path)를 보고 이 요청을 처리 할 수 있는 곳으로 기능을 전달해주는 역할을 한다.

- 이러한 역할을 라우팅이라고 하는데, 엔드 포인트(URL)의 정의, 그리고 URL가 클라이언트 요청에 응답하는 방식을 의마한다.

- 그래서 여기서 express를 쓰는이유중 하나가 라우팅을 깔끔하게 관리할 수 있다는 점도 있다.

 

미들웨어란? 

미들웨어는 익스프레스의 핵심이다.

- 미들웨어는 요청과 응답을 조작하여 기능을 추가하기도 하고, 바쁜 요청을 걸러내기도 한다.

- 한마디로 중간에서 매개 역할을 한다.

- 그리고 express 내에서 웹 요청과 응답에 대한 정보를 사용해서 필요한 처리를 진행할 수 있도록 분리된 독립적인 함수이다.

예시 미들웨어

express = require("express");

const app = express();

app.use ((req,res,next) => {
 // 요기처럼 app.use가 미들웨어가 아니라 app.use()의 인자안의 함수가 미들웨어이다.
})

 

여기서  app.use()는 Express 앱에서 항상 실행하는 미들웨어 역할을 한다.

app.get(), app.post()등과 달리 요청 URL을 지정하지 않아도 app.use()를 사용할 수 있으면 해당 경우에는 URL에 

상관없이 매번 실행된다.

 

여기서 

app.use(미들웨어) - 모든 요청에서 해당 미들웨어 실행

app.use('./path', 미들웨어) - path로 시작하는 요청에서 미들웨어 실행

app.post('/path', 미들웨어) - path로 시작하는 POST 요청에서 미들웨어 실행 

 

미들웨어 next()

- next()를 하면 다음 미들웨어로 넘어가고, next(인수)를 하면 에러 핸들러로 넘어가게 된다.

- 또한 , 한가지 특별한 기능이 있는데 next('route')를 하게 되면 다음 미들웨어가 아닌 다음 라우터로 넘어가게 된다.

 

app.get('/', (res,req,next) => {
	next();
}

 

 

그리고 살짝배운건데 EJS(EMbedded javaScript) 에서는 <%%> 를 써서 브라우저에서 javascript 구문을 쓸수있어 약간 지금배운 `${}` 이거랑 같은 느낌이라고 생각하면 이해하기 쉬움!!!!


## 실습 과제 

- main , login , board , detail 페이지 만들고 라우팅 처리를 해서 페이지 보여주기 각각의 페이지는 css를 가지고 있게 정     적  라우팅 추가 미들 웨어로 넘어가게 해라.

 

// express(node.js 웹 어플리케이션 플레임워크) 가져오고 
const express = require("express"); 
// fs 모듈 가져오기 
const fs = require("fs");
// path 가져오기
const path = require("path")
const app = express();
app.use(express.static(path.join(__dirname, "public")))
 
const PORT = 3000;

// main.html 
app.get('/', (req, res) => {
    const filePath = path.join(__dirname, "views", "main.html");
    fs.readFile(filePath ,"utf8", (err,data) => {
        if(err) return res.send("페이지가 존재하지 않습니다");
        res.send(data); // 데이터와 함께 응답을 보냅니다.
    })
})
app.post('/', (req,res) => {
    res.send({uid: "soon"})
})

// login.html 
app.get('/login', (req, res) => {
    const filePath = path.join(__dirname, "views", "login.html");
    fs.readFile(filePath ,"utf8", (err,data) => {
        if(err) return res.send("페이지가 존재하지 않습니다");
        res.send(data);
    })
})
app.post('/login', (req,res) => {
})

// board.html 
app.get('/board', (req, res) => {
    const filePath = path.join(__dirname, "views", "board.html");
    fs.readFile(filePath ,"utf8", (err,data) => {
        if(err) return res.send("페이지가 존재하지 않습니다");
        res.send(data);
    })
})
app.post('/board', (req,res) => {

})

// datail.html 
app.get('/detail', (req, res) => {
    const filePath = path.join(__dirname, "views", "detail.html");
    fs.readFile(filePath ,"utf8", (err,data) => {
        if(err) return res.send("페이지가 존재하지 않습니다");
        res.send(data);
    })
})
app.post('/detail', (req,res) => {

})


app.listen(PORT,() => {
    console.log("섭 온")
})

 

 

끝~~~ 어렵다 .......................

 

'CSS , HTML' 카테고리의 다른 글

라우터와 MVC 패턴이란?  (0) 2025.03.10
EJS 템플릿 엔진~~~~  (0) 2025.03.10
fs 대용량 영상 처리 (video)  (0) 2025.02.24
버퍼와 스트림  (0) 2025.02.24
OSI7 계층, HTTP  (0) 2025.02.21