Node.js, MongoDB 로 웹서비스 만들기 - 4. login page
메인은 나중에 게시글 리스트 페이지로 대체해줄거니 잠시 놔두고
로그인 페이지를 만들어보자
그전에 jquery 랑, bootstrap 쓸거라 index.ejs 에 해당 cdn 들 가져와서 추가
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<title>NFP</title>
</head>
<body>
<h1>Hi NFP</h1>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous">
</script>
<script>
</script>
</body>
</html>
앞으로 새 ejs 파일을 만들 때 항상 index.ejs 파일 복사해서 쓸거임
css 쪽으로는 만족하려면 한도끝도 없기 때문에 대충 부트스트랩을 이용해
최소한으로만 보기 좋게 할 생각이다.
login.ejs 파일을 만들고 로그인을 위한 요소를 몇개 만들어주자.
<div class="container mt-4">
<form action="/login" method="POST">
<fieldset>
<legend>로그인</legend>
<div class="mb-3">
<label for="id" class="form-label">아이디</label>
<input type="text" id="id" class="form-control" name="id">
</div>
<div class="mb-3">
<label for="pw" class="form-label">비밀번호</label>
<input type="password" id="pw" class="form-control" name="pw">
</div>
<button type="submit" class="btn btn-outline-dark">로그인</button>
<a href="/member/register" class="btn btn-outline-success">아이디가 없나요?</a>
</fieldset>
</form>
</div>
해당 파일로 가기위해 server.js 에서 라우팅을 해주자
라우팅이 뭐냐면 간단히 말해서
server.js 에서 아까 한 app.get('/경로')~ 를 통해 ejs 파일로 경로를 지정해주는거임
app.get('/member/login', (req, res)=>{
res.render('login.ejs');
})이제 localhost:8080/member/login 으로 접속하면 로그인 페이지가 나온다.
그냥 /login 으로 지정하면 될걸 왜 /member/login 으로 했냐면
express 에서 제공하는 router 기능을 통해 라우팅 분리를 할거기 때문이다.
login, register 는 회원 기능 말고는 안쓰니까
굳이 member 안붙여도 되는데 그냥 내가 해보고싶어서 해볼거임
Node.js, MongoDB 로 웹서비스 만들기 - 5. express.router (라우터 분리)
로그인 페이지와 비슷하게 회원가입 페이지도 하나 만들어주었다. - login.ejs - register.ejs 이제 server.js 에 아래처럼 두 라우터가 있는데 app.get('/member/login', (req, res)=>{ res.render('login.ejs'); }) app.get('/me
4sii.tistory.com