웹 프론트엔드 개발자로서 개발하며 생긴 궁금증들을 직접 검증하며 이해한 내용을 핵심만 명확하게 설명합니다.
예전에 찾아 보았던 지식이 기억나지 않아 다시 봤을 때 의아함 없이 깔끔하게 납득할 수 있는 글을 씁니다.
많이 부족하지만 이 글을 보시는 분들께도 도움이 되었으면 좋겠습니다 🙂
멘션, 영상 업로드가 정상 동작하지 않아서 수정 예정에 있습니다 🧎🙏 🙇
Articles
확장 가능한 Notion React Renderer 기획
Notion 컨텐츠를 정적 렌더링할 때 더 쉽게 커스텀 할 수 있게
Jan 15, 2025
Notion
Software Ideation
Flux란? Flux vs MVC
Flux가 왜 나왔는지, MVC와의 차이점은 무엇인지 확인해보았습니다
Jan 15, 2025
React.js
React의 props.children의 re-render 동작과 원리
props.children 부분이 re-render 되지 않는 현상을 발견, 파악해보았습니다.
Jan 12, 2025
React.js
자동화된 웹 프론트엔드 테스트 - 이유
수동 테스트 경험을 회고해보고 자동화된 테스트가 언제 좋을지 고민한 내용을 공유합니다
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
문서화