실무 코드 가이드
새 문법 소개보다 실제 프로젝트에서 어디에 적용하고 무엇을 조심해야 하는지 기준을 먼저 정리합니다.
프론트엔드 실무 코드를
문제 해결 중심으로 정리합니다
Frontend Note는 React, TypeScript, JavaScript, CSS, 성능과 접근성을 실제 코드와 체크리스트로 정리하는 개발 자료실입니다.
문제 해결 노트
느린 화면, 복잡한 상태, 깨지는 레이아웃처럼 자주 만나는 문제를 재현 순서와 수정 코드로 설명합니다.
개발 자료실
React, TypeScript, CSS, 접근성, 성능 점검에 바로 쓰는 공식 문서와 도구 링크를 모아둡니다.
실무 코드 가이드
React
React 19 실무 전환 가이드: 폼, 액션, 렌더링을 어디부터 바꿀까
React 19를 새 기능 목록이 아니라 운영 중인 프론트엔드 코드베이스에 안전하게 적용하는 순서로 정리합니다.
Web Performance
프론트엔드 성능 점검 노트: LCP, INP, CLS를 실제 화면에서 줄이는 순서
PageSpeed 점수보다 사용자가 느끼는 병목을 먼저 찾고 이미지, 폰트, JavaScript, 동적 영역을 순서대로 점검합니다.
TypeScript
TypeScript 점진 도입 가이드: 기존 JavaScript 프로젝트를 안전하게 바꾸는 법
레거시 JavaScript 프로젝트에서 TypeScript를 한 번에 갈아엎지 않고 안정성이 높은 영역부터 적용하는 방법을 정리합니다.
Git Workflow
Git 브랜치 전략 실무 비교: 작은 팀은 GitHub Flow부터 시작하자
Git Flow와 GitHub Flow를 이름으로 외우지 않고 배포 주기, 리뷰 규칙, 롤백 기준으로 선택하는 방법을 정리합니다.
CSS Layout
CSS Flexbox와 Grid 선택 기준: 카드 목록, 툴바, 대시보드 레이아웃
Flexbox와 Grid를 언제 나눠 써야 하는지 실제 UI 패턴과 유지보수 관점에서 비교합니다.
Accessibility
웹 접근성 기본 점검: 버튼, 링크, 폼, 표를 의미 있게 만드는 법
접근성을 별도 작업이 아니라 HTML 구조와 사용자 흐름 품질로 다루는 실무 점검 기준입니다.
JavaScript
JavaScript 클로저 실무 노트: 상태 은닉, 디바운스, 오래된 참조 문제
클로저를 면접 개념이 아니라 이벤트 핸들러, 타이머, React 훅에서 발생하는 실제 문제로 설명합니다.
JavaScript
JavaScript 이벤트 루프 이해하기: UI 멈춤과 Promise 실행 순서 디버깅
콜 스택, 마이크로태스크, 렌더링 타이밍을 실제 프론트엔드 디버깅 관점에서 정리합니다.
React
React 상태 관리 선택 기준: 서버 상태와 UI 상태를 먼저 나누기
Redux, Zustand, Context를 비교하기 전에 상태의 책임을 분류하고 도구 선택 기준을 세웁니다.
Chrome DevTools
Chrome DevTools 성능 분석 실습: 느린 화면을 기록하고 고치는 순서
Performance, Network, Coverage 탭을 이용해 느린 화면의 원인을 기록하고 수정 전후를 비교합니다.
Workflow
프론트엔드 코드 리뷰 체크리스트: 버그를 줄이는 리뷰 기준 7가지
React와 TypeScript 프로젝트에서 코드 리뷰를 할 때 동작, 타입, 접근성, 성능, 에러 처리를 어떤 순서로 확인해야 하는지 정리합니다.
React
React 폼 검증 패턴: 입력값, 에러 메시지, 제출 상태를 안정적으로 다루는 법
React에서 폼 검증을 구현할 때 클라이언트 검증, 서버 검증, 에러 표시 위치, 제출 중 상태를 어떻게 나누어야 하는지 정리합니다.
JavaScript
프론트엔드 API 에러 처리 설계: 로딩, 재시도, 빈 상태를 나누는 기준
API 요청이 실패했을 때 프론트엔드에서 네트워크 오류, 권한 오류, 빈 데이터, 서버 오류를 어떻게 구분하고 화면에 표현해야 하는지 설명합니다.