Node.js 조금 더 짚고 넘어가기 #2 🏃‍♂️

이준석·2021년 3월 6일
JavaScriptNoobejsexpressnode.js
0

NodeJs

목록 보기
5/8
post-thumbnail

본 포스팅은 개발일기 형식에 가까워 주저리 주저리가 많을 수 있습니다.
바로 핵심만 뽑아서 보고 싶으신 경우 목차를 이용해주시면 감사하겠습니다.

서론

현재시간 3월 7일 새벽 1시 46분, 원래 3월 6일에 글을 두개 쓰기로 했는데 금방 끝내야 할 레이드가 내 손이 오늘만 유달리 잘 따라주지 않아서 꽤 긴시간 소요됐다. 그래서 끝내자마자 바로 쓰기 위해서 침대가 아닌 책상을 택했다. 😐

이번 포스팅에서는 view 와 node.js 를 연결해서 데이터를 주고 받는 부분을 실습해볼 예정이다. 이제야 드디어 뭔가 웹 개발 같은 느낌이 드는 단계라고 할 수 있다. 이 부분도 이전 포스팅에서 공유한 글에서 얻은 지식이고 이해가 안된다면 서론에 적힌 공유된 링크로 가서 살펴보는 것을 추천한다.

바로 시작!

기회가 된다면 같이 들으면서 읽으면 좋을 것 같습니다 😁

본론

현재 디렉토리 구조

우선 현재 디렉토리 구조를 공유해보려고 한다.

bin
\_ www

node_modules
\_ 여러가지 모듈들 (생략)

public
\_ images
\_ javascripts
\_ stylesheets
    \_ style.ccss
    
routes
\_ login
   \_ login.js
   
\_ index.js
\_ user.js
views
\_ login
   \_ login.ejs
\_ error.ejs
\_ index.ejs
\_ test.ejs

.gitignore
app.js
package.json
package-lock.json
README.md

이런 구조를 가지고 있는데 login 폴더와 .gitignore, test.ejs 는 내가 테스트하면서 생성한 파일이라서 프로젝트 생성 후 아무작업도 안했으면 없는 부분이 맞습니다.

views 밑에 ejs 파일 생성

따라서 우선 간단한 테스트를 위해 view 폴더 밑에 test.ejs 파일을 하나 생성하고 다음과 같이 작성합니다.

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <link rel='stylesheet' href='/stylesheets/style.css' />
        <title><%= test %></title>
    </head>
    <body>
        <h1><%= test %></h1>
        <p>Test View !!</p>
    </body>
</html>

따라서 서버에서 test 라는 키 값으로 value 를 넘겨줄 것이고 그것을 받아서 출력하는 형태의 코드이다. 그래서 test 키로 값을 언제 넘겨줄건데?

해당 부분은 ./routes 폴더 밑에 index.js 에서 해줄 예정이다. index.js 는 다음의 흐름에 의해서 실행된다.

bin/www 👉 app.js 👉 index.js 흐름으로 실행된다고 불 수 있다. 자세한 내용은 이전 포스트를 참고하자!

index.js 에서 ejs 호출

그래서 index.js 에서 test.ejs 파일을 호출하는 로직을 적으면 다음과 같다.

router.get('/test', function(req, res){
  res.render('test', {test : 'test'});
});

module.exports = router;

method 방식은 화면 조회니까 GET 방식으로 하고 path 를 적어준다. 그리고 HttpServletRequest 와 HttpServletResponse (순서 주의 ❗) 로 적어주고 res 를 이용해서 화면을 render 해준다. render 방식은 다음의 규칙을 따른다.

  • res.render('화면 이름', 화면에 전달할 값 {key : 'value'});
    이때 값은 여러개를 전달할 수 있는데 콤마( , )로 구분해서 넣어주면 된다.
    {key : 'value', key2 : 'value2}
  • render 에 화면명을 적을때는 views 밑 경로부터 적어준다. (app.js 에서 views 경로를 설정해주었기 때문 ❗)
  • module.exports = router; 을 적어주었기 때문에 app.js 에서 index.js 의 라우터를 호출해서 화면 매핑을 해줄 수 있게 되는 것이다.

이렇게 입력하고 https://localhost:3000/test 로 접속하면 다음과 같은 문구가 뜬다.

style.css 를 적용해주었기 때문에 약간은 갬성적인? 위치에 텍스트가 나타난다.

따라서 여기까지 했다면 node.js 에서 ejs 로 데이터 전달은 성공한 것이다. 오늘 포스팅의 50% 를 한 셈이다. 하지만 나머지 50% 는 제대로 이해하지 못하면 약간은 어려울 수 있다.

views와 routes 밑에 디렉토리 생성시 경로 찾는법

우선 디렉토리를 생성해서 디렉토리 경로를 타고 가는 부분도 실습을 해보려고 한다. 따라서 login 디렉토리를 views 와 routes 폴더 밑에 하나식 생성하고 각각 login.ejs 와 login.js 파일을 생성한다.

따라서 다음과 같은 디렉토리 구조가 된다.

routes
\_ login
   \_ login.js
   
views
\_ login
   \_ login.ejs

login.ejs 코드

그리고는 login.ejs 에는 다음과 같이 작성해준다. (자신이 원하는대로 꾸며도 상관 없습니다.)

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <link rel='stylesheet' href='/stylesheets/style.css' />
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
    <title><%= title %>></title>
</head>
<body>
    <h1><%= title %> 화면</h1>
    <form action="login/auth" method="post">
        <div class="mb-3">
            <label>아이디</label>
            <input class="form-control" type="text" id="id" name="id" />
        </div>
        <div class="mb-3">
            <label>비밀번호</label>
            <input class="form-control" type="password" id="pw" name="pw" />
        </div>
        <button class="btn btn-primary" type="submit" id="login-btn" name="login-btn">로그인</button>
    </form>
</body>
</html>
  • 여기서부터는 간단하게나마 bootstrap 을 적용했습니다.
    bootstrap 버전은 가장 최신인 5버전 베타 입니다.
  • form 에서의 method는 POST 방식으로 합니다. 그 이유는 GET 방식으로도 데이터를 넘길 수 있다. 하지만 스니핑을 당하게 되면 정보가 그대로 노출된다. (특히 비밀번호가 그대로 들어난다.) 따라서 POST 방식을 이용해서 정보를 1차적으로나마 숨긴다.
  • form 의 action 값이 서버의 라우터를 호출하는 부분으로 login/auth 라고 되어있는데 조금 이따가 node.js 코드와 연결해서 살펴보도록 하겠습니다.

login.js 코드와 app.js 추가 코드

곧바로 이어서 login.js 코드는 다음과 같이 작성한다.

<!-- login.js -->
// express 모듈 호출
const express = require('express');
const router = express.Router();
// body parser (client에서 넘어오는 body 데이터를 사용하기 쉽게 파싱해주는 모듈)
const bodyParser = require("body-parser");
// application/x-www-form-urlencoded 분석
router.use(bodyParser.urlencoded({ extended : true }));
// application/json 분석
router.use(bodyParser.json());

// 해당 라우더는 localhost:3000/login 을 요청할 때 들어온다.
router.get('/', function(req, res){
    console.log("[login.js] call login index page");
    res.render("./login/login", {title : "login"});
});

// 해당 라우터는 localhost:3000/login/auth 를 요청할 때 들어온다.
router.post('/auth', function(req, res){
    console.log("[login.js] call auth, params : ", req.body);
    return res.json({success : true});
});

module.exports = router;

<!-- app.js -->
// login 추가
const login = require("./routes/login/login")
app.use("/login", login);
  • express 와 body-parser 모듈을 호출해서 가져온다.
  • body-parser 모듈을 이용해 form 데이터와 json 데이터 파싱을 사용한다.
  • 사용자가 https://localhost:3000/login 요청을 하게 되면 login.js 의 '/' 라우터의 흐름을 타게 된다. 그 이유는 app.js 에 login.js 의 라우터를 가져와서 app 에 등록했기 때문에 우선 /login path가 404 Not Found가 뜨지 않고 잘 매핑되는 이유다. 그리고 login 후미에 다른 path 가 붙지 않았기 때문이다.
  • 만약 login 후미에 다른 path 가 입력된다면 (예 : auth) /login 후미의 path 로 라우터를 형성하면 된다. (/auth 와 같이)
  • module.exports = router; 를 해주었기 때문에 app.js 에서 login.js 모듈을 호출해서 사용할 수 있게 된 것이다.

따라서 https://localhost:3000/login 경로로 타고 들어가면 다음과 같은 화면이 뜨게 된다.

따라서 아이디와 패스워드를 대략 입력하고 로그인 버튼을 누르면 console 창에 다음과 같이 log가 뜬다.

그리고는 화면에는 다음과 같은 정보가 뜬다.

  • login.ejs 에서 input 타입에 적은 name 값이 key 값이 우리가 form에 적은 데이터가 value 값으로 node.js 에 들어가게 된다. (login-btn 이 같이 딸려서 들어오는 이유는 form 태그 내부에 버튼이 존재해서 그런 것 같다.)
  • 나의 경우 보통 log 를 찍을 때
    [메서드네임] call 메서드명 , params : 넘어온 데이터
    이런식으로 찍어준다.
  • login.js 파일을 다시 보면 /auth 의 return 이 다음과 같이 되어있다.
    return res.json({success : true});
    해당 코드는 클라이언트에 json 데이터로 success : true 로 보내라는 뜻이다. 여기에 로그인 성공시 메인 페이지로 이동하는 로직을 추가하면 로그인 성공 로직을 탄 다음에 메인 페이지로 이동할 수 있을 것이다.

body-parser 를 이용해서 데이터 파싱하기

현재 클라이언트에서 넘어온 데이터는 req 변수 안의 body 에 들어있다. 지금은 테스트 하는 과정이니까 내가 입력한 로그인 데이터를 로그인 버튼을 눌렀을 때 success : true 와 같이 보려고 하면 다음과 같이 작업해주면 된다.

router.post('/auth', function(req, res){
    console.log("[login.js] call auth, params : ", req.body);
    return res.json({success : true, id : req.body.id, pw : req.body.pw});
});

req.body.id , req.body.pw 로 데이터를 찾을 수 있는 이유는 body-parser 모듈에서 json 파싱을 사용했기 때문에 가능한 일이다.

결과 화면은 다음과 같다.

이로써 오늘 이루고자 한 목표는 다 이뤘다.

결론

오늘 상당한 진도를 뺐다고 생각한다. 굉장히 만족한다.
우선 클라이언트와 서버간의 데이터를 주고 받은 작업을 하였고 내가 생각한 웹 작업에서는 이 부분만 원활하게 되면 나머지는 이제 문서를 보고 충분히 참고해서 진행할 수 있다고 생각한다. 현재시간 오전 2시 42분, 약 1시간 가량 걸렸는데 평소에는 11시도 안되서 잔다.

근데 지금까지 살아있다는건 그만큼 블로그가 중요하다는 거지~

결론을 얼른 줄이고 침대에 가서 쓰러져야겠다.

profile
이준석
호주 워홀중
이전 포스트

Node.js 조금 더 짚고 넘어가기 #1 🏃‍♂️

다음 포스트

Node.js 와 Firebase (진짜) 연동하기 #2

0개의 댓글