Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 | 31 |
Tags
- 인접리스트
- Spring
- GraphQL
- 코딩테스트
- JWT
- java
- dfs
- TIL
- 알고리즘
- MySQL
- nestjs
- node.js
- queue
- html
- Interceptor
- 프로그래머스
- css
- 탐욕법
- 인접행렬
- bean
- logger
- winston
- 자료구조
- Deep Dive
- REST API
- OOP
- typescript
- LifeCycle
- javascript
- 변수
Archives
- Today
- Total
처음부터 차근차근
login 화면 만들기 본문
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('서버 가동')
});
이렇게 하면 가동된다.
'FrameWork > express' 카테고리의 다른 글
app.listen() 모듈화 (0) | 2023.05.26 |
---|---|
MVC의 Controller 분리하기 (0) | 2023.05.26 |
routing 분리하기 (0) | 2023.05.26 |
Login 뷰 최적화 (0) | 2023.05.26 |
express 서버 띄어보기 (0) | 2023.05.26 |