Express: 웹페이지 표현을위한 NodeJS 웹 프레임워크 + get,use,set

익스프레스는 NodeJS가 기본으로 제공하는 웹애플리케이션 프레임워크이다.

 

최근 노마드 코더의 줌 클론코딩 강의를 들으며  express 와 socket.io 등 다양한 서버 관련 툴을 사용해 보았다.

nodejs의 대표적인 모듈인 만큼  정리하고 넘어갈 필요가 있어 본 게시글을 작성하게 되었다.

 

Express란?

 

Node.js에서 기본적으로 제공하는 웹 애플리케이션 *프레임워크 (web application framework)이다.

각종 웹 프로그램과 API를 만드는데 유용한 도구를 제공한다.

 

빠르고, 심플한 특징 덕분에 학습 및 사용이 용이해 많은 개발자들에게 사랑받고 있는 모듈이다.

요즘 급속도로 성장하고 있는 당근마켓의 푸시 알림도 Express를 사용하고 있다. 

당근마켓의 푸시알림을 지탱하고 있는 Node.js 서비스

 

*framework

프레임워크는 복잡한 구조를 만들기 위한 기초 작업물(골조, 구조, 틀)이란 뜻을 담고 있다.

설계도를 의미하는 blueprint(청사진)과는 또 다른 뜻이다.

 

 

Ruby on rails(루비 온 레일즈), React(리액트), Unitiy(유니티)   등이 모두 애플리케이션 개발 프레임워크 들이다.

 

 

Express, 그래서 어디에 쓰나요?

 

mdn문서에서 설명하는 express의 역할

• HTTP 통신 요청(Request; GET, POST, DELETE 등)에 대한 핸들러를 만든다.
• 템플릿에 데이터를 넣어 응답(response)을 만들기 위해 view의 렌더링 엔진과 결합(integrate)한다.
• 접속을 위한 포트나 응답 렌더링을 위한 템플릿 위치 같은 공통 웹 애플리케이션 세팅을 한다.
• 핸들링 파이프라인(reqest handling pipeline) 중 필요한 곳에 추가적인 미들웨어 처리 요청을 추가한다

-https://developer.mozilla.org/ko/docs/Learn/Server-side/Express_Nodejs/Introduction 

mdn 문서의 번역은 역시나 이해하기 힘들다

 

 

노마드 코더의 "zoom 클론 코딩"에 사용된 express코드를 직접 살펴보며 위의 텍스트를 이해해보자.

 

import express from "express";


const app = express();

app.set("view engine", "pug");
app.set("views", __dirname + "/views");
app.use("public",express.static(__dirname + "/public"));
app.get("/", (_, res)=> res.render(home));
app.get("/*", (_, res) => res.redirect("/"));

zoom 클론코딩에서는

콘솔을 통한 메시지교환, socket.io를 통한 메시지교환, 영상통화 기능을

차례대로 구현하면서 거의 모든 코드들을 지우고 새로 쓴다.

 

하지만 위 7 줄의 코드는 처음부터 끝까지 함께 간다.

 

 

 

 

각 메서드와 역할을 차근차근 살펴보자.

 

 

 

1. *랜더링 엔진설정: set 메서드

*랜더링이란 데이터파일을 유저에게 실제로 보여주는 화면으로 바꾸는 과정을 의미한다. 

 

set 메서드는 express가 제공하는 다양한 옵션구성의 설정에 사용되는 메서드이다.

 

app.set("view engine", "pug");

 

위의 코드는 view 엔진의 옵션을 "pug" 형식으로 사용하게 설정하고 있다.

 

view란 말 그대로 사용자가 보는 화면을 의미한다.

 

즉 위 코드는 웹 페이지 구성물데이터가 저장된 파일의 형식이 " pug" 라는 뜻이다.

 

 

*pug?

 

html 형식의 하나로

기존의 꺽쇠 <>로 태그를 구분하는 것이 아닌 들여 쓰기로 태그를 구분한다는 특징을 가지고 있다.

 

그냥 HTML을 사용하기 위한 템플릿 중 하나라고 생각하면 된다.

 

태그요소 구분을 마치 파이썬코드처럼 들여 쓰기와 띄어쓰기로 하고있다.

 

 

2. 애플리케이션의 뷰를 위한 디렉토리 설정

app.set("views", __dirname + "/views");

사용자화면(view)을 구성하는 HTML 및 기타 파일들이 위치하는 장소를 설정하는 코드이다.

 

첫번째 인자는 set 메서드로 설정할 옵션, 두번째 인자는 그 옵션에대한 설정을 보여주고있다.

 

"views"를 설정중이며, __dirname + "/views"는 해당 옵션에대한 설정파일이 저장된 절대경로를 지정하고 있다.

 

*__dirname은 해당모듈 디렉토리까지의 절대경로를 의미한다. 

 

 

 

+하필 내가 폴더이름을 views로 지었기 때문에 헷갈릴 수 있는데 

첫 번째 인자는 내 폴더명과는 관련이 없는 set 메서드의 옵션에대한 인자이다.

 

 

3. 미들웨어 처리요청 

 

*미들웨어란?

HTTP의 요청-응답 사이클에서 실행되는 함수들을 일컫는 말

미들웨어는 request 및 response 오브젝트에 접근할 수 있다.

app.use("public",express.static(__dirname + "/public"));

 

 

위의 use 메서드의 작동은 다음과 같다.

 

만약 "public"으로 시작하는 request(요청)이 들어올 경우

express.static()이라는 미들웨어 메서드를 통해 

__dirname + "/public" 경로에 있는 static 파일 (정적파일: 서버로부터 생성되지 않은 파일 - 이미지 등)

을 포함한 resopnse(응답)을 발생시킨다.

 

 

 

 

 

4. get 함수를 이용한 *라우팅 

 

*라우팅

유저에게 내가 의도한 주소, 경로로 안내해 주는 것을 라우팅이라고 한다.

 

app.get("/", (_, res)=> res.render(home));
app.get("/*", (_, res) => res.redirect("/"));

 

 

 

첫 번째 코드

 

클라이언트가 루트디렉토리: "/"의 접근에 해당하는 요청을 받았을 경우

home 파일을 랜더링 해서 웹페이지로 보여준다.

 

두 번째 줄은 루트디렉토리 "/" 이하의 아무 위치에 접근하는 경우,

현재 지금 루트디렉토리 "/"에  랜더링 되어있는 웹페이지로 보내주는 (redirect) 역할을 한다.

 

 

mdn 문서에서 가져온 설명 중 바로 다음에 해당하는 역할을 하는 코드들이다.

• HTTP 통신 요청(Request; GET, POST, DELETE 등)에 대한 핸들러를 만든다.

 

 

 

 

 

import express from "express";


const app = express();

app.set("view engine", "pug");
app.set("views", __dirname + "/views");
app.use("public",express.static(__dirname + "/public"));
app.get("/", (_, res)=> res.render(home));
app.get("/*", (_, res) => res.redirect("/"));

이처럼 위의 코드에선 Express를 통하여 웹페이지 표현의 방식과 표현 파일의 위치 등을 지정해주고 있다.

 

어떤 view 엔진을 사용할지, 요청별로 어떤 웹페이지를 보여줄지, 

화면을 구성하는 프런트엔드 요소들은 어디에서 가져올지, 

접근하는 주소별로 어떤 화면을 보여줄지

 

등등을 설정하는 것이 Express의 역할이다.

 

 

 

+@

Express는 영어로 "표현하다", "재료를 짜내다"라는 뜻을 가지고 있다.

NodeJS팀, 네이밍 센스가 아주 괜찮다!

 

 

 

읽어주셔서 감사합니다

 

오탈자나 오류는 댓글로 알려주세요.