웹 프론트엔드 기술을 설명하는 블로그입니다! 핵심만 명확하게 설명해요.
Articles
자동화된 웹 프론트엔드 테스트 - 이유
수동 테스트 경험을 회고해보고 자동화된 테스트가 언제 좋을지 고민한 내용을 공유합니다
Jan 8, 2025
Automated Test
로딩, 오류, 빈 화면 UI/UX 패턴
로딩, 오류, 빈 화면이 얼마나 중요하고, 어떻게 잘 만들 수 있을지에 대해
Jan 7, 2025
UI/UX
useFetch 직접 만들어보기 (enabled, isLoading)
간단한 조회 하나에 React-query를 쓰고 싶지 않다면 직접 만들어보세요
Jan 6, 2025
React.js
TypeScript
12 Factor App의 개념
코드 외적인 부분에서 확장성 있는 개발, 운영을 하는 방법에 대하여
Jan 5, 2025
설계
TSESLint v8, ESLint v9(flat config)에서 Prettier plugin 설정하는 방법
prettier plugin recommended의 원리를 알면 쉬운 일이었습니다
Dec 29, 2024
ESLint
Next.js 14 App Router의 렌더링 전략 별 fetch cache 동작
Next.js의 렌더링 전략과 그것을 결정하는 캐시 설정을 정리했습니다
Dec 23, 2024
Next.js
웹 접근성 1 - 개요, 대체 텍스트 지침
대체 텍스트를 주는 방법은 img[alt]만 있는 게 아니었어요
Dec 22, 2024
Web Dev
UX
웹 개발에서 Git Flow를 쓰는 이유
QA 시의 효율성 때문에 Git Flow를 사용해요
May 16, 2024
Git
Development Process
React-query 환경에서 효율적으로 무한스크롤 기능을 구현하는 방법
useInfiniteQuery의 사용법과 무한 스크롤 시 fetch하는 기능을 공통 컴포넌트로 만드는 방법을 설명해요
Mar 6, 2024
설계
React-query
React-query 환경에서 효율적으로 오류 처리하기
오류 공통 처리의 원리와 방법에 대해 예시로 설명해요
Feb 29, 2024
설계
오류핸들링
React-query
예시로 배우는 msw API mocking
msw로 API mocking을 하는 방법을 예시로 설명해요
Feb 26, 2024
msw
테스팅
Ripple 효과(트랜지션)를 선언적으로 리팩토링하기
Ripple 트랜지션을 예시로 명령형 패러다임 코드를 선언적으로 리팩토링하는 방법을 설명해요
Feb 16, 2024
설계
TS, React 환경의 export 컨벤션 제안
Named export로 통일하면 export 키워드를 public 키워드처럼 쓰면 돼요.
Feb 12, 2024
설계
예시로 배우는 React 테스팅
Button, Page를 예시로 요구사항을 테스트하는 방법을 설명해요
Feb 11, 2024
테스팅
예시로 배우는 Storybook
Button, Checkbox, TodoList Page 예시로 Storybook 사용법을 설명해요
Feb 11, 2024
Storybook
msw
문서화