3.MSW

Service worker

서비스 워커는 주로 오프라인 기능을 제공하고 웹 애플리케이션의 성능을 개선하는 데 사용된다.

다음은 서비스 워커의 주요 기능 중 일부이다.

1. 리소스 캐싱: 서비스 워커는 HTML, CSS, JavaScript, 이미지 등의 리소스를 캐싱하여 사용자가 오프라인 상태이거나 인터넷 연결이 느린 경우에도 리소스를 제공할 수 있다.

2. 네트워크 요청에 응답: 서비스 워커는 웹 애플리케이션의 네트워크 요청을 가로채서 처리하여 캐시된 리소스를 제공하거나 필요에 따라 다른 작업을 수행할 수 있다.

3. 백그라운드 동기화: 서비스 워커는 애플리케이션이 보낸 네트워크 요청을 저장했다가 나중에 사용자가 다시 온라인 상태가 되면 다시 전송하여 안정성을 높이고 원활한 사용자 경험을 제공할 수 있다.

4. 푸시 알림: 서비스 작업자는 웹 애플리케이션이 현재 열려 있지 않더라도 푸시 알림을 수신하여 사용자에게 표시할 수 있다.

5. 인증 및 권한 부여 관리: 서비스 작업자는 애플리케이션의 네트워크 요청에 대한 인증 및 권한 부여를 관리하여 리소스에 대한 안전한 액세스를 허용할 수 있다.

전반적으로 서비스 워커는 특히 사용자의 인터넷 연결이 제한적이거나 불안정한 상황에서 웹 애플리케이션의 성능과 안정성을 개선하는 강력한 도구이다.

MSW(Mock Service Worker)

모의 서비스 작업자(MSW - Mock Service Worker)는 개발자가 개발 및 테스트 중에 애플리케이션의 HTTP 요청을 모의 테스트할 수 있도록 도와주는 라이브러리이다. 개발자는 MSW를 사용하여 원본 코드를 수정하지 않고도 애플리케이션에서 발생하는 네트워크 요청을 가로채서 모의 테스트할 수 있다.

MSW는 실제 네트워크 요청을 하는 대신 발신 네트워크 요청을 가로채 미리 정의된 응답을 반환하는 모의 서비스 워커를 생성하는 방식으로 작동한다. 개발자는 애플리케이션의 특정 요청에 따라 이러한 응답을 정의할 수 있으므로 실제 API에 의존하지 않고도 다양한 시나리오와 엣지 케이스를 테스트할 수 있다.

MSW는 애플리케이션에서 사용하는 API가 아직 완전히 개발되지 않았거나 사용 가능하지 않은 환경 또는 개발자가 수동으로 트리거하지 않고도 특정 응답을 테스트하려는 경우에 특히 유용하다.

import { rest } from 'msw'
import { setupServer } from 'msw/node'
import { fetchData } from './api'

// Define mock response for the API endpoint
const server = setupServer(
  rest.get('/api/data', (req, res, ctx) => {
    return res(
      ctx.status(200),
      ctx.json({ data: 'mock data' })
    )
  })
)

// Start the mock server before running tests
beforeAll(() => server.listen())

// Stop the mock server after running tests
afterAll(() => server.close())

describe('fetchData', () => {
  it('fetches data from the API', async () => {
    const data = await fetchData()
    expect(data).toEqual({ data: 'mock data' })
  })
})

이 예제에서는 MSW를 사용하여 fetchData 함수가 호출하는 API 엔드포인트의 응답을 모킹한다. 상태 코드 200과 일부 모의 데이터가 포함된 JSON 객체를 반환하는 /api/data 엔드포인트에 대한 모의 응답을 정의한다. 그런 다음 테스트를 실행하기 전에 모의 서버를 시작하고 나중에 중지한다.

fetchData 테스트를 실행하면 MSW는 함수가 보낸 네트워크 요청을 가로채서 실제 네트워크 요청 대신 미리 정의한 모의 응답을 반환한다. 그런 다음 모의 서버가 반환한 모의 데이터를 기반으로 함수의 동작을 테스트할 수 있다.

MSW는 개발 및 테스트에서 HTTP 요청을 모의하기 위한 강력한 도구로, 개발자가 API로 작업할 때 많은 시간과 노력을 절약할 수 있다.

5주차 과제를 진행하면서 처음 사용해 보았는데 api요청 mocking하는 부분에서 엄청난 절감효과를 보였던 것 같다.

polyfill(폴리필)

폴리필은 기본적으로 지원되지 않는 기능을 웹 브라우저에 추가하는 코드 조각을 설명하는 데 사용되는 용어이다. 기본적으로 최신 웹 기능을 지원하지 않는 구형 브라우저에 자바스크립트 코드를 통해 누락된 기능을 시뮬레이션하여 지원되지 않는 기능에 대한 대체 최신 웹 기능을 제공하는 방법이다.

웹 개발자가 모든 브라우저에서 지원되지 않는 새로운 기능이나 API를 사용하여 코드를 작성할 때 코드가 의도한 대로 실행되도록 하기 위해 폴리필을 사용할 수 있다.

폴리필을 사용하여 새로운 HTML 요소, CSS 기능 또는 가져오기 API 또는 프로미스와 같은 JavaScript API에 대한 지원을 추가할 수 있다. 일반적으로 브라우저가 해당 기능을 지원하는지 여부를 감지하고 지원하지 않는 경우 누락된 기능을 제공하는 데 필요한 코드를 추가한다.

폴리필은 브라우저가 다른 방식으로 동일한 기능을 구현하는 문제를 해결하는 데 사용된다. 특정 브라우저에서 비표준 기능을 사용하여 JavaScript에 기능에 액세스 할 수있는 표준 준수 방법을 제공한다. 오늘날 매우 드물지만 각 브라우저가 Javascript를 매우 다르게 구현 한 IE6, Netscape 및 NNav 시대에 특히 널리 퍼졌다. JQuery의 첫번째 버전이 폴리필의 초기 예이다. 당시 자바 스크립트 개발자는 웹 사이트가 완전히 다른 방식으로 프로그래밍되어야하고 사용자의 브라우저에 따라 다른 사용자 인터페이스를 가져야하는 브라우저 간 불일치로 인해 모든 장치에서 웹 사이트를 작동 시키려고 노력하고 있었다. 따라서 JavaScript 개발자는 모든 브라우저에서 거의 일관되게 작동하는 아주 작은 소수의 JavaScript API에만 액세스 할 수 있었다. 현대 브라우저는 대부분 표준 시맨틱에 따라 광범위한 API 세트를 구현하기 때문에 폴리필을 사용하여 브라우저 별 구현을 처리하는 것은 오늘날 실제로 존재하지 않다.

Reference

• polyfill