개발/Frontend3 콜백함수 콜백함수란? 01. 정의 예시) addEventListener 예시) 콜백 함수를 사용하는 고차 함수 - map(), filter(), reduce() 02. 설명 예시) 덧셈을 출력하는 로직 03. 용도 01. 순차적 실행 보장 02. 로직의 추상화 04. 콜백 함수의 장단점 05. 정리 정의 콜백 함수는 다른 함수의 인자(파라미터)로써 넘겨지는 함수 특정 이벤트에 의해 호출되는 함수 예시) addEventListener button.addEventListener("click", myFunction); function myFunction() { document.getElementById("demo").innerHTML = "Hello World"; } addEventListener 함수에 안에 myFu.. 2023. 2. 6. [FE/Test] MSW에 대하여 MSW(Mock Service Worker)란? MSW는 Mock Service Worker로 서비스 워커를 이용하여 API를 모킹하는 라이브러리입니다. 즉, 서비스 워커 API를 활용하여 네트워크 요청을 가로채 MSW에 전달하여 handler에 정의된 모의 응답을 받습니다. mocking(모킹) : 테스트하고자 하는 코드가 의존하는 함수나 클래스에 대해 가짜 객체를 만드는 기법 도입하기 1. msw 설치 yarn add msw --dev 2. 핸들러 정의 src/mocks/handlers.js 생성 REST API, GraphQL API 두가지 유형의 API를 mocking 할 수 있습니다. 여기선 rest api를 mocking하기 위해 rest를 import합니다. api 요청 시도를 위해 함수를 .. 2023. 2. 4. PWA 도입하기 - CRA 4.x 버전에서 PWA 도입하기 Progressive Web App (이하 PWA)? PWA는 'Progressive Web App'의 줄인 말로, 모바일 사이트에서 네이티브 앱과 같은 사용자 경험을 제공하는 기술입니다. 즉, 웹 기술을 통해 모바일 앱과 같은 경험을 할 수 있게 합니다. PWA는 서비스 워커 파일을 활성화시켜 서비스가 백그라운드에서 동작하게끔 만듭니다. 핵심은 이 서비스 워커란 녀석입니다. 서비스워커는 브라우저가 백그라운드에서 실행하는 스크립트이며 웹 페이지와 별개로 동작합니다. 서비스 워커에 대한 내용은 다음 글에서 살펴보도록 하고, 본 글에선 PWA 도입을 위한 서비스 워커 활성화 방법과 PWA로 구현할 수 있는 기능에 대해 살펴보겠습니다. PWA로 무엇을 할 수 있을까? 앞서, PWA에 대한 설명 중 앱과 백그라.. 2023. 2. 4. 이전 1 다음 728x90 반응형
