Poteco Journal
A journal documenting analysis and thoughts on modern web technologies
Playwright로 시작하는 E2E 테스트, 실제 브라우저에서 테스트하기
Playwright를 사용해서 실제 브라우저에서 사용자 시나리오를 테스트하는 방법을 실무 관점에서 알아봤어요. 설정부터 페이지 객체 모델까지 한 번에 정리했습니다.
Jest와 React Testing Library로 시작하는 단위 테스트
Jest와 React Testing Library를 사용해서 Next.js 프로젝트에서 단위 테스트와 통합 테스트를 작성하는 방법을 실무 관점에서 알아봤어요. 설정부터 실전 예시까지 한 번에 정리했습니다.
TypeScript 심화 개념, 실무에서 자주 마주치는 타입들
제네릭부터 조건부 타입까지, TypeScript의 심화 개념을 실무 관점에서 이해하고 활용하는 방법을 알아봤어요. 타입 가드, 유틸리티 타입, 조건부 타입까지 한 번에 정리했습니다.
테스트가 왜 필요한가요? 웹 개발 테스트 전략 가이드
테스트는 왜 필요한지, 어떤 테스트를 언제 작성해야 하는지, 어떤 도구를 사용해야 하는지 실무 관점에서 알아봤어요. 테스트 피라미드부터 실전 베스트 프랙티스까지 한 번에 정리했습니다.
웹 접근성(A11y), 모든 사용자를 위한 웹사이트 만들기
WCAG 가이드라인부터 키보드 네비게이션, 스크린 리더 대응까지, 실무에서 바로 적용할 수 있는 웹 접근성 개선 방법을 체크리스트 형태로 정리했습니다.
실무에서 바로 써먹는 웹사이트 성능 최적화 실전 가이드
Core Web Vitals 최신 동향부터 Next.js와 Tailwind CSS에서 바로 적용할 수 있는 성능 최적화 기법까지, 실무에서 바로 써먹는 체크리스트를 정리했습니다.
클로드 코드, 왜 개발자들이 주목하는지 알아봤어요
요즘 핫한 클로드 코드의 특징과 차별점, 그리고 바로 써볼 수 있는 빠른 시작 가이드까지 한 번에 정리했습니다.
내가 만든 쿠키 Cookie... LocalStorage, SessionStorage
브라우저 저장소의 세 가지 방법인 Cookie, LocalStorage, SessionStorage의 차이점과 사용 시나리오를 실무 관점에서 이해하고, 올바르게 활용하는 방법을 알아봤어요.
Next.js와 React Query, 캐싱 전략 어떻게 세울까?
Next.js의 서버 사이드 캐싱과 React Query의 클라이언트 사이드 캐싱을 효과적으로 결합하는 방법을 실무 관점에서 알아봤어요. 최적의 캐싱 전략으로 성능을 극대화하는 실전 가이드입니다.
React Query Prefetch, 언제 어떻게 써야 할까?
React Query의 prefetch가 무엇인지, 왜 사용하는지, initialData와 setQueryData와의 차이점까지 실무 관점에서 알아봤어요. 성능 최적화를 위한 실전 활용법을 정리했습니다.
Next.js에 fetch가 있는데 React Query가 필요한가요?
Next.js의 fetch가 있는데 왜 React Query를 사용해야 할까? React Query의 캐싱, 동기화, 최적화 기능을 통해 더 나은 데이터 페칭 경험을 만드는 방법을 알아봤어요.
서버 컴포넌트와 클라이언트 컴포넌트, 언제 뭘 써야 할까?
Next.js 13+ App Router의 핵심 개념인 서버 컴포넌트와 클라이언트 컴포넌트를 실무 관점에서 이해하고, 서버 액션까지 활용하는 실전 가이드입니다.
마크다운에 React 컴포넌트를 넣으면? MDX로 콘텐츠 관리하기
Next.js와 MDX를 활용해서 동적이고 인터랙티브한 콘텐츠를 만드는 방법을 알아봤어요. 마크다운의 편리함과 React 컴포넌트의 강력함을 결합한 실전 가이드입니다.