A
SWR
- ·캐시를 메모리에 보관
- ·설정이 적음
- ·자동 revalidation 기본
B
React Query
- ·캐시를 localStorage까지 확장 가능
- ·세밀한 캐시 제어 옵션
- ·서버 상태 관리 기능 풍부
tradeoff간단한 데이터 패칭은 SWR, 복잡한 서버 상태 관리가 필요하면 React Query.
비교 자세히 보기plain text devlog
주니어 개발자의 공개 노트
겪은 문제, 확인한 해결책, 쓸 만한 스니펫을 그대로 정리했다. JS/TS, React, Next.js, Git, 디버깅 패턴 중심.
새로운 글
모두 보기다루는 주제
기술 영역별 노트
이 사이트에서 다루는 기술 영역. 각 항목은 관련 노트와 스니펫으로 연결된다.
자주 막히는 문제
증상 → 원인 → 해결
주니어가 자주 마주치는 문제를 증상 → 원인 → 해결 순서로 짧게 정리했다.
problem / 01
Hydration mismatch
- symptom
- 서버 렌더링 결과와 클라이언트 DOM이 달라 콘솔에 `Warning: Prop ... did not match` 출력.
- fix
- 서버/클라이언트에서 다른 값을 생성하는 코드(Date.now, Math.random 등)를 `useEffect` 안으로 이동시킨다.
상세 노트 보기
problem / 02
useEffect 의존성 경고
- symptom
- `React Hook useEffect has a missing dependency` ESLint 경고.
- fix
- 의존성 배열에 사용하는 변수를 모두 추가하거나, 함수를 `useCallback`으로 감싸 참조 안정성을 확보한다.
상세 노트 보기
problem / 03
TypeScript type narrowing 실패
- symptom
- `Object is possibly 'undefined'` 또는 `Type 'unknown' is not assignable` 에러.
- fix
- `typeof`, `instanceof`, `in` 연산자 또는 사용자 정의 타입 가드 함수를 사용해 타입을 좁힌다.
상세 노트 보기
problem / 04
detached HEAD 상태
- symptom
- Git에서 `HEAD detached at` 메시지 출력. 커밋은 되지만 브랜치가 없는 상태.
- fix
- `git checkout -b <new-branch>` 로 새 브랜치를 만들거나 `git switch -` 로 이전 브랜치로 돌아간다.
상세 노트 보기
자주 비교되는 개념
트레이드오프 비교
자주 헷갈리는 개념 짝을 나란히 비교해 정리했다. 트레이드오프 위주로 기록.
A
rebase
- ·커밋 히스토리를 선형으로 유지
- ·force push 필요 (공유 브랜치 주의)
- ·충돌을 커밋마다 해결
B
merge
- ·머지 커밋이 생성됨
- ·히스토리가 그대로 보존됨
- ·충돌을 한 번에 해결
tradeoff개인 기능 브랜치에서는 rebase로 히스토리 정리, 팀 공유 브랜치에서는 merge로 안전하게.
비교 자세히 보기새로운 글
모두 보기자주 묻는 것들
노트 활용 FAQ
노트 활용법, 인용 정책, 학습 루틴에 대해 자주 받는 질문 정리.
본인 환경에서 동작을 확인한 후 쓰는 것을 권장한다. 버전이 다르면 동작하지 않을 수 있다. 버전은 가능한 명시해두지만, 라이브러리 업데이트로 달라질 수 있다.
노트 운영 원칙
과장 없이, 코드 중심으로
P
Plain Text Devlog
주니어 웹 개발자의 공개 노트
주니어 웹 개발자가 실무에서 겪은 문제와 검증한 해결책을 기록한 공개 노트다. 화려한 설명보다 재현 가능한 코드와 사실 위주로 적는다.
운영 원칙
과장 없음 — 동작을 확인한 것만 기록한다.
코드 친화 — 설명보다 코드와 에러 메시지가 먼저다.
evidence-first — 공식 문서·소스 링크를 근거로 제시한다.
한계 솔직히 — 아직 모르는 부분은 '미확인'으로 표시한다.
plain text devlog
주니어 개발자의 공개 공책
Plain Text Devlog는 JS/TS, React, Next.js, Git 실무 노트와 디버깅 기록을 정리한 주니어 개발자의 공개 공책이다.