구름

SSR VS CSR 차이점

lheunoia — Sun, 21 Jan 2024 19:19:39 +0900

SSR vs CSR

안녕하세요 :)

오늘은 SSR(Server Side Rendering)과 CSR(Client Side Rendering)의 차이점에 대해 알아 보겠습니다.

SSR (Server Side Rendering)

SSR

서버 사이드 렌더링(SSR)이란, UI 로직이 담긴 HTML 파일을 서버 측에서 렌더링하는 방식을 말합니다. 서버에서 렌더링이 완료된 HTML 파일을 전달받기 때문에 사용자는 곧바로 웹 사이트를 볼 수 있습니다. 그러나 사용자와의 인터렉션을 요구하는 자바스크립트 파일이 브라우저상에 다운로드되기 전까지 사용자는 어떠한 행위도 수행할 수 없어, TTV(Time To View)와 TTI(Time To Interaction) 사이의 공백 시간이 존재하게 됩니다.

CSR (Client Side Rendering)

CSR

클라이언트 사이드 렌더링(CSR)이란, 서버로부터 비어 있는 HTML 파일을 전달 받아 클라이언트 측에서 렌더링하고 자바스크립트 파일을 Hydration 하는 방식을 말합니다. HTML 파일을 렌더링하기까지 사용자가 화면을 볼 수 없다는 단점이 있지만 화면을 볼 수 있는 동시에 인터렉션을 수행할 수 있습니다.

Hydration
HTML 파일과 자바스크립트 코드를 연결하는 과정 혹은 각 DOM 요소에 이벤트 리스너를 연결하는 과정

이렇듯, SSR과 CSR 방식은 어느 곳에서 HTML 파일을 렌더링하는 지에 따라 나뉘게 됩니다. 또 그에 따라 발생하는 장단점이 존재하게 되고, 어떤 경우에 어떤 렌더링 방식을 적용하는 것이 더 효율적인지 알아 보겠습니다.

SSR 장단점

장점
- 서버로부터 pre-rendering된 HTML 파일을 전달받기 때문에 검색 엔진 최적화(SEO)에 용이
- 초기 로딩 속도가 빠름
단점
- 사용자가 페이지를 볼 수 있는 시간과 인터렉션할 수 있는 시간 사이의 공백이 존재하여 사용자가 불편함 호소
- 페이지 이동 시, 서버 측에서 HTML 파일을 다시 렌더링하기 때문에 초기 로딩 속도를 제외한 나머지 로딩 속도는 느림
- CSR 방식보다 서버의 부하가 큼

SEO (검색 엔진 최적화)
웹 사이트를 검색 엔진에 잘 노출되도록 하는 작업
HTML 문서의 head 태그와 meta 태그에 등록된 데이터를 통해 검색 엔진에 노출될 수 있다.

CSR 장단점

장점
- 페이지 이동 시, 필요한 데이터만 전달받아 렌더링하기 때문에 초기 로딩 시간을 제외한 나머지 로딩 시간이 빠름
- 사용자는 페이지를 볼 수 있는 동시에 인터렉션이 가능
- 서버는 비어 있는 HTML 파일만 전달하기 때문에 서버의 부하가 적음
단점
- 서버로부터 비어있는 HTML 파일을 전달받기 때문에 검색 엔진 최적화(SEO)에 취약
- 초기에는 비어있는 HTML 파일에 자바스크립트 파일을 적용하여 페이지를 렌더링하기 때문에 초기 로딩 속도가 느림

SSR, CSR. 언제 사용하면 좋을까?

SSR

페이지에 자주 바뀌는 데이터가 존재하는 경우
랜딩 페이지나 블로그와 같이 검색 엔진에 노출되어야 하는 경우

CSR

사용자와 높은 상호작용을 필요로 하는 경우
프로필 페이지와 같이 검색 엔진에 노출될 필요가 없는 경우

[프로그래머스] 두 큐 합 같게 만들기 C++ (Lv.2)

lheunoia — Mon, 15 May 2023 16:02:44 +0900

https://school.programmers.co.kr/learn/courses/30/lessons/118667

프로그래머스

코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.

programmers.co.kr

이번 문제는 2022 KAKAO TECH INTERNSHIP 문제였습니다.

글쓴이는 투 포인터를 사용하여 풀이했습니다.

문제 풀이

1. 두 큐의 모든 원소를 담을 v 벡터 선언

2. v 벡터에서 가리킬 queue1, queue2의 각 시작 지점과 끝 지점 선언 (queue1의 시작 지점: s1, queue1의 끝 지점: e1)

3. queue1, queue2의 각 모든 원소의 합을 담을 변수는 long long 타입으로 선언 (산술 오버플로우 발생 가능성)

4. sum1과 sum2를 비교하면서 원소를 더하거나 빼 나가기 ⭐️

5. answer <= size*2인 동안에 두 큐의 합이 같으면 answer 반환

‍ C++ 코드

#include <string>
#include <vector>

using namespace std;

int solution(vector<int> queue1, vector<int> queue2) {
    int answer = 0;
    vector<int> v;
    
    int s1 = 0;
    int e1 = queue1.size() - 1;
    int s2 = queue1.size();
    int e2 = queue1.size()*2 - 1;
    
    int size = queue1.size() * 2;
    long long sum1 = 0, sum2 = 0;
        
    for (int q1: queue1) {
        sum1 += q1;
        v.push_back(q1);
    }
    
    for (int q2: queue2) {
        sum2 += q2;
        v.push_back(q2);
    }

    // 위치가 원래대로 돌아오면 각 큐의 원소 합을 같게 만들 수 없음
    while (answer <= size * 2) {
        if (sum1 < sum2) {
            sum1 += v[(++e1) % size];
            sum2 -= v[(s2++) % size];
        } else if (sum1 > sum2) {
            sum1 -= v[(s1++) % size];
            sum2 += v[(++e2) % size];
        } else return answer; // 두 큐의 합이 같으면 answer 반환
        
        answer++;
    }
    
    return -1;
}

프로그래머스 - 결과 화면

[프로그래머스] [1차] 비밀지도 C++ (Lv.1)

lheunoia — Mon, 15 May 2023 15:47:48 +0900

https://school.programmers.co.kr/learn/courses/30/lessons/17681

프로그래머스

programmers.co.kr

이번 문제는 2018 KAKAO BLIND RECRUITMENT 문제였습니다.

문제 풀이

1. 두 지도의 각 가로열을 or 연산 (지도 중 어느 하나라도 1이면 전체 지도에서도 1이므로)

2. 1의 결과값을 소인수분해

2로 나누어 떨어지면 tmp += " "
2로 나누어 떨어지지 않으면 tmp += "#"

3. tmp 값 뒤집기

‍ C++ 코드

#include <string>
#include <vector>
#include <algorithm>

using namespace std;

vector<string> solution(int n, vector<int> arr1, vector<int> arr2) {
    vector<string> answer;
    
    for (int i=0; i<n; i++) {
        int num = arr1[i] | arr2[i];
        string tmp = "";
        
        while (tmp.length() != n) {
            if (num % 2 == 0) tmp += " ";
            else tmp += "#";
            
            num /= 2;
        }
        
        reverse(tmp.begin(), tmp.end());
        answer.push_back(tmp);
    }
    
    return answer;
}

프로그래머스 - 결과 화면

[프로그래머스] 메뉴 리뉴얼 C++ (Lv.2)

lheunoia — Thu, 11 May 2023 14:38:48 +0900

https://school.programmers.co.kr/learn/courses/30/lessons/72411

프로그래머스

programmers.co.kr

이번 문제는 2021 KAKAO BLIND RECRUITMENT 문제였습니다.

글쓴이는 DFS로 풀이했습니다.

문제 풀이

1. orders 벡터의 각 단품메뉴에 대해서 course 요소만큼의 코스요리의 메뉴 구성의 주문 횟수를 dfs를 통해 combination 맵에 누적 ⭐️

2. combination 맵에서 가장 많이 주문된 수를 maxCount 변수에 저장

3. maxCount가 2보다 크다면, combination 맵에서 maxCount와 같은 값을 가진 키를 answer 벡터에 삽입

4. for문이 종료된 후 answer 벡터 오름차순 정렬

‍ C++ 코드

#include <string>
#include <vector>
#include <map>
#include <algorithm>

using namespace std;

map<string, int> combination;

bool cmp(pair<string, int> &a, pair<string, int> &b) {
    return a.second > b.second;
}

// 각 order에 대해 조합의 수가 len인 단품메뉴 조합의 주문 개수 카운트
void dfs(string &order, int &len, string tmp, int idx) {
    if (tmp.length() == len) {
        combination[tmp]++; // 해당 조합의 주문 수++
        return;
    }
    
    for (int i=idx; i<order.length(); i++) {
        dfs(order, len, tmp + order[i], i + 1);
    }
}

vector<string> solution(vector<string> orders, vector<int> course) {
    vector<string> answer;
    
    for (int len: course) {
        for (string order: orders) {
            sort(order.begin(), order.end());
            dfs(order, len, "", 0);   
        }
        
        int maxCount = 0; // 가장 많이 주문된 수
        for (auto it: combination) {
            maxCount = max(maxCount, it.second);
        }
        
        for (auto it: combination) {
            if (maxCount < 2) break;
            else if (combination[it.first] == maxCount) answer.push_back(it.first);
        }
        
        combination.clear(); // 다음 단품메뉴의 개수의 연산을 위해 clear
    }
    
    sort(answer.begin(), answer.end());
    return answer;
}

프로그래머스 - 결과 화면

[프로그래머스] 순위 검색 C++ (Lv.2)

lheunoia — Tue, 9 May 2023 01:18:30 +0900

https://school.programmers.co.kr/learn/courses/30/lessons/72412

프로그래머스

programmers.co.kr

이번 문제는 2021 KAKAO BLIND RECRUITMENT 문제였습니다.

문제 풀이

1. info 배열의 각 원소의 값을 stringstream으로 공백을 제거하고 코딩테스트 점수를 제외한 값은 tmp[i][0]에 삽입

tmp 벡터는 [['java', '-'], ['backend', '-'], ['junior', '-'], ['pizza', '-']] 와 같은 형태

2. scores 맵에 tmp 벡터에서 발생할 수 있는 모든 query를 키로 하여 코딩테스트 점수를 저장 ⭐️

3. scores 맵의 각 키에 대해 코딩테스트 점수를 오름차순 정렬

4. query 벡터의 각 문의조건에 대해 "and"를 제외한 [조건]을 key 변수에 저장

5. lower_bound 함수를 사용하여 scores[key]에서 코딩테스트 점수가 score 이상인 사람의 수를 찾아서 answer 벡터에 삽입

‍ C++ 코드

#include <string>
#include <vector>
#include <sstream>
#include <algorithm>
#include <map>

using namespace std;

map<string, vector<int>> scores; // 각 query에 대한 코딩테스트 점수를 담은 객체

// 각 info에 대해 가능한 모든 query에 코딩테스트 점수 저장
void storeScore(vector<vector<string>> &tmp, int score) {
    string c1, c2, c3, c4;
    
    for (int i=0; i<2; i++) {
        c1 = tmp[0][i];
        for (int j=0; j<2; j++) {
            c2 = tmp[1][j];
            for (int k=0; k<2; k++) {
                c3 = tmp[2][k];
                for (int l=0; l<2; l++) {
                    c4 = tmp[3][l];
                    scores[c1 + c2 + c3 + c4].push_back(score);
                }
            }
        }
    }
}

vector<int> solution(vector<string> info, vector<string> query) {
    vector<int> answer;
    vector<vector<string>> tmp(4, vector<string>(2, "-"));
    
    for (int i=0; i<info.size(); i++) {
        string s;
        int idx = 0, score = 0;
        
        stringstream ss(info[i]);
        
        while (ss >> s) {
            if (idx < 4) tmp[idx++][0] = s;
            else score = stoi(s);
        }
        
        storeScore(tmp, score);
    }
    
    // 코딩테스트 점수 오름차순 정렬
    for (auto it: scores) {
        sort(scores[it.first].begin(), scores[it.first].end());
    }
    
    for (string q: query) {
        string s, key = "";
        int idx = 0, score = 0;
        
        stringstream ss(q);
        
        while (ss >> s) {
            if (s == "and") continue;
            
            if (idx < 4) {
                key += s;
                idx++;
            } else {
                score = stoi(s);
            }
        }
        
        auto it = lower_bound(scores[key].begin(), scores[key].end(), score);
        answer.push_back(scores[key].size() - (it - scores[key].begin()));
    }
    
    return answer;
}

프로그래머스 - 결과 화면

[AWS] 웹 어플리케이션 배포하기 (EC2)

lheunoia — Wed, 3 May 2023 00:43:24 +0900

안녕하세요. 이번 포스트에서는 AWS 배포를 위해 EC2를 생성하는 방법과 실제 프로젝트에서 서버를 실행하고 배포하는 방법에 대해 포스팅하겠습니다.

EC2 생성하기

1. AWS 사이트 접속 후 회원가입

https://ap-northeast-2.console.aws.amazon.com/console/home?region=ap-northeast-2

ap-northeast-2.console.aws.amazon.com

2. 지역 > 아시아 태평양(서울)으로 변경

3. EC2 > 인스턴스 시작

4. 서버 선택

본 프로젝트에서는 Ubuntu 서버를 선택했습니다.

5. 인스턴스 유형 선택

'프리티어 사용 가능'이라고 쓰여 있는 인스턴스는 무료로 사용할 수 있습니다.

6. HTTP, HTTPS 허용

네트워크 설정에서 HTTP와 HTTPS 트래픽을 허용합니다.

IP가 0.0.0.0 이면 모든 IP에서 접근 가능합니다. SSH(개발 환경 터미널)는 집의 IP로 변경하여 해커들이 접근하지 못하도록 방지하는 것이 좋습니다.

7. 키 페어 생성

인스턴스에 접속하기 위해 키 페어를 생성합니다.

인스턴스 키 페어는 .pem 형태로, 이 파일이 있어야 EC2 인스턴스에 접근이 가능합니다.

생성하려는 키 페어의 이름을 입력하고 다운로드합니다. 키 페어가 다운로드되었으면 [인스턴스 시작] 버튼을 클릭하여 인스턴스를 시작합니다.

⭐️ 키 페어 파일을 프로젝트에 추가하기

다운로드된 키 페어 파일을 프로젝트의 루트 경로에 추가 후 깃허브에 노출되지 않도록 .gitignore에 키 페어 이름.pem을 추가합니다.

8. 인스턴스 시작

인스턴스 상태가 실행 중인지 확인합니다.

EC2 인스턴스에 프로젝트 연결하기

1. EC2 서버에 접속

연결하려는 인스턴스를 선택하고 [연결] 버튼을 클릭합니다.

SSH 클라이언트

[SSH 클라이언트] 탭을 클릭한 후 하단의 ssh로 시작하는 텍스트를 복사합니다.

개발 환경 플랫폼(글쓴이의 경우 VScode)으로 돌아가서 터미널에 접속합니다.

키 페어 파일이 들어있는 경로(루트 경로)에서 위에서 복사한 텍스트를 붙여넣기 하고 Enter 키를 누릅니다.

그러면 Are you sure you want to continue connecting (yes/no/[fingerprint])? 문장이 나오는데 이 때 yes를 입력합니다.

Enter 키를 누르면 원격의 EC2 서버에 접속할 수 있게 됩니다.

2. EC2 서버에 해당 프로젝트의 깃허브 주소 연결

EC2 서버에 정상적으로 접속되면 터미널의 경로가 로컬이 아닌 ubuntu@ 경로가 됩니다. (선택한 서버에 따라 다릅니다.)

git clone https://github.com/<사용자명>/<레포지토리명>

해당 인스턴스에 연결하려는 프로젝트의 깃허브 레포지토리 주소를 ubuntu@ 경로에 클론합니다.

3. EC2 서버에 의존성 패키치 설치하기

+ 깃허브 레포지토리에 변경사항이 있으면 git pull 명령어를 수행합니다. (EC2 서버에서는 깃허브의 변경사항을 알지 못하기 때문)

root@ 경로에서는 git pull
ubuntu@ 경로에서는 sudo git pull

cd back

배포하려는 서버의 루트 폴더로 이동합니다. (백엔드 서버를 배포하려면 백엔드 루트 폴더로 이동합니다.)

node 버전 확인

node -v

현재 경로에 node가 없다면 node를 설치합니다.

ubuntu@ 경로에 node 설치하기

sudo apt-get update
sudo apt-get install -y build-essential
sudo apt-get install curl
curl -sL https://deb.nodesource.com/setup_10.x | sudo -E bash --
sudo apt-get install -y nodejs

위 명령어들을 순차적으로 입력하여 ubuntu@ 경로에 node를 설치합니다.

node -v
npm -v

node가 정상적으로 설치되었는지 확인합니다.

ubuntu@ 경로에 의존성 패키지 설치하기

npm i

위 명령어를 실행하여 back 폴더의 package.json에 포함된 의존성 패키지들을 ubuntu@ 경로에 일괄적으로 설치합니다.

여기까지는 프론트 서버와 백엔드 서버 모두 동일하게 진행해 주시면 됩니다.

‍ EC2 서버에서 프론트 서버 실행하기

1. 백엔드 url 수정

인스턴스의 IPv4는 주기적으로 변하기 때문에 ubuntu@ 서버에 연결할 때 필요한 주소가 고정적이지 않습니다. (탄력적 IP를 사용하면 유료로 고정적인 IP를 사용할 수 있습니다.) 프론트 서버를 배포하기 전에 개발 시 사용하던 백엔드 url ➡️ back 인스턴스의 IP로 변경해야 합니다. (백엔드 서버를 배포하기 전에도 front 인스턴스 IP를 origin url에 추가해주어야 합니다.)

2. 포트 번호 80으로 수정

"scripts": {
    "dev": "next dev -p 3060",
    "build": "ANALYZE=true NODE_ENV=production next build",
    "start": "NODE_ENV=production next start -p 80"
  },

포트번호를 3060 ➡️ 80으로 변경합니다. (80: EC2 생성 당시 네트워크 설정에서 허용한 포트 번호)

변경 사항을 깃허브에 push 합니다.

3. 프론트 원격 서버 접속

cd front

로컬 경로(C:)에서 front 인스턴스의 주소를 입력하여 프론트 원격 서버로 접속합니다. 프론트 서버를 실행해야 하기 때문에 프론트 루트 폴더 경로로 이동합니다. git pull 명령어를 입력하여 깃허브의 변경사항들을 내려 받습니다.

4. 프론트 서버 실행

npm run build
npm run start

Ubuntu 서버에서 프론트 서버를 실행합니다.

해당 인스턴스의 IPv4 주소:허용된 포트 번호를 주소창에 입력하여 프론트 서버가 정상적으로 동작하는지 확인해 보세요!

CI/CD 툴이나 docker를 사용하면 여러 개의 명령어를 한번에 실행할 수 있습니다. ~~(더 찾아보기)~~

‍ EC2 서버에서 백엔드 서버 실행하기

1. mysql 설치

wget -c https://repo.mysql.com//mysql-apt-config_0.8.13-1_all.deb
sudo dpkg -i mysql-apt-config_0.8.13-1_all.deb
sudo apt update
sudo apt-get install mysql-server

먼저 ubuntu@ 경로의 back 폴더에서 mysql을 설치합니다. (암호는 strong이 권장됩니다.)

2. root 경로에서 mysql 암호 설정

mysql_secure_installation

sudo su를 입력하여 root@ 경로로 전환한 뒤, 위 명령어를 입력해 줍니다. (반드시 root@ 경로에서 진행)

암호는 strong으로 설정하고 나머지 응답에는 y(yes)를 입력합니다.

mysql -uroot -p

root@ 경로에서 위 명령어를 입력하면 비밀번호를 입력하라는 문구가 뜹니다. 위에서 설정한 비밀번호를 입력하면 mysql 경로로 이동됩니다.

ALTER USER 'root'@'localhost' IDENTIFIED WITH mysql_native_password BY '설정한 암호'

mysql 경로에서 위 명령어를 입력하여 실제 암호를 설정한 암호로 변경해 줍니다.

mysql 경로에서 빠져 나오는 명령어는 exit; 입니다.

3. 실행 전 몇 가지 설정

app.js 파일 수정

// 1.
app.use(cors({
  origin: ['http://localhost:3060', 'http://52.79.157.220'], // front IP 추가
  credentials: true
}));

// 2.
app.listen(80, () => { // 3065 -> 80(허용된 포트 번호)으로 변경
  console.log('서버 실행 중!');
}

1. app.js 파일의 cors 설정에서 origin url에 front 인스턴스의 IP 주소를 추가하여 cors 에러를 방지합니다.

2. 백엔드 서버의 포트 번호를 인스턴스에서 허용된 포트 번호로 변경해 줍니다. 허용된 포트 번호는 EC2를 생성할 때 네트워크 설정 탭에서 확인할 수 있습니다.

서버 실행 명령어 추가

"scripts": {
  "dev": "nodemon app", // 개발 모드
  "start": "node app" // 배포 모드
}

back/package.json 파일의 scripts에 배포 모드 실행 명령어를 추가합니다.

(변경 사항이 있으므로 변경 사항을 깃허브에 push하고 git pull 해주어야 합니다.)

.env 파일 추가

vim .env

환경 변수가 작성된 .env 파일은 깃허브에 업로드되지 않기 때문에 root@ 경로에 따로 추가해주어야 합니다. back/.env와 동일하게 입력 후 :wq를 입력하여 파일을 저장하고 나갑니다.

DB 생성

npx sequelize db:create

위 명령어를 입력하여 데이터베이스를 생성합니다. Database <DB 이름> created. 문구가 뜨면 성공적으로 생성이 된 것입니다.

4. 백엔드 서버 실행

npm start

위 명령어를 입력하여 백엔드 서버를 실행합니다. (ubuntu@ 경로에서는 80 포트를 허용하지 않기 때문에 sudo npm start)

해당 인스턴스의 IPv4 주소:허용된 포트 번호를 주소창에 입력하여 백엔드 서버가 정상적으로 동작하는지 확인해 보세요!

background process 사용하기: pm2

node는 foreground process이기 때문에 터미널이 종료되면 원격 서버도 함께 종료됩니다. 만약 실수로 원격으로 접속해 놓은 shell을 끄면(ubuntu@ 경로에서 exit; 명령어를 입력했거나 개발 환경 창을 종료한 경우) 로컬 경로(C:)로 돌아가고 원격에 접속해 있던 shell이 종료되기 때문에 원격 서버도 함께 종료됩니다. 하루종일 원격 서버에 접속해 두긴 어렵기 때문에 background process를 사용하면 shell의 종료 여부와 관계없이 원격 서버를 계속 실행할 수 있습니다. background process를 사용하는 방법 중 하나는 pm2 라이브러리를 사용하는 것입니다.

백엔드 서버에서 pm2 사용하기

1. pm2 설치

npm i pm2

먼저 ubuntu@ 경로의 back 폴더에서 pm2를 설치합니다.

2. 서버 실행 명령어 수정

back/package.json

"scripts": {
  "dev": "nodemon app",
  "start": "pm2 start app.js" // 이렇게 수정
}

start 명령어를 위와 같이 수정합니다.

3. pm2로 서버 실행

sudo npm start // 서버 실행
sudo npx pm2 monit // 서버 모니터링

ubuntu@ 경로에서 위 명령어를 순차적으로 입력하여 pm2로 실행되는지 확인합니다.

해당 인스턴스의 IPv4 주소:허용된 포트 번호를 주소창에 입력하여 백엔드 서버가 정상적으로 동작하는지 확인해 보세요!

+ node 보안 관련 설정하기 (권장)

node의 배포 모드에서 보안을 위한 몇 가지 설정이 필요합니다.

- morgan 설정

- hpp, helmet 패키지 설치

npm i pm2 helmet hpp

로컬 경로(C:)의 back 폴더 경로에서 필요한 패키지들을 설치합니다.

back/app.js

if (process.env.NODE_ENV === 'production') {
  app.use(morgan('combined')); // 자세한 로그 확인 (ex. 접속자의 IP)
  app.use(hpp()); // 보안을 위한 패키지
  app.use(helmet()); // 보안을 위한 패키지
} else {
  app.use(morgan('dev'));
}

app.js의 코드의 일부분입니다. 위와 같이 수정합니다.

sudo git pull
sudo npm i

변경 사항들을 깃허브에 push 하고 ubuntu@ 경로에서 sudo git pull 합니다. 새로운 패키지들을 설치했기 때문에 sudo npm i 명령어로 의존성 패키지들을 설치합니다.

Aborting error 발생 ➡️ git reset --hard

프론트 서버에서 pm2 사용하기

1. pm2 설치

npm i pm2

ubuntu@ 경로의 front 폴더에서 pm2를 설치합니다.

2. pm2로 서버 실행

npm run build (프론트 소스코드 변경될 때마다 실행)
npx pm2 start npm -- start

아래 명령어를 통해 pm2로 npm start 명령어를 실행할 수 있습니다.

pm2 명령어 (ubuntu@ 경로에서는 명령어 앞에 sudo 붙이기)
npx pm2 logs 로그 보기
npx pm2 logs --error 에러 로그 보기
npx pm2 list 실행 중인 서버 리스트 보기
npx pm2 reload all 모든 서버 재시작

도메인 연결하기

프론트 서버와 백엔드 서버의 인스턴스 IP 주소가 다르면 새로고침 시 로그인이 유지되지 않는 이슈가 발생하는데요. 개발자 도구의 네트워크 탭을 보면 요청 도메인과 응답 헤더의 도메인이 다릅니다. 이러한 경우에는 2가지 해결 방법이 있습니다.

1. 동일한 도메인으로 설정 (유료)

가비아와 같은 사이트에서 도메인을 구매하고 AWS에서 별도의 세팅을 통해 도메인 설정을 해줍니다.

2. 하나의 인스턴스로 관리 (무료)

두 서버를 하나의 서버에서 사용하여 쿠키가 공유되도록 합니다.

[HTTP] Cache-Control로 웹 서비스 캐시 다루기

lheunoia — Tue, 2 May 2023 01:15:07 +0900

웹 어플리케이션에서는 네트워크 요청을 통해 필요한 리소스들을 받아옵니다. 만약 다음 요청에서 응답받을 리소스가 이전 요청에서 응답받은 리소스와 동일할 경우, 동일한 리소스에 대한 네트워크 요청은 응답 시간을 지연시킬 뿐더러 불필요한 네트워크 요청으로 서버의 자원을 낭비하게 됩니다. 이러한 경우에 HTTP 캐싱을 활용하면 이전에 가져온 리소스들을 재사용함으로써 웹 어플리케이션의 성능을 현저하게 향상시킬 수 있습니다. HTTP 캐시를 효율적으로 관리하기 위해서는 Cach-Control 헤더를 섬세히 조절해야 합니다.

리소스(Resource)
HTTP 요청 대상으로, 텍스트, 이미지, 파일 등 식별 가능한 모든 자원을 말한다.

️ Cache-Control

웹 브라우저가 지금껏 요청한 적이 없는 리소스를 서버에서 가져오려고 할 때, 서버와 브라우저는 완전한 HTTP 요청/응답을 주고 받습니다. 이후 HTTP 응답에 포함된 Cache-Control 헤더에 따라 받은 리소스의 생명 주기가 결정됩니다.

Cache-Control 헤더 필드는 브라우저 및 공유 캐시(ex. proxies, CDNs)의 캐싱을 제어하는 요청 및 응답 모두에서 사용할 수 있습니다.

‍♀️ Response Directives

max-age

max-age는 브라우저에 캐시되는 유효 기간을 나타냅니다. max-age=N은 응답이 생성된 후 N초까지 응답이 fresh 상태임을 의미합니다.

캐시의 유효 기간이 지나기 전: 재사용

max-age=59

Cache-Control 응답 헤더 값이 max-age=59이기 때문에 응답이 생성된 후 59초까지는 캐시된 응답을 재사용합니다.

캐시의 유효 기간이 지난 후: 재검증

304 Not Modified

캐시의 유효 기간이 지나면 브라우저는 서버에 캐시가 유효한 지에 대한 재검증 요청을 보냅니다. 재검증 결과 브라우저의 캐시가 유효하다면 서버는 [304 Not Modified] 응답을 내려줍니다. [304 Not Modified] 응답은 HTTP 본문을 포함하지 않기 때문에 빠른 응답을 받을 수 있습니다.

304 Not Modified

5.5KB 리소스의 캐시 검증을 위해 206B 사이즈만이 네트워크의 통신에 사용되었음을 알 수 있습니다.

재검증 결과 브라우저의 캐시가 유효하지 않다면 [200 OK] 또는 적합한 상태 코드를 본문과 함께 내려줍니다. 추가로 HTTP 요청을 보내지 않고도 최신값을 내려받을 수 있기 때문에 효율적입니다.

s-maxage

s-maxage는 CDN(클라이언트와 서버의 중간 서버)에 캐시되는 유효 기간을 나타냅니다.

max-age와 유사하지만 s-maxage는 공유 캐시에만 적용되며 max-age가 존재하는 경우 max-age를 무시합니다.

no-cache

no-cache는 응답이 캐시에 저장될 수 있음을 나타내지만, 캐시를 재사용하기 전에 원본 서버에서 응답의 유효성을 검사해야 합니다. 저장된 콘텐츠를 재사용하는 동안 캐시가 항상 콘텐츠의 업데이트 여부를 확인하도록 할 때 유용하게 사용할 수 있습니다.

no-store

no-store은 어떤 종류의 캐시(private 또는 shared)도 이 응답을 저장하지 않아야 함을 나타냅니다. 응답을 캐시해서는 안 되는 리소스일 경우 사용합니다.

private

private은 응답이 개인 캐시(ex. 브라우저의 로컬 캐시)에만 저장될 수 있음을 나타냅니다.

개인화된 콘텐츠, 특히 로그인 후 수신된 응답과 쿠키를 통해 관리되는 세션에 대해 private을 추가해야 합니다. 이를 잊은 경우 해당 응답이 공유 캐시에 저장되어 여러 사용자로 인해 재사용될 수 있으며, 이로 인해 개인 정보가 유출될 수 있습니다.

public

public은 응답이 공유 캐시에 저장될 수 있음을 나타냅니다.

인증 헤더 필드에 있는 요청에 대한 응답은 공유 캐시에 저장해서는 안 됩니다. public은 이러한 응답을 공유 캐시에 저장되도록 합니다.

예제

Cache-Control: public, max-age=604800

s-maxage 또는 must-revalidate는 위의 규정을 해제합니다. 요청에 인증 헤더가 없거나 이미 응답에서 s-maxage 또는 must-revalidate를 사용하고 있다면 public을 사용할 필요가 없습니다.

must-revalidate

must-revalidate는 응답을 캐시에 저장할 수 있으며 캐시가 신선한 동안 응답을 재사용할 수 있음을 나타냅니다. 응답이 오래된 경우, 재사용하기 전에 원본 서버에서 유효성을 검사해야 합니다. 일반적으로 max-age와 함께 사용합니다.

예제

Cache-Control: max-age=604800, must-revalidate

HTTP는 원본 서버와의 연결이 끊어졌을 때 캐시에서 오래된 응답을 재사용하는 것을 허용합니다. must-revalidate는 이러한 해프닝을 방지하는 방법입니다. 저장된 응답이 원본 서버로 재검증되거나 504(Gateway Timeout) 응답이 생성됩니다.

stale-while-revalidate

stale-while-revalidate는 캐시에 대한 유효성을 재검증하는 동안 오래된 응답을 재사용할 수 있음을 나타냅니다.

예제

Cache-Control: max-age=604800, stale-while-revalidate=86400

위의 예제에서는 응답이 7일(604800s) 동안 신선합니다. 7일 후에는 오래되지만 백그라운드에서 응답을 재검증하는 경우 다음 날(86400s) 어떤 요청에 대해서든 캐시가 재사용될 수 있습니다 . 유효성 재확인은 캐시를 다시 최신 상태로 만들어 클라이언트에게 해당 기간 동안 항상 최신 상태인 것처럼 보이게 하여 재확인으로 인한 대기 시간 페널티를 효과적으로 숨깁니다. 해당 기간 동안 요청이 발생하지 않으면 캐시가 오래되어 다음 요청이 정상적으로 재검증됩니다.

[프로그래머스] 크레인 인형뽑기 게임 C++ (Lv.1)

lheunoia — Mon, 1 May 2023 23:37:52 +0900

https://school.programmers.co.kr/learn/courses/30/lessons/64061

프로그래머스

programmers.co.kr

이번 문제는 2019 카카오 개발자 겨울 인턴십 문제였습니다.

문제 풀이

1. 각 위치에서 가장 위에 있는 인형의 좌표를 담을 doll 벡터 선언

vector<pair<int, int>> doll(board[0].size() + 1, {-1, -1}); ⬅️ 위치는 1부터 시작하므로 board[0].size() + 1

2. 각 위치에서 가장 위에 있는 인형의 좌표 담기 (빈 칸이 아니면 인형이 들어있는 칸) ⭐️

3. moves 벡터의 각 위치에 대해 가장 위에 있는 인형과 바구니에 담긴 인형(stack.top())이 같은 모양의 인형이면 answer += 2

4. 각 위치의 가장 위에 있는 인형의 좌표를 뽑은 인형의 아래 칸 좌표로 갱신

‍ C++ 코드

#include <string>
#include <vector>
#include <stack>

using namespace std;

int solution(vector<vector<int>> board, vector<int> moves) {
    int answer = 0;
    stack<int> s;
    vector<pair<int, int>> doll(board[0].size() + 1, {-1, -1});
    
    // 각 위치에서 가장 위에 있는 인형의 좌표 담기
    for (int i=0; i<board[0].size(); i++) {
        for (int j=0; j<board.size(); j++) {
            if (board[j][i] != 0) {
                doll[i + 1] = {j, i};
                break;
            }        
        }
    }
    
    for (int m: moves) {
        // 인형이 없는 곳에서는 아무런 일도 일어나지 않음
        if (doll[m].first == -1) continue;
        
        // 바구니에 담긴 인형과 같은 모양의 인형이면 두 인형은 터트려짐
        if (!s.empty() && s.top() == board[doll[m].first][doll[m].second]) {
            answer += 2;
            s.pop();
        } else {
            s.push(board[doll[m].first][doll[m].second]);
        }
        
        // 가장 아래 칸이 아니면 아래 칸의 인형의 좌표 담기
        if (doll[m].first < board.size() - 1) doll[m] = {doll[m].first + 1, doll[m].second};
        else doll[m] = {-1, -1}; // 가장 아래 칸이면 더 이상 집을 인형이 없음
    }
    
    return answer;
}

프로그래머스 - 결과 화면

[프로그래머스] 키패드 누르기 C++ (Lv.1)

lheunoia — Mon, 1 May 2023 23:14:39 +0900

https://school.programmers.co.kr/learn/courses/30/lessons/67256

프로그래머스

programmers.co.kr

이번 문제는 2020 카카오 인턴십 문제였습니다.

문제 풀이

⭐️ * ➡️ 10, 0 ➡️ 11, # ➡️ 12로 생각하기

1. 맨 처음 왼손 엄지손가락 위치를 10, 오른손 엄지손가락 위치를 12로 초기화

2. 누를 번호 1, 4, 7 ➡️ 왼손 엄지손가락으로 입력

3. 누를 번호 3, 6, 9 ➡️ 오른손 엄지손가락으로 입력

4. 누를 번호 2, 5, 8, 0 ➡️ 왼손 엄지손가락과의 거리와 오른손 엄지손가락과의 거리 비교

‍♀️ 거리가 다르다면 누를 번호와 더 가까운 엄지손가락을 사용

거리 계산: | (엄지손가락 위치 - 누를 번호) / 3 | + | (엄지손가락 위치 - 누를 번호) % 3 |

거리가 같다면 hand에 따라 키패드 누르기

‍ C++ 코드

#include <string>
#include <vector>

using namespace std;

string solution(vector<int> numbers, string hand) {
    string answer = "";
    int lefthand = 10;
    int righthand = 12;
    
    for (int number: numbers) {
        if (number == 1 || number == 4 || number == 7) {
            answer += 'L';
            lefthand = number;
        }
        
        else if (number == 3 || number == 6 || number == 9) {
            answer += 'R';
            righthand = number;
        }
        
        else {
            if (number == 0) number = 11;
            
            int leftDistance = abs((lefthand - number) / 3) + abs((lefthand - number) % 3);
            int rightDistance = abs((righthand - number) / 3) + abs((righthand - number) % 3);
            
            if (leftDistance < rightDistance) {
                answer += 'L';
                lefthand = number;
            } else if (leftDistance == rightDistance) {
                if (hand == "left") {
                    answer += 'L';
                    lefthand = number;
                } else {
                    answer += 'R';
                    righthand = number;
                }
            } else {
                answer += 'R';
                righthand = number;
            }
        }
    }
    
    return answer;
}

프로그래머스 - 결과 화면

[Next.js] SSR 페이지에서 session pre-fetch 하기 (next-auth)

lheunoia — Mon, 1 May 2023 01:41:48 +0900

Groom Blog Logo

현재(2023.04.30) Next.js 프레임워크를 사용하여 블로그를 개발 중에 있습니다. 블로그에서의 사용자 인증은 next-auth 라이브러리로 구현했습니다. next-auth 라이브러리에서 제공하는 NextAuth는 로그인 시 signIn 메소드를 통해 사용자의 정보를 session에 저장하기 때문에 사용자의 정보를 가져오거나 로그인/로그아웃 상태를 판별할 때 session을 사용하면 편리합니다. 이번 포스트에서는 Next.js 페이지에 적용한 렌더링 방식과 그 렌더링 방식에서 session을 pre-fetch하는 방법에 대해 알아 보겠습니다.

Why SSG -> SSR?

Next.js 공식 문서 > Pages

Next.js 공식 문서에서는 "성능 상의 이유로 서버 측 렌더링을 통한 정적 생성 방식을 사용하는 것을 권장한다. 정적으로 생성된 페이지는 성능 향상을 위해 별도의 구성 없이 CDN에 의해 캐시될 수 있으나 Server-side Rendering 방식이 유일한 옵션일 수 있다."고 설명합니다. 글쓴이의 경우, 개발 중인 공유 블로그의 성향과 기존 방식(SSG)의 제약 사항때문에 SSR 방식을 선택했습니다.

1. 공유 블로그의 성향

개발 중인 블로그는 개인 블로그가 아닌, velog와 같이 여러 사람이 함께 사용할 수 있도록 만든 블로그입니다. 여러 사용자들이 함께 사용하는 블로그이니 만큼 페이지마다 데이터의 변화가 잦고, 블로그의 특성상 검색 엔진 최적화(SEO)를 요구합니다.

2. 기존 방식(SSG)의 문제점

getStaticProps 함수의 context 파라미터에는 req 속성이 존재하지 않기 때문에 session을 pre-fetch 할 수 없습니다.

session을 pre-fetch하지 못해 발생하는 문제는 아래와 같습니다.

1. 페이지 재요청마다 사용자 관련 데이터를 포함한 컴포넌트가 깜빡인다.

➡️ 사용자의 경험을 감소시킨다.

2. 페이지 재요청마다 session을 서버에 요청힌다.

➡️ 불필요한 리소스 요청으로 서버의 성능을 저하시킨다.

session API

SSR 방식에서 session pre-fetch 하기

getServerSideProps 함수의 context 파라미터에는 req 속성이 존재하기 때문에 session을 pre-fetch 할 수 있습니다!

1. getSession 메소드로 session pre-fetch

pages/index.tsx

import { GetServerSideProps } from 'next';
import { getSession } from 'next-auth/react';
import { dehydrate, QueryClient } from '@tanstack/react-query';

import getUserWithEmail from '../apis/user/getUserWithEmail';

const Home = () => {
	// 생략...
};

// Home 컴포넌트보다 먼저 실행
export const getServerSideProps: GetServerSideProps = async (context) => {
  const session = await getSession(context);
  const email = session ? session.user.email : null;

  const queryClient = new QueryClient();
  context.res.setHeader('Cache-Control', 'public, max-age=59');

  // 유저 정보를 캐시
  await queryClient.prefetchQuery(['user', email], () => getUserWithEmail(email));

  return {
    props: {
      session,
      dehydratedState: dehydrate(queryClient),
    },
  };
};

next-auth/react 라이브러리의 getSession 메소드를 통해 session을 응답받고, session.user.email을 query key로 하여 유저 정보를 캐시합니다. (Home 컴포넌트를 포함한 자식 컴포넌트에서 StaleTime 이내에 동일한 쿼리를 참조했을 경우, 캐시된 유저 정보를 응답받기 위해) 응답받은 session과 queryClient를 반환하여 최상위 페이지(_app.ts) props로 전달합니다.

2. 자식 컴포넌트에 session 내려주기

pages/_app.tsx

import React, { useEffect, useState } from 'react';
import Head from 'next/head';
import { SessionProvider } from 'next-auth/react';
import { RecoilRoot } from 'recoil';
import { QueryClientProvider, QueryClient, Hydrate } from '@tanstack/react-query';

const App = ({ Component, pageProps: { session, ...pageProps } }) => {
  const [queryClient] = useState(() => new QueryClient());
	
  // 콘솔에 session이 잘 찍히는지 확인해 보세요.
  console.log('session', session);

  return (
    <>
      <SessionProvider session={session}> // Component 컴포넌트에 session 내려줌
        <QueryClientProvider client={queryClient}>
          <Hydrate state={pageProps.dehydratedState}>
            <RecoilRoot>
                <Head>
                  <title>Groom</title>
                </Head>
                <Component {...pageProps} /> // pre-fetch된 session 사용 가능
            </RecoilRoot>
          </Hydrate>
        </QueryClientProvider>
      </SessionProvider>
    </>
  );
};

export default App;

페이지 컴포넌트에서 전달한 session을 SessionProvider 컴포넌트의 session 속성에 전달합니다. 그러면 SessionProvider로 감싼 Component 컴포넌트 중 session을 전달한 컴포넌트를 포함한 하위 컴포넌트에서 pre-fetch된 session을 사용할 수 있습니다.

3. useSession 훅으로 session 사용하기

components/main/UserProfile.tsx

import React, { useEffect } from 'react';
import { useSession, signOut } from 'next-auth/react';\

import { useGetUser, useGetUserWithEmail } from '../../hooks/query/user';
import SkeletonUserProfile from '../skeleton/SkeletonUserProfile';
import * as S from '../../styles/ts/components/main/UserProfile';

const UserProfile = () => {
  const { data: session } = useSession(); // pre-fetch된 session
  
  // 캐시된 유저 정보가 존재하므로 서버에 요청하지 않음
  const { data: user, isLoading } = session ? useGetUserWithEmail(session.user.email) : useGetUser();

  useEffect(() => {
    if (session?.user === null) {
      alert('세션이 만료되었습니다.');
      signOut({ redirect: false });
    }
  }, [session]);

  return (
   <S.UserProfileWrapper>
      {isLoading ? ( // 캐시된 유저 정보가 있으므로 isLoading: false
        <SkeletonUserProfile />
      ) : (
        // 생략...
      )}
    </S.UserProfileWrapper>
  );
};

export default UserProfile;

session을 전달한 컴포넌트를 포함한 하위 컴포넌트에서 useSession 훅을 사용하면 pre-fetch된 session을 사용할 수 있습니다. index.tsx에서 getUserWithEmail 함수를 호출하여 유저 정보를 캐시해 놓았고, ['user', email] 쿼리 키의 staleTime을 infinity로 설정해 두었기 때문에 index 페이지를 재요청해도(새로고침해도) 유저 정보를 새로 불러오지 않고, 캐시한 데이터를 재사용합니다.

4. 결과

캐시한 데이터를 재사용하기 때문에 컴포넌트가 깜빡임없이 동작합니다.

기존 방식 (SSG) - 페이지 재요청 시 서버에 유저 정보 요청

SSG

수정한 방식 (SSR) - 페이지 재요청 시 캐시된 유저 정보 재사용

SSR

React Query 사용하지 않는 경우

+ session 속성 재정의하기

react-query 라이브러리를 사용하지 않는다면 오로지 session을 통해서만 유저 정보를 얻을 수도 있습니다.

session 객체

기존 session의 user 객체에는 email, name 속성만 존재하기 때문에 User 모델에 정의되어 있는 속성을 사용하려면 몇 가지 설정을 해주어야 합니다.

1. interface 키워드를 통해 Session 객체 확장

@types/next-auth.d.ts

import NextAuth from 'next-auth';
import { PostItem, UserType } from '../types';

// session.user 속성 재정의
declare module 'next-auth' {
  interface Session {
    user: {
      id: number;
      email: string;
      name: string;
      imageUrl: string;
      posts: PostItem[];
      neighbors: UserType[];
    };
  }
}

@types 폴더 안에 next-auth.d.ts 이름의 파일을 생성한 후 위와 같이 코드를 작성합니다. User 모델의 속성 중 사용하려는 속성을 작성하여 Session의 user 객체를 선언적으로 확장합니다. (interface의 선언적 확장은 여기에서 확인해 보세요!)

2. 로그인된 유저의 정보 가져오기

pages/api/auth/[...nextauth].ts

import NextAuth from 'next-auth';
import prisma from '../../../lib/prisma';

export default NextAuth({
  providers: [
    // 생략...
  ],
  callbacks: {
    async session({ session }) {
    // 데이터베이스에서 유저의 정보 가져오기
      const user = await prisma.user.findUnique({
        where: { email: session.user?.email },
        select: {
          id: true,
          email: true,
          name: true,
          imageUrl: true,
          posts: {
            select: {
              id: true,
              title: true,
              category: {
                select: {
                  name: true,
                },
              },
              isPublic: true,
              allowComments: true,
            },
          },
          neighbors: {
            select: {
              id: true,
            },
          },
        },
      });

      session.user = user;
      return session;
    },
  },
  secret: process.env.NEXTAUTH_SECRET,
});

위와 같이 session 콜백 함수를 추가하면 session 콜백 함수가 호출될 때마다 select한 속성을 포함한 유저의 정보를 가져옵니다.

session 콜백 함수가 호출되는 경우

/api/session endpoint 호출
useSession 사용 (only Client Side)
getSession 사용 (only Client Side)

3. 재정의된 속성이 추가된 session.user

재정의된 session.user

session을 콘솔에 출력하여 재정의된 속성이 추가되어 잘 나타나는지 확인해 보세요!

이제 session 객체만으로 유저의 정보를 사용할 수 있습니다.

개선할 점

SSR 방식에서 session을 pre-fetch하여 기존의 문제점들을 해결했으나 속도가 느린 이슈가 존재합니다.

SSG 방식에서의 index.json 로드

SSG - index.json

SSR 방식에서의 index.json 로드

SSR - index.json

두 방식의 Waiting for server response를 비교해보면 SSG 방식이 SSR 방식보다 약 416배 빠른 것을 알 수 있습니다. SSR 방식에서는 Cache-Control 속성을 설정하여 캐시의 유효 기간을 설정할 수 있는데요. 현재는 max-age=59로 설정해 두었기 때문에 59초 이내의 요청에 대해서는 캐시된 HTML 파일을 재사용합니다.

59초 이내 요청의 경우

SSR - from disk cache

59초 내에 페이지를 재요청하면 memory 또는 disk에 캐시된 데이터를 곧바로 내려주기 때문에 훨씬 빠른 응답을 받을 수 있습니다.

다음 포스터에서는 Cache-Control에 대해 자세히 다루어 보도록 하겠습니다.