[TIL] 기록 75일차

Today I Learned

• Express

express는 노드 위에서 동작하는 웹 개발 프레임워크이다. 가볍고 유연하게 웹 프레임워크를 구성할 수 있는 장점이 있는데 이것은 미들웨어 구조 때문에 가능한 것이다. 자바스크립트의 코드로 작성된 다양한 기능의 미들웨어는 개발자가 필요한 것만 선택하여 익스프레스와 결합하여 사용할 수 있다.

• SPA

SPA는 Client Side Rendering 방식으로 단 한번만 리소스(HTML, CSS, JavaScript)를 로딩하고, 그 후에는 데이터를 받아올때만 서버와 통신한다. 즉, 첫 요청시 딱 한페이지만 불러오고 페이지 이동시 기존 페이지의 내부를 수정해서 보여주는 방식. 클라이언트 관점에서 보면 최초 페이지를 로딩한 시점부터는 페이지 리로딩 없이 필요한 부분만 서버로부터 받아서 화면을 갱신하기 때문에 네이티브 앱에 가까운 자연스러운 페이지 이동과 UX를  제공할 수 있다.

1. Client가 서버에 초기 요청을 보내고 HTML을 보내줌
2. 그 후로는 AJAX를 통해 필요한 부분의 데이터만 JSON 형식으로 받음

장점

1. 자연스러운 UX
2. 필요한 리소스만 부분적으로 로딩(성능)
3. 서버의 템플릿 연산을 클라이언트로 분산(성능)
4. 컴포넌트별 개발 용이(생산성)
5. 모바일 앱 개발에 염두에 둔다면 동일한 API를 사용하도록 설계 가능(생산성)

단점

1. JavaScript 파일을 번들링해서 받기 때문에 초기 구동속도 느림(webpack의 code splitting으로 해결)
2. 검색엔진최적화(SEO)가 어려움 (SSR로 해결)
3. 보안 이슈(프론트엔드에 비즈니스로직 최소화)

• SSR

SSR은 페이지를 이동할 때마다 새로운 페이지를 요청. 모든 템플릿은 서버 연산을 통해 렌더링하고 완성된 페이지 형태로 응답.

1. Client가 GET Request를 서버로 보내면 서버는 HTML 제공
2. Client가 Post Request를 서버로 보내면 서버는 HTML 제공

장점

1. 검색엔진 최적화 SEO (Search Engine Optimization)

단점

1. 페이지 이동시 화면 깜빡임(UX)
2. 페이지 이동시 불필요한 템플릿도 중복해서 로딩(성능)
3. 서버 렌더링에 따른 부하(성능)
4. 모바일 앱 개발시 추가적인 백엔드 작업 필요(생산성)