SAP위한 Express 설정 (window, VSCode Live Server X)

window에서 SPA를 위한 Express

데브 코스 과제를 하면서 VSCode Live Server로 어찌 어찌 하고 있었습니다. 그런데 .... SPA 관련해서 과제를 진행하면서 Live Server로 세팅을 하여 Extension을 익히는 것보다 express과 서버에 대해 공부를 하는 것이 좋을 것 같아express로 진행하게 되었습니다. 해당 과정을 진행하기 앞서 다음과 같은 고민이 생겼습니다.

1. Node 와 Express를 잘 알고 있나?
2. 왜 Express를 사용하는 가?

그래서 이를 바탕으로 간단하게 정리를 해보았습니다. 링크를 타고 들어가면 좀 더 자세히 볼 수 있는 꿀팁 : )

> Node & Express

우선, Node 와 Express에 대해서 알아보면

> Node

는 오픈소스이며, 개발자가 여러 종류의 서버 사이드 도구들과 Application을 JavaScript로 만들 수 있게 해주는 런타임 환경(프로그램 언어가 구동되는 환경)입니다.
쉽게 이야기 하자면 Chrome V8 JavaScript engine을 기반으로 하는 JavaScript 런타임 입니다. (런타임이 헷갈린 다면... 여기로)
즉, JavaScript를 서버에서 사용하도록 만든 프로그램 이면서 결국 Google JavaScript 엔진에서 쉽고 빠르게 확장할 수 있어 사용하는 겁니다.

좀 자세히 들어가 보겠습니다.

Node.js는 비동기 프로그래밍을 사용

> 왜? 사용하나

> Node.js 처리 과정

보통 웹 서버는 일반적으로 서버에서 파일을 열고 콘텐츠를 클라이언트에 반환하는 식입니다.

PHP, ASP가 파일 요청을 처리하는 방법을 보면

1. 작업을 컴퓨터의 파일 시스템으로 보낸다.
2. 파일 시스템이 열리고 파일 읽는 동안 기다린다.
3. Client에게 콘텐츠 반환한다.
4. 다음 요청 처리할 준비 완료

이러한 방식으로 되어 있으며 동기적으로 작동합니다.

반면

Node.js는 비동기 처리 방식으로

1. 작업을 컴퓨터의 파일 시스템으로 보낸다.
2. 다음 요청 처리 준비 완료
3. 파일 시스템 열리고 파일을 읽으면 서버는 콘텐츠를 Client에 반환

하는 방식으로 대기를 없애는 장점이 있습니다.

> Node.js 무엇을 할 수 있니?

1. 동적 페이지 생성
2. server에서 파일을 create, open, read, write, delete, close 할 수 있다.
3. Database에서 data를 add, delete, modify 할 수 있다.

> 근데 왜 Express ?

[What is Express.js? | Why should use Express.js? | Features of Express.js

What is Express.js? Express.js is a free and open-source web application framework for Node.js. It is used for designing and building web applications quickly and easily. Web applications are web apps that you can run on a web browser. Since Express.js onl

www.besanttechnologies.com](https://www.besanttechnologies.com/what-is-expressjs#:~:text=It%20is%20used%20for%20designing,and%20API%20without%20any%20effort.)

API 빌드를 쉽게 하고 JavaScript만으로 사용 가능하기 때문에 쉽고 빨라서 사용합니다.

간단하게 동작에 대해 살펴보면

> Express 동작

다음과 같이 작동을 합니다.

이분의 블로그를 보시는 것이 훨씬 좋을 것 같아 제공합니다. :)

이해가 잘 안가실 겁니다.... 밑의 실행과 같이 잘 이해해 보도록 합시다.

> 이젠 window에서 SPA를 위한 Express조작하기를 해보겠습니다.!!!!!

1. Node를 설치해줍니다.

https://nodejs.org/en/
여기 들어가셔서 안전한 체크 목록 다운 받으시면 됩니다. :)

자세한 블로그

2. npm init

//node 버전 확인
> node -v 

> npm -v

> npm init

아마 node를 설치하면 npm이 될 것입니다.

확인을 우선 해주시고

npm init을 통해 초기화를 해줍니다.
그냥 Enter을 연사하고 나면 좌측에 나와 있는 package.json이 발생합니다. 와우 !!
(package.json: 프로젝트 정보와 의존성을 관리하는 문서)

3. express 설치

> npm install express

로 설치한 후 좌측에 node_modules 폴더란 package-lock.json이 있는지 확인합니다.

4. express 동작을 위한 index.js파일 만들기

파일 이름은 아무거나 해도 됩니다. ㅋㅋㅋㅋㅋ
아까 아쉬운 설명을 여기서 하려 합니다.

• 기본 setting

많이 사용하기 때문에 미리 작성

const express = require("express"); //express 가져오기 
const path = require("path"); //경로 찾기 
const app = express(); //express 사용 변수

• 미들웨어 setting

미들웨어 함수는 요청과 응답 사이에서 실행되는 메서드 즉, 모든 경로 사이에 문 같은 것!!!

use은 process.cwd()(현재 경로)를 위에 나와 있는 path에 연결되게 해줍니다.

동작 과정은 다음과 같습니다.

1. node http 서버 인스턴스에서 트리거된 요청 이벤트
2. express는 req 객체로 내부 조작의 일부 수행
3. express가 app.use로 지정한 작업을 시작

app.use(`${path}`, function(req, res, next) {
  //callback code
})

다음과 같은 코드를 뜯어보면
express.static은 static 파일(정적파일, .js, .css...)을 제공하고 public이라는 directory 밑에있는 데이터들을 웹 브라우저의 요청에 따라 서비스를 제공해 줄 수 있다는 의미 입니다.

예를 들면)
사용자가 localhost:5050/image/paeng.jpg로 접근을 하면 해당 파일을 public/image/paeng.jpg에 존재하는지 검색하는 것입니다.

이와 같은 행동으로 인해 public에 저장된 파일만 제공하기 때문에 보안에 이점이 있습니다.

app.use(express.static(path.resolve(process.cwd(), "public")));

• 라우팅 setting

라우팅: Application end point(URI)의 정의, URI가 Client에 응답하는 방식입니다.
즉, URL 요청에 따른 응답 처리 입니다.

get 은 URL에 대한 GET 요청의 경로 처리기 입니다.

SPA를 하기 위해 서버에서 GET요청을 하면 public에서 index.html을 제공 reload 되어도 계속 그려주는 것입니다.

app.get("/*", (req, res) => {
  res.sendFile(path.resolve(process.cwd(), "public", "index.html"));
});

• 에러처리

app.use((err, req, res, next) => {
  console.log(err);
  res.render('error', err);
})

• 전체 코드

//index.js

const express = require("express");
const path = require("path");
const app = express();

//미들웨어 setting
app.use(express.static(path.resolve(process.cwd(), "public")));

//라우트
app.get("/*", (req, res) => {
  res.sendFile(path.resolve(process.cwd(), "public", "index.html"));
});

//실행 표시
app.listen(8082, () => console.log("8082 port is running......"));

//
app.use((err, req, res, next) => {
  console.log(err);
  res.render('error', err);
})

이젠 거의 다 왔습니다. 좀 만 참아주세요 ㅎㅎㅎㅎ

5. package.json 설정

링크를 보고 설정을 하면 됩니다.
저 같은 경우 npm start 로 서버를 키려고 합니다.
추가로 nodemon이라는 프로그램(파일이 변경 될 때마다 새롭게 서버가 loading 되게 하는 것)을 사용하고 있습니다.

6. 드디어 실행!!!

> npm start

npm start를 통해서 실행을 하면 됩니다.

저의 폴더는 다음과 같습니다. 그리고 특히 경로를 잘 정해주셔야 합니다.

마치며

프론트엔드직무라서 Node, Express 등에 관해서 등한시 한 경향이 있었는 데 결국 당했습니다.

이때 느낀 것은 백엔드 분야도 잘 알아야 한다는 점인 것 같습니다. :) 추가로

git에 넣을 때 생성된 파일이 많으니 .gitignore을 사용하면 좋을 것 같습니다. ㅎㅎㅎ

 

😼 추가 알면 좋은 것들...

서버 관리를 위해
node.js 설치 되어 있으면 n
node.js 설치 되어 없으면 nvm

n use 버전으로 원하는 버전 선택하여 사용
^버전 => 해당 버전의 이상 호환가능 버전

dependencies : 일반의존성 패키지
devDependencies: 개발의존성 패키지(개발에서만 사용) => package 설치할 때 --save-dev or -D을 이용

프로젝트 관리

package.json: 설치한 package를 관리한다.
package-lock.json: package를 설치한 상황에 맞게 snapshot을 찍어 저장
=> 다른 곳에서도 같은 버전을 사용할 수 있게 해줍니다.

해당 두개의 파일이 있는 곳에서 npm install or npm i를 하면 적절한 버전을 가진 node-modules를 만들어서 실행할 수 있게 해줍니다.

REF

https://heropy.blog/2018/02/18/node-js-npm/
https://kitty-geno.tistory.com/61
https://www.besanttechnologies.com/what-is-expressjs#:~:text=It%20is%20used%20for%20designing,and%20API%20without%20any%20effort.

https://velog.io/@kakasoo/Express%EB%8A%94-%EC%96%B4%EB%96%BB%EA%B2%8C-%EB%A7%8C%EB%93%A4%EC%96%B4%EC%A1%8C%EC%9D%84%EA%B9%8C
https://thinkmobiles.com/blog/why-use-nodejs/
https://v8.dev/
https://developer.mozilla.org/ko/docs/Learn/Server-side/Express_Nodejs/Introduction
https://github.com/ritwickdey/vscode-live-server/blob/master/docs/settings.md
https://chinsun9.github.io/2022/01/09/live-server-for-react-spa/