Project
— Overview
Vanilla JS부터 React, Next.js까지 33개의 프론트엔드 튜토리얼을 모아놓은 컬렉션. 각 튜토리얼은 독립 실행 가능한 예제로 구성되어 있으며, 개념 설명 없이 코드와 동작 결과만으로 패턴을 익힐 수 있도록 설계되었다.
이벤트 위임, 상태 관리, 비동기 패턴, 커스텀 훅, 서버 컴포넌트 등 실무에서 자주 마주치는 주제를 다룬다.
— Core Logic
이벤트 위임 — 개별 자식 요소마다 리스너를 붙이는 대신 부모 한 곳에서 이벤트를 위임해 메모리를 절약하고 동적 요소를 처리한다.
// Bad: 리스트 아이템마다 리스너 등록
items.forEach(item => {
item.addEventListener('click', handleClick);
});
// Good: 부모에 한 번만 등록 — 이벤트 위임
document.querySelector('.list').addEventListener('click', e => {
const item = e.target.closest('[data-id]');
if (!item) return;
handleClick(item.dataset.id);
});01-event-delegation — vanilla JS
커스텀 훅 — 반복되는 fetch 로직을 useFetch로 추상화해
컴포넌트가 데이터 페칭 세부 사항을 몰라도 되게 한다.
// hooks/useFetch.js
function useFetch(url) {
const [data, setData] = useState(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
useEffect(() => {
let cancelled = false;
setLoading(true);
fetch(url)
.then(r => r.json())
.then(d => { if (!cancelled) setData(d); })
.catch(e => { if (!cancelled) setError(e); })
.finally(() => { if (!cancelled) setLoading(false); });
return () => { cancelled = true; }; // 언마운트 시 응답 무시
}, [url]);
return { data, loading, error };
}17-custom-hook — React
— How It Works