처음부터 차근차근

login 화면 만들기 본문

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('서버 가동')
});

이렇게 하면 가동된다.

'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
'FrameWork/express' Related Articles more