하드코딩
index.html 생성 후 !엔터 를 눌러 기본 html 문서를 세팅한다.
lang 설정은 ko로 바꾼다.
<html lang="ko">
그 후 body에 input 태그를 2개 생성하여 다음 문서가 완성되도록 한다.
<!DOCTYPE html>
<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" /><br />
<input type="text" /><br />
</body>
</html>
해당 코드를 전체 복사해서 app.js의 /login의 send에 붙여넣고(앞뒤로 반드시```를 붙인다) 서버를 실행한다.
잘 실행이 된다면 input tag의 힌트문구와 버튼 출력되도록 코드를 추가한다.
const express = require("express");
const app = express();
app.get("/", (req, res) => {
res.send(`<!DOCTYPE html>
<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>
<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="아이디" /><br />
<input type="text" placeholder="비밀번호" /><br />
<button>로그인</button>
</body>
</html>
`);
});
app.listen(3000, () => {
console.log("서버 실행");
});
다시 서버를 열어서 정상적으로 변경되었는지 확인한다.
유지보수가 매우 힘든 코드가 완성되었다.