본문 바로가기

전체 글63

콜백함수 콜백함수란? 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.
[BOJ/백준] 4442번 - 빌보의 생일 문제 링크 http://icpc.me/4442 문제 출처 ICPC > Regionals > North America > Pacific Northwest Regional > 2012 Pacific Northwest Region Programming Contest H번 사용 알고리즘 세그먼트 트리(Inversion Counting) 시간 복잡도 O(NlogN) 풀이 서로 다른 순서로 앉은 쌍의 최솟값을 구하기 위해 Inversion Counting을 사용합니다. 입력이 String으로 들어오기 때문에, string과 인덱스를 받을 자료구조가 필요하므로 map을 사용합니다. std::map은 검색(find), 삽입(insert), 제거(erase) 작업을 log 시간에 수행할 수 있습니다. 전체 코드 #inc.. 2023. 2. 4.
[BOJ/백준] 1162번 - 도로포장 문제 링크 http://icpc.me/1162 문제 출처 USACO February 2009 Contest > Gold 3번 사용 알고리즘 다익스트라 풀이 특정 노드에서 목표 지점까지의 최소 시간을 구해야 하기에, 다익스트라를 사용하면 됩니다. 다만, K개 이하의 도로를 포장할 수 있기 때문에, 이를 해결하기 위한 전략이 필요합니다. 최소 거리를 구하는 배열에 포장한 횟수를 포함해줍시다. dist[N][K] => K개를 포장했을 때, N노드에서의 최소 거리 처음 문제를 접했을 때, 위상 정렬처럼 보였지만 DAG가 아니므로 사용하지 못합니다. 최악의 경우, N의 최댓값(1e5) * 걸리는 시간의 최댓값(1e6), 즉 100억이 되므로, int가 아닌 long long을 사용해야 합니다. 전체 코드 #inc.. 2023. 2. 4.
[BOJ/백준] 7453번 - 합이 0인 네 정수 문제 링크 http://icpc.me/7453 문제 출처 ICPC > Regionals > Europe > Southwestern European Regional Contest > SWERC 2005 E번 사용 알고리즘 이분탐색 unordered_map 풀이 4개의 배열이 주어지고, (a, b, c, d)의 합이 0이 되는 쌍의 갯수를 구해야합니다. 우선, 가장 navie하게 생각한다면 4번의 for문을 돌려 답을 찾는 방법이 있겠습니다. 하지만, N의 최대가 4000이므로 시간 복잡도 O(N^4)로 시간 초과가 발생할 게 분명해보입니다. 그렇다면, 기본적으로 4개의 배열을 A, B 배열의 합, C, D 배열의 합으로 구성된 2개의 배열로 나누어 생각해봅시다. 이후, 해당 문제를 푸는 2가지 방법이 존재.. 2023. 2. 4.
PWA 도입하기 - CRA 4.x 버전에서 PWA 도입하기 Progressive Web App (이하 PWA)? PWA는 'Progressive Web App'의 줄인 말로, 모바일 사이트에서 네이티브 앱과 같은 사용자 경험을 제공하는 기술입니다. 즉, 웹 기술을 통해 모바일 앱과 같은 경험을 할 수 있게 합니다. PWA는 서비스 워커 파일을 활성화시켜 서비스가 백그라운드에서 동작하게끔 만듭니다. 핵심은 이 서비스 워커란 녀석입니다. 서비스워커는 브라우저가 백그라운드에서 실행하는 스크립트이며 웹 페이지와 별개로 동작합니다. 서비스 워커에 대한 내용은 다음 글에서 살펴보도록 하고, 본 글에선 PWA 도입을 위한 서비스 워커 활성화 방법과 PWA로 구현할 수 있는 기능에 대해 살펴보겠습니다. PWA로 무엇을 할 수 있을까? 앞서, PWA에 대한 설명 중 앱과 백그라.. 2023. 2. 4.
728x90
반응형