[Node.js] POST ui생성, 전달받기

 

https://opentutorials.org/course/3332/21028

생활코딩님의 Node.js강의를 참고하였습니다.

---

1.입력 UI

사용자가 새로운 데이터를 입력할 수 있도록 폼을 제공합니다. 입력된 데이터는 "create_process" 경로로 전송됩니다.
title 입력 필드와 description 텍스트 영역이 포함되어 있으며, 사용자는 제목과 내용을 입력한 후 제출할 수 있습니다.

else if (pathname === '/create') { // 사용자가 "/create" 경로에 접근했을 때 실행되는 블록입니다.
    var title = 'Web create'; // 새 페이지의 제목을 "Web create"으로 설정합니다.
    var description = 'Hello, Node.js'; // 기본 설명을 "Hello, Node.js"로 설정합니다.

    fs.readdir('./data', function (error, filelist) { // './data' 디렉토리의 파일 목록을 읽습니다.
        fs.readFile(`data/${queryData.id}`, 'utf8', function (err, description) { 
            // queryData.id로 파일을 읽어 내용을 가져옵니다. 다만 이 줄의 기능은 현재 "create" 페이지에서는 사용되지 않습니다.
            
            var title = queryData.id; // title 변수에 queryData.id를 할당합니다. 이는 사용자로부터 받은 데이터를 제목으로 사용할 수 있도록 준비합니다.
            var list = templateList(filelist); // 읽어온 파일 목록을 리스트 형태로 변환합니다.
            
            var template = templateHTML(title, list, ` // HTML 템플릿을 생성합니다.
                <form action="http://localhost:3000/create_process" method="post"> // 폼의 데이터를 "create_process" 경로로 POST 방식으로 전송합니다.
                    <p><input type="text" name="title" placeholder="title"></p> // 제목을 입력할 수 있는 텍스트 입력 필드입니다.
                    <p>
                        <textarea name="description" placeholder="description"></textarea> // 설명을 입력할 수 있는 텍스트 영역입니다.
                    </p>
                    <p>
                        <input type="submit"> // 폼을 제출하는 버튼입니다.
                    </p>
                </form>
            `);
            
            response.writeHead(200); // HTTP 응답 헤더를 200 OK로 설정합니다.
            response.end(template); // 완성된 HTML 템플릿을 클라이언트에게 전송합니다.
        });
    });
}

 

 

 

 

 

 

 

2.POST 처리

POST 방식으로 들어온 데이터를 처리하고, 그 데이터를 객체로 변환하여 서버에서 사용할 수 있도록 하는 기능을 수행합니다. 데이터를 성공적으로 처리한 후, 클라이언트에게 "success" 메시지를 반환합니다.

else if (pathname === '/create_process') { // 사용자가 "/create_process" 경로에 접근했을 때 실행되는 블록입니다.
    var body = ''; // POST 요청에서 전송된 데이터를 저장할 변수를 초기화합니다.

    request.on('data', function (data) { // 클라이언트가 전송한 데이터가 들어올 때마다 이벤트가 발생합니다.
      body = body + data; // 데이터가 들어올 때마다 `body` 변수에 데이터를 추가합니다.
    });

    request.on('end', function () { // 모든 데이터가 전송된 후 이벤트가 발생합니다.
      var post = qs.parse(body); // 전송된 데이터를 쿼리 문자열로 파싱하여 `post` 객체로 만듭니다.
      console.log(post); // 파싱된 데이터를 콘솔에 출력합니다.
    });

    response.writeHead(200); // HTTP 응답 헤더를 200 OK로 설정합니다.
    response.end('success'); // 클라이언트에게 "success" 메시지를 전송하며 응답을 종료합니다.
}