1. 들어가며
- Node.js의 Express.js 프레임워크로 웹 서버를 만들기
2. Express.js를 이용한 웹 서버 만들기
Express.js는 웹 서버를 생성하는 것과 관련된 기능을 담당하는 프레임워크다.
익스프레스에서 제공하는 미들웨어와 라우터를 사용하면 편리하게 기능을 구현할 수 있다.
익스프레스를 사용하기 위해서는 먼저 익스프레스를 설치하고 (terminal 에서 npm i express 입력)
익스프레스 모듈을 가져오면 된다.
Express 사용해서 서버 생성
// express 모듈 불러오기
const express = require('express')
// express 객체 생성
const app = express()
// 포트번호 변수 지정
const PORT = 8000
// get 요청에 따른 라우터 등록
app.get('/', (req, res)=>{
res.send('Hello World')
})
// express 로 서버 시작
app.listen(PORT, ()=>{
console.log(`${PORT} 서버 실행`)
})
express 객체에서 사용하는 메서드는 다음 표와 같다.
| 메서드 | 설명 |
| app.get(path, callback) | HTTP GET 요청에 대한 라우터 등록 |
| app.post(path, callback) | HTTP POST 요청에 대한 라우터 등록 |
| app.use([path,] callback [,callback...] | 미들웨어 함수 등록 |
| app.set(name, value) | 서버 설정을 위한 속성 지정, 일반적으로 view engine 과 views 설정 지정 시 사용 view engine : 템플릿이 있는 디렉토리 views : 사용할 템플릿 엔진 |
| app.listen(port, [host], [backlog],[callback] | HTTP 서버 시작 포트번호, 호스트이름, 백로그 크기, 콜백함수 전달 |
express 도 http 모듈처럼 요청 객체와 응답 객체를 사용할 수 있다.
요청 객체와 응답 객체는 다음 표와 같다.
| 메서드 | 설명 | |
| 요청 객체 |
req.params | 라우트 매개변수 가져옴 |
| req.query | URL 쿼리 매개변수를 가져옴 URL의 ? 뒤에 나오는 쿼리 문자열 객체로 반환 |
|
| 응답 객체 | res.send([body]) | HTTP 응답으로 데이터 전송 전달할 수 있는 데이터는 문자열, 버퍼, 객체, 배열 등 |
| res.redirect([status,] path) | HTTP 리다이렉트를 수행(경로로 강제로 이동) | |
| res.render(view [,locals] [,callback]) | 뷰 엔진을 사용해 문서를 만든 후 전송 | |
템플릿 엔진으로 웹 문서 렌더링하기
웹 서버에서 사용자 요청에 대한 결과를 응답으로 보낼 때 send()메서드를 이용해서 직접 웹 문서의 내용을 입력하는 방법도 있지만, 입력된 웹 문서의 내용이 길어지면 자바스크립트의 내용도 길어져서 나중에 유지보수가 힘들어진다.
따라서 응답 웹 문서를 별도의 파일로 만들어 사용하는 것이 좋다.
응답 웹 문서를 미리 만들어 둔 것을 템플릿 이라고 한다.
그리고 이 템플릿을 문법과 설정에 따라 html 형식으로 변환시키는 모듈을 템플릿 엔진(ejs, pug 등이 있음)이라고 한다.
여기서는 ejs 을 사용해서 웹 문서를 렌더링 할 것이다.
ejs를 사용하기 위해서는 express 처럼 설치해야한다. (terminal에서 npm i ejs 입력)
먼저 작업하고 있는 파일과 같은 경로에 views 라는 이름의 폴더를 만들어줬다.
그 폴더 안에 .ejs 확장자로 된 파일을 만들어줬다.
// express 모듈 불러오기
const express = require('express')
// express 객체 생성
const app = express()
// 포트번호 변수 지정
const PORT = 8000
// 템플릿 엔진을 ejs 로 지정
app.set('view engine', 'ejs')
// 템플릿이 있는 디렉토리 지정
app.set('views', './views')
// index.ejs 파일 가져와서 렌더링
app.get('/', (req, res)=>{
res.render('index')
})
// express 로 서버 시작
app.listen(PORT, ()=>{
console.log(`${PORT} 서버 실행`)
})
render() 메서드로 index.ejs 파일을 불러와서 html 형식으로 변환시켜 렌더링했다.
express.static() 미들웨어로 CSS 파일 적용하기
express.static()는 express 에서 제공하는 기본 미들웨어다.
이 함수를 사용해서 이미지, CSS 파일 및 자바스크립트 파일과 같은 정적 파일을 제공할 수 있다.
제공하려는 정적 파일이 포함된 디렉토리의 이름을 express.static 미들웨어 함수에 전달하여 제공할 수 있다.
미들웨어 함수의 등록은 app.use() 메서드를 이용해서 등록한다.
이 미들웨어 함수를 이용해서 css 스타일을 적용해보고자 한다.
먼저 작업하고 있는 파일과 같은 경로에 public이라는 이름의 폴더를 만들어줬다.
그리고 index 페이지 외에 2개의 다른 페이지도 추가해줬다.
총 3개의 웹페이지에 public 폴더 내부의 style.css 로 공통으로 적용할 스타일을 지정해줄 것이다.
// express 모듈 불러오기
const express = require('express')
// express 객체 생성
const app = express()
// 포트번호 변수 지정
const PORT = 8000
// 미들웨어 함수 등록 : express.static
app.use(express.static('public'))
// 템플릿 엔진을 ejs 로 지정
app.set('view engine', 'ejs')
// 템플릿이 있는 디렉토리 지정
app.set('views', './views')
// ejs 파일 가져와서 렌더링
app.get('/', (req, res)=>{
res.render('index', {title : "Home"})
})
app.get('/about', (req, res)=>{
res.render('about', {title : "About"})
})
app.get('/contact', (req, res)=>{
res.render('contact', {title : "Contact"})
})
// 지정된 경로 외 경로일 때
app.use((req, res)=>{
res.status(404).send('페이지를 찾을 수 없습니다.')
})
// express 로 서버 시작
app.listen(PORT, ()=>{
console.log(`${PORT} 서버 실행`)
})자바스크립트 코드엔 위와 같이 적어주었다.
총 3개의 라우터를 지정해주었고, 지정된 경로 외의 경로일 때도 지정해주었다.
이제 ejs 파일에서 ejs 문법을 이용해 공통된 태그 및 스타일을 지정해줄것이다.
ejs 문법은 <% %> 내부에 자바스크립트 코드를 작성한다.
<%= %> 은 값을 템플릿에 출력할 때 사용한다.
<%- include('view의 상대주소') %> 은 다른 view 파일을 불러올 때 사용한다.
3개의 파일에서 공통으로 사용되는 태그는 따로 partials라는 폴더에서 각 기능을 하는 태그로 ejs파일을 만들어주었다.
아래와 같이 head 태그에 들어갈 내용, nav 태그에 들어갈 내용, footer 태그에 들어갈 내용으로 나눠서 불러와주었다.
<!DOCTYPE html>
<html lang="en">
<%- include('./partials/head.ejs') %>
<body>
<header>
<%- include('./partials/nav.ejs') %>
</header>
<main>
<h1>Welcome</h1>
</main>
<%- include('./partials/footer.ejs') %>
</body>
</html>
head.ejs 파일을 살펴보면
title태그 내에 <%= title%>을 써서 각 받는 변수대로 출력을 할 것이다.
그리고 css 경로는 상대경로가 아닌 최종적으로 들어있는 경로를 적어준다.
자바스크립트 코드에서 미들웨어 함수를 사용해서 public이라는 폴더 안에 있는 파일들을 이용해 주겠다고
지정했기 때문에 /style.css 로 적어준 것이다.
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><%= title%></title>
<-- css 경로는 상대경로가 아닌 최종적으로 들어있는 경로를 적어준다. -->
<link rel="stylesheet" href="/style.css">
</head>
출력결과는 다음과 같다.
각 페이지마다 공통된 스타일이 적용되었고
탭부분을 보면 페이지 마다 타이틀이 다르게 출력된 것을 볼 수 있다.
3. 마치며
express 를 이용해서 웹 서버를 만들고 템플릿 엔진을 사용해 웹 문서를 렌더링하고
미들웨어 함수를 이용해서 스타일을 지정하는 법을 배웠다.
뭔가 원하는 내용을 따로 만들어서 조립하는 과정이 레고같기도 하고
예전에 배웠던 리액트가 생각나기도 한다.
아직은 발만 담근 수준으로 배운것 같지만 재미있다.
4. Reference
1. 코딩온 강의 자료
2. Node.js 프로그래밍
https://product.kyobobook.co.kr/detail/S000001900875
Do it! Node.js 프로그래밍 | 정재곤 - 교보문고
Do it! Node.js 프로그래밍 | [Node.js 프로그래밍]은 누구나 쉽게 접근할 수 있는 자바스크립트 언어로 웹 서버를 만들며 서버 개발에 입문할 수 있도록 구성한 책이다. 책에서 다루는 코드는 Node.js의
product.kyobobook.co.kr
3. https://expressjs.com/ko/starter/static-files.html
Express에서 정적 파일 제공
Express에서 정적 파일 제공 이미지, CSS 파일 및 JavaScript 파일과 같은 정적 파일을 제공하려면 Express의 기본 제공 미들웨어 함수인 express.static을 사용하십시오. 정적 자산이 포함된 디렉토리의 이
expressjs.com
'Study > Node.js' 카테고리의 다른 글
| [새싹x코딩온] 웹 개발자 부트캠프 과정 7주차 회고 | MVC 패턴으로 프로젝트 만들기 (0) | 2024.06.25 |
|---|---|
| [새싹x코딩온] 웹 개발자 부트캠프 과정 6주차 회고 | Multer 미들웨어 사용해서 파일 업로드 구현하기 (0) | 2024.06.20 |
| [새싹x코딩온] 웹 개발자 부트캠프 과정 6주차 회고 | 동적 form 전송 (0) | 2024.06.18 |
| [새싹x코딩온] 웹 개발자 부트캠프 과정 5주차 회고 | node.js readFile()과 readFileSync()(비동기와 동기의 차이) (0) | 2024.06.11 |
| [새싹x코딩온] 웹 개발자 부트캠프 과정 4주차 회고 | node.js 로 웹 서버 만들기(http 모듈 사용) (0) | 2024.06.07 |