기록하고 배우며 성장하는
프론트엔드 개발자 장예지입니다.
PR 코드리뷰와 데일리 스크럼으로 팀원과 지속적으로 소통하며 업무 품질을 높였습니다. 인턴십 리팩토링 기간에는 PM님과 개선 작업 흐름을 제안해, 총 30개 개선 사항을 모두 완료했습니다.
해당 기술 스택에 마우스를 올리면 세부 기술 내용을 확인할 수 있습니다.
복잡하게 중첩된 API 응답에도 명시적 타입을 정의해 타입 안정성을 확보할 수 있습니다.
프레임워크 없이 DOM과 이벤트를 다뤄 폼 유효성 검증, URL 기반 탭 상태 유지 같은 인터랙션을 구현할 수 있습니다.
컴포넌트를 재사용 가능한 단위로 나누고, Custom Hook으로 데이터 조회·검증 로직을 분리해 재사용성을 높일 수 있습니다.
App Router 기반으로 서버·클라이언트 컴포넌트를 구분해 페이지 구조를 설계하고, Server Action으로 폼 데이터를 처리할 수 있습니다.
시맨틱 태그로 문서 구조를 잡고, 키보드·스크린 리더 사용자를 고려한 마크업을 작성할 수 있습니다.
서버 상태를 캐싱하고, 데이터 변경 후 쿼리를 invalidate해 새로고침 없이 화면을 최신 상태로 유지할 수 있습니다.
서버에 확정되기 전의 임시 작업 상태를 전역 스토어로 분리해, 서버 상태와 섞이지 않게 관리할 수 있습니다.
회원가입·예문 작성 폼처럼 입력 항목이 많은 폼의 입력 상태와 에러 메시지를 관리할 수 있습니다.
스키마로 입력값 검증 규칙을 정의하고, React-Hook-Form과 연결해 회원가입·예문 작성 폼을 검증할 수 있습니다.
RLS로 데이터 접근을 제어하고, RPC로 검색 로직을 서버에서 처리하며, @supabase/ssr로 서버·클라이언트 인증 상태를 관리할 수 있습니다.
유틸리티 클래스만으로 다크 모드 대응 UI와 반응형 레이아웃을 빠르게 구현할 수 있습니다.
LCP 등 성능 지표를 측정해 병목을 찾고, 이미지 우선 로딩·폰트 적용 범위 축소로 개선할 수 있습니다.
접근성 오류를 검사해 시맨틱 마크업, aria 속성, 대체 텍스트를 보완할 수 있습니다.
설계 문서(claude.md)로 작업 범위와 규칙을 먼저 정의하고, 이를 기반으로 기능을 개발할 수 있습니다.