[Next.js] Next 14 App Router에서 msw로 API mocking 하기
Nextjs에서 msw가 동작하는 원리를 이해하며, API를 모킹할 수 있다.
Posts by Tag
- SSR 5
- 우아한테크코스 5
- 브라우저 렌더링 5
- 땅콩 4
- CSR 3
- 비동기 3
- 트러블 슈팅 3
- 애니메이션 최적화 3
- 모바일 3
- web 3
- hydration 2
- transform 2
- 이벤트 2
- blog 1
- jekyll 1
- git 1
- 웹 애플리케이션 렌더링 방식 1
- render 1
- 콜스택 1
- 힙 1
- 실행 컨텍스트 1
- 싱글 스레드 1
- 이벤트 루프 1
- API 1
- 쓰로틀링 1
- 디바운스 1
- ESM 1
- CommonJS 1
- 모듈 1
- 비동기 로드 1
- tree-shaking 1
- IOS 1
- 가상 키보드 1
- 에러 핸들링 1
- Context API 1
- QueryCache 1
- setDefaultOptions 1
- 실시간 통신 1
- 폴링 1
- 롱폴링 1
- 웹소켓 1
- SSE 1
- Suspense 1
- ErrorBoundary 1
- 관심사 분리 1
- 합성 1
- will-change 1
- 버블링 1
- 캡쳐링 1
- 이벤트 위임 1
- react 1
- useState 1
- state 1
- 상태 관리 1
- Web Worker 1
- worker thread 1
- 사용자 피드백 1
- 개선 1
- 운영 1
- CS 1
- 네트워크 1
- 브라우저 구성 요소 1
- HTML 파싱 1
- CSS 파싱 1
- DOM 1
- CSSOM 1
- 렌더 트리 1
- fetch 1
- async/await 1
- Nextjs 1
- App Router 1
- msw 1
SSR
[우아한테크코스] CSR과 SSR 환경에서 API 응답속도 비교
사용자의 네트워크 환경이 API 응답속도에 얼마나 영향을 주는지 CSR과 SSR을 비교하며 이해한다.
[우아한테크코스] SSR 직접 구현하면서 이해하기
SSR을 직접 구현해보며, 어떻게 SSR이 동작하고 hydration이 이뤄지는지 이해한다.
[React] hydration
React에서 Hydration이란 무엇이며, 동작 방식에 대해 설명할 수 있다.
[Web] CSR vs SSR
CSR과 SSR이 무엇이며, 각각의 장단점과 페이지가 처음 로딩되는 과정을 비교하여 설명할 수 있다.
우아한테크코스
[땅콩] UT와 사용자 피드백을 통해 서비스 개선하기
땅콩 서비스를 운영하면서 서비스를 개선한 경험을 소개한다.
[땅콩] 땅콩은 어떤 실시간 통신 방식을 사용할까?
땅콩 서비스를 개발하면서 실시간 데이터 통신 방식에 대해 고민하고, 기술 결정에 대한 이유를 소개한다.
[모바일] IOS 가상 키보드 버그 개선
땅콩 서비스를 개발하면서 IOS 환경에서만 가상 키보드 위로 버튼이 올라오지 않는 문제를 해결하였다.
[우아한테크코스] CSR과 SSR 환경에서 API 응답속도 비교
사용자의 네트워크 환경이 API 응답속도에 얼마나 영향을 주는지 CSR과 SSR을 비교하며 이해한다.
[우아한테크코스] SSR 직접 구현하면서 이해하기
SSR을 직접 구현해보며, 어떻게 SSR이 동작하고 hydration이 이뤄지는지 이해한다.
브라우저 렌더링
[Web] 브라우저 렌더링 (2) - HTML 파싱 및 렌더 트리
브라우저에 대해 이해하며, 어떻게 화면에 출력하는지 이해할 수 있다.
[Web] 브라우저 렌더링 (1) - 브라우저 구성 요소
브라우저에 대해 이해하며, 어떻게 화면에 출력하는지 이해할 수 있다.
[Web] transform 속성으로 애니메이션 최적화가 되는 이유
transform 속성이 어떻게 애니메이션 최적화를 이뤄내며, 비대체 인라인 박스에는 왜 transform이 동작하는지 이해할 수 있다.
[브라우저 렌더링] 애니메이션 최적화를 통해 브라우저 렌더링 시간 94% 개선
구형 모바일 환경에서 frame drop이 발생하여 애니메이션이 끊기는 현상을 애니메이션 최적화를 통해 브라우저 렌더링 시간 94%를 개선하였다.
[브라우저 렌더링] 모바일 환경에서 발생하는 비정상적인 애니메이션 동작 해결
모바일 환경에서 발생하는 비정상적인 애니메이션 동작에 대한 문제 상황과 해결 방법에 대해 소개한다.
땅콩
[땅콩] UT와 사용자 피드백을 통해 서비스 개선하기
땅콩 서비스를 운영하면서 서비스를 개선한 경험을 소개한다.
[땅콩] 땅콩은 어떤 실시간 통신 방식을 사용할까?
땅콩 서비스를 개발하면서 실시간 데이터 통신 방식에 대해 고민하고, 기술 결정에 대한 이유를 소개한다.
[에러 핸들링] 에러 처리 공통 로직 분리
tanstack-query 를 활용하여 에러 처리 공통 로직을 분리하고, 이때 생긴 문제 상황과 해결 방법을 공유한다.
[모바일] IOS 가상 키보드 버그 개선
땅콩 서비스를 개발하면서 IOS 환경에서만 가상 키보드 위로 버튼이 올라오지 않는 문제를 해결하였다.
CSR
[Next.js] Next 14 App Router에서 msw로 API mocking 하기
Nextjs에서 msw가 동작하는 원리를 이해하며, API를 모킹할 수 있다.
[우아한테크코스] CSR과 SSR 환경에서 API 응답속도 비교
사용자의 네트워크 환경이 API 응답속도에 얼마나 영향을 주는지 CSR과 SSR을 비교하며 이해한다.
[Web] CSR vs SSR
CSR과 SSR이 무엇이며, 각각의 장단점과 페이지가 처음 로딩되는 과정을 비교하여 설명할 수 있다.
비동기
[JS] 이벤트 루프
이벤트 루프를 이해하며, 자바스크립트가 어떻게 비동기 처리하는지 이해할 수 있다.
[JS] 콜스택과 힙
콜스택과 힙은 무엇이며, 각각의 역할을 설명할 수 있다.
[JS] Promise
Promise 객체의 역할은 무엇이며, 해당 객체가 가진 메서드에 대해 이해한다.
트러블 슈팅
[에러 핸들링] 에러 처리 공통 로직 분리
tanstack-query 를 활용하여 에러 처리 공통 로직을 분리하고, 이때 생긴 문제 상황과 해결 방법을 공유한다.
[브라우저 렌더링] 애니메이션 최적화를 통해 브라우저 렌더링 시간 94% 개선
구형 모바일 환경에서 frame drop이 발생하여 애니메이션이 끊기는 현상을 애니메이션 최적화를 통해 브라우저 렌더링 시간 94%를 개선하였다.
[브라우저 렌더링] 모바일 환경에서 발생하는 비정상적인 애니메이션 동작 해결
모바일 환경에서 발생하는 비정상적인 애니메이션 동작에 대한 문제 상황과 해결 방법에 대해 소개한다.
애니메이션 최적화
[Web] transform 속성으로 애니메이션 최적화가 되는 이유
transform 속성이 어떻게 애니메이션 최적화를 이뤄내며, 비대체 인라인 박스에는 왜 transform이 동작하는지 이해할 수 있다.
[브라우저 렌더링] 애니메이션 최적화를 통해 브라우저 렌더링 시간 94% 개선
구형 모바일 환경에서 frame drop이 발생하여 애니메이션이 끊기는 현상을 애니메이션 최적화를 통해 브라우저 렌더링 시간 94%를 개선하였다.
[브라우저 렌더링] 모바일 환경에서 발생하는 비정상적인 애니메이션 동작 해결
모바일 환경에서 발생하는 비정상적인 애니메이션 동작에 대한 문제 상황과 해결 방법에 대해 소개한다.
모바일
[모바일] IOS 가상 키보드 버그 개선
땅콩 서비스를 개발하면서 IOS 환경에서만 가상 키보드 위로 버튼이 올라오지 않는 문제를 해결하였다.
[브라우저 렌더링] 애니메이션 최적화를 통해 브라우저 렌더링 시간 94% 개선
구형 모바일 환경에서 frame drop이 발생하여 애니메이션이 끊기는 현상을 애니메이션 최적화를 통해 브라우저 렌더링 시간 94%를 개선하였다.
[브라우저 렌더링] 모바일 환경에서 발생하는 비정상적인 애니메이션 동작 해결
모바일 환경에서 발생하는 비정상적인 애니메이션 동작에 대한 문제 상황과 해결 방법에 대해 소개한다.
web
[Web] 브라우저 렌더링 (2) - HTML 파싱 및 렌더 트리
브라우저에 대해 이해하며, 어떻게 화면에 출력하는지 이해할 수 있다.
[Web] 브라우저 렌더링 (1) - 브라우저 구성 요소
브라우저에 대해 이해하며, 어떻게 화면에 출력하는지 이해할 수 있다.
[Web] transform 속성으로 애니메이션 최적화가 되는 이유
transform 속성이 어떻게 애니메이션 최적화를 이뤄내며, 비대체 인라인 박스에는 왜 transform이 동작하는지 이해할 수 있다.
hydration
[우아한테크코스] SSR 직접 구현하면서 이해하기
SSR을 직접 구현해보며, 어떻게 SSR이 동작하고 hydration이 이뤄지는지 이해한다.
[React] hydration
React에서 Hydration이란 무엇이며, 동작 방식에 대해 설명할 수 있다.
transform
[Web] transform 속성으로 애니메이션 최적화가 되는 이유
transform 속성이 어떻게 애니메이션 최적화를 이뤄내며, 비대체 인라인 박스에는 왜 transform이 동작하는지 이해할 수 있다.
[브라우저 렌더링] 애니메이션 최적화를 통해 브라우저 렌더링 시간 94% 개선
구형 모바일 환경에서 frame drop이 발생하여 애니메이션이 끊기는 현상을 애니메이션 최적화를 통해 브라우저 렌더링 시간 94%를 개선하였다.
이벤트
[JS] 이벤트 위임
이벤트 위임을 이해하며, 모든 하위 요소에 이벤트 리스너를 달지 않고 문제를 해결할 수 있다.
[JS] 쓰로틀링 & 디바운스
쓰로틀링과 디바운스를 이해하며, 상황에 맞게 적절히 활용할 수 있다.
blog
깃 블로그 시작
깃 블로그 설정 완료 !!!
jekyll
깃 블로그 시작
깃 블로그 설정 완료 !!!
git
깃 블로그 시작
깃 블로그 설정 완료 !!!
웹 애플리케이션 렌더링 방식
[Web] CSR vs SSR
CSR과 SSR이 무엇이며, 각각의 장단점과 페이지가 처음 로딩되는 과정을 비교하여 설명할 수 있다.
render
[React] hydration
React에서 Hydration이란 무엇이며, 동작 방식에 대해 설명할 수 있다.
콜스택
[JS] 콜스택과 힙
콜스택과 힙은 무엇이며, 각각의 역할을 설명할 수 있다.
힙
[JS] 콜스택과 힙
콜스택과 힙은 무엇이며, 각각의 역할을 설명할 수 있다.
실행 컨텍스트
[JS] 콜스택과 힙
콜스택과 힙은 무엇이며, 각각의 역할을 설명할 수 있다.
싱글 스레드
[JS] 콜스택과 힙
콜스택과 힙은 무엇이며, 각각의 역할을 설명할 수 있다.
이벤트 루프
[JS] 콜스택과 힙
콜스택과 힙은 무엇이며, 각각의 역할을 설명할 수 있다.
API
[우아한테크코스] CSR과 SSR 환경에서 API 응답속도 비교
사용자의 네트워크 환경이 API 응답속도에 얼마나 영향을 주는지 CSR과 SSR을 비교하며 이해한다.
쓰로틀링
[JS] 쓰로틀링 & 디바운스
쓰로틀링과 디바운스를 이해하며, 상황에 맞게 적절히 활용할 수 있다.
디바운스
[JS] 쓰로틀링 & 디바운스
쓰로틀링과 디바운스를 이해하며, 상황에 맞게 적절히 활용할 수 있다.
ESM
[JS] 모듈 시스템
모듈 시스템을 이해하며, ESM과 CommonJS의 차이를 설명할 수 있다.
CommonJS
[JS] 모듈 시스템
모듈 시스템을 이해하며, ESM과 CommonJS의 차이를 설명할 수 있다.
모듈
[JS] 모듈 시스템
모듈 시스템을 이해하며, ESM과 CommonJS의 차이를 설명할 수 있다.
비동기 로드
[JS] 모듈 시스템
모듈 시스템을 이해하며, ESM과 CommonJS의 차이를 설명할 수 있다.
tree-shaking
[JS] 모듈 시스템
모듈 시스템을 이해하며, ESM과 CommonJS의 차이를 설명할 수 있다.
IOS
[모바일] IOS 가상 키보드 버그 개선
땅콩 서비스를 개발하면서 IOS 환경에서만 가상 키보드 위로 버튼이 올라오지 않는 문제를 해결하였다.
가상 키보드
[모바일] IOS 가상 키보드 버그 개선
땅콩 서비스를 개발하면서 IOS 환경에서만 가상 키보드 위로 버튼이 올라오지 않는 문제를 해결하였다.
에러 핸들링
[에러 핸들링] 에러 처리 공통 로직 분리
tanstack-query 를 활용하여 에러 처리 공통 로직을 분리하고, 이때 생긴 문제 상황과 해결 방법을 공유한다.
Context API
[에러 핸들링] 에러 처리 공통 로직 분리
tanstack-query 를 활용하여 에러 처리 공통 로직을 분리하고, 이때 생긴 문제 상황과 해결 방법을 공유한다.
QueryCache
[에러 핸들링] 에러 처리 공통 로직 분리
tanstack-query 를 활용하여 에러 처리 공통 로직을 분리하고, 이때 생긴 문제 상황과 해결 방법을 공유한다.
setDefaultOptions
[에러 핸들링] 에러 처리 공통 로직 분리
tanstack-query 를 활용하여 에러 처리 공통 로직을 분리하고, 이때 생긴 문제 상황과 해결 방법을 공유한다.
실시간 통신
[땅콩] 땅콩은 어떤 실시간 통신 방식을 사용할까?
땅콩 서비스를 개발하면서 실시간 데이터 통신 방식에 대해 고민하고, 기술 결정에 대한 이유를 소개한다.
폴링
[땅콩] 땅콩은 어떤 실시간 통신 방식을 사용할까?
땅콩 서비스를 개발하면서 실시간 데이터 통신 방식에 대해 고민하고, 기술 결정에 대한 이유를 소개한다.
롱폴링
[땅콩] 땅콩은 어떤 실시간 통신 방식을 사용할까?
땅콩 서비스를 개발하면서 실시간 데이터 통신 방식에 대해 고민하고, 기술 결정에 대한 이유를 소개한다.
웹소켓
[땅콩] 땅콩은 어떤 실시간 통신 방식을 사용할까?
땅콩 서비스를 개발하면서 실시간 데이터 통신 방식에 대해 고민하고, 기술 결정에 대한 이유를 소개한다.
SSE
[땅콩] 땅콩은 어떤 실시간 통신 방식을 사용할까?
땅콩 서비스를 개발하면서 실시간 데이터 통신 방식에 대해 고민하고, 기술 결정에 대한 이유를 소개한다.
Suspense
Suspense와 ErrorBoundary로 관심사를 분리하여 컴포넌트 복잡도 개선하기
Suspense와 ErrorBoundary를 활용해 관심사를 분리하여 컴포넌트 복잡도를 낮추고, Suspense 동작 원리를 직접 만들면서 이해한다.
ErrorBoundary
Suspense와 ErrorBoundary로 관심사를 분리하여 컴포넌트 복잡도 개선하기
Suspense와 ErrorBoundary를 활용해 관심사를 분리하여 컴포넌트 복잡도를 낮추고, Suspense 동작 원리를 직접 만들면서 이해한다.
관심사 분리
Suspense와 ErrorBoundary로 관심사를 분리하여 컴포넌트 복잡도 개선하기
Suspense와 ErrorBoundary를 활용해 관심사를 분리하여 컴포넌트 복잡도를 낮추고, Suspense 동작 원리를 직접 만들면서 이해한다.
합성
[Web] transform 속성으로 애니메이션 최적화가 되는 이유
transform 속성이 어떻게 애니메이션 최적화를 이뤄내며, 비대체 인라인 박스에는 왜 transform이 동작하는지 이해할 수 있다.
will-change
[Web] transform 속성으로 애니메이션 최적화가 되는 이유
transform 속성이 어떻게 애니메이션 최적화를 이뤄내며, 비대체 인라인 박스에는 왜 transform이 동작하는지 이해할 수 있다.
버블링
[JS] 이벤트 위임
이벤트 위임을 이해하며, 모든 하위 요소에 이벤트 리스너를 달지 않고 문제를 해결할 수 있다.
캡쳐링
[JS] 이벤트 위임
이벤트 위임을 이해하며, 모든 하위 요소에 이벤트 리스너를 달지 않고 문제를 해결할 수 있다.
이벤트 위임
[JS] 이벤트 위임
이벤트 위임을 이해하며, 모든 하위 요소에 이벤트 리스너를 달지 않고 문제를 해결할 수 있다.
react
[React] useState
useState를 이해하며, 일반 변수와 차이점을 이해할 수 있다.
useState
[React] useState
useState를 이해하며, 일반 변수와 차이점을 이해할 수 있다.
state
[React] useState
useState를 이해하며, 일반 변수와 차이점을 이해할 수 있다.
상태 관리
[React] useState
useState를 이해하며, 일반 변수와 차이점을 이해할 수 있다.
Web Worker
[Worker] Web Worker를 활용하여 탭 전환 시 발생하는 타이머 오차 개선하기
문제 상황을 이해하며, Web Worker의 필요성을 이해할 수 있다.
worker thread
[Worker] Web Worker를 활용하여 탭 전환 시 발생하는 타이머 오차 개선하기
문제 상황을 이해하며, Web Worker의 필요성을 이해할 수 있다.
사용자 피드백
[땅콩] UT와 사용자 피드백을 통해 서비스 개선하기
땅콩 서비스를 운영하면서 서비스를 개선한 경험을 소개한다.
개선
[땅콩] UT와 사용자 피드백을 통해 서비스 개선하기
땅콩 서비스를 운영하면서 서비스를 개선한 경험을 소개한다.
운영
[땅콩] UT와 사용자 피드백을 통해 서비스 개선하기
땅콩 서비스를 운영하면서 서비스를 개선한 경험을 소개한다.
CS
[CS] TLS handshake
TLS handshake가 어떻게 이뤄지는지 이해할 수 있다.
네트워크
[CS] TLS handshake
TLS handshake가 어떻게 이뤄지는지 이해할 수 있다.
브라우저 구성 요소
[Web] 브라우저 렌더링 (1) - 브라우저 구성 요소
브라우저에 대해 이해하며, 어떻게 화면에 출력하는지 이해할 수 있다.
HTML 파싱
[Web] 브라우저 렌더링 (2) - HTML 파싱 및 렌더 트리
브라우저에 대해 이해하며, 어떻게 화면에 출력하는지 이해할 수 있다.
CSS 파싱
[Web] 브라우저 렌더링 (2) - HTML 파싱 및 렌더 트리
브라우저에 대해 이해하며, 어떻게 화면에 출력하는지 이해할 수 있다.
DOM
[Web] 브라우저 렌더링 (2) - HTML 파싱 및 렌더 트리
브라우저에 대해 이해하며, 어떻게 화면에 출력하는지 이해할 수 있다.
CSSOM
[Web] 브라우저 렌더링 (2) - HTML 파싱 및 렌더 트리
브라우저에 대해 이해하며, 어떻게 화면에 출력하는지 이해할 수 있다.
렌더 트리
[Web] 브라우저 렌더링 (2) - HTML 파싱 및 렌더 트리
브라우저에 대해 이해하며, 어떻게 화면에 출력하는지 이해할 수 있다.
fetch
[Web] 브라우저 렌더링 (2) - HTML 파싱 및 렌더 트리
브라우저에 대해 이해하며, 어떻게 화면에 출력하는지 이해할 수 있다.
async/await
[Web] 브라우저 렌더링 (2) - HTML 파싱 및 렌더 트리
브라우저에 대해 이해하며, 어떻게 화면에 출력하는지 이해할 수 있다.
Nextjs
[Next.js] Next 14 App Router에서 msw로 API mocking 하기
Nextjs에서 msw가 동작하는 원리를 이해하며, API를 모킹할 수 있다.
App Router
[Next.js] Next 14 App Router에서 msw로 API mocking 하기
Nextjs에서 msw가 동작하는 원리를 이해하며, API를 모킹할 수 있다.
msw
[Next.js] Next 14 App Router에서 msw로 API mocking 하기
Nextjs에서 msw가 동작하는 원리를 이해하며, API를 모킹할 수 있다.