프로젝트 - 서버사이드 렌더링을 줄여야 하는 이유

오늘 수업에서 서버사이드 렌더링을 줄이는 것에 대해서 튜터님이 얘기해주시고, 

튜터님의 클라이언트 사이드 렌더링 코드 (Flask로 되어 있는 걸 람다 함수 기반으로 바꿨다)를 공유해주셨다. 

 

서버리스 Lambda를 하게 되면, 백엔드만 따로 배포되는 구조이기 때문에 프론트엔드와 백엔드가 독립적이여야 한다. 

lambda는 API 가 따로 독립적으로 배포되기 때문에 서로 의존(coupling)이 되어 있으면 안된다. 

그렇기 때문에 서버리스 수업 내내 진자 같은 서버사이드 렌더링을 걷어내고, jquery 등을 사용해서 api 화 하는 것을 강조하셨다. 

ssr 이 들어가면 코드가 지저분해지는 경향이 있고 관리도 어렵다. 

 

우리 팀은 서버사이드 렌더링이 많고, 변수가 html 을 이동하면서 데이터가 쌓이는 방식이었다. 

우리는 추천 서비스이기 때문에 사용자가 질문에 응답을 해야했는데, 그 응답 데이터를 서버에 넘겨서 파이썬 인스턴스 형태로 서버 메모리에 저장하는 방식이었다. 그리고 API가 저장된 데이터를 받아서 사용한다. 

이런 방식으로는 두 명이 동시 접속시 서버가 제대로 돌지 않는 문제가 있었다. 

 

성우님이 튜터님께 이 질문을 드렸을 때, 코드 성격의 데이터들은 메모리에 올리지 말고 db에 올리라는 답변을 주셨다. 

2차 프로젝트 회의때도 주셨던 조언인데, 나름 DB화가 되어 있다고 생각했는데, 우리가 생각했던 DB화의 범위가 좁았던 것 같다. 

 

그래서 이걸 어떻게 바꿔야 할지 정말 막막했다. 

 

#

JWT 토큰

 

우리가 심화반 온라인강의에서 배웠던 로그인 방식은, Token_receive = request.cookies.get('mytoken') 와 같은 식으로 토큰을 cookie에 넣어주는 방식이었다. 

이 방식에는 문제가 있는데,

(1) 백엔드가 람다처럼 API 가 따로 들어가면 쿠키가 쉐어가 안되기 때문 

(2) 도메인(주소)가 다를 경우에도 쿠키가 쉐어가 안되기 때문이다. 

 

이를 보완할 수 있는 방식이, 쿠키를 local storage에 저장하는 방식이다. 실무에서는 로컬/세션 스토리지에 저장하는 것이 잦다. 검사 -> application 탭에 가보면, local storage 탭이 있다. 아래 코드를 쓰면 여기에 토큰이 쌓이게 된다. 

http header에 토큰이 전달 되기 때문에, 도메인에 종속되지 않고 아무 곳이나 보낼 수 있다.  (실제로 요즘에는 frontend 도메인과 백엔드 url이 다른 경우가 많다) 

                beforeSend: function (xhr) {
                    if (localStorage.getItem('token') != null) {
                        xhr.setRequestHeader('Authorization', localStorage.getItem('token'));
                    } else {
                        xhr.setRequestHeader('Authorization', 'anonymous');
                    }
                }

 

#

쿠키 vs local storage

 

위의 두 방식의 차이는 토큰을 직접 넣어주는 것 여부의 차이다. 

쿠키를 쓰려면, 도메인이 같아야 하고, 도메인이 달라지면 성립하지 않는다. 

로컬 스토리지에 있는 것은 서버로 전송하지 않는다. 반면, 쿠키는 서버로 전송이 된다. 

백엔드가 분리되서 다른 도메인이 될 경우에는, 쿠키가 전달이 안된다. 

 

 

# ajax setup에서는 공통 처리를 해주는데, 이러헥 해주면 모든 API 를 호출할 때 header에 authorization 키 값으로 토큰이 들어갈 수 있다. api 호출할 때마다 에러 처리를 넣어주면 코드가 길어지니까, 중복을 제거할 수 있다. 

$(document).ready(function () {
            $.ajaxSetup({
                error: function (jqXHR, exception) {
                    switch (jqXHR.status) {
                        case 401:
                            alert('인증 에러!!');
                            break;
                        case 423:
                            alert('중복된 id!!');
                            break;
                    }
                },
                beforeSend: function (xhr) {
                    if (localStorage.getItem('token') != null) {
                        xhr.setRequestHeader('Authorization', localStorage.getItem('token'));
                    } else {
                        xhr.setRequestHeader('Authorization', 'anonymous');
                    }
                }
            });

 

참고로 튜터님의 코드는 프론트는 로컬서버에서 돌리고 백엔드만 람다 함수로 동작한다.