[Node.js] (5) 요청과 응답 연결하기, 버퍼 개념 (리디렉션, 유저입력값 파일생성 후 저장)

Javascript/Node.js

[Node.js] (5) 요청과 응답 연결하기, 버퍼 개념 (리디렉션, 유저입력값 파일생성 후 저장)

Rainbow🌈Coder 2022. 11. 24. 14:44

728x90

(1)~(4)까지는 서버를 스핀 업하는 방법과, 들어오는 요청에 대한 정보를 담은 요청 객체를 받고, 응답을 돌려줄 수 있는 응답 객체에 대한 포스팅을 작성하였다.

터미널
서버 종료 ctrl + c
서버 재시작 node app.js

1. 실습용 웹서버 코드 작성

아래와 같이 입력해준다.

const url = req.url; url이 뭔지에 따라서 다른 내용을 클라이언트에게 보내주도록 하자.
if (url === '/') {

const http = require('http');

const server = http.createServer((req, res) => {
	const url = req.url;
	if (url === '/') {
		res.write('<html>');
		res.write('<head><title>My First Page</title></head>');
		res.write(
			'<body><form action="/message" method="POST"><input type="text" name="message"><button = "submit">Send</button></form></body>');
		res.write('</html>');
		return res.end();
	}
	res.setHeader('Content-Type', 'text/html');
	res.write('<html>');
	res.write('<head><title>My First Page</title></head>');
	res.write('<body><h1>Hello from my Node.js Server!</h1></body>');
	res.write('</html>');
	res.end('Hello Node'); //이 시점부터는 더 이상 아무 것도 입력해서는 안됨
	//이 부분은 우리가 클라이언트로 다시 전송하는 부분으로, Node.js가 클라이언트로 다시 전송하기 때문 
});

server.listen(3000);

주소창에 http://localhost:3000/ 혹은 http://localhost:3000

위에서 분기처리를 더 늘려본 예제

const http = require('http');

const server = http.createServer((req, res) => {
	const url = req.url;
	if (url === '/') { //url이 아무런 경로가 없다면,
		res.write('<html>');
		res.write('<head><title>My First Page</title></head>');
		res.write(
			'<body><form action="/message" method="POST"><input type="text" name="message"><button = "submit">Send</button></form></body>');
		res.write('</html>');
		return res.end();
	} else if(url === '/Course') {
    	res.write('<html>');
		res.write('<head><title>My First Page</title></head>');
		res.write('<body><h1>course</h1></body>');
		res.write('</html>');
    	return res.end();
    }
	res.setHeader('Content-Type', 'text/html');
	res.write('<html>');
	res.write('<head><title>My First Page</title></head>');
	res.write('<body><h1>Hello from my Node.js Server!</h1></body>');
	res.write('</html>');
	res.end('Hello Node'); //이 시점부터는 더 이상 아무 것도 입력해서는 안됨
	//이 부분은 우리가 클라이언트로 다시 전송하는 부분으로, Node.js가 클라이언트로 다시 전송하기 때문 
});

server.listen(3000);

2. 리다이렉션

이제 GET 요청 말고 POST 요청을 다루도록 해본다.

request method에서 메서드를 파싱하고 아래의 조건을 추가해보자.

else if (url === '/message' && method === 'POST')

이제 해당 조건문에 닿으면 유저를 다시 /로 보내어 Course에 남겨두지 않으려고 한다!

대신 새로운 파일을 생성하여 유저가 입력한 메시지를 저장해주도록 한다.

경로 재지정과 파일 생성부터 시작해본다.

다른 패키지, 다른 코어 모듈이 필요하다. (파일시스템 코어모듈) 상수에 저장해서 불러와 원하는 이름을 붙여도 된다.

이 포스팅에서는 fs

const fs = require('fs');

wirteFile은 파일로 가는 경로를 취하게 되며 이름은 간단하게 message.txt

writeHead는 한번에 몇가지 메타 정보를 작성할 수 있게 하며

다음으로 경로 재지정을 의미하는 상태코드 302 설정, 두번째 인자로는 js 객체와 설정하길 원하는 헤더 전달

const http = require('http');
const fs = require('fs');

const server = http.createServer((req, res) => {
	const url = req.url;
	const method = req.method;
	if (url === '/') { //url이 아무런 경로가 없다면,
		res.write('<html>');
		res.write('<head><title>My First Page</title></head>');
		res.write(
			'<body><form action="/message" method="POST"><input type="text" name="message"><button = "submit">Send</button></form></body>');
		res.write('</html>');
		return res.end();
	} else if (url === '/message' && method === 'POST') {
		fs.writeFileSync('message.txt', '더미텍스트');
		//res.writeHead(302, {});
		res.statusCode = 302;
		res.setHeader('Location', '/')//브라우저가 수락하는 디폴트 헤더,
		//위치의 경우 /로 설정하게 되면 내가 이미 실행 중인 호스트를 자동으로 사용하게 된다.
		return res.end();

	}
	res.setHeader('Content-Type', 'text/html');
	res.write('<html>');
	res.write('<head><title>My First Page</title></head>');
	res.write('<body><h1>Hello from my Node.js Server!</h1></body>');
	res.write('</html>');
	res.end('Hello Node'); //이 시점부터는 더 이상 아무 것도 입력해서는 안됨
	//이 부분은 우리가 클라이언트로 다시 전송하는 부분으로, Node.js가 클라이언트로 다시 전송하기 때문 
});

server.listen(3000);

다시 서버를 돌리고 아무 값이나 입력하고 버튼 눌렀을 때의 네트워크 탭

편집기에서도 message.txt 가 잘 생성되어 있을 것을 확인할 수 있다!

창은 당연히

3. 유저 입력값을 파일 생성하여 저장하기

이제 유저가 보낸 데이터를 실제로 파싱하고 해당 데이터를 파일에 쓰는 작업을 해보도록 한다.

들어오는 요청을 분석해서 요청의 일부인 데이터를 알아보도록 한다.

들어오는 요청은 데이터 스트림으로 보내진다..

* 데이터 스트림이란?

- 스트림은 지속적인 프로세스이다.

노드가 많은 양의 요청을 한 청크씩 읽고 어느 시점에는 다 읽게 될 것이다.

아무 것도 안 하면서 기다릴 필요가 없다.

버퍼는 버스 정류장과 같다. //버스는 계속 달리겠지만 사용자가 중간에도 찾아 들어갈 수 있는..

여러 개의 청크를 보유하고 파싱이 끝나기 전에 작업할 수 있도록 한다.

https://levelup.gitconnected.com/streams-and-how-they-fit-into-node-js-async-nature-a08723055a67

개념이 추상적일 수 있지만, 버퍼는 다루기 쉽다!

바로 코드로 돌아가보자

req.on(data)를 호출하면 리스너가 데이터 청크를 받도록 chunk를 입력한다.

이제 이 chunk를 사용하여 무언가를 해야만 chunk와 상호작용할 수 있다.

req.on(end)를 호출하면 들어오는 요청 데이터 혹은 들어오는 전반적인 요청을 분석한 후에 발생한다.

		req.on('data', (chunk) => {
			console.log(chunk);
			body.push(chunk); //이제 요청에 대한 모든 데이터를 얻을 때까지 함수가 실행될 것
		});
		req.on('end');

아래와 같은 코드에서 const parsedBody = Buffer.concat(body); 라인이 주는 의미는,

새 버퍼가 생성되고 본문 안에 있던 모든 청크가 추가될 것이다.

	if (url === '/message' && method === 'POST') {
		//요청 본문을 지을 것이므로 상수명 body로 작성 후, 빈 배열로 만들어 주자.
		const body = [];
		//post 메시지를 받을 때 응답을 보내거나 파일에 쓰기 전에 요청 데이터 받으려면
		//req.를 입력해서 이벤트 리스너를 등록하면 된다. 
		//createServer가 대신 서버를 생성해주는 반면, on 메서드를 사용하면 직접 할 수 있다.
		req.on('data', (chunk) => {
			console.log(chunk);
			body.push(chunk); //이제 요청에 대한 모든 데이터를 얻을 때까지 함수가 실행될 것
		});
		req.on('end', () => {
			const parsedBody = Buffer.concat(body);
			// 청크들을 받은 다음에 청크를 다루기 위해서는 버퍼(버스정류장) 같은 장소에서 상호작용 할 수 있을 것이다.
		});

parsedBody라는 버퍼에 toString을 호출해 문자열로 전환한다.

이제 버스정류장(버퍼)에 버스가 기다리고 있다.

이제 버퍼를 문자열로 전환하는데 요청의 본문이 텍스트, 들어오는 데이터도 텍스트라서 문자열로 전환할 수 있는 것이다.

const parsedBoddy = Buffer.concat(body).toString();

const http = require('http');
const fs = require('fs');

const server = http.createServer((req, res) => {
	//createServer : 들어오는 모든 요청에 실행될 함수를 정의
	const url = req.url;
	const method = req.method;
	if (url === '/') { //url이 아무런 경로가 없다면,
		res.write('<html>');
		res.write('<head><title>My First Page</title></head>');
		res.write(
			'<body><form action="/message" method="POST"><input type="text" name="message"><button = "submit">Send</button></form></body>');
		res.write('</html>');
		return res.end();
	}
	if (url === '/message' && method === 'POST') {
		//요청 본문을 지을 것이므로 상수명 body로 작성 후, 빈 배열로 만들어 주자.
		const body = [];
		//post 메시지를 받을 때 응답을 보내거나 파일에 쓰기 전에 요청 데이터 받으려면
		//req.를 입력해서 이벤트 리스너를 등록하면 된다. 
		//createServer가 대신 서버를 생성해주는 반면, on 메서드를 사용하면 직접 할 수 있다.
		req.on('data', (chunk) => {
			console.log(chunk);
			body.push(chunk); //이제 요청에 대한 모든 데이터를 얻을 때까지 함수가 실행될 것
		});
		req.on('end', () => {
			const parsedBoddy = Buffer.concat(body).toString(); //버퍼가 생긴 청크에 작업
			console.log(parsedBoddy);
			// 청크들을 받은 다음에 청크를 다루기 위해서는 버퍼(버스정류장) 같은 장소에서 상호작용 할 수 있을 것이다.
		});
		//on 메서드는 특정 이벤트를 들을 수 있도록 한다.
		//첫번째 인자 : data이벤트는 새 청크가 읽힐 준비가 될 때마다 데이터 이벤트가 발생하는 데에 버퍼가 도움을 준다.
		//두번째 인자 : 모든 데이터 이벤트에 실행될 함수를 넣어야 한다. 
		// 여기서는 들어오는 모든 데이터에 실행될 함수를 정의한다.
		fs.writeFile('message.txt', '더미텍스트');
		//res.writeHead(302, {});
		res.statusCode = 302;
		res.setHeader('Location', '/')//브라우저가 수락하는 디폴트 헤더,
		//위치의 경우 /로 설정하게 되면 내가 이미 실행 중인 호스트를 자동으로 사용하게 된다.
		return res.end();

	}
	res.setHeader('Content-Type', 'text/html');
	res.write('<html>');
	res.write('<head><title>My First Page</title></head>');
	res.write('<body><h1>Hello from my Node.js Server!</h1></body>');
	res.write('</html>');
	res.end('Hello Node'); //이 시점부터는 더 이상 아무 것도 입력해서는 안됨
	//이 부분은 우리가 클라이언트로 다시 전송하는 부분으로, Node.js가 클라이언트로 다시 전송하기 때문 
});

server.listen(3001);

위와 같이 코드를 완성하고, 서버를 재실행시켜보자.

로그를 보면 두개의 요소가 있다.

첫번째는 개발자가 처리할 수 없는 청크이다 <Buffer ..~~~> conosole.log(chunk)

반면, parsedBody는 유저가 입력한 메시지를 받아서 개발자가 처리할 수 있는 메시지를 산출했다.

(input의 name을 message 로 지어서 message로 시작함)

여기 form이 모든 입력 데이터와 함께 자동으로 요청을 보내 요청 객체에 키-값 쌍으로 넣는다.

<form action="/message" method="POST">

사용자가 입력하는 것이 값이며, 입력에 주어지는 이름이 키이다.

<input type="text" name="message">

로그를 보면 키와 값은 등호로 나뉘어져 있다. 그럼 비로소 파일에 입력을 저장할 수 있게 된다.

그럼 바로 req.on(end)에 새로운 상수 message를 만들고 paresdBody.split에 등호를 넣은 후 결과 배열의 두번째 요소인 인덱스 1을 요소로 두는 생각을 할 수가 있다.

		req.on('end', () => {
			const parsedBody = Buffer.concat(body).toString(); //버퍼가 생긴 청크에 작업
			console.log(parsedBody);
			const message = parsedBody.split('=')[1];
			console.log(message);
			// 청크들을 받은 다음에 청크를 다루기 위해서는 버퍼(버스정류장) 같은 장소에서 상호작용 할 수 있을 것이다.
		});

이제 writeFileSync를 함수의 마지막에 덧붙인다. 두번째 인자로는 message를 넣어준다.

		req.on('end', () => {
			const parsedBody = Buffer.concat(body).toString(); //버퍼가 생긴 청크에 작업
			console.log(parsedBody);
			const message = parsedBody.split('=')[1];
			console.log(message);
			fs.writeFileSync('message.txt', message);
			// 청크들을 받은 다음에 청크를 다루기 위해서는 버퍼(버스정류장) 같은 장소에서 상호작용 할 수 있을 것이다.
		});

오호 다시 서버를 재시작하고

LESSERAFIM을 입력하니 다음과 같이 유저의 입력값이 새로운 파일 생성 후 저장까지 잘 되는 것을 확인 할 수 있다!

전체 코드

const http = require('http');
const fs = require('fs');

const server = http.createServer((req, res) => {
	//createServer : 들어오는 모든 요청에 실행될 함수를 정의
	const url = req.url;
	const method = req.method;
	if (url === '/') { //url이 아무런 경로가 없다면,
		res.write('<html>');
		res.write('<head><title>My First Page</title></head>');
		res.write(
			'<body><form action="/message" method="POST"><input type="text" name="message"><button = "submit">Send</button></form></body>');
		res.write('</html>');
		return res.end();
	}
	if (url === '/message' && method === 'POST') {
		//요청 본문을 지을 것이므로 상수명 body로 작성 후, 빈 배열로 만들어 주자.
		const body = [];
		//post 메시지를 받을 때 응답을 보내거나 파일에 쓰기 전에 요청 데이터 받으려면
		//req.를 입력해서 이벤트 리스너를 등록하면 된다. 
		//createServer가 대신 서버를 생성해주는 반면, on 메서드를 사용하면 직접 할 수 있다.
		req.on('data', (chunk) => {
			console.log(chunk);
			body.push(chunk); //이제 요청에 대한 모든 데이터를 얻을 때까지 함수가 실행될 것
		});
		req.on('end', () => {
			const parsedBody = Buffer.concat(body).toString(); //버퍼가 생긴 청크에 작업
			console.log(parsedBody);
			const message = parsedBody.split('=')[1];
			console.log(message);
			fs.writeFile('message.txt', message);
			// 청크들을 받은 다음에 청크를 다루기 위해서는 버퍼(버스정류장) 같은 장소에서 상호작용 할 수 있을 것이다.
		});
		//on 메서드는 특정 이벤트를 들을 수 있도록 한다.
		//첫번째 인자 : data이벤트는 새 청크가 읽힐 준비가 될 때마다 데이터 이벤트가 발생하는 데에 버퍼가 도움을 준다.
		//두번째 인자 : 모든 데이터 이벤트에 실행될 함수를 넣어야 한다. 
		// 여기서는 들어오는 모든 데이터에 실행될 함수를 정의한다.
		//fs.writeFile('message.txt', '더미텍스트');
		//res.writeHead(302, {});
		res.statusCode = 302;
		res.setHeader('Location', '/')//브라우저가 수락하는 디폴트 헤더,
		//위치의 경우 /로 설정하게 되면 내가 이미 실행 중인 호스트를 자동으로 사용하게 된다.
		return res.end();

	}
	res.setHeader('Content-Type', 'text/html');
	res.write('<html>');
	res.write('<head><title>My First Page</title></head>');
	res.write('<body><h1>Hello from my Node.js Server!</h1></body>');
	res.write('</html>');
	res.end('Hello Node'); //이 시점부터는 더 이상 아무 것도 입력해서는 안됨
	//이 부분은 우리가 클라이언트로 다시 전송하는 부분으로, Node.js가 클라이언트로 다시 전송하기 때문 
});

server.listen(3005);

지금까지는 Node.js의 미가공 논리를 살펴보았고

나중에는 이러한 미가공 논리를 숨기는 Express.js를 사용한다.

그러나 지금까지의 학습으로

Express.js 같은 툴이 어떻게 과정을 단순화하는지 알 수 있다.

728x90