프론트엔드 개발자

강나연

안녕하세요. 유연한 사고로 진화하는 프론트엔드 개발자 강나연입니다. 기술 변화에 발맞춰 새로운 도구와 방법을 적극 수용합니다. AI 기술을 개발 과정에 효과적으로 활용하여 생산성과 창의성을 높이고, 빠르게 변화하는 디지털 환경에서 지속적인 성장을 추구합니다. 또한 다양한 배경의 팀원들과 원활히 소통하며 공동의 목표를 향해 나아가는 협업 능력을 갖췄습니다. 기술적 지식을 명확히 공유하고 피드백을 열린 마음으로 수용하며, 팀의 시너지를 극대화하는 데 기여할 수 있습니다.

정보처리기사

컴퓨터활용능력

강나연_프론트엔드.pdf

<ul><li>Next.js 14의 SSR을 활용한 초기 페이지 로딩 최적화 및 하이브리드 데이터 Fetching 전략<ul><li>서버에서 초기 데이터를 prefetch한 후 dehydration 과정을 거쳐 클라이언트에 전달 후, 클라이언트 사이드의 queryClient와 연결하여 서버와 클라이언트 간 데이터를 유기적으로 관리</li></ul></li><li>Next.js App Router 아키텍처 활용<ul><li>Next.js 14의 파일 시스템 기반 라우팅을 활용하여 복잡한 페이지 구조를 직관적으로 구성</li><li>중첩된 레이아웃(layout.tsx)을 활용하여 페이지 간 공통 UI 요소를 효율적으로 관리</li></ul></li><li>현업 개발자, 디자이너와의 협업<ul><li>현직 백엔드 개발자와 Swagger 및 Notion 기반 API 명세서 공유를 통한 체계적인 서버/클라이언트 연동</li><li>현직 디자이너와 Figma를 활용한 디자인 시스템 구축으로 일관성 있고 확장 가능한 UI/UX 컴포넌트 설계 및 Storybook을 통해 피드백을 반영하는 협업 프로세스 구현</li></ul></li><li>짧은 시간 중복되는 API 요청에 대해 debounce를 이용하여 과도한 API 호출 제어<ul><li>리액트 훅 라이브러리의 useDebouceValue를 사용하여 마지막 입력 후 500ms 동안 입력이 없으면&nbsp;API를 호출하게 함 이를 통해 이메일 필드 api 호출횟수 80% 이상 감소</li></ul></li><li>단위/E2E 테스트 구축 및 관리 및 UI 컴포넌트 테스트 자동화<ul><li>Jest를 활용한 단위 테스트와 Playwright를 이용한 E2E 테스트를 구축하여 코드 품질과 사용자 경험을 보장하는 테스트 환경을 조성</li><li>Storybook으로 공통 컴포넌트 및 페이지 별 UI를 문서화하고, 로그인/회원가입 플로우의 테스트 자동화를 통해 테스트 체계를 구축</li></ul></li><li>AWS&nbsp;클라우드&nbsp;마이그레이션&nbsp;및&nbsp;서버&nbsp;복구<ul><li>프로젝트&nbsp;종료&nbsp;후&nbsp;서버&nbsp;다운&nbsp;상황에서&nbsp;AWS&nbsp;RDS와&nbsp;EC2를&nbsp;활용하여&nbsp;데이터베이스와&nbsp;서버를&nbsp;마이그레이션하고&nbsp;시스템을&nbsp;성공적으로&nbsp;복구함</li></ul></li></ul>

같이 달램

<ul><li>서버 상태 관리 및 최적화<ul><li>TanStack Query로 효율적인 서버 데이터 관리 구현, Query Key를 세분화하여 데이터 요청 중복 방지</li><li>캐싱 전략 최적화로 불필요한 API 호출 감소 및 애플리케이션 성능 향상</li></ul></li><li>전역 상태 관리를 통한 클라이언트 상태 관리 시스템 구축<ul><li>Zustand를 활용한 전역 상태 관리로 모달 컨트롤 및 모달 데이터를 효율적으로 관리</li><li>Props-drilling 방지 및 컴포넌트 간 결합도 감소로 코드 유지보수성 향상과 불필요한 리렌더링 최소화를 통한 애플리케이션 성능 최적화</li></ul></li><li>React-Hook-Form과 Zod를 사용한 필드 관리<ul><li>다수의 입력 필드를 공통으로 사용하며, 각 필드에 유효성 검사 진행</li><li>React-Hook-Form 라이브러리를 사용하여 상태를 직접 생성하여 관리하지 않고 간단하게 입력필드를 구현함</li></ul></li><li>사용자 중심 UI/UX 설계<ul><li>에러 상황 별로 상세 에러 메시지 토스트 알림을 구현하여 명확한 사용자 피드백 제공</li><li>모든 디바이스에 최적화된 반응형 레이아웃 설계(모바일 최적화)로 사용자 접근성 향상</li></ul></li><li>보안 라우팅 아키텍처 구현<ul><li>PrivateRouter, PublicRouter 컴포넌트를 활용한 세션 인증 기반 라우팅 시스템 구축으로 권한에 따른 페이지 접근 제어 및 보안 강화</li></ul></li><li>Shadcn/ui 를 이용한 디자인 시스템 구축<ul><li>calendar, select, dropdown menu 등 다양한 컴포넌트를 프로젝트 요구사항에 맞게 유연하게 커스터마이징하여 일관된 디자인 시스템을 구현하고 사용자 경험(UX)을 최적화</li><li>재사용 가능한 컴포넌트를 생성하여 개발자 경험(DX) 상승</li></ul></li><li>GitHub PR 및 이슈 템플릿 적용<ul><li>PR 템플릿과 이슈 템플릿을 직접 설계하여 팀원들과의 협업 효율성을 높임.</li><li>기능 개발 내용과 에러 해결 과정을 명확하게 문서화하여 팀 전체의 개발 흐름을 투명하게 관리하고 의사소통을 간소화함</li></ul></li></ul>

프로젝트 매니저

<ul><li>서비스 배포 전 테스트 및 QA</li><li>Traffic Analysis: Gentelella to React Migration<ul><li>기존 jQuery 기반의 Genetelella로 만들어진 프로젝트를 React로 마이그레이션</li><li>React 기반의 컴포넌트 사용으로 재사용성과 유지보수성 향상</li><li>TypeScript 도입으로 정적 타입 검사와 코드 안정성 확보 및 개발 생산성 증대</li></ul></li></ul>