FrameWork/express
login 화면 만들기
HangJu_95
2023. 5. 26. 15:00
728x90
index.html 파일을 통해 먼저 형태를 제작한다.
<!DOCTYPE html>
<!-- 한글 문서인지 영어 문서인지 확인하는 것 "ko" -->
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="text" placeholder = "Id"><br>
<input type="text" placeholder = "Password"><br>
<button>Login</button>
</body>
</html>
이후 Node.js처럼 res.send() 내부에 html을 template literal을 통해 넣어준다.
'use strict'
// express 사용해보기
const express = require('express');
const app = express();
app.get('/',(req,res)=>{
// 기능 동작
res.send(`
<!DOCTYPE html>
<!-- 한글 문서인지 영어 문서인지 확인하는 것 "ko" -->
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
여기는 루트입니다.
</body>
</html>
`)
})
app.get('/login',(req,res)=>{
// 기능 동작
res.send(`
<!DOCTYPE html>
<!-- 한글 문서인지 영어 문서인지 확인하는 것 "ko" -->
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="text" placeholder = "Id"><br>
<input type="text" placeholder = "Password"><br>
<button>Login</button>
</body>
</html>
`)
})
app.listen(3000,()=> {
console.log('서버 가동')
});
이렇게 하면 가동된다.