Express.js | Single Page Application (SPA)

Express.js | Single Page Application (SPA)

2024. 10. 20. 20:49ㆍ정보처리,전산/aws.cloud

Express.js는 Node.js를 위한 웹 애플리케이션 프레임워크로, 서버 사이드 애플리케이션을 빠르고 쉽게 개발할 수 있게 해주며 최소한의 기능을 제공하면서도 확장성이 뛰어나, 다양한 미들웨어와 함께 사용하여 유연한 웹 애플리케이션을 구축할 수 있다.
미들웨어를 통해 요청 및 응답 처리를 세분화하고, 라우팅 시스템을 사용하여 다양한 URL 요청을 쉽게 처리할 수 있다. 미들웨어는 요청(request)와 응답(response) 객체를 조작하여 다양한 작업을 처리할 수 있는 기능으로 로깅, 인증, 에러 처리 등 다양한 미들웨어를 추가하여 애플리케이션을 확장할 수 있다. 또 Express.js는 URL과 HTTP 메서드(GET, POST, PUT, DELETE 등)를 기반으로 다양한 라우팅을 지원하여 클라이언트 요청을 적절한 함수로 매핑하여 처리할 수 있다. 그리고 다양한 템플릿 엔진(e.g., Pug, EJS)과 쉽게 통합되어 서버 사이드 렌더링으로 동적 HTML 페이지를 생성하는 데 매우 유용하고 동시 접속자 수가 많을 때도 높은 성능을 유지할 수 있다.

//express모듈 불러오기
const express=require('express');

//express 애플리케이션 생성
const app =express();


//기본 라우트 설정 
// 사용자가 / 경로로 접속하면 메세지가 전송됨
app.get('/',(req,res)=>{
    res.send('Hello,World!');

});

//다른 라우트
//사용자가 /about url로 접속하면 about page 라는 메세지가 응답으로 전송된다.
app.get('/about',(req,res)=>{
    res.send('About Page');

});

//서버 실행
//앱 지정 포트 3000에서 요청을 듣기시작하여 서버가 성공적으로 실행되면 콜백함수가 실행되고 서버가 응답하게 한다.
app.listen(3000,()=>{
    console.log('Server is running on port 3000');

});

서버는 3000번 포트에서 시작하고, 해당 포트로 들어오는 요청을 처리할 준비를 한다.
사용자가 http://localhost:3000/로 접속하면 Hello, World!라는 응답을 받는다.
사용자가 http://localhost:3000/about로 접속하면 About Page라는 응답을 받는다.

■ Single Page Application SPA

1. Traditional Page Lifecycle (전통적인 페이지 라이프사이클)

Initial Request: 클라이언트가 서버에 첫 요청을 보내면 서버는 전체 HTML 파일을 클라이언트로 전송한다.
POST 요청 후 페이지 리로드: 클라이언트가 추가 요청(예: POST 요청)을 보낼 경우, 서버는 다시 전체 HTML 파일을 클라이언트에 보내주고 페이지가 리로드된다.
즉, 전통적인 방식에서는 새로운 요청이 있을 때마다 페이지가 완전히 새로고침되어 페이지 리로드가 자주 발생하고, 전체적인 사용자 경험이 다소 끊기는 느낌을 줄 수 있다.

2. SPA (Single Page Application) Lifecycle (SPA 페이지 라이프사이클)

Initial Request: 클라이언트가 서버에 첫 요청을 보내면, 서버는 HTML 파일을 전송한다. 이 부분은 전통적인 방식과 동일하다.
AJAX 요청을 통한 데이터 변경: 이후 클라이언트에서 추가 요청이 발생할 경우, 서버는 전체 페이지를 다시 전송하지 않고 필요한 데이터만 JSON 등의 형식으로 전송한다.
페이지는 리로드되지 않으며, AJAX를 통해 필요한 데이터만 서버로부터 받아와 현재 페이지에서 동적으로 갱신된다.
SPA는 페이지 전환 없이 데이터만 변화시키기 때문에 사용자 경험이 더 부드럽고 빠르게 느껴지며, 전체 페이지를 다시 로드할 필요가 없다.

■npm 설치

■app.js 생성

const http = require('http');
const express = require("express");
const path = require("path");

const app = express();

app.get("/hello", function (req, res) {
    console.log("Hello World");
    res.send('Hello!!!');
});

http.createServer(app).listen(8080);
console.log("Server Created on port 8080");

기본 설정:
- 서버가 http://localhost:8080에서 실행 중이라고 가정하면, /hello는 이 서버의 특정 경로를 의미한다.
동작 설명:
- 클라이언트가 브라우저에서 http://localhost:8080/hello로 요청을 보낼 때, 이 요청은 서버의 /hello 경로와 매칭된다.
- 그러면 app.get("/hello", function (req, res) {...})에 정의된 핸들러 함수가 실행된다.
- 이 함수는 클라이언트에게 "Hello!!!"라는 응답을 보내고, 콘솔에는 "Hello World"라는 로그가 출력된다.
- /hello는 클라이언트가 접근할 수 있는 URL 경로이다.
- 해당 경로로 요청이 들어오면, 서버는 미리 정의된 함수를 실행하여 응답을 처리한다.
- 브라우저에서 http://localhost:8080/hello로 접속하면 "Hello!!!"라는 메시지를 서버로부터 받을 수 있다.

■ data response

var student={
    'name' :'lee',
    'major':'architecture',
    'age' : 50
}

const http = require('http');
const express = require("express");
const path = require("path");

const app = express();

app.get("/hello", function (req, res) {
    console.log("Hello World");
    res.send(student);//student 객체를 response
});

http.createServer(app).listen(8080);
console.log("Server Created on port 8080");

■ make a chart

- 서버 쪽 코드 app.js

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



app.use(express.static(path.join(__dirname, "/public"))); //정적파일 로드


app.get(/hello, function (req, res) {
    console.log("Hello World");
    var charData=[0,1,2,4,6,7]
    res.json(charData)
})

http.createServer(app).listen(8080)
console.log("Server Created on port 80");

-front end 코드 index.html

<!DOCTYPE html>
<html>
  <head>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  </head>
  <body>
    <div>
      <canvas id="myChart" width="400" height="400"></canvas>
    </div>

    <script>
      function drawChart() {
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function () { //서버로부터 데이터를 가지고옴
          if (xhr.readyState === xhr.DONE) {
            if (xhr.status === 200 || xhr.status === 201) {
              var drawingData = JSON.parse(xhr.responseText);
              const ctx = document.getElementById('myChart').getContext('2d');
              new Chart(ctx, {
                type: 'bar',
                data: {
                  labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
                  datasets: [{
                    label: '# of Votes',
                    data: drawingData,
                    borderWidth: 1
                  }]
                },
                options: {
                  scales: {
                    y: {
                      beginAtZero: true
                    }
                  }
                }
              });
            } else {
              console.error("ERROR");
            }
          }
        };
        xhr.open('GET', 'http://localhost/hello');
        xhr.send();
      }
    </script>

    <button onclick="drawChart()">차트 그리기</button>
  </body>
</html>

■80 포트 사용 권한 부여

80번 포트와 같은 1000번 이하의 포트는 주요 서비스가 사용하는 포트이므로, 일반 사용자가 해당 포트를 사용할 때는 root 권한이 필요하지만 보안 문제로 인해 root 권한으로 애플리케이션을 실행하는 것은 권장되지 않는다.

setcap 명령어를 사용하면, 프로그램에 특정 권한을 부여하여 root 권한 없이 1000번 이하의 포트를 사용할 수 있다.

sudo setcap 'cap_net_bind_service=+ep' /path/to/your/program

, Node.js 프로그램에 대해 권한을 설정하려면:

sudo setcap 'cap_net_bind_service=+ep' /usr/bin/node

이렇게 하면 root 권한 없이도 Node.js가 80번 포트에서 실행될 수 있다.

2. 포트 포워딩 사용

iptables 또는 nftables를 사용하여 80번 포트로 들어오는 요청을 1000번 이상의 다른 포트로 포워딩하여 8080 포트에서 실행 중인 서비스를 80번 포트로 접근할 수 있도록 포워딩할 수 있다.

sudo iptables -t nat -A PREROUTING -p tcp --dport 80 -j REDIRECT --to-port 8080

이렇게 하면, 실제로 서비스는 8080번 포트에서 실행되지만, 사용자는 80번 포트로 접근할 수 있다.

3. 역방향 프록시 설정

다른 서비스(예: nginx)를 이용하여 80번 포트로 들어오는 요청을 1000번 이상의 포트에서 실행 중인 서비스로 프록시하는 방법이다. ,80번 포트에서 요청을 받아 8080번 포트에서 실행 중인 애플리케이션으로 전달할 수 있다.

4. 특정 포트로 실행할 때 sudo 사용 (권장되지 않음)

보안에 신경 쓰지 않는 간단한 환경에서는 애플리케이션을 root 권한으로 실행하는 방법

sudo node app.js

■ aws 포트 설정

■ 80번 포트가 일반 사용자 권한으로 사용될 수 없어서 발생하는 문제 해결

■ wsl 환경에서 포트 포워딩 사용

WSL에서 80번 포트를 사용해야 할 경우 Windows의 80번 포트로 들어오는 트래픽을 WSL의 8080 포트로 포워딩하는 것이다.

  xhr.open('GET', 'http://172.31.64.36/hello');

root권한으로 실행하지 않아도 포트포워딩이 된다.

1. PM2 설치

PM2는 Node.js 애플리케이션을 관리하기 위한 프로세스 관리자로 애플리케이션 실행, 모니터링, 로드 밸런싱 및 자동 재시작 기능을 제공한다.

PM2를 전역으로 설치한다:

npm install pm2 -g

2. 애플리케이션 실행, 종료 및 삭제

앱 실행: app.js를 PM2로 실행
```
pm2 start ./app.js
```
앱 종료: 실행 중인 앱을 종료하려면 해당 앱의 번호(ID)를 확인하고 종료한다.

pm2 stop 0 # 0은 프로세스 번호

3. 클러스터 모드로 실행

클러스터 모드를 사용하여 여러 CPU 코어에 애플리케이션을 분산할 수 있다.

pm2 start ./app.js -i <클러스터 수>

4개의 클러스터로 실행하려면:

pm2 start ./app.js -i 4

4. 서버 로그 로테이션 (로그 관리)

PM2는 pm2-logrotate 모듈을 사용하여 로그를 자동으로 관리할 수 있다. 로그 로테이션 기능을 설치하려면:


pm2 install pm2-logrotate

이렇게 하면 일정 시간마다 자동으로 로그 파일을 압축하거나 삭제해 로그 파일이 너무 커지지 않도록 관리한다.

■npm 글로벌 패키지 경로확인

npm config get prefix

■ pm2실행

백그라운드에서 실행된다.

■DB 설치

SQL vs. REST API:
- SQL: 데이터베이스와 직접 상호작용하기 위해 사용되는 구조화된 쿼리 언어(SQL) 명령어를 의미한다. SELECT, INSERT, UPDATE, DELETE와 같은 명령어를 사용한다.
- REST API: 클라이언트는 HTTP 메서드를 사용하여 서버와 통신하고, 서버는 API를 통해 데이터베이스와 상호작용한다. 주요 메서드는 GET, POST, PUT, DELETE이다.
비교:
- SELECT (SQL)는 GET (REST API)와 대응: 데이터베이스에서 데이터를 가져온다.
- INSERT (SQL)는 POST (REST API)와 대응: 새로운 데이터를 데이터베이스에 추가한다.
- UPDATE (SQL)는 PUT (REST API)와 대응: 기존 데이터를 수정한다.
- DELETE (SQL)는 DELETE (REST API)와 대응: 데이터를 삭제한다.

API는 클라이언트와 데이터베이스 사이에서 데이터를 가져오거나 수정, 삭제하는 역할을 하는 인터페이스이다.

'정보처리,전산 > aws.cloud' 카테고리의 다른 글

HTTP 서버를 만드는 코드 (0)	2024.09.05
클라우드 컴퓨팅의 5계층 모델 (0)	2024.07.29
클라우드 컴퓨팅의 구성 요소 (0)	2024.07.29

JJ의메모장