티스토리 뷰
1. 이번 목표:
Node.js에 대해 배우고 서버도 만들어보자!
2. 배운 내용 요약
1. Node.js
- 서버 측 자바스크립트 런타임 환경(JS 코드를 웹 브라우저 없이 실행할 수 있는 프로그램)
1-1. 특징
- JavaScript 언어 사용
- 터미널에서도 브라우저 없이 바로 실행 가능 => JS 언어 하나로 프론트와 서버 모두를 만들 수 있음 - Single Thread => 콜 스택이 하나만 있음
- 사용자가 직접 제어할 수 있는 스레드는 하나이므로 한 번에 하나의 작업만 가능 => 프로그래밍 난이도 낮고 cpu, 메모리 자원 등 사용 적음 BUT 예외처리 중요! (에러 처리 못하면 프로그램 중단)더보기콜 스택(Call Stack)
function first() { second(); console.log(1); return; } function second() { console.log(2); return; } first(); // 2 1
- Non-Blocking I/O
- 동시에 처리될 수 있는 작업을 최대한 묶어서 백그라운드로 넘김. - 이벤트 기반(Event-Driven) 아키텍처
- 이벤트가 발생할 때(ex 클릭, 네트워크 요청, 타이머) 미리 지정해둔 작업을 수행.
1-2. NPM (Node Packaged Manager)
Node.js로 만들어진 모듈을 웹에서 받아서 설치하고 관리해주는 프로그램
세계에서 가장 큰 오픈 소스 라이브러리
// 프로젝트 시작
npm init --yes
// 패키지 설치
npm install 패키지명
2. 서버 만들기
2-1. http모듈
웹 서버를 구동하기 위한 node.js 내장 웹 모듈.
- server 객체: 웹 서버를 생성할 때 사용하는 객체
- request 객체: 응답 메시지를 작성할 때 첫번째 매개변수로 전달되는 객체
- response 객체: 응답 메시지를 작성할 때 두번째 매개변수로 전달되는 객체
const http = require('http');
const server = http.createServer((request, response) => {
response.writeHead(200); //응답 헤더
response.write("<h1>Hello World!</h1>"); //응답 본문
response.end("<p>end</p>"); //응답 종료
});
server.listen(8080, () => {
console.log('8080포트로 서버 실행');
}
server 객체
| listen() | 서버를 실행하고 클라이언트 기다림 |
| close() | 서버 종료 |
| on() | server 객체에 이벤트 등록 |
| request | 클라이언트가 요청시 이벤트 |
| connection | 클라이언트가 접속할 때 이벤트 |
| close | 서버가 종료될 때 이벤트 |
| checkContinue | 클라이언트가 지속적 연결을 하고 있을 때 이벤트 |
| upgrade | 클라이언트가 http 업그레이드 요청 이벤트 |
| clientError | 클라이언트에서 오류 발생 이벤트 |
2-2. Express 프레임워크
웹서버 생성 관련 프레임워크. 각종 메소드와 미들웨어 내장.
http모듈에 비해 코드 가독성, 확장성 증가
설치: npm install express
// express 어플리케이션을 만듦.
const express = require('express');
// express()함수를 호출함으로써 만들어진 express application
const app = express();
const PORT = 8080;
app.get('/', (req, res) => {
res.send('hello express');
});
app.listen(PORT, () => {
console.log(`Listening on ${PORT}`);
});
2-3. EJS 템플릿
자바스크립트가 내장되어 있는 html파일.
설치: npm install ejs
const express = require('express');
const app = express();
const PORT = 8080;
// ejs 템플릿 설정
// "view engine" 설정을 통해 Express에서 사용할 템플릿 엔진을 EJS로 지정.
// 이 설정을 하면 res.render() 메서드에서 파일 확장자를 생략 가능.
// 예: res.render("test")는 res.render("test.ejs")와 동일
app.set("view engine", "ejs");
// "views" 설정을 통해 템플릿 파일이 위치하는 디렉토리를 지정.
// "./views"는 프로젝트 루트 디렉토리 안의 "views" 폴더를 가리킴.
// res.render() 메서드는 이 디렉토리 내에서 템플릿 파일을 찾음.
app.set("views", "./views");
// static 폴더 설정 추가 (정적파일관리)
// static 이라는 경로를 /public 대신 사용할거다~
app.use("/static", express.static(__dirname + "/public"));
// ejs 템플릿 렌더링
app.get("/test", (req, res) => {
// 클라이언트가 "/test" URL로 GET 요청을 보낼 때 EJS 템플릿을 렌더링하여 응답.
// "test.ejs" 파일은 "views" 디렉토리 내에 있어야 함.
// 템플릿 파일은 HTML과 JavaScript의 조합으로 작성되며, 동적 데이터를 포함할 수 있다.
res.render("test.ejs");
});<!-- 변수 name의 값을 출력 -->
<h1>Hello, <%= name %>!</h1>
<!-- 자바스크립트 코드 삽입 -->
<% if (isLoggedIn) { %>
<p>Welcome back!</p>
<% } else { %>
<p>Please log in.</p>
<% } %>
<!-- HTML 이스케이프 없이 삽입 -->
<!-- header.ejs -->
<header>
<h1>Welcome to <%= siteName %>!</h1>
</header>
<!-- main.ejs -->
<!DOCTYPE html>
<html>
<head>
<title>Main Page</title>
</head>
<body>
<%- include("header", { siteName: "My Website" }) %>
<p>This is the main content.</p>
</body>
</html>
3. 동기 / 비동기
3-1. 동기(Synchronous)
작업이 순차적으로 실행. 이전 작업이 완료되어야 다음 작업을 시작.
코드의 흐름이 단순하지만, 시간이 오래 걸리는 작업이 있을 경우 전체 흐름이 멈춤.
console.log("1. 시작");
console.log("2. 처리 중...");
console.log("3. 완료");
// 출력:
// 1. 시작
// 2. 처리 중...
// 3. 완료
3-2. 비동기(Asynchronous)
작업이 동시에 실행. 이전 작업이 끝나기를 기다리지 않고 다음 작업을 진행.
오래 걸리는 작업을 처리할 때, 나머지 코드 실행이 멈추지 않도록.
console.log("1. 시작");
setTimeout(() => {
console.log("2. 처리 중..."); // 비동기 작업
}, 1000);
console.log("3. 완료");
// 출력:
// 1. 시작
// 3. 완료
// 2. 처리 중... (1초 후)
a. 콜백 함수 (Callback Function)
다른 함수의 인자로 전달되어 실행되는 함수.
비동기 작업 완료 후 호출
function asyncTask(callback) {
setTimeout(() => {
console.log("2. 비동기 작업 완료");
callback(); // 작업 완료 후 콜백 호출
}, 1000);
}
console.log("1. 시작");
asyncTask(() => {
console.log("3. 콜백 실행");
});
// 출력:
// 1. 시작
// 2. 비동기 작업 완료 (1초 후)
// 3. 콜백 실행
b. Promise
비동기 작업의 결과를 나타내는 객체입니다. 작업이 성공(resolve) 또는 실패(reject) 상태를 반환.
then과 catch를 사용해 결과를 처리.
function asyncTask() {
return new Promise((resolve, reject) => {
setTimeout(() => {
const success = true; // 작업 성공 여부
if (success) {
resolve("2. 비동기 작업 성공");
} else {
reject("2. 비동기 작업 실패");
}
}, 1000);
});
}
console.log("1. 시작");
asyncTask()
.then((message) => {
console.log(message); // 작업 성공 메시지
})
.catch((error) => {
console.error(error); // 작업 실패 메시지
})
.finally(() => {
console.log("3. 작업 완료");
});
// 출력:
// 1. 시작
// 2. 비동기 작업 성공 (1초 후)
// 3. 작업 완료
c. async / await
Promise를 더 간결하고 동기 코드처럼 작성.
await 키워드는 Promise가 완료될 때까지 기다림.
function asyncTask() {
return new Promise((resolve, reject) => {
setTimeout(() => {
const success = true; // 작업 성공 여부
if (success) {
resolve("2. 비동기 작업 성공");
} else {
reject("2. 비동기 작업 실패");
}
}, 1000);
});
}
async function main() {
console.log("1. 시작");
try {
const message = await asyncTask(); // Promise 완료 대기
console.log(message); // 작업 성공 메시지
} catch (error) {
console.error(error); // 작업 실패 메시지
} finally {
console.log("3. 작업 완료");
}
}
main();
// 출력:
// 1. 시작
// 2. 비동기 작업 성공 (1초 후)
// 3. 작업 완료| 특징 | 콜백 함수 | Promise | async / await |
| 코드 가독성 | 낮음 (콜백 지옥 가능성) | good | very good |
| 에러처리 | 복잡 | catch 사용 | try-catch 사용 |
| 동기적 표현 | 어려움 | 중간 | 동기 코드처럼 사용 가능 |
3. 회고
더보기
드디어 node.js의 시작이다. 올해 초, 사설 부트캠프를 들었을 때 거기는 분야가 프론트와 백으로 나뉘었는데, 프론트는 리액트를 배웠고, 백은 노드와 스프링으로 나뉘어져서 선택하여 듣는 식으로 진행되었다. 그래서 나는 여태껏 노드는 백엔드 언어라고 생각했는데 알고보니 그게 아니라 자바스크립트로 서버단에서 사용 가능하게 해주는 프로그램이었다.
어쩐지, 리액트를 하는 과정에서도 node 관련한 파일들(노드 모듈스 같은 폴더 포함)이 계속 보여서 node와 자바스크립트 간의 관계가 무엇인지 궁금하면서도 찾아보기는 귀찮아 혼자 지레 생각하고 결론을 내렸는데.. 전혀 틀린 지식으로 기억하고 있었다.
프론트를 하면서 동기, 비동기에 대해서는 매우 중요시 여기고 많이 사용해서 익숙했지만 Express 모듈이라던지 ejs 템플릿은 처음 경험해 보는 거라 색달랐다. 막상 배우고 실습해보니 정말 간단하게 코드 몇 줄로도 서버 환경을 구축할 수 있어서 신나게 코드를 쳤던 것 같다. 많이 쳐보면서 익숙해지도록 해야겠다!
'SeSAC' 카테고리의 다른 글
| [새싹x코딩온] 웹 개발자 부트캠프 과정 5주차 회고(1) | multer 모듈을 이용한 파일 업로드 (0) | 2024.11.25 |
|---|---|
| [새싹x코딩온] 웹 개발자 부트캠프 과정 4주차 회고(2) | form으로 get, post 요청 보내기 / express 서버에서의 비동기 http통신 (0) | 2024.11.21 |
| [새싹x코딩온] 웹 개발자 부트캠프 과정 3주차 회고(2) | AWS EC2, JS 업그레이드 (0) | 2024.11.15 |
| [새싹x코딩온] 웹 개발자 부트캠프 과정 3주차 회고(1) | jQuery, 반응형 웹, Bootstrap (0) | 2024.11.12 |
| [새싹x코딩온] 웹 개발자 부트캠프 과정 2주차 회고(2) | Javascript (1) | 2024.11.08 |