const http = require("http");
// createServer 메서드가 생성한 서버를 변수나 상수로 지정해야함
const server = http.createServer((req, res) => {
const { url, method, headers } = req;
console.log(url, method, headers);
// 서버에 요청을 보내지 않으면 안됨
// res (response : 응답) 우리가 반송해야할 데이터
res.setHeader('Content-type', 'text/html');
// setHeader : 새로운 헤더 설정 / Content-type은 브라우저가 알고 이해하며 받아들이는 디폴트 헤더
// 응답에 헤더를 붙이게 되고, 컨텐츠 유형은 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(); // 응답 종료
});
server.listen(3000, () => {
console.log('Server On~~~~');
});
const deleteSql = "DELETE FROM products WHERE id =?;";
mysqlConnect.query(deleteSql, [1], (err) => {
if(err)
console.log("삭제할 데이터를 못 찾았어");
console.log("정상적으로 삭제 완료");
});
데이터 수정
const updateSql = "UPDATE products SET name = ?, number = ?, WHERE id = ?";
mysqlConnect.query(updateSql, ["jaka123", "456", "3"], (err) => {
if(err)
console.log(err);
console.log("데이터 수정 완료");
});
우리가 많이 쓰는 HTML은 정적인 언어다. 정적인 페이지는 주어진 기능만 사용할 수 있는 한계가 있고
직접 기능을 추가할 수 없다. (자바스크립트를 사용해야만 한다.)
반면에 템플릿 엔진은 자바스크립트를 사용하여 HTML을 렌더링 할 수 있다.
HTML 과 문법이 거의 흡사하지만 자바스크립트의 문법이 들어갈 수 있다는 특징이 있다.
(서버측에서 html을 만들어서 응답해주는 것이다.)
템플릿 엔진에는 여러가지가 있는데 우리가 알아볼 것은 그 중 EJS다.
2. EJS 설치 및 사용 방법
ejs 설치
npm i ejs
문법은 다음과 같다.
<% JS 코드 %> <%= 변수의 내용 %>
문법이 다소 난해하다. 밑에서 어떻게 사용하는지 예를 들어보자
server.js
// ejs를 require 하는 구문이 있어서 설치를 해야한다.
const express = require('express');
const app = express();
const path = require('path');
// set : server 객체 안에 있는 내용을 수정하겠다.
// view engine을 ejs를 사용하겠다.
app.set('view engine', 'ejs');
// Template가 있는 디렉토리
app.set('views', path.join(__dirname, 'views'));
const boardList = [
{id : 1, name : "jaka"},
{id : 2, name : "jaka2"},
{id : 3, name : "jaka3"},
{id : 4, name : "jaka4"}
]
const title = '페이지 제목';
app.get('/', (req, res) => {
// 페이지에서 변수를 사용해서 html 페이지를 완성시켜서 보여줄 것
// 문자열 파싱을 해서 스크립트 변수 내용을 포함한 완성된 html을 응답해준다
// render : view enigine ejs를 사용할 때 페이지를 완성시켜서 응답
// 문자열을 파싱해서 html을 완성시켜서 최종적으로 만들어진 html을 응답해줌
res.render('main', {boardList, title});
});
app.listen(3000, () => {
consoloe.log('server on~');
});
fs 모듈에서 제공하는 비동기 메서드는 마지막 인자로 콜백함수를 받고 아무 값도 반환하지 않는다.
반면에 동기 메서드는 결과값을 반환(return)하며 예외를 일으킬 수 있다.
(동기 메서드는 sync로 끝난다. 동기 / 비동기 메서드 구분이 가능)
폴더가 있는지 없는지 확인하는 법 (existsSync)
let folder = fs.existsSync("test");
console.log(folder);
// test라는 폴더가 있으면 true 없으면 false
폴더 생성 (mkdir)
폴더가 없다면 생성하는 함수를 만들어 보자
if( !folder ) {
// 비동기적으로 실행되는 메서드
// 매개변수로 폴더를 만들 경로를 전달
fs.mkdir("test", (err) => {
if(err){
console.log(err);
console.log("에러 발생");
} else {
console.log("test 폴더가 정상적으로 생성됨");
// 폴더가 생성되고 처리해야할 내용
}
})
const text = fs.mkdirSync("Test");
console.log("동기");
}
파일 생성 (writeFile)
경로를 지정하여 파일을 만들어 보자
// writeFile : 파일을 쓰기) 파일에 데이터를 포함하여 파일을 만들어준다.
// write("파일 생성 경로 및 파일 이름", "파일에 작성할 내용", "함수")
fs.writeFile("Test/text.txt", "Hello world", (err) => {
if(err){
console.log(err);
} else {
console.log("파일이 만들어 졌음")
}
})
fs.writeFileSync("TGest/text.txt", "Hello World2");
console.log("파일이 잘 만들어 졌음");
만약 파일이 이미 있다면 내용을 수정해준다.
파일 읽기 (readFile)
// 파일을 읽어오자
// 전달한 익명함수의 매개변수 순서가 에러 결과 순으로
fs.readFile("/test/text.txt", "utf8", (err, data) => {
if(err){
console.log(err);
} else {
console.log(data);
}
})
// 동기적으로 실행
// 결과를 반환하는 방식
// 밑에 함수가 끝나고 결과
let data = fs.readFileSync("Test/text.txt", "utf8")
console.log(data);
TCP는 데이터를 전송하기 전에 송신자와 수신자 간에 연결을 설정한다. 이 과정을 3-way-handshake라고 한다.
순서
1. 클라이언트가 서버에 연결 요청(SYN)을 보낸다.
2. 서버가 클아이언트의 요청을 승인하고 연결 수락(SYN-ACK)을 보낸다.
3. 클라이언트가 서버의 수락을 확인(ACK)한다
일단 3-way-handshake를 구현하기 위해서는
클라이언트와 서버가 있어야한다.
서버와 클라이언트에 해당하는 코드를 구현해보자.
서버 (server)
// net 내장모듈 사용
const net = require("net");
const server = net.createServer(() => {});
// connection -> 서버측에서 서버 연결됐을 때 3-way-hands 마지막
server.on("connection", (client) => {
// client : 접속한 client에 대한 정보가 담김.
// setEncoding('utf8'); client가 전달한 내용을 utf8 문자열로 변환
client.setEncoding("utf8");
console.log("client가 접속했다.");
console.log(client);
client.on("data", (chunk) => {
// 데이터 받으면 콜백함수 실행
console.log(chunk);
// 버퍼
})
});
server.listen(3000, () => {});
// 서버가 돌아가게 해준다.
// 서버는 항상 돌아가야한다.
// 서버가 대기상태일 때 콜백 실행
클라이언트 (Client)
const net = require("net")
const socket = net.connect({
port: 3000,
host: 'localhost'
});
// 소켓이 커넥트일 때 콜백함수 실행
socket.on("connect", () => {
console.log("CLIENT : 연결 되있어");
socket.write("hello world");
// write 데이터를 보내겠다.
});
Node.js에서 파일 시스템 모듈(fs)과 스트림 모듈을 사용하여, 파일 'test.txt'를 읽고, 그 내용을 대문자로 변환한 후, 'test2.txt'라는 새로운 파일에 저장하는 예제.
// 1. 필요한 모듈 로드
// 'stream' 모듈에서 'Transform' 객체를 가져온다.
// 'Transform' 스트림은 입력 데이터를 받아 변환 후 출력할 수 있는 스트림
// 'fs' 모듈은 파일 시스템을 조작하기 위해 사용되며, 여기서는 파일을 읽고 쓰는데 사용된다.
const { transform } = require("stream");
const fs = require("fs");
// 2. 청크 크기 설정
// 청크 크기를 설정한다. 이 예제에서는 64Kb로 설정했다.
// 스트림은 데이터를 일정크기(청크)로 나누어서 처리
const chunkSize = 64 * 1024;
// 3. Transform 스트림 생성
// Transform 클래스를 사용하여 새로운 변환 스트림을 생성한다.
// highWaterMark 옵션은 스트림이 처리할 최대 청크 크기를 설정한다.
// transform 메서드는 스트림이 데이터를 변환할 때 호출된다. 여기서는 입력 데이터를 문자열로
// 변환한 후 대문자로 변환하고, 'this.push'를 사용하여 변환된 데이터를 출력 스트림에 전달.
// 변환이 완료되면 callback 함수를 호출하여 다음 청크를 처리할 수 있도록 한다.
const transformData = new Transform({
highWaterMark: chukSize,
transform(chunk, en, callback){
this.push(chunk.toString().toUpperCase());
}
callback();
});
// 4. 읽기 스트림 생성
// fs.createReadStream 메서드를 사용하여 파일 'test.txt'에서 데이터를 읽기 위한 스트림을 생성한다.
// highWaterMark 옵션을 사용하여 읽기 스트림의 청크 크기를 설정한다.
const test = fs.createReadStream('test.txt', { highWaterMark: chunkSize });
// 5. 쓰기 스트림 생성
// fs.createWriteStream 메서드를 사용하여 파일 test2.txt에 데이터를 쓰기위한 스트림을 생성한다.
const test2 = fs.createWriteStream('test2.txt`);
// 6. 스트림 파이프라인 구성
// pipe 메서드를 사용하여 스트림을 연결
// test 읽기 스트림의 데이터를 transformData 스트림으로 전달하고
// 변환된 데이터를 test2 쓰기 스트림으로 전달한다.
// test.txt의 내용이 대문자로 변환되어 test2.txt에 저장된다.
test.pipe(transform).pipe(test2);
- 숫자를 표현하기는 쉽지만 글자를 표현하기 어렵다. 만약 A를 65, a를 97의 값으로 인식한다.
- 이는 사람이 정해준 것이며 이러한 것들을, "문자 집합"이라고 한다.
(문자 집합 : 문자를 숫자로 표현할 수 있도록 정의한 규칙)
2. Character Set (문자 집합)
Character Set은 각각 문자를 숫자로 나타낼 수 있도록 정의해놓은 규칙이다. Character Set만 있지는 않고 여러가지 Set들이 있다. 이중에서 가장 유명한 것이 유니코드와 아스키코드이다
2-1 아스키 코드 (ASCII CODE)
- 글자를 표현할 때 8bit만 사용한다. (= 1byte)
- 8bit 중에서 1bit는 오류 체크용도로 사용하고 실제 사용은 7bit 만 사용한다.
- 00000000 ~ 11111111 즉 2^7 = 128까지 아스키코드는 128가지의 글자를 표현할 수 있다.
- 한글을 제외한 키보드 자판에 있는 영어와 특수문자만 표현이 가능하다.
- 한글은 1byte로 표현이 불가능하다. (알파벳 1글자 한글 1글자는 크기가 다름)
- 그래서 생긴 것이 유니코드 (한글과 같은 다른 문자를 표현하기 위함)
2-2 유니코드 ( Unicode )
- 유니코드는 전세계의 문자를 일관되게 표현 할 수 있도록 설계된 표준
- 아스키 코드와 유니코드의 큰 차이점은 용량의 차이
- 글자 하나당 1byte가 아닌 2byte를 사용
2-3 인코딩 규칙
문자를 숫자로 나타내는 것의 규칙이 있는 것처럼 숫자를 바이너리 데이터로 나타나는 데에도 규칙이 있다. A는 숫자 65를 나타내는데 A12 컴퓨터가 2진수로 표현하면 1000 0011100 이렇게 변환을 한다. 컴퓨터는 어디서 잘라야할지 몇글자를 잘라야할지 모르고 어떻게 자르냐에 따라 결과물이 달라질 수 있다. 앞 8bit 뒤를 4bit로 잘라야 A12 를 만들 수 있다. 그래서 우리는 '문자 인코딩'을 한다. 문자 인코딩 중 하나인 UTF8에서 8은 8bit 를 의미한다. 하지만 12라는 숫자는 4bit로 표현이 가능하지만 문자 인코딩을 통해서 8bit로 변환해야한다. 4자리의 숫자를 8자리의 숫자로 표현해주면 된다
ex) 0000 + 1100 / 자리수만 채우는 형태. 12라는 숫자는 문자 인코딩을 통해 00001100 으로 표
3. 스트림(Stream)과 버퍼(Buffer) Stream (스트림)
NodeJs의 스트림은 한 지점에서 다른 지점으로 이동하는 일련의 데이터를 의미한다. 전체적인 의미로는 방대한 데이터 처리를 할 때 모든 데이터가 전부 다 사용가능할 때까지 기다리지 않아도 된다는 것이다. 기본적으로 큰 데이터는 청크 단위로 세분화 되어 전송한다. 이 말은 Buffer의 정의에 따르면 파일 시스템에서 바이너리 데이터들이 이동하는 것을 의미한다. 예를 들어, file1.txt의 텍스트를 file2.txt로 옮기는 것을 의미한다.
Buffer (버퍼)
데이터 스트림이란 일련의 데이터들이 한 지점에서 다른 지점으로 이동하는 것이다. 그럼 데이터가 어떻게 이동되는 것일까? 일반적으로 데이터 이동은 그 데이터를 가지고 작업 혹은 읽기 등을 하기위해서 일어난다. 하지만 어떤 작업을 할 때 특정 시간동안 데이터를 받을 수 있는 데이터의 최소량과 최대량이 존재한다. 그래서 데이터를 처리하는 시간보다 데이터가 도착하는게 더 빠르다면 어떻게 될까? 초과된 데이터는 어느 공간에서 처리되기를 대기하고 있어야한다. 데이터를 처리하는 시간보다 훨씬 빠르게 계속해서 새로운 데이터가 도착하면 어딘가에는 도착한 데이터들이 쌓일 것이기 때문이다.
반면에, 한 작업이 데이터를 처리하는 시간이 데이터가 도착하는 시간보다 더 빠르다면, 먼저 도착한 데이터는 처리되기 전에 어느 정도의 데이터량이 쌓일 때까지 기다려야한다.
그 데이터가 대기하는 영역이 Buffer다.
컴퓨터에서 일반적으로 RAM의 영역에서 streaming중에 데이터가 일시적으로, 기다리다가 데이터를 처리할 때 처리하기 위해서 내보내준다. nodejs는 데이터가 도착하는 시간이나 전송되는 속도를 제어 할 수 없다. nodejs가 결정할 수 있는 것은 언제 데이터를 보낼건지의 여부다.
아직 데이터를 내보낼 때가 아니면 nodejs는 데이터들의 대기 영역인 RAM에 작은 영역인 buffer에 데이터를 쌓아 놓는다.
ex) 유튜브 등의 영상을 볼 때 인터넷이 좋으면 버퍼를 빠르게 채우고 데이터를 빠르게 내보내서 처리하는 것을 반복한다. 반대로 인터넷이 좋지 않으면 로딩을 띄우면서 버퍼링이 걸리고 뎅터가 더 도착할 때까지 기다린다는 의미 데이터가 더 싸이고 처리되면 영상이 다시 재생된다.
Buffer 객체
NodeJs에서는 Streaming을 하는 동안 자동으로 buffer를 만든다.
Buffer 다루기
const buf = Buffer.alloc(10) // size가 10인 버퍼 객체를 만든다. (10 byte)
const buf2 = Buffer.from("hello Buffer") // Buffer 객체의 데이터를 담아준다.
// 버퍼 내용을 확인해준다
console.log(buf.toJSON())
console.log(buf2.toJSON())
buf.write("Hellow Buffer") // 빈공간의 버퍼에 내용을 넣어줌
// 버퍼를 디코딩
console.log(buf.toString())
let a = "A";
let b = 12;
// charaCodeAt 아스키 코드로 변환
// 매개변수는 인덱스 문자의 위치
// toString(2) == 이진수 문자열로 변환 매개변수로 전달한 값이 진수
// utf8 == 8bit 00000000
// padStart() 문자열의 크기에서 남은 공간을 다 전달한 매개변수 문자열로 채워준다
// 매개변수 크기, 문자열
a = a.charCodeAt(0).toString(2).padStart(8, "0"); // 01000001
b = b.toString(2).padStart(8, "0") // 00001100
c = a + b;
const binaryToString = (str) => {
let temp = "";
for (let i = 0; i < str.length; i += 8) {
// 2진수를 정수로 변환
const strTemp = parseInt(str.substr(i, 8), 2);
// fromCharCode 아스키 코드를 문자열로 변환
if (String.fromCharCode(strTemp) == false) {
temp += strTemp;
}
temp += String.fromCharCode(strTemp)
}
return temp;
}
const res = binaryToString(c);
console.log(res);
// nodejs의 내장 모듈
// net 내장모듈을 제공
// TCP 소켓을 만들어서 사용
// TCP 연결을 맺는 프로토콜을 만들 수 있다.
//모듈 가져오기
const net = require("net");
const PORT = 8000;
// 서버 객체 생성
const server = net.createServer((client) => {
// 클라이언트가 접속하면 보내는 데이터를 받기 위해서
// "data" : 데이터를 전송하게되면 네트워크에 전송된 데이터
// 바이너리 형식으로 전송이 된다. 클라이언트가 보낸 데이터는 Buffer("버퍼") 형태로 전송
// 서버 측에서는 해석해서 문자열로 변환해서 사용한다.
// 출력된 데이터는 인코딩을 해서 데이터를 표현 해주면 되는 것
// 인코딩 utf-8
client.setEncoding("utf8")
client.on("data", (data) => {
// 클라이언트에서 보낸 데이터
// 네트워크를 통해 전송되는 데이터
// 바이너리 형식으로 전송된다.
console.log(data.toString());
// 데이터를 조회 하겠다 조회 요청 한것.
// HTTP의 버전은 1.0, 1.1, 2.0 있는데
// 우리가 사용하는 버전은 1.1 버전이다.
// 1.1 버전은 www에서 사용되는 기본 프로토콜
// (1997년도 생성 아직까지 사용)
// Connection : 클라이언트와 서버의 연결 상태의 속성을 정한다. 다음 요청을 보낼때까지 연결 유지
// Content-type : 전송하는 데이터의 타입이 어떤거다 명시 text/html
// GET / HTTP/1.1
// Host: localhost:8000
// Connection: keep-alive
// Cache-Control: max-age=0
// sec-ch-ua: "Google Chrome";v="125", "Chromium";v="125", "Not.A/Brand";v="24"
// sec-ch-ua-mobile: ?0
// sec-ch-ua-platform: "Windows"
// Upgrade-Insecure-Requests: 1
// User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/125.0.0.0 Safari/537.36
// Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.7
// Sec-Fetch-Site: none
// Sec-Fetch-Mode: navigate
// Sec-Fetch-User: ?1
// Sec-Fetch-Dest: document
// Accept-Encoding: gzip, deflate, br, zstd
// Accept-Language: ko-KR,ko;q=0.9,en-US;q=0.8,en;q=0.7
const body = `<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>안녕하세요</div>
</body>
</html>`
// body의 내용 본문의 내용
const resMsg = `HTTP/1.1 200 ok
Content-Type : text/html
Content-Length : ${body.length}
${body}
`
client.write(resMsg);
client.end();
})
})
// 서버를 대기 상태로 만들기
server.listen(PORT, () => {
console.log("server on")
})
위에서 module.exports 와 exports 의 차이를 보면 module.exports 에서 exports 빈객체이기 때문에 key 값으로 접근이 불가능하고 exports는 점접근법을 사용함으로서 빈객체 안에 key값이 담긴 객체가 담겨있다. 이 말은 즉 exports는 key 값으로 value를 접근할 수 있다는 것을 의미하며 구조분해할당이 가능하다.
