티스토리 뷰

Node.js

[Node.js]0420수업내용

LHOIKTN 2021. 4. 20. 14:21

server.js 

const express = require('express'); 
const nunjucks=require('nunjucks'); //nunjucks가져오기  0420
const app = express(); 


//Setting 0420
nunjucks.configure('view',{
    express:app, 
    autoescape:true,
});
app.set('view engine', 'html'); 

//nunjucks chokidar 이걸 깔아줌. 0420
//npm install nunjucks chokidar 0420 
app.get('/',(요청, 응답)=>{
    // 응답.send("헬로~") //view engine 
    //locoalhost:3000/name=rlaehdcjf&id=rlaehdcjf&pw=1324
    console.log(요청.query.name);
    console.log(요청.query.id);
    console.log(요청.query.pw);
    console.log(요청.query);
        응답.render('index.html',{
        answer: ".... 왜? 왜냐니, 그야, 재밌으니까",
        title:요청.query.name,
        user_id:요청.query.id,
        user_pw:요청.query.pw
    }); //이런식으로 html을 조작할 수 있음. 
});
});

app.listen(3000,()=>{
    console.log('server start port : 3000');
});

우선nunjucks chokidar 이걸 깔아줌. 터미널에

npm install nunjucks chokidar

입력하고

 

그 다음 nunjucks가져오기

const nunjucks=require('nunjucks');

 

 

nunjucks를 Setting 한다.  

nunjucks.configure('views',{

    express:app, 

    autoescape:true,

});

 

app.set('view engine', 'html');

 

서버js가 있는 곳에 views폴더를 만들고 거기에 연결하고자하는 index.html을 만든다.  

index.html 은 다음과 같다. 

<!DOCTYPE html>
<html lang="en">
<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>
     왜.. 이런 짓을 하는 거지? 
   <br>
   {{answer}}
   <br> 
   {{title}}
   <br> 
   아이디:{{user_id}}
   <br> 
   패스워드: {{user_pw}}

</body>
</html>

이렇게 하고 브라우저에 들어가서 

주소창에

 

localhost:3000/?name=giant&id=giant&pw=1234

 

이렇게 쳐주면 

answer에는 js에서 정해준 값이 나오고  //".... 왜? 왜냐니, 그야, 재밌으니까",

title, user_id,user_pw에는 위에 url에 입력한 값이 나온다. //요청.query.name, 요청.query.id, 요청.query.pw

  

  응답.render('index.html',{
        answer: ".... 왜? 왜냐니, 그야, 재밌으니까",
        title:요청.query.name,
        user_id:요청.query.id,
        user_pw:요청.query.pw
    }); //이런식으로 html을 조작할 수 있음.

url에 입력한 값에 따라 연결된 html의 중괄호 안의 내용을 조작할 수 있다.

 

 

queryString -> URL의 내용을 담는 함수 

[도메인]? //이 ?는 쿼리스트링을 시작하겠다.는 의미  

[도메인]?변수=값&변수=값&변수=값&변수=값//express가 도메인?부터 시작해서  이후 내용을 object로 만들어준다. json형태 

 

        query{

            name:giant,

            id=giant, 

            pw=1234

        }

 

   요청.query 라는 곳에 내용을 담아줌.

  

쿼리스트링을 간단하게 만드는 방법. 바로 HTML로 만들 수 있음.

  
    <form action="http://localhost:3000" method="get" id="">
        이름:<input type="text" name="name" ><br> <!-- name=김동철 -->
        아이디:<input type="text" name="user_id" ><br><!-- user_id=ehdcjf -->
        패스워드:<input type="password" name="user_pw" ><br><!-- user_pw=1234 -->
        <input type="submit" value="버튼"><!-- 이 버튼을 누르면 이 버튼을 감싸는 폼 안에 있는 input이 올라감.  -->
        <!-- 이렇게하면 브라우저 인풋박스 안에서 작성한 값이 url로 전송됨. -->
    </form>
<!-- form 안에 있는 input내용을 action 쪽에 링크이동시킨다.  -->

 form 객체를 만들어서 그 안에 input box를 만든다. 

 

input type='submit'을 통해 이 input box를 감싸고 있는 form 안에 있는 모든 input 내용을 action쪽에 링크이동시킨다.

 

 

이 from 안에 내용을 작성하고. 버튼을 누르면 그 내용이 올라가서 

 

이렇게 변경된 url로 링크이동한다. 

그런데 위에 4,5번째 줄에 아이디와 패스워드에  내가 입력한 내용이 출력되지 않는다. 그 이유는

  응답.render('index.html',{
        answer: ".... 왜? 왜냐니, 그야, 재밌으니까",
        title:요청.query.name,
        user_id:요청.query.id,
        user_pw:요청.query.pw
    }); //이런식으로 html을 조작할 수 있음. 
<form action="http://localhost:3000" method="get" id="">
        이름:<input type="text" name="name" ><br> <!-- name=김동철 -->
        아이디:<input type="text" name="user_id" ><br><!-- user_id=ehdcjf -->
        패스워드:<input type="password" name="user_pw" ><br><!-- user_pw=1234 -->
        <input type="submit" value="버튼"><!-- 이 버튼을 누르면 이 버튼을 감싸는 폼 안에 있는 input이 올라감.  -->
        <!-- 이렇게하면 브라우저 인풋박스 안에서 작성한 값이 url로 전송됨. -->
    </form>

html에서의 name 과 js에서 name이 다르기 때문이다. 

title이 잘 나오는 이유는 

요청.query.name 과 <input type="text" name="name" >의 name 값이 같기 때문이고. 

 

아이디가 나오지 않는 이유는 

user_id:요청.query.id

 

아이디:<input type="text" name="user_id" >

요청.query.id랑 아이디:<input type="text" name="user_id" > 가 다르기 때문이다. 

그래서 이 값을 일치시켜줘야한다. 요청.query.id를 요청.query.user_id로 바꿔준다. 

    응답.render('index.html',{
        answer: ".... 왜? 왜냐니, 그야, 재밌으니까",
        title:요청.query.name,
        user_id:요청.query.user_id,
        user_pw:요청.query.user_pw
    });

이런 식으로 고쳐주고. 다시 실행하면. 

이렇게 잘 나온다.

이제 post를 써볼건데 

 <form action="http://localhost:3000" method="post" id="">

폼의 메쏘드를 post로 바꿔주고 

 

js에 get이랑 똑같이 추가해준다. 

app.post('/',(요청, 응답)=>{
    console.log(요청);      
    응답.send('POST on?')
  });

 

이렇게 나온다.  post는 body를 받아오는데. 이걸 쓰려면 

body-parser 를 설치해야한다. 

 

서버를 끄고 터미널에 

 npm install body-parser

입력하고 package.json에서 잘 받아졌는지 확인한다. 

 

const bodyParser=require('body-parser');

이렇게 변수에 담아주고 

 

app.use(bodyParser.urlencoded({extended:false}));

설정도 해준다. 

 

728x90

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

게시판 pagination  (0) 2021.05.03
[Node.js]서버 파일 분산  (0) 2021.05.01
0424 수업  (0) 2021.04.24
[Node.js] 0421 수업  (1) 2021.04.21
[Node.js] 0419수업내용.  (0) 2021.04.20
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/11   »
일 월 화 수 목 금 토
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
글 보관함