포시코딩

Node.js, MongoDB 로 웹서비스 만들기 - 4. login page 본문

Node.js

Node.js, MongoDB 로 웹서비스 만들기 - 4. login page

포시 2022. 6. 9. 19:16
728x90

메인은 나중에 게시글 리스트 페이지로 대체해줄거니 잠시 놔두고 

로그인 페이지를 만들어보자

 

그전에 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 안붙여도 되는데 그냥 내가 해보고싶어서 해볼거임

 

 

 

 

https://4sii.tistory.com/11

 

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

728x90
저작자표시

'Node.js' 카테고리의 다른 글

Node.js, MongoDB 로 웹서비스 만들기 - 6. MongoDB 세팅 및 연결(1)  (0) 2022.06.09
Node.js, MongoDB 로 웹서비스 만들기 - 5. express.router (라우터 분리)  (0) 2022.06.09
Node.js, MongoDB 로 웹서비스 만들기 - 3. index.ejs  (0) 2022.06.09
Node.js, MongoDB 로 웹서비스 만들기 - 2. 서버실행  (0) 2022.06.09
Node.js, MongoDB 로 웹서비스 만들기 - 1. npm init  (0) 2022.06.09
'Node.js' Related Articles more