프론트엔드 개발자

김서연

사용자 중심의 경험을 설계하고, 협업과 공유를 통해 함께 성장하는 프론트엔드 개발자입니다.

책임감

협업 지향

학습 지향

커뮤니케이션

적응력

정보처리기사

프로젝트 내용[ 스터디 모임과 스터디룸을 통합적으로 관리하고 제공하는 플랫폼 ]사용자들이 스터디를 개설하고 참여할 수 있을 뿐만 아니라, 스터디룸 공간 제공자와 이용자를 연결하여 효율적인 스터디 환경을 조성기술 스택TypeScript / Next.js14 / Zustand / React-Query / React-Hook-Form / Zod / TailwindCSS역할 (프론트엔드)<ul><li>로그인/회원가입 페이지 UI/UX 설계 및 구현</li><li>React-Hook-Form과 Zod를 사용하여 입력 폼 유효성 검사 구현</li><li>jsonwebtoken 라이브러리를 활용한 토큰 만료기한 추출</li><li>API 요청 시 토큰 유효성 검증 및 자동 갱신 로직 구현</li></ul>성과 및 느낀점<ul><li>토큰 기반 인증 시스템 구현 과정에서 보안 취약점을 발견하고 개선하는 경험 습득</li><li>백엔드 개발자와의 협업을 통해 효율적인 토큰 갱신 로직 구현 및 API 통신 패턴 개선</li><li>재사용 가능한 폼 컴포넌트 설계로 개발 생산성 50% 향상</li></ul>Github<a target="_blank" rel="noopener noreferrer nofollow" href="https://github.com/Study-With-Me-JJ">https://github.com/Study-With-Me-JJ</a>

Study With Me

프로젝트 내용[ KB 금융 데이터를 활용한 맞춤형 금융 상품 추천 및 종합 자산 관리 플랫폼 ]사용자의 금융 현황과 니즈를 파악하여 최적화된 금융 솔루션을 제공하고, 데이터 기반의 자산 분석을 통해 효율적인 자산 관리를 지원함기술 스택JavaScript / Vue3 (composition API) / Pinia / TailwindCSS역할 (프론트엔드 | 디자인 총괄)<ul><li>Figma를 활용하여 UI/UX 디자인 총괄</li><li>설문 페이지 화면 구현 및 맞춤형 금융 상품 추천 기능 개발</li><li>Open AI API 프롬프팅 응답 데이터 구조 설계 백엔드 협업</li><li>사용자 체감 대기 시간 감소를 위한 로딩 애니메이션 구현</li></ul>성과 및 느낀점<ul><li>백엔드 개발자와의 협업을 통해 API 설계 프로세스와 효율적인 데이터 구조에 대한 이해도 향상</li><li>사용자 경험 개선을 위한 로딩 애니메이션 구현과 API 응답 최적화 과정에서 UX의 중요성 체득</li><li>실제 서비스 환경에서 발생할 수 있는 성능 이슈를 경험하고 해결 방안을 고민하는 과정 경험</li></ul>Github<a target="_blank" rel="noopener noreferrer nofollow" href="https://github.com/KB-ITYL-P2-2">https://github.com/KB-ITYL-P2-2</a>

F:YL(F:nd Your Life)

프로젝트 내용[ 자녀의 금융 교육과 용돈 관리를 결합한 미션 기반 교육용 금융 플랫폼 ]부모와 자녀 간의 상호작용을 통해 책임감과 금융 이해도를 높이며, 게이미피케이션 요소를 활용하여 자녀들의 능동적인 참여를 유도함기술 스택TypeScript / React / Recoil / styled-component / TailwindCSS역할 (프론트엔드)<ul><li>미션 페이지 구현</li><li>미션 상태별 색상 코드 시스템 적용으로 직관성 강화</li><li>모바일 환경에 최적화된 반응형 레이아웃 구현</li><li>Shadcn UI의 재사용 가능한 컴포넌트를 활용하여 일관된 디자인 시스템 구축</li></ul>성과 및 느낀점<ul><li>다양한 사용자 페르소나(부모/자녀)에 따른 차별화된 UI/UX 설계 경험</li><li>컴포넌트 재사용성과 확장성을 고려한 체계적인 설계 능력 향상</li><li>TypeScript를 통해 타입 안정성의 중요성을 체감</li></ul>Github<a target="_blank" rel="noopener noreferrer nofollow" href="https://github.com/MoonHyoMan">https://github.com/MoonHyoMan</a>

JUSEYO

프로젝트 내용[ 부부 간 갈등 해결을 위한 맞춤형 상담 매칭 플랫폼 ]성향 분석을 통해 신혼/예비부부와 경험 많은 기혼부부를 연결하여, 실제 경험을 바탕으로 한 조언과 상담을 제공함기술 스택TypeScript / React -&gt; Next.js / redux / styled-component / TailwindCSS역할 (프론트엔드)<ul><li>React, TypeScript 기반의 프로젝트 초기 세팅 담당</li><li>커뮤니티, 성향 분석 결과 페이지 구현</li><li>Next.js 13+ 기반 마이그레이션 환경 설정</li><li>Next.js 13+ 마이그레이션을 통한 App Router 기반 페이지 라우팅 구조 개선</li></ul>성과 및 느낀점• Next.js의 App Router 아키텍처를 통해 서버 컴포넌트와 클라이언트 컴포넌트의 분리 및 최적화 경험 습득• 다양한 렌더링 전략(CSR, SSR, ISR)을 실제 프로젝트에 적용하며, 각 페이지의 특성에 맞는 최적화된 렌더링 방식 선택의 중요성을 이해하고 성능 향상을 경험Github<a target="_blank" rel="noopener noreferrer nofollow" href="https://github.com/KDT-2024-FirstStep-Team">https://github.com/KDT-2024-FirstStep-Team</a>