포스코x코딩온 웹 풀스택 양성과정

[포스코x코딩온] 웹 풀스택 과정 4주차 회고 | Node.js

Codult 2024. 3. 28. 11:52
728x90

 

1차 프로젝트가 끝나고, 본격적으로 백엔드 수업이 시작되었다.
이번주는 Node.js 기초를 배웠다.

Node.js 란?

  • 웹 브라우저에서만 작용 가능했던 기존 javascript의 한정적인 런타임을 확장시켜, 서버를 구축하고 브라우저 밖에서도 javascript가 실행 가능하도록 하는 런타임 환경이다.
    (*런타임: 프로그래밍 언어가 구동되는 환경)

📌 설치

  • Node.js는 그냥 홈페이지에서 다운받아 설치하면 된다. (Mac의 경우, HomeBrew 설치 후에 Node js를 설치해야 한다고 들었다. (brew install node))

📌 REPL

Read -> Evaluate -> Print - Loop

  • 윈도우의 cmd, 맥의 terminal 처럼 노드에도 REPL 콘솔이 있어, js 코드 입력이 가능하다. 간단한 코드를 테스트할 때 사용할 수 있다.

📌 npm

Node Package Manager의 약자로, 노드 패키지의 저장소이다. Node.js는 노드 패키지를 가져와 만들어져 있는 것을 가져와 사용해야 한다. (직접 만들어서 사용하려면, 내가 직접 만들어 npm에 올리면 된다.)

  • 사용법
    npm init : 프로젝트를 시작할 때 사용하는 명령어로, package.json에 기록될 내용을 문답식으로 입력한다.
    npm init -y : package.json이 생성될 때 기본값으로 생성된다. (-yes)
    npm install 패키지이름 : 프로젝트에서 사용할 패키지를 설치한다. 설치된 패키지의 이름과 정보는 package.json의 dependencies에 입력된다. -> 수업시간에 express와 ejs를 설치했을 때, 이를 확인할 수 있었다!
  • package.json
    : 프로젝트의 정보와 의존성(dependencies)을 관리하는 문서로, json 포맷으로 작성해야 한다.
"name": 패키지 이름
"version": 패키지의 버전
"description": 패키지에 대한 설명
"main": js 실행 파일 진입점
"scripts": npm run을 이용해 정해놓는 스크립트 명령어
"dependencies": 패키지의 배포 시에 포함될 의존성 모듈을 지정

 

📌 Node.js는 Single Thread이다.

  • Thread란, 프로세스(=실행 중인 프로그램) 내에서 실행되는 흐름의 단위이다. 하나의 프로세스에는 n개의 스레드가 존재하며 동시에 작동할 수 있다.
  • 즉, Node.js는 하나의 스레드(single thread)으로만 이루어져 있기 때문에, 에러를 처리하지 못하면 프로그램이 중단된다. (서버다운)

📌 Non-blocking I/O 기능

  • Non-blocking I/O 기능으로 일부 코드는 백그라운드(다른 프로세스)에서 실행 가능하다.
  • I/O 작업이란, 파일 시스템에 접근하거나 네트워크 요청하는 작업을 뜻한다.
  • Node.js는 표준 라이브러리의 모든 I/O 메서드를 비동기 방식으로 제공한다.
    ※ 비동기 (Asynchronous): 요청을 보냈을 때 응답 상태와 상관없이 다음 동작을 수행 할 수 있다.
    ※ 동기 (Synchronous): 서버에서 요청을 보냈을 때 응답이 돌아와야 다음 동작을 수행할 수 있다.

📌 Event-Driven

  • 클릭, 네트워크 요청, 타이머 등의 이벤트가 발생할 때, 미리 지정해둔 작업(콜백함수)을 수행한다.

 

서버 구축

📌 Module 내보내기/가져오기

  • Module 모듈: 특정한 기능을 하는 '함수'나 '변수'들의 집합으로, 재사용 가능하다.
  • package.json에 "type": "module" 추가해서 사용해야 한다!
  • 내보내기(export)와 가져오기(import)로 사용할 수 있다.
  • 모듈 내보내기 (만들기)

(i) 하나의 모듈 파일에 여러개 만들기

const abc = "a 변수";
const b = "b 변수";
const c = 20;

module.exports = {a: abc, b, age: c};
// 결과적으로, 아래와 같이 저장됨
// {
	//a: "a 변수"
	//b: "b 변수"
	//age: 20
//}

//ES2015
export {abc, b, c};

 

(ii) 하나의 모듈 파일에 하나 만들기

function connect() {
	return a + b;
}
module.exports = connect;

//ES2015
export default connect;
  • 모듈 불러오기
    변수를 만들고, require()으로 불러온다.
const mod = require("./module.js");
//or
const {abc, b, c} = require('./module.js');
// module.js: 모듈 저장되어 있는 파일명
    
//ES2015모듈
import mod from './module.js';
//or
import {abc, b, c} from './module.js';

 

📌 http 모듈로 서버 만들기

  • http 모듈은 node.js에 내장된 웹 모듈로, 불러오기만 하면 된다.
  • server 객체, request 객체, response 객체를 사용한다.

(i) server 객체 : 웹 서버를 생성할 때 사용하는 객체

const http = require("http");
const server = http.createServer();

 

  • .listen() 서버를 실행하고 클라이언트를 기다린다. (첫번째 매개변수로 port 번호를 받음)
server.listen(8000,function(){
	console.log("8000번 포트로 서버 실행");
});
  • .close() 서버를 종료
  • .on() 서버 객체에 이벤트 등록

 

(ii) request 객체: 응답 메시지를 작성할 때 첫번째 매개변수로 전달되는 객체

 

(iii) response 객체: 응답 메시지를 작성할 때 두번째 매개변수로 전달되는 객체

  • .writeHead() 응답 헤더 작성 (ex: 200, 404)
  • .write() 응답 본문 작성
  • .end() 응답 본문 작성 후 응답 종료
const http = require("http");
const server = http.createServer(function(req, res) {
    res.writeHead(200);
    res.write("<h1>Hello!</h1>");
    res.end("<p>End</p>");
});

 

📌 express 모듈로 서버 만들기

  • Node.js의 90%는 express 프레임워크로 서버를 구축한다. (http 모듈은 코드의 확장성이 제한적이기 때문)
  • express 설치
    npm install express
    → node_modules 생성됨 (용량이 매우 크기 때문에, .gitignore 처리!)
    → package.json의 dependencies에 express 기록됨
  • express 사용
    express 모듈을 불러온 뒤, 해당 모듈의 최상위 함수인 express() 함수를 호출 (require()이나 import 사용 & .listen()으로 서버까지 실행시켜줘야 확인 가능)
const express = require("express");
//or
import express from "express";
// 이 경우, package.json 파일에 "type": "module" 추가해야 인식됨.

const app = express();
const PORT = 8000;
// get 방식으로 불러옴.
// "/"는 도메인 이름을 정해준 것으로, 
// "/app"을 입력하면, localhost:8000/app으로 주소 입력해야 함
app.get("/", (req, res) => {
    res.send("Hello express");
    res.send({
        result: true,
        code: 1000,
        message: "회원가입에 성공하였습니다.",
        data: {name: "kim"},
    });
});
	
app.listen(PORT, () => {
    console.log(`http://localhost:${PORT}`);
});

 

ejs 템플릿

Embedded Javascript의 약자로, 자바스크립트가 내장되어 있는 html 파일이다. (확장자: .ejs)

  • ejs 설치
    npm install ejs
  • ejs 템플릿 설정 (미들웨어: 서버와 클라이언트를 이어주는 중간 작업)
    (i) .set() view engine을 ejs로 세팅
    (ii) .use() 정적 파일 등록
app.set('view engine', 'ejs');
app.set('view','./view');
app.use('/public', express.static("public"));

// 앞에 위치한 '/public'은 도메인의 경로를, 뒤에 위치한 "public"은 서버의 경로를 말해줌
// 따라서, ejs 파일에서 정적 파일을 불러올 때도, public에서 시작한다.
  • .render() ejs 템플릿 렌더링
app.get("/", (req, res) => {
	res.render("test",{data: "kim"});
});
// view 폴더 안의 test.ejs를 렌더링 & data: "kim"도 같이 보내준다.
  • ejs 문법
    : <% %> 사이에 js 코드를 입력하며, 줄바꿈이 일어날 때마다 새로운 <% %>를 입력해야 한다.
728x90