viscachas

🔧 Mock Service Worker(MSW)Mock Service Worker(MSW)는 브라우저와 Node.js에서 사용할 수 있는 API 모킹 라이브러리예요. MSW를 사용하면 애플리케이션이 보내는 네트워크 요청을 가로채고 원하는 가짜 응답(mocked response)을 반환할 수 있어요.특히 API 모킹을 애플리케이션 코드 바깥에 둔 독립 레이어로 관리한다는 점이 장점이에요. 한번 정의한 mock을 개발 서버, Storybook, 테스트 환경 등 어디서든 재사용할 수 있죠!🤔 API 모킹, 즉 MSW는 왜 필요할까?프론트 개발하다 보면 백엔드 API는 아직 안 나왔는데, 프론트 개발은 이번 주부터 시작해야 하는 상황이 종종 생겨요. 이럴 땐 API를 기다릴 필요 없이, 미리 mock API..

🤔 E2E 테스트는 왜 필요할까?E2E(End-to-End) 테스트는 사용자가 실제로 웹 서비스를 사용하는 흐름을 그대로 자동화하는 테스트 방식이에요. 단위 테스트나 통합 테스트로는 잡히지 않는 실제 UI와 API, 라우팅, 상태 관리가 모두 연동된 전체 플로우의 안정성을 확인할 수 있다는 점에서 매우 중요해요.E2E 테스트는 다음 문제를 조기에 발견할 수 있어요:UI에서는 버튼이 보이지만 실제로 클릭이 안 되는 경우로그인 후 특정 페이지 이동이 정상적으로 작동하지 않는 경우API 응답은 올바르지만 클라이언트 렌더링이 깨지는 경우폼 제출 후 예상한 페이지로 이동하지 않는 라우팅 문제 등즉, "유저가 직접 경험하는 버그를 배포 전에 막는 가장 강력한 테스트 방식"이에요.🔧 e2e 테스팅 라이브러리대표적..

코딩 테스트에서 자주 만나는 문제들의 뿌리는 대부분 그래프 탐색이에요. 그중에서도 DFS와 BFS는 다른 알고리즘의 기반이 되는 핵심 개념이라 한 번 정리해 두면 여러 문제를 훨씬 편하게 풀 수 있어요.↘️ DFS (깊이 우선 탐색)DFS는 한 경로를 따라 가장 깊은 노드까지 탐색했다가 갈 곳이 없으면 다시 돌아와 다른 경로를 탐색하는 방식이에요.⚙️ 동작 과정스택(또는 재귀)과 visited 배열을 준비해요.시작 노드를 스택에 넣어요.스택이 빌 때까지 아래를 반복해요:스택에서 노드를 pop해요.pop한 노드를 아직 방문하지 않았다면:노드를 처리해요. (출력 / 완료 조건 체크)visited를 true로 바꿔요.인접 노드들을 스택에 push해요.📌 어디에서 사용할까?미로와 같은 경로 탐색순열, 조합, ..

API를 설계할 때 가장 먼저 부딪히는 선택지가 바로 REST, GraphQL, gRPC예요. 세 가지 모두 데이터를 주고받는 방법을 정의하지만 구조와 철학이 달라요. 각 방식을 비교하면서 언제 어떤 기술을 선택하면 좋은지 알아보아요!🌐 REST APIREST(Representational State Transfer)는 웹의 기본 언어라고 할 수 있어요. 리소스를 URI로 식별하고, HTTP 메서드(GET, POST, PUT, DELETE 등)를 통해 CRUD를 수행하는 구조예요.✨ 특징요청마다 고정된 엔드포인트를 사용하고, 필요한 데이터를 모두 받아야 해요.JSON, XML 등 다양한 포맷을 지원하지만 대부분 JSON을 사용해요.캐싱, 상태 코드, 헤더 등 HTTP의 기본 기능을 활용할 수 있어요.?..

🤔 번들링 왜 알아야할까?프로젝트가 커질수록 모듈 간 의존성이 복잡해지고 관리가 어려워져요.번들링은 이런 의존성을 정리하고, 필요한 코드만 묶어 실행 흐름을 최적화하는 과정이에요.결과적으로 웹 성능과 유지보수 효율을 높이기 때문에, 번들링이 어떻게 일어나는지 이해하는 게 중요해요!📦 번들링이란?여러 개의 파일(특히 JavaScript, CSS, 이미지 등 웹 개발에 필요한 리소스 파일들)을 하나 또는 몇 개의 파일로 묶는 작업이에요.이렇게 묶인 파일을 번들(Bundle)이라고 불러요. 🎯 번들링의 목적웹 애플리케이션을 개발하다 보면 JS 파일이 수십, 수백 개로 쪼개지게 돼요.개발 단계에서는 모듈화가 편리하지만, 브라우저는 파일 개수만큼 요청을 보내야 해서 네트워크 비용이 커지고 로딩 속도가 느려질..

❓ 왜 CSS 최적화가 필요할까?사람이 애니메이션이 매끄럽다고 느끼는 기준은 대략 60fps입니다. 초당 60번 새로운 프레임이 그려져야 한다는 뜻이에요. 즉, 브라우저가 각 프레임을 생성하는 데 걸리는 시간은 16.66ms 정도예요.하지만 실제로는 렌더링 오버헤드(스크립트 실행, 스타일 계산 등)도 고려해야 하므로, 모든 작업을 약 10ms 이내에 끝내야 프레임 드롭 없이 부드럽게 동작합니다.INP (Interaction to Next Paint) 기준에서는, 사용자의 인터랙션(클릭, 입력 등)에 대한 반응 속도가 중요합니다. 대부분의 경우 100ms 이내가 이상적이며, 다양한 기기를 고려한다면 200ms 이하가 권장돼요.결론적으로 버벅임을 줄이면 체감 속도도 개선됩니다. 그렇다면 어떤 방식으로 개선할..

🧩 Suspense란 무엇인가?🪄 배경과 철학React는 렌더링 중 데이터를 기다리거나, 아직 준비되지 않은 컴포넌트를 다룰 때 UI가 깜빡이는 문제가 있었어요. 이를 해결하기 위해 Suspense가 도입되었어요.Suspense는 렌더링을 일시 중단하고(fallback을 표시)함으로써 데이터나 컴포넌트가 준비되면 다시 렌더링을 이어갈 수 있어요.Suspense의 철학은 "UI를 일시 중단 가능한 단위로 나누자"예요. 이렇게 하면 사용자가 보는 화면을 부드럽게 유지하면서 비동기 데이터를 자연스럽게 통합할 수 있죠.💡 Suspense 사용법}> fallback: 컴포넌트가 준비되지 않았을 때 보여줄 대체 UISomeAsyncComponent: Promise를 던지는 컴포넌트(예: lazy 로드, 데이..

🎯 목표fetch가 등장한 배경과 철학을 이해한다.fetch의 Request, Response 구조와 옵션, 사용법을 학습한다.(2편 추가 예정) JS 내장 fetch와 Next.js fetch의 차이를 비교한다. 🕰️ 1. fetch가 등장한 배경⚠️ XMLHttpRequest(XHR)의 한계1999년, 마이크로소프트가 Outlook Web Access를 위해 도입한 XMLHttpRequest는 ES6 이전까지 사실상 유일한 HTTP 요청 수단이었어요.하지만 당시 웹은 문서 중심이었고, 비동기 호출은 드물었기에 급히 설계된 API였어요. 그 결과 다음과 같은 문제들이 있었습니다:XML 중심: XML은 태그 기반 문서 지향 데이터 구조라, JS에서 쓰려면 파싱 비용이 크고 가독성이 떨어졌어요.콜백 기..

Next.js는 정말 많은 렌더링 전략을 제공해요. 그래서 각 상황에 맞게 적절한 전략을 선택하는 게 중요합니다.👉 왜 다양한 렌더링 전략을 제공할까?성능 최적화 + 개발자 경험 + SEO 대응을 동시에 하기 위해서예요. 단일 전략만으로는 모든 요구사항을 커버하기 어렵기 때문에 Next.js는 하이브리드하게 접근할 수 있도록 해줍니다. 🤔 렌더링 전략을 사용할 때 고려해야 할 것렌더링 전략은 언제, 어디서 렌더링을 할지 결정하는 문제와 같아요.그래서 다음 기준을 함께 고려해야 합니다:SEO → 검색엔진 최적화가 중요한가?데이터 최신성 → 항상 최신 데이터를 보여줘야 하는가?개인화 → 사용자별로 다른 화면이 필요한가?실시간성 → 데이터가 즉시 변할 때 바로 반영돼야 하는가?대규모 트래픽 → 수많은 요청..

다이내믹 프로그래밍(DP)은 전체 문제를 한 번에 해결하는 것이 아니라 작은 문제로 쪼개어 부분 문제(subProblem) 를 해결하고, 그 결과를 활용해 전체 문제를 해결하는 방식이에요. 🎯 DP를 효율적으로 적용하기 위한 조건부분 문제를 활용했다고 해서 반드시 DP가 효율적인 것은 아니에요. 아래 두 가지 조건을 만족해야 DP를 쓰는 가치가 있어요:큰 문제를 작은 문제로 나누었을 때 동일한 작은 문제가 반복해서 등장한다.큰 문제의 해결책은 작은 문제의 해결책으로 구성할 수 있다.DP 문제는 보통 점화식으로 표현할 수 있어요:구하려는 해(답)를 지정하고,그 해를 만들기 위해 필요한 조건을 생각하며,1, 2 과정을 통해 점화식을 세운다.이때 핵심은 "서로 다른 케이스라도 동일한 상태로 묶을 수 있느냐"..