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