17.template
템플릿(Template)은 Node.js에서 클라이언트에게 보여지는 HTML 코드의 구조를 구성하는 데 사용되는 파일로,
Node.js의 엔진 중에서 가장 많은 사용 빈도를 보임.
템플릿 엔진(Template Engine)은 Node.js에서 사용되는 HTML 코드에 동적인 데이터를 삽입하기 위해 사용.
템플릿 엔진은 정적인 HTML 코드와 동적인 데이터를 결합하여 클라이언트에게 보내지는 HTML 페이지를 생성.
Node.js에서는 다양한 템플릿 엔진(Pug, EJS, Handlebars 등)이 지원됨.
이러한 템플릿 엔진을 사용하면 HTML 코드를 보다 쉽게 작성할 수 있으며, 효율적인 클라이언트와의 상호작용이 가능.
교육 간에서는 Template 엔진의 예시로 EJS(Embedded JavaScript)를 사용할 예정.
(EJS는 Node.js에 자동으로 포함되어있는 모듈이 아니므로 별도의 설치작업이 필요.)
17-1. EJS
EJS의 template 엔진에 대한 내용을 설명해주는 공식 홈페이지.
EJS -- Embedded JavaScript templates
Simple syntax JavaScript code in simple, straightforward scriptlet tags. Just write JavaScript that emits the HTML you want, and get the job done!
ejs.co
EJS 패키지의 설치
' npm i ejs ' 명령 프롬프트에 입력.
노드몬(nodemon) 실행 ('npm i nodemon --save-dev'를 명령 프롬프트에 입력) 하여 설치 후,
package.json 파일에서
"start": "nodemon 1-template" 작성.
(교육 간 '1-template.js' 에 실습을 진행할 예정. 결과는 npm start입력 시 바로 이동할 수 있게 함)
day3에 예제로 사용했던 html 파일 3개 (index.html / mypage.html / notfound.html) 을
day4/template/ 디렉토리에 복사.
확장자 명을 .html에서 .ejs로 모두 변경.
const http = require('http'); const fs = require('fs'); const ejs = require('ejs'); |
<%= name%> EJS에서 변수를 출력하는 방법 중 하나로, 해당 변수의 값을 HTML 문서에 출력할 때 사용. <% ~ %> : 해당 내용을 삽입하는 기호 = : 출력(print)의 기호 |
예) index.ejs 파일에 EJS문법과 name 변수를 이용하여 문장을 삽입하는 예제.
const name = 'apple'; // 해당 name을 웹페이지에 보여주고 싶음. // server 생성 const server = http.createServer((req, res)=> { const url = req.url; res.setHeader('Content-Type', 'text/html') // header를 구성해서 text.html로 응답할 예정. if(url === '/'){ ejs .renderFile('./template/index.ejs', {name:name}) // ejs파일을 읽어들인 후 html파일로 rendering(변환)해서 전달. .then((data)=>res.end(data)); // then인 경우 사용자에게 data를 보내고 마무리 } }); server.listen(8080); // server에서 localhost:8080의 주소를 사용 |
'index.ejs' 파일에 <p> 태그를 이용해 해당 코드를 삽입.
예) mypage.ejs 파일에 EJS문법과 skill 배열을 이용하여 문장을 삽입하는 예제.
const skill = [ {name: 'HTML'}, {name: 'CSS'}, {name: 'JavaScript'}, {name: 'Nodejs'}, {name: 'Python'} ]; const server = http.createServer((req, res)=> { const url = req.url; res.setHeader('Content-Type', 'text/html') if ( url === '/mypage') { ejs .renderFile('./template/mypage.ejs', {skill:skill}) .then((data)=>res.end(data)); } }); server.listen(8080); |
mypage.ejs를 이용함.
<ul>과 <li> 탭의 내부에 해당 구문을 작성.
18. JSON과의 연계
예) localhost:8080에 skill을 불러오는 예제.
const http = require('http'); const fs = require('fs'); const ejs = require('ejs'); const skill = [ {name: 'HTML'}, {name: 'CSS'}, {name: 'JavaScript'}, {name: 'Nodejs'}, {name: 'Python'} ]; const server = http.createServer((req, res) => { const url = req.url; const method = req.method; // console.log(url); // '/' 이 출력 // console.log(method); // GET 이 출력 if(method === 'GET'){ // 200번대: 정상적인 호출을 의미 // 400번대: 잘못된 페이지 호출 // 500번대: 서버 에러 res.writeHead(200, {'Content-Type':'application/json'}); res.end(JSON.stringify(skill)) // stringify(): JSON데이터를 문자열로 전송 } else if(method === 'POST') { const body = [ ]; req.on('data', (chunk) => { console.log(chunk); body.push(chunk); // buffer로 담기게 됨. }); req.on('end', ()=> { const bodyStr = Buffer.concat(body).toString(); // body에 있는 buffer를 문자열로 변환. const skill_ = JSON.parse(bodyStr); // JSON의 객체형식으로 변환. skill.push(skill_); // skill에 skill_를 포함. console.log(skill); res.writeHead(201); // 정상적으로 등록되었다는 의미를 head에 삽입. res.end(); // 마무리 }) } }); server.listen(8080); |
GET Method: 클라이언트가 서버에게 리소스를 '요청'할 때 사용하는 Method. 주로 브라우저에서 링크를 클릭하거나, 주소창에 URL을 입력하여 웹 페이지를 요청할 때 사용. GET Method는 요청한 리소스의 데이터를 가져오기만 하며, 서버의 상태나 데이터를 변경하지 않음. 따라서 캐시를 이용하여 빠르게 처리될 수 있음. |
POST Method 클라이언트가 서버에게 데이터를 '전송'할 때 사용하는 Method. 주로 HTML Form을 이용하여 데이터를 입력하고 전송할 때 사용. POST 메서드는 요청한 데이터를 서버에 전송하며, 서버의 상태나 데이터를 변경할 수 있음. 보안적인 측면에서 GET보다 안전함. |
포스트맨(Postman)
API 개발 및 테스트를 위한 협업 플랫폼. HTTP 요청을 보내고, 그에 대한 응답을 받아 볼 수 있는 도구.
사용자가 만든 API의 테스트, 결과확인, 문서화 및 공유 등이 가능.
사용자는 Postman의 인터페이스를 이용하여 HTTP 요청을 작성하고, 헤더를 추가하며, 요청 바디를 수정할 수 있으며,
API의 성능을 모니터링하고, 보안 문제를 찾을 수 있음.
주로 Method를 GET, POST 등으로 변경해서 보기 위하여 백엔드 개발자가 가장 많이 사용.
회원가입이 필요하며, 웹이 아닌 프로그램에서 사용하는 것을 추천.
Postman 다운로드 방법.
https://www.postman.com/downloads/
Download Postman | Get Started for Free
Try Postman for free! Join 25 million developers who rely on Postman, the collaboration platform for API development. Create better APIs—faster.
www.postman.com
프로그램을 다운로드하여 실행.
Workspaces -> My Workspace로 이동.
Method: POST에서 body를 raw로, JSON형식으로 하여 중간의 글상자에 해당 내용을 작성.
{
"name" : "AI"
}
send 후 명령프롬프트 확인
Method: POST에서 'Status: 200 OK' 의 출력을 확인.
다시 Method: GET으로 변환
위에서 추가하려 한 글상자가 정상적으로 들어가 있는 것을 확인할 수 있음.
19. Express
Node.js를 기반으로 구축된 웹 프레임워크(소프트웨어 개발을 위한 구조적인 틀).
Node.js로 작성된 서버 사이드 애플리케이션을 보다 쉽게 구축할 수 있도록 하는 데 사용.
간단하고 직관적인 API를 제공하여 라우팅, 미들웨어, 뷰 엔진 등의 기능을 쉽게 구현할 수 있음.
이를 통해 Node.js에서 웹 애플리케이션의 신속한 작성, 유지보수, 확장이 가능.
또한, 다른 Node.js 모듈과 함께 사용될 수 있으며, 많은 개발자 커뮤니티와 생태계를 가지고 있음.
다양한 미들웨어 (Express 애플리케이션의 요청과 응답 사이에 작동하는 함수) 를 제공한다는 특징도 있음.
예를 들어, 로깅, 인증, 세션 관리, 에러 처리 등의 기능을 미들웨어로 제공하며, 이러한 미들웨어를 쉽게
커스터마이징하여 Express 애플리케이션의 동작을 조정할 수 있음.
REST Representational State Transfer. 웹 애플리케이션에서 자원을 정의하고 조작하기 위한 아키텍처 스타일. 자원을 이름으로 구분하여 해당 자원의 상태를 주고 받는 모든 것을 의미. HTTP 프로토콜을 기반으로 하며, HTTP의 GET, POST, PUT, DELETE와 같은 메서드를 사용하여 자원을 조작함. 이러한 메서드를 통해 클라이언트는 서버에게 자원을 요청하고, 서버는 해당 자원에 대한 상태 정보를 응답함. |
API Application Programming Interface. 기능의 집합을 제공해서 컴퓨터 프로그램간 상호작용을 하도록 하는 것. |
REST API REST 기반으로 서비스 API를 구현한 것. Node.js에서는 REST API를 구현할 수 있도록 Express와 같은 프레임워크를 사용할 수 있음. 이를 통해 클라이언트와 서버 간에 데이터를 전송하고 조작하며 통신을 단순화할 수 있고, 서버 측에서 데이터를 처리하는 데 필요한 로직을 개발할 수 있음. |
Node.js에서 CRUD Operation을 수행하는 HTTP 메서드에 대한 예시 POST(Create): 새로운 데이터의 생성. 예를 들어, 회원가입 기능에서 사용자의 정보를 POST 요청으로 서버로 보내면 서버는 새로운 사용자 데이터를 생성함. 또는, 로그인 기능에서 사용자가 로그인 폼에 입력한 정보를 POST 요청으로 보내면 서버는 새로운 세션을 생성함. GET(Read): 데이터를 조회. 예를 들어, 모든 사용자 정보를 조회하거나 특정 사용자의 정보를 조회하는 경우에 GET 요청을 사용할 수 있음. PUT(Update): 기존 데이터를 수정. 예를 들어, 사용자가 프로필 정보를 수정하거나 비밀번호를 변경하는 경우에 PUT 요청을 사용할 수 있음. DELETE(Delete): 데이터를 삭제. 예를 들어, 사용자가 계정을 삭제하는 경우에 DELETE 요청을 사용할 수 있음. |
명령 프롬프트에 ' npm i express '을 입력하여 express 기능을 설치.
nodemon을 이용할 시, ' npm i nodemon --save-dev '를 명령 프롬프트에 입력하여 설치한 후,
package.json의 파일에서의 내용도 "start":"nodemon 3-express"로 바꾸어줌.
package.json에 "type":"module"을 삽입할 시 import express from 'express'; 코드의 사용이 가능.
import express from 'express'; const app = express(); // app라는 객체를 생성. app.get('/', (req, res, next)=> { // '/': 첫 페이지로 접근. // get방식으로 request response 객체를 가지고 들어오며, next를 작성해주어야 다음 코드로 이동이 가능하다. res.send('<h2>익스프레스 서버로 만든 첫번째 페이지</h2>'); }); app.get('/hello', (req, res, next)=> { res.setHeader('Content-Type', 'application/json'); res.status(200).json({name: 'apple', age:20}); }); app.use((req, res, next)=> { res.setHeader('node-skill', 'node middleware'); next(); // setHeader가 사용자측에 가지 않으면, 아래로 내려감. }); app.use((req, res)=> { res.send('<h2>Not Found</h2>'); }); app.listen(8080); // 서버의 create 완료. |
명령 프롬프트에 ' start npm '을 통해 nodemon으로 서버를 동작시킨 후,
주소창에 localhost:8080 입력 시 정상적으로 작성한 코드에 따라 화면이 출력됨.
20. GET
Node.js에서 CRUD Operation에서 '조회'를 담당하는 HTTP 메서드.
예) localhost:8080/posts에 접속하여 path, params, query를 get방식으로 명령 프롬프트에 호출하는 예시
import express from 'express'; const app = express(); app.get('/posts', (req, res) => { console.log('posts를 호출'); console.log('path: ', req.path); console.log('params: ', req.params); console.log('query: ', req.query); res.sendStatus(200); }); app.listen(8080); |
웹페이지에서는 path, param, query의 확인이 어려움.
' localhost:8080/posts/ '의 뒤에 ' ?number=1 '을 주소창에 작성 시 query: { number: '1' } 로 출력.
예) ' localhost:8080/posts/ '의 뒤에 ' 1 ' 주소창 작성 시 param: { id: '1' } 를 명령 프롬프트에 호출하는 예시
import express from 'express'; const app = express(); app.get('/posts/:id', (req, res) => { console.log('posts/:id 를 호출'); console.log('path: ', req.path); console.log('params: ', req.params); console.log('query: ', req.query); res.sendStatus(200); }); app.listen(8080); |
예) 다른 경로를 이용하여 같은 페이지를 출력하는 예시
import express from 'express'; const app = express(); app.get(['/mypage', '/myroom'], (req, res) => { res.send('mypage 겸 myroom 페이지!'); }); app.listen(8080); |
21. DELETE
Node.js에서 CRUD Operation에서 '삭제'를 담당하는 HTTP 메서드.
예) 위에서 출력한 param: { id: '1' } 의 삭제를 호출하는 예시.
import express from 'express'; const app = express(); app.delete('/posts/:id', (req, res) => { console.log('delete 목적으로 posts/:id 호출'); console.log(`${req.params.id} 번호가 삭제됨.`); res.sendStatus(200); }); app.listen(8080); |
예) Postman 프로그램을 이용하여 localhost:8080/posts/10 경로의 DELETE를 진행한 예시
