서버사이드렌더링이란? SSR, Server Side Rendering

SSR, Server Side Rendering이란? SSR은 서버에서 사용자에게 보여줄 페이지를 모두 구성하여 사용자에게 페이지를 보여주는 방식이다. SSR을 사용하면 모든 데이터가 매핑된 서비스 페이지를 클라이언트에게 바로 보여줄 수 있다. 서버를 이용해서 페이지를 구성하기 때문에 클라이언트에서 구성하는 CSR(Client-side rendering)보다 페이즈를 구성하는 속도는 늦어지나, 전체적으로 사용자에게 보여주는 콘텐츠 구성이 완료되는 시점이 빨라진다. 또한, 검색 엔진 최적화(SEO, Search Engine Optimization)에도 유리하다. SSR 동작 방식 사용자가 웹 페이지를 방문하면(request), 서버는 리소스를 확인하고 페이지 내에 있는 서버측 스크립트를 실행 후 HTML ..

PWA - RAIL 모델

RAIL 모델이란? 성능에 대해 생각할 수 있는 구조를 제공하는 사용자 중심의 성능 모델로, 사용자 경험을 주요 작업으로 분류하고 각각에 대한 성능 목표를 정의하도록 돕는다. RAIL은 아래와 같은 웹 앱 수명 주기의 4가지 뚜렷한 측면을 말한다 Response (응답) Animation (애니메이션) Idle (유휴 상태) Load (로드) 참조 https://web.dev/i18n/ko/rail/ RAIL 모델을 사용한 성능 측정 RAIL 모델을 통해 디자이너와 개발자는 사용자 경험에 가장 큰 영향을 미치는 성능 최적화 작업을 안정적으로 목표로 삼을 수 있습니다. RAIL 모델이 설정한 목표와 지침, 그리고 이를 달성하기 위 web.dev

PWA - PRPL 패턴

PRPL 패턴이란? PRPL은 웹 페이지를 인터랙티브하고 더 빠르게 로드하는 패턴으로 Google Chrome 팀이 고안했다. 오프라인이거나 데이터 절약 모드에서 네트워크 지연이 높은 모바일 기기를 위한 것이다. PRPL은 다음을 함축하고 있는 약어다. Preload the most important resources. 가장 중요한 리소스를 미리 로드해라. Render the initial route as soon as possible. 최초 라우팅을 가능한 빨리 렌더링해라. Pre-cache remaining assets. 남은 assets를 미리 캐싱하라. Lazy load other routes and non-critical assets. 다른 라우팅과 덜 중요한 assets를 레이지로딩해라. Pr..

PWA API - Credentials

Credential Management API Credential Management API는 웹 사이트가 비밀번호나 공개 키(public key) 등을 웹 사이트가 저장하고 불러올 수 있게 하는 API다. 이 기능들은 사용자가 비밀번호를 타이핑 하지 않고 로그인을 하고, 웹 사이트에서 주로 사용했던 계정을 볼 수 있게 하며, 세션 만료 시 재 로그인 과정 없이 다시 세션을 시작하게 할 수 있다. Interfaces 종류 Credential: 개체(사용자)에 대한 정보를 제공 CredentialsContainer: 인증을 요청하거나, 로그인이나 로그아웃 같은 특정 이벤트가 일어날 때 사용자에게 알리기 위한 메소드들을 제공 FederatedCredential: Federated Identity Provid..

PWA API - Payments

Payment Request API 사용자가 선호하는 결제 방식을 제공하여 판매자(merchant)가 그 정보를 제공받도록 돕는 API다. PaymentAddress PaymentRequest PaymentRequestEvent PaymentRequestUpdateEvent PaymentMethodChangeEvent PaymentResponse MerchantValidationEvent MDN 문서 https://developer.mozilla.org/en-US/docs/Web/API/Payment_Request_API Payment Request API - Web APIs | MDN The Payment Request API provides a consistent user experience for ..

PWA API - Device Orientation

Device Orientation 중력을 기준으로 기기의 물리적 방향의 변화(event)를 뜻한다. 모바일 기기처럼 손으로 들고 다니면서 웹을 접근할 수 있는 기기라면, 이를 통해 화면을 최적화할 수 있다. JavaScript는 이러한 이벤트에 활용할 수 있는 API로 크게 두 가지가 있다. DeviceOrientationEvent DeviceMotionEvent 1) DeviceOrientationEvent 기기 내 가속도계(accelerometer)가 기기의 방향 변화를 감지한다. 값의 종류 DeviceOrientationEvent.absolute DeviceOrientationEvent.alpha DeviceOrientationEvent.beta DeviceOrientationEvent.gamma ..

PWA API - Notifications

Notifications 웹 페이지가 사용자에게 시스템 알림 표시를 제어할 수 있게 하는 API다. 알림은 뷰포트 바깥에 위치하기 때문에 사용자가 탭을 변경하거나, 다른 앱으로 이동했을 때에도 표시된다. Method Notification.requestPermission() 페이지에서 알림을 표시할지 요청하는데 사용 Notification.close() 프로그램으로 알림을 닫음 예시 function notifyMe() { // 브라우저가 알림(notifications)를 지원하는지 확인 if (!("Notification" in window)) { alert("브라우저가 notification을 지원하지 않음"); } // 알림 허용이 되었는지 확인 else if (Notification.permissi..

PWA API - Location

Location 객체가 연결된 장소(URL)를 표현하는 API. 메소드 Location.assign() 주어진 URL의 리소스를 불러와 새 페이지로 이동한다. Location.reload() 현재 URL의 리소스를 강제로 다시 불러온다. Location.replace() 현재 리소스를 특정 URL의 리소스로 교체한다. 현재 페이지가 session History에 저장되지 않아 사용자가 뒤로가기를 하지 못한다는 점에서 assign()과 차이가 있다. 예제 var url = document.createElement('a'); url.href = 'https://developer.mozilla.org:8080/en-US/search?q=URL#search-results-close-container'; cons..

PWA API - 서비스 워커

서비스 워커(Service Worker) 서비스 워커는 브라우저가 백그라운드에서 실행하는 스크립트로, 웹 응용 프로그램, 브라우저, 네트워크 사이의 프록시 서버 역할을 한다. 서비스 워커의 목적 백그라운드 데이터 동기화 다른 출처에서의 리소스 요청을 응답 위치정보, 자이로 센서 등 계산에 높은 비용이 들어가는 다수의 페이지에서 함께 사용할 수 있도록 데이터 업데이트를 중앙화 개발 목적으로서 CoffeeScript, Less, CJS/AMD 모듈 등의 의존성 관리와 컴파일 백그라운드 서비스 훅 특정 URL 패턴에 기반한 사용자 지정 템플릿 제공 성능 향상. 사진 앨범의 다음 사진 몇 장처럼, 사용자가 필요로 할 것으로 생각되는 리소스의 프리페칭 등 MDN 문서 https://developer.mozilla..

PWA API - WebSockets

WebSocket 웹 소켓은 사용자의 브라우저와 서버 사이의 인터액티브 통신 세션을 설정할 수 있게 하는 고급 기술이다. 개발자는 웹 소켓 API를 통해 서버로 메시지를 보내고 서버의 응답을 위해 서버를 폴링하지 않고도 이벤트 중심 응답을 받는 것이 가능하다. MDN 문서 https://developer.mozilla.org/ko/docs/Web/API/WebSockets_API 웹 소켓 - Web API | MDN 웹 소켓은 사용자의 브라우저와 서버 사이의 인터액티브 통신 세션을 설정할 수 있게 하는 고급 기술입니다. 개발자는 웹 소켓 API를 통해 서버로 메시지를 보내고 서버의 응답을 위해 서버를 developer.mozilla.org