글생성 UI 만들기
function templateHTML(title, list, body) {
return `
<!doctype html>
<html>
<head>
<title>WEB1 - ${title}</title>
<meta charset="utf-8">
</head>
<body>
<h1><a href="/">WEB</a></h1>
${list}
${body}
</body>
</html>
`
}html템플릿을 반환하는 templateHTML 함수는 위와 같다.
- {$list} 다음에
<a href="/create">create</a>를 추가해서
create로 가는 링크를 추가로 생성한다. - 이때
/create는 pathname이 된다. 즉, 새로생성한 링크로 이동하면 'localhost:3000/create' 주소로 이동한다.
<body>
<h1><a href="/">WEB</a></h1>
${list}
<a href="/create">create</a>
${body}
</body>createServer함수 내부에 /create경로로 접속하는 경우를 처리해야 한다.
- if 경로=='/' -> 홈 화면 나타남
- else -> Not found 404에러 나타남
으로 처리되어있는 상태에서, 사이에 else if를 통해 /create 경우를 추가한다. - else if 경로=='/create -> 글생성 화면 나타남
그리고 홈화면에서 body부분만 변경하여 사용하기 위해,
fs.readdir('./data', function(error, filelist){
var title = 'Welcome';
var description = 'Hello, Node.js';
var list = templateList(filelist);
var template = templateHTML(title, list, `<h2>${title}</h2>${description}`); //new
response.writeHead(200);
response.end(template);
});코드를 그대로 사용한 뒤, 변수 template 값을 지정할 때 호출하는 templateHTML 함수의 인자 중 body 부분을 원하는 html 코드로 변경한다.
- 이전 시간에 만들었던 html의 form기능을 활용했던 코드를 body자리에 넣는다.
var template = templateHTML(title, list, `
<form action="http://localhost:3000/create_process"
method="post">
<p><input type="text" name="title"></p>
<p>
<textarea name="description"></textarea>
</p>
<p>
<input type="submit">
</p>
</form>
`); placeholder 속성 사용하기
현재 이렇게 사용자의 입력을 받는 두개의 빈칸이 있다.
이 빈칸에 사용자가 어떠한 목적의 데이터를 입력해야 하는지 가이딩 해주기 위해 html 태그에 placeholder라는 속성을 추가해줄 수 있다.
<p><input type="text" name="title" placeholder="title"></p>
<p>
<textarea name="description" placeholder="description"></textarea>
</p>두 control을 위와 같이 구현하면
이렇게 클릭하면 사라지는 사용자 가이딩 키워드가 보이게 된다.
chrome의 검사로 NW 상태 살피기
- 웹페이지에서 우클릭하여 검사를 클릭한다.
- 상단메뉴 Elements, Console 등에서
Network를 선택한다. Network에서는 웹브라우저와 웹서버가 주고받는 데이터를 확인할 수 있다.
control에 제목과 내용을 입력하고 submit 버튼을 누르면
우리가 지정했던 웹서버 경로인create_process로 이동하게 되고, 동시에 Network 창에도Name : create_process, Status : 404가 나타난다.- 현재 404 Not found인 이유는 아직 create_process 경로를 처리하지 않았기 때문
- 목록에서 Name 항목,
create_process를 클릭하고, Headers, Payload, Preview... 중Payload를 선택한다. Form Data라는 항목에서 사용자가 control에 입력한 title과 description을 확인할 수 있다. 이는 Post방식으로 전달되었기 때문에 URL의 QueryString으로는 확인할 수 없다.
웹서버 구현하기
post방식으로 전송한 데이터를 node.js에서 가져오기
-
createServer는 웹브라우저로 접속할 때마다 콜백함수를 node.js가 호출한다. 그 때 주는 인자가 request (요청 시, 웹브라우저가 보낸 정보), response (응답 시, 사용자가 웹브라우저에게 보낼 정보)
-
이 중 request에 사용자가 요청한 post 정보가 있을 것이다.
-
request.on('data', function(data) { ... });
웹브라우저가 post방식으로 데이터를 전송할 때, 그 양을 한번에 처리하기 힘들다.
node.js에서는 post방식으로 전송된 데이터를 조각 단위로 나눠서 수신하는데, 각 데이터 조각을 수신할 때마다 callback함수를 호출한다. 또 data라는 인자를 통해 수신한 정보를 callback함수로 준다.
(callback함수에서는 body라는 변수에 데이터 조각을 모아주는 일을 하면 된다)
request.on('data', function(data) {
body += body;
});-
request.on('end', function() { ... });
더이상 수신할 정보 조각이 없을 때, end의 callback 함수를 호출한다. -
var qs = require('querystring');
node.js의 querystring 모듈을 변수 qs로 사용한다. -
var post = qs.parse(body);
node.js의 qs 모듈에 인자로 body값을 주면, 변수 post에 post mode로 전달된 데이터를 객체화할 수 있다.
(확인차console.log(post)를 찍어보면, 로그에{ title:'...', description:'...'}와 같은 object가 뜨는 것을 확인할 수 있다) -
object이기 때문에
post.title,post.description으로 사용자가 입력한 정확한 값에도 접근이 가능하다.
/create_process 경로의 경우를 처리한 코드부분은 다음과 같다
else if(pathname === '/create_process') {
var body='';
request.on('data', function(data) {
body += body;
});
request.on('end', function(){
var post = qs.parse(body);
var title = post.title;
var description = post.description;
});
response.writeHead(200);
response.end('success');
}