미리보기

기본 정보

이름

김연이

직업

Frontend Developer

간단 소개

안녕하세요, 1년차 프론트엔드 개발자 김연이입니다.

자기소개

사용자 경험에 대해 항상 고민하는 개발자입니다

사용자의 입장에서 프로덕트를 바라보고, 사용자의 요구와 피드백을 통해 지속적으로 개선합니다.
좋은 아이디어가 있다면 적극적으로 의견을 제시하여 사용자에게 더 편리한 경험을 제공하기 위해 노력합니다.
사용자 경험을 개선하기 위해 증명서 자동 발급기 개발, Skeleton UI 도입, 자동 로그인 개선 등 다양한 기능을 개발하고 최적화한 경험이 있습니다.

저는 이런 개발자입니다

React, JavaScript, TypeScript 기반 코드를 익숙하게 다루며 웹 서비스 개발, 출시, 유지보수 경험이 있습니다.
적극적으로 문제 해결 방법을 찾고, 빠르게 실행하여, 점진적으로 개선합니다.
블로그 작성, 세미나 발표 등 경험을 통해 얻은 것을 공유해 함께 성장하는 것을 좋아합니다.

기술 스택

React, JavaScript, TypeScript, React Native, HTML/CSS, Next.js

경력

회사명

코드크레인유한회사

직급 | 부서 | 근무 유형

프로 | R&D 스튜디오

근무 기간

2023.06. ~ 2024.03. (10개월)

담당 업무

고객 요구에 맞춘 맞춤형 IT 솔루션 개발 스타트업

React 기반 프로젝트들에 참여하여 UI 개발, 서버 상태 관리, 사용자 경험 개선 등 다양한 프론트엔드 개발 업무 담당했습니다.
React Query 가이드 문서 배포 및 개발 세미나 발표, 화면 설계서 개선 세미나 등에 주도적으로 참여하여 동료와 함께 성장하는 환경을 만드는 데 기여했습니다.

회사명

주식회사 하얀마인드

직급 | 부서 | 근무 유형

인턴 | RedKiwi 스쿼드

근무 기간

2022.03. ~ 2022.12. (10개월)

담당 업무

영상 기반 영어 학습 애플리케이션 RedKiwi 개발 스타트업

React Native 기반 애플리케이션 RedKiwi와 LMS의 비즈니스 요구에 맞는 신규 기능 개발 및 유지보수 업무를 담당했습니다.
사내 프론트엔드 스터디와 세미나, 코드 리뷰 프로세스 개선 등에 참여하여 사내 개발 문화 개선에 기여했습니다.

프로젝트

프로젝트명

현대로보틱스 서빙 로봇 웹 애플리케이션 개발

소속/기관명

코드크레인

프로젝트 기간

2023.06. ~ 2024.03.

프로젝트 내용

터치패널을 통해 서빙 로봇 제어 및 모니터링 웹 애플리케이션 개발 프로젝트

What did I do

UI 개발, API 통신 및 서버 상태 관리, WebSocket을 사용한 실시간 데이터 관리 업무담당
로봇 관련 RESTful API 응답 지연으로 인한 사용자 경험 저하 문제를 Optimistic Update로 개선하기 위해 React Query 도입 -> 로딩 화면 표시 시간 90% 감소 및 사용자 경험 향상
WebSocket 연결, 에러 처리, 재연결, 해제 로직 구현 및 Context API를 사용해 전역적으로 관리하여 안정적인 실시간 WebSocket 통신 구현

Tech Stack
React.js, JavaScript, React Query, Axios, react-i18next, Redux, Emotion, Linux, Docker

프로젝트명

MAKE8 관리자 백오피스 개발

소속/기관명

코드크레인

프로젝트 기간

2023.11. ~ 2024.03.

프로젝트 내용

AI 기반 디자인 커뮤니티 플랫폼 'MAKE8'의 백오피스 개발 프로젝트

What did I do

MAKE8 서비스의 백오피스 프론트엔드 개발 전담
API 상태관리, 캐싱, Optimistic update 처리를 위해 React Query 아키텍쳐 설계 및 도입
- JavaScript로 사용하던 React Query를 TypeScript로 마이그레이션하여 타입 안정성 개선
- React Query 사용 가이드 사내 프론트엔드 세미나 발표 및 제공, 관련 블로그 글 기고(React Query 잘 사용하기)
Swagger와 OpenAPI Generator를 활용한 API 인터페이스 생성 자동화

Tech Stack
React.js, TypeScript, React Query, Axios, Emotion, Nest.js, Mongo DB, Swagger

프로젝트명

MAK8 서비스 개발

소속/기관명

코드크레인

프로젝트 기간

2023.11. ~ 2024.03.

프로젝트 내용

AI 기반 디자인 커뮤니티 플랫폼 'MAKE8' 서비스 개발 프로젝트

What did I do

AI 이미지 아트워크 목록, 좋아요, 팔로잉 등 SNS 기능, 회원정보 및 앱 설정 개발 담당
AccessToken 만료 시 Axios Interceptor로 401 Unauthorize 에러를 감지하여 RefreshToken 기반 AccessToken 자동 갱신 로직 구현 -> 서비스 이용 중단 최소화하여 사용자 이탈률 감소
AccessToken 갱신 요청이 중복되는 문제를 Promise의 상태를 사용해 AccessToken 갱신 요청이 진행 중인지 확인하여 해결 -> API 호출횟수 3회 => 1회
Image Preload를 통해 얻은 이미지 크기를 기반으로 이미지 높이별 맞춤형 Skeleton UI 적용 -> 사용자의 데이터 로딩 대기 경험 개선

Tech Stack
React.js, TypeScript, React Query, Axios, Emotion, Nest.js, Mongo DB, Swagger

프로젝트명

RedKiwi 애플리케이션 개발

소속/기관명

하얀마인드

프로젝트 기간

2022.08. ~ 2023.12.

프로젝트 내용

RedKiwi는 React Native 기반 영어 학습 애플리케이션입니다. RedKiwi 개발팀에서 스크럼 방법론에 따라 2주 스프린트 단위로 제품을 개발하며 비즈니즈 요구에 따른 신규 기능 개발 및 유지보수 업무를 진행했습니다.

What did I do

React Native 기반 애플리케이션 개발 및 유지보수 업무 담당
비즈니스 요구에 따른 신규 기능 개발 및 수정을 통해 사용자 경험 개선
영상 카테고리의 이미지를 아이콘에서 카테고리 관련 대표 영상 이미지로 변경 및 전체 카테고리 표시 UI 개선 -> 카테고리 선택률 최대 12% 증가
공통 목록 컴포넌트에서 데이터를 새로 불러오는 작업이 진행 중인지 여부를 확인하고 Promise의 상태가 pending인 경우 목록 하단에 로딩 스피너를 적용하는 작업 진행 -> 로딩 대기 경험 개선을 통한 사용자 경험 개선

Tech Stack
React Native, TypeScript, Firebase, GCP, GraphQL

프로젝트명

RedKiwi LMS 개발

소속/기관명

하얀마인드

프로젝트 기간

2022.03. ~ 2023.12.

프로젝트 내용

RedKiwi LMS는 RedKiwi 앱 내 학습 콘텐츠를 관리하는 백오피스입니다. LMS를 사용하는 운영팀과 학습 튜터들의 피드백을 수집하고 반영하여 지속적으로 서비스 품질을 개선했습니다.

What did I do

영어학습 애플리케이션 'RedKiwi'의 백오피스 개발 및 유지보수 업무 담당
직접 제안한 개선점과 구성원들의 요구사항을 바탕으로 새로운 기능을 추가하거나 에러를 수정하여 업무 생산성 향상
학습 튜터들의 학습 증명서 발급 업무 시간 단축을 위한 HTML5 Canvas를 활용한 학습 증명서 자동 발급기 제안 및 개발 -> 증명서 발급 시간 88% 단축
운영팀의 리워드 이벤트 관리 효율성 증대를 위해 참여자 정보와 지급 정보 CSV 파일로 Export 하는 기능을 개발 -> 리워드 이벤트 관리 업무 효율 개선

Tech Stack
TypeScript, React Admin, Firebase, GCP, GraphQL