[SeSSAC] 웹 풀스택 영등포 5기 과정_nodejs기초

안녕하세요

이번 시간에는 node.js의 기초에 대해 배웠습니다.

먼가 너무,,,생소한 부분이고 node.js는 양이 방대해서 조금 걱정했었는데,

수업을 차근차근 따라가고 있습니다.

 

• node.js 란?

javascript언어를 웹 페이지 프론트엔드 구역뿐만 아니라 백엔드에서도 사용할 수 있도록

브라우저 밖에서 javascript 언어를 사용할 수 있게 만든 런타임 환경입니다.

그냥 쉽게 말해서 백엔드에서  vscode처럼  javascript를 쓸 수 있게 만든 거 같아요

 

그래서 저희는 윈도우 환경으로 수업을 진행하기 때문에 하기 링크에서 node.js를 설치하였습니다.

다운로드 | Node.js (nodejs.org)

다운로드 | Node.js

---

• node.js 특징

• 자바스크립트 언어 사용

앞서 말했듯이 node.js를 통해 백엔드를 만들 수 있게 되었으니, 당연히 자바스크립트 언어를 사용하겠죠?

 

• single Thread

싱글 스레드는 한 프로세스 내에서 하나의 스레드만 작동한다는 의미입니다.

그냥 한번에 하나의 작업만 가능하고, 그래서 에러 처리가 안되어있는 경우에 에러가 나면

멈추게 됩니다. 또한 프로그래밍 난이도가 쉽고, 자원(cpu, memory 등)을 적게 사용한다고 하네요!

+여기서 싱글 스레드는 call stack이 하나이다.라는 말이 등장하며

stack과 que에 대해서도 배웠습니다.

 

• Non-blocking I/O

논블로킹은 작업이 완료될 때까지 대기하지 않고 다음 작업을 수행합니다.

그림에서 알 수 있듯이 작업은 똑같이 하지만 논블로킹방식이 시간이 훨씬 단축됩니다.

동시에 처리될 수 있는 작업을 최대한 묶어서 백그라운드로 넘긴다고 하네요!!

 

• 이벤트 기반(Event-Driven)아키텍처

여기서 Event Loop라는 개념이 등장합니다.

node.js에서의 Event Loop개념은 특히 강조되는 특징 중 하나라고 합니다.

일단 이벤트가 발생되면 호출 스택에 이벤트가 쌓이게 됩니다.

호출 스택에 쌓인 이벤트 중 시간이 오래 걸리지 않는 이벤트는 백그라운드에 가지 않고,

시간이 오래 걸리는 이벤트는 백그라운드로 넘어가게 됩니다.

여기서 시간이 오래 걸리지 않아 백그라운드에 가지 않은 이벤트는 바로 호출 스택에서 처리해서 나가게 됩니다.

(이를 동기적 처리라고 함)

반면 백그라운드에 있는 이벤트는 동기적 처리가 완료될 동안 백그라운드라는 별도의 환경에서 따로 처리를 진행하게 됩니다. 그 후 처리가 완료된다면 큐로 이동하게 됩니다.

그 후 호출 스택에 아무것도 없다면 호출스택에 올라가서 실행이 되고 제거가 됩니다.

---

=> 그래서 node.js를 왜 쓰는 건데?

* 간단한 로직

* 대량의 클라이언트가 접속하는 서비스 ok

* 빠른 개발 가능

* 빠른 응답 가능

* 비동기 방식에 어울리는 서비스(스트리밍, 채팅 등)

---

 

• 모듈

: 재사용 가능한 코드 조각

 

• 모듈 내보내기 (Export)

CommonJS 방식

// math.js
const add = (a, b) => a + b;
const subtract = (a, b) => a - b;

module.exports = {
  add,
  subtract
};

ES6 모듈 방식

// math.js
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;

 

• 모듈 가져오기 (Import)

CommonJS 방식:

const math = require('./math'); // 경로는 모듈 파일의 위치에 따라 다름
console.log(math.add(3, 5));

ES6 모듈 방식:

import { add, subtract } from './math'; // 경로는 모듈 파일의 위치에 따라 다름
console.log(add(3, 5));

 

• npm

npm은 노드 패키지를 관리해 주는 툴입니다.

c언어에서도 저희가 <stdio.h> 헤더 내에 내장되어 있는 printf함수를 쓰듯이,

이 헤더와 같은 패키지를 관리하는 툴이 있습니다. 

이번 시간에는 npm 내의 http와 express 두 가지에 대해 배웠습니다.

 

• http: 앞으로 수업에서 쓰이지 않고, 현업에서도 잘 쓰이지 않는다고 해서 쿨하게 제끼도록 하겠습니다.

수업 시간에 너무 졸아서 하나도 모른다는,,,,ㅎ

 

• express:

일단 npm install express를 입력하게 되면 어마어마한 양의 파일과 폴더가 쫘르륵 생깁니다.

아니 나는 이 몇 글자로 이런 부담스러운 결과를 초래할 줄은 몰랐지,,,,,

node_modules의 일부

아니나 다를까 이 생긴 파일들은 git ignore로 git push 할 때 제외하여 주고

git clone으로 받은 사람은  npm install 명령어를 이용해

package.json을 읽어서 node_modules 폴더를 생성하여 준다고 합니다 

 

진짜 꽤 똑똑한 듯

 

npm을 다운로드하였으면 하기와 같이 express 모듈을 불러와 줍니다.

//express 모듈 가져오기
const express = require('express');

// app변수에 express객체 담기
const app = express();

그다음 저희가 사용할 수 있도록 하기처럼 세팅값을 변경해 줍니다.

// express에서 사용할 템플릿 엔진 종류(ejs)등록
app.set('view engine', 'ejs'); 

// 템플릿 엔진 파일을 저장할 위치 등록
app.set('views', './views');

app.set('view engine', 'ejs');
이 코드는 Express 애플리케이션의 설정을 변경하는 함수인 app.set()을 사용하고 있습니다.
'view engine'은 Express의 설정 항목 중 하나로, 사용할 템플릿 엔진을 지정하는 것을 의미합니다.
'ejs'는 실제로 사용할 템플릿 엔진의 종류를 나타내며,

 이 경우에는 EJS(Effective JavaScript Templating) 템플릿 엔진을 사용하겠다는 것을 설정하고 있습니다.

 

app.set('views', './views');
이 코드는 마찬가지로 app.set() 함수를 사용하여 Express 애플리케이션의 설정을 변경합니다.
'views'는 템플릿 엔진 파일이 저장될 경로를 설정하는 옵션입니다.
./views는 템플릿 엔진 파일이 저장될 폴더의 상대 경로를 나타내며, 이 코드에서는 현재 디렉터리 아래의 views 폴더를 사용하겠다는 것을 설정하고 있습니다.

(여기서 views나, ./views와 같은 변수명은 제 맘대로 바꿔도 되는데

보통 관례적으로  views, templete을 많이 쓴다고 합니다!)

 

이제 템플릿 엔진 등록과 경로설정을 마쳤으면, 제대로 활용해 줍니다.

 

• get메서드

HTTP 메서드 중 하나로, 클라이언트로부터 오는 GET 요청을 처리하는 데 사용됩니다. 

GET 요청은 주로 웹 브라우저나 다른 클라이언트에서 웹 서버로 데이터를 요청할 때 사용됩니다. 

Express에서는 app.get() 메서드를 사용하여 GET 요청을 처리할 수 있습니다.

app.get('/', (req, res) => {
  res.send('Hello, World!');
});

get은 매개변수를 두 개 받습니다.

처음엔 경로, 두 번째엔 실행 함수입니다.

 

• send메서드

HTTP 응답을 보내는 데 사용됩니다. 

res.send()를 사용하여 클라이언트로 데이터를 전송하거나 응답을 완료할 수 있습니다.

app.get('/sessac', function(req, res){
    res.send('<h1>새싹 영등포캠퍼스 5기 수업중</h1>');
});

이러면 웹페이지의 경로에 /sessac이 추가되었을 때

저 문구가 적힌 웹페이지를 만날 수 있습니다.

 

• render메서드

템플릿 엔진을 사용하여 뷰(페이지)를 렌더링 하고 클라이언트에게 전송하는 역할을 합니다. 

이를 통해 동적인 웹 페이지를 생성하고 보여줄 수 있습니다.

app.get('/login', function(req, res){
    res.render('login')
});

login.ejs라는 파일을 현재 폴더 내에서 찾아서 웹사이트 경로에 /login이 붙게 되었을 때

해당하는 login.ejs를 클라이언트에게 보여주게 하는 함수입니다. 

 

send와 render의 차이점을 수업에서 강조하셨는데, 차이점은 다양하나 크게 보면

send는 간단하고 정적인 응답(html, json 등)을 보내고,

render는 동적인 응답(파일, 객체 단위)을 보낼 때 사용합니다.