📗Nodejs : section30~33 - form 그리고 response

Notice

Recent Posts

Recent Comments

Link

« 2024/07 »
일	월	화	수	목	금	토
	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	31

Tags more

Archives

Today

Total

관리 메뉴

C-log

📗Nodejs : section30~33 - form 그리고 response 본문

📗Nodejs/⚡ver.0

📗Nodejs : section30~33 - form 그리고 response

4:Bee 2024. 6. 24. 12:38

728x90

이번에는 form에서 부터 response까지 사용자가 입력한 값을 받아서 사용자에게 응답을 전달하는 모든 과정들을 살펴 볼 것이다. 비록 실제 data를 처리하는 sql이 아니지만 이를 통해서 대략적인 흐름과 맥락을 어느정도 가늠 해볼 수 있을 것이다.

form

아래와 같이 html을 작성해보고 실행을 해보고 URI의 결과를 살펴보자.

<!-- form.html -->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <form action="http://localhost:3000/process_create">
    <p><input type="text" name="title"></p>
    <p>
      <textarea name="description"></textarea>
    </p>
    <p>
      <input type="submit">
    </p>
  </form>
</body>

</html>

URI

http://localhost:3000/process_create?title=test&description=test+des

* 참고로 위와 같은 결과를 얻기 위해서는 로컬 서버를 돌려야 한다. 본인은 live server를 사용했다.

결과를 살펴보면 form으로 전송된 input값으로 URI queryString을 만들어낸다는 것을 알 수 있다. 즉, input에 사용자가 입력한 값을 input type의 submit으로 전송을 하면 form태그의 action 속성으로 지정한 주소 URI에 queryString을 부여한 다는 것을 알 수 있다. 이 방법은 좋은 방법이 아니다. 불필요한 정보를 담아서 웹에 정보를 노출하는 것이다. 즉, 우리가 Get으로 id의 quryString 을 보여주는 방식은 괜찮지만 post와 같은 중요한 정보를 서버에 전달할 때는 위와 같은 방식을 하게 되면 사용자의 정보가 노출 되는 것이기 때문에 좋지 않다. 따라서 아래와 같이 데이터 전송 방식(method)을 지정해 주면 아까와 같이 URI의 queryString이 외부로 노출 되지 않는다.

<!-- form.html -->

<form action="http://localhost:3000/process_create" method="POST">

URI

http://localhost:3000/process_create

Create

글을 생성하는 페이지를 추가할 것이다. 그러기 위해서는 글을 생성하는 페이지로 넘어 갈 수 있는 링크가 필요하다. 아래와 같이 a태그를 추가 하면 된다.

/* main.js */
/* 이하 생략 */

function templateHTML(title, list, body) {//list는 받아온 list를 return을 통해서 제작된다.
  return `
  <!doctype html>
  <html>
  <head>
    <title>WEB1 - ${title}</title>
    <meta charset="utf-8">
  </head>
  <body>
    <h1><a href="/">WEB</a></h1>
    ${list} 
    <a href="/create">create</a>
    ${body}
  </body>
  </html>
  `;
}

/* 이하 생략 */

지난 시간에 우리는 코드의 효율을 높이기 위해서 렌더링 되어야하는 html부분을 함수로 따로 빼내서 template에 정의 했다. a태그를 위와 같은 곳에 추가 해서 '/create' 페이지로 넘겨 줄 수 있게 설정을 해준다. 이후 해당 path에 맞는 페이지를 createServer에 추가 해주면 된다. 추가 해야할 path는 아래와 같다.

/* main.js */
//var app = http.createServer(function (request, response) { ~

else if (pathname === '/create') { //pathname(url.parse(_url, true).pathname)이 create일 경우 아래 코드 실행
    fs.readdir('./data', function (error, filelist) {
      var title = 'WEB - create';
      // var description = 'Hello, Node.js';
      var list = templateList(filelist); //해당 매개변수로 받아온다. 여기서 이해가 안감.
      var template = templateHTML(title, list, `
      <form action="http://http://localhost:3000/create_process" method="POST">
        <p><input type="text" name="title" placeholder="title"></p>
        <p>
          <textarea name="description" placeholder="description"></textarea>
        </p>
        <p>
          <input type="submit">
        </p>
      </form>`);//html 구문을 생성하는 코드
      response.writeHead(200); //200이란 web브라우저의 승인으로 생성
      response.end(template);
    }

이렇게 작성하면 이제 '/create' pathName을 가진 URI주소로 넘어가 글을 생성 할 수 있는 페이지가 완성이 된다. 여기서 주의해서 봐야 하는 부분은 위에서 다루었던 form태그이다. 역시나 글을 생성하는 페이지기 때문에 form태그의 데이터 전송 방식(method)는 post여야한다. 이를 통해 form 태그로 부터 전송된 데이터들을 은닉하게 되며 외부로 부터 노출되지 않게 된다.

create_process(doCreate)

이제 글을 생성하는 페이지를 만들었다면 작성된 글을 서버로 보내는 페이지가 필요하다. 앞전의 코드에서 form태그의 action의 URI는 '/create_process'로 되어 있다. 우리가 create페이지를 만들었던 것 처럼 이번에도 같게 작성하면 된다.

/* main.js */
var qs = require('querystring'); //모듈

//var app = http.createServer(function (request, response) { ~

else if (pathname === '/create_process') { //create에서 POST한 데이터 가져오기
    let body = ''
    request.on('data', function (data) {
      body = body + data
    })
    request.on('end', function () {
      let post = qs.parse(body) //querystring 모듈을 통해서 create에서 post로 전송받은 값을 가져올 수 있다.
      var title = post.title;
      var description = post.description;
      console.log(post)
    })
    response.writeHead(200); //200이란 web브라우저의 승인으로 생성
    response.end('success');
  }

위코드를 유심히 보면 body라는 변수가 있다. 위 변수는 내가 서버에 전송할 data를 담아내는 역할 이라고 보면 된다. 실제 API와 통신에서 Post를 할 때 백엔드에서 body에 어떤 값을 넣어야 하는지 규칙과 요소들을 설정하는데 위의 코드가 이와 같은 역할을 하는 것이다. 아래 코드를 통해서 자세한 사항들을 살펴 볼 수 있다.

create_process(doCreate) 코드의 분석

경로 확인

/* main.js */

else if (pathname === '/create_process') { ~

이 조건문은 URL의 경로명이 /create_process일 때만 실행되도록 한다. 이 경로는 폼 데이터(formData)가 서버로post되는 엔드포인트로 사용된다.

데이터 수신

/* main.js */

let body = '';
request.on('data', function (data) {
  body += data;
});

body 변수를 초기화하여 사용자로부터 수신된 데이터를 저장한다.
request.on('data', callback) 리스너는 사용자로부터 데이터가 스트림 형태로 도착할 때마다 호출된다. 이 때 수신된 data를 body에 삽입한다.

데이터 처리 완료

/* main.js */

request.on('end', function () {
  let post = qs.parse(body);
  var title = post.title;
  var description = post.description;
  console.log(post);
});

request.on('end', callback) 이벤트는 데이터 수신이 완료되었을 때 호출된다. 이 시점에서 모든 데이터가 body 변수에 저장되어 있다.

qs.parse(body)를 사용하여 URL 인코딩된 문자열 body를 JavaScript 객체로 파싱한다. qs는 querystring 모듈의 일반적인 별칭이며 이 객체에서 title과 description 필드를 추출한다.

참고로 아래와 같이 console로 확인을 해보면 이와 같은 결과를 얻어 낼 수 있다.

/* main.js */

request.on('end', function () {
      console.log("body: ", body);
      console.log("queryString: ", qs);
      let post = qs.parse(body);
      var title = post.title;
      var description = post.description;
      console.log("post: ", post);
    })

body:  title=%ED%85%8C%EC%8A%A4%ED%8A%B8+%EC%9E%85%EB%8B%88%EB%8B%A4.&description=%ED%85%8C%EC%8A%A4%ED%8A%B8+%EC%84%A4%EB%AA%85+%EC%9E%85%EB%8B%88%EB%8B%A4.
queryString:  {
  unescapeBuffer: [Function: unescapeBuffer],
  unescape: [Function: qsUnescape],
  escape: [Function: qsEscape],
  stringify: [Function: stringify],
  encode: [Function: stringify],
  parse: [Function: parse],
  decode: [Function: parse]
}
post:  [Object: null prototype] {
  title: '테스트 입니다.',
  description: '테스트 설명 입니다.'
}

응답

/* main.js */

response.writeHead(200); //200이란 web브라우저의 승인으로 생성
response.end('success');

response.writeHead(200)로 HTTP 상태 코드 200을 클라이언트에 전송합니다. 200은 요청이 성공적으로 처리되었다는 의미입니다.
response.end('success')로 응답을 종료하고 클라이언트에게 'success'라는 메시지를 보냅니다.

post로 받은 데이터로 파일 생성하기 fs.writeFile

이제 create_process를 통해서 사용자로 부터 post로 받은 데이터 값들을 받아 올 수 있는 코드를 작성 했다. 이제 남은건 해당 데이터들을 가지고 data폴더에 post로 받아온 데이터 값들로 파일을 생성하는 코드를 추가적으로 작성할 것이다. 추가된 코드는 아래와 같다.

/* main.js */
// request.on('end', function () { ~
// ...이하 생략...
var description = post.description;
      // console.log(post)
      fs.writeFile(`data/${title}`, description, 'utf8', (err) => {
        response.writeHead(302, { Location: `/?id=${title}` }); //200이란 web브라우저의 승인으로 생성
        response.end();
      })
 // ...이하 생략...

파일 쓰기()

fs.writeFile 함수는 첫 번째 인자로 파일의 경로와 이름을 받는다. 여기서는 data/${title}을 사용하여 data 디렉토리 내에 title 변수의 값에 해당하는 이름으로 파일을 생성하거나 덮어쓰기 한다.
두 번째 인자인 description은 파일 안에 쓸 내용이다.
세 번째 인자 'utf8'은 파일을 쓸 때 사용할 인코딩 방식을 지정한다.
네 번째 인자는 콜백 함수로 파일 쓰기 작업이 완료되었을 때 실행된다. 에러가 발생하면 err 파라미터에 에러 객체가 전달됩니다.

응답 처리

콜백 함수 내부에서 response.writeHead(302, { Location: /?id=${title} });를 호출하여 HTTP 상태 코드 302(리다이렉션-코드의 리소스의 위치가 바뀌었다.는 뜻)와 함께 Location 헤더를 설정한다. Location은 사용자가 리다이렉션 될 새로운 URL을 지정한다. 여기서는 쿼리 스트링으로 id 파라미터에 title의 값을 주어 파일이 성공적으로 생성되었을 때 사용자를 해당 파일의 페이지로 리다이렉트 시킵니다.
response.end()는 HTTP 응답을 종료하고 설정된 헤더와 본문을 사용자에게 전송한다. 이 경우 별도의 본문 내용을 전송하지 않으므로 단순히 응답을 마무리 짓는다.

시도 해볼 수 있는 response

post가 성공적으로 이루어 지면 사용자에게 response로 title과 description을 전달해보자면 아래와 같이 작성하면 된다.

//json 파일 형시으로 응답
fs.writeFile(`data/${title}`, description, 'utf8', (err) => {
    if (err) {
        response.writeHead(500, { 'Content-Type': 'application/json' });
        response.end(JSON.stringify({ error: 'Failed to write file' }));
    } else {
        response.writeHead(200, { 'Content-Type': 'application/json' });
        response.end(JSON.stringify({ title: title, description: description }));
    }
});

여기서 유의해야 할 점은 포멧 설정이다. 포멧에 따라서 Content-Type을 잘 설정해야 한다. 현재는 JSON 응답으로 주는 경우이기 때문에 application/json으로 설정했다. 만약 html로 응답을 할 경우 text/html로 설정하면 된다.

728x90

저작자표시

'📗Nodejs > ⚡ver.0' 카테고리의 다른 글

📗Nodejs : section28(1~3) - 동기와 비동기 (0)	2024.06.24
📗Nodejs : plus Alpha - 분석하기 (0)	2024.06.17
📗Nodejs : section26 - 함수를 이용해서 정리 정돈하기 (0)	2024.06.17
📗Nodejs : section24 - readdir으로 파일목록 만들기 (0)	2024.01.11
📗Nodejs : section19 - NotFound처리와 홈페이지 제작구현 (0)	2024.01.11

'📗Nodejs/⚡ver.0' Related Articles

Comments

C-log

📗Nodejs : section30~33 - form 그리고 response 본문

📗Nodejs : section30~33 - form 그리고 response

form

URI

URI

Create

create_process(doCreate)

create_process(doCreate) 코드의 분석

경로 확인

데이터 수신

데이터 처리 완료

응답

post로 받은 데이터로 파일 생성하기 fs.writeFile

파일 쓰기()

응답 처리

시도 해볼 수 있는 response

'📗Nodejs > ⚡ver.0' 카테고리의 다른 글

티스토리툴바