Frontend Developer

Yuyeong Jeon

지속 가능한 코드를 그리는 프론트엔드 개발자입니다.

경력

  • 2024.05 ~ 2025.10
    웹 프론트엔드 개발자 | 책임㈜ 비에이에너지
    • 자사 배터리 화재 예측 솔루션 개발
    • V사 등 타사 시스템 외주 개발
    • React
    • Chart.js
    • Rechart
    • AntD
    • Emotion
    • Three.js
    • Kakao Map API
    • i18Next
    • ExcelJS
    • React-Grid-Layout
    • Websocket API
    • MSW
    • Axios
    • React-Query
    • Websocket STOMP 프로토콜 기반 실시간 센서 데이터 통신 구현
    • Mock 서버 및 인증 모듈 사내 패키지 구축
    • 라이브러리 및 Canvas 활용 실시간 센서 상태 차트 구현
    • Three.js 기반 3D 배터리 랙 인터랙티브 화면 구현
    • 카카오 지도 API 활용 실시간 배터리 운송 위치 화면 구현
    • 화재 알림 설정, 알림 수신자 관리, 안전관리범위 설정, 운영 자원 관리 기능 구현
    • 부가기능: i18n 기반 다국어 지원, 데이터 엑셀 다운로드
    • 패키징을 위한 프로젝트 설정하기
    • 구간 편차가 큰 데이터의 차트 시인성 문제 개선하기

프로젝트

  • Reboot | 소모임 커뮤니티 웹

    팀
    2026.03 ~ 2026.04
    /images/portfolio/reboot_list.gif/images/portfolio/reboot_create.gif
    Reboot
    faviconhttps://reboot-codeit.vercel.app
    • Next.js
    • TypeScript
    • React-Query
    • Zustand
    • MSW
    • Tailwind CSS
    • motion
    • 모임 목록 무한 스크롤 탐색 및 필터링
      • IntersectionObserver, React-Query useInfiniteQuery 사용
      • staleTime 0과 gcTime 5분 적용, 빈번한 데이터 변경을 고려하여 Suspense 제거
      • URL 쿼리 파라미터를 사용한 필터 조건 관리
    • 단계별 모임 생성 폼 및 임시 저장 기능
      • 4단계 폼을 각 컴포넌트로 분리하고 CSS를 사용한 현재 단계만 표시
      • URL 쿼리 파라미터, React Context, sessionStorage를 사용한 폼 상태 관리
      • onKeyDown에서 Enter 감지 시 폼이 유효할 경우 다음 단계로 이동
        (IME 조합 중, textarea 또는 특정 button 제외)
      • tabIndex={-1}, 마운트 시 폼을 자동 포커스하여 Enter 키 이벤트 감지
      • onBlurCapture, requestAnimationFrame을 사용하여 포커스가 폼 밖으로 나가는 경우 복원 및 예외 처리
      • inert 설정으로 비활성 단계 접근 차단
    • Husky, Github Action 기반 CICD 구축

  • Noteit | 키워드 중심 학습 웹

    개인
    2022.12
    /images/portfolio/noteit_dashboard.gif/images/portfolio/noteit_quiz.gif/images/portfolio/noteit_responsive.gif
    project-noteit
    https://noteit.kro.kr
    • React
    • React-Query
    • Recoil
    • Chart.js
    • Node.js
    • Express
    • MySQL
    • AWS(EC2, RDS)
    • 단어장 기능: 주제/키워드/이미지 포함 상세 설명
      • CKEditor5 커스텀 빌드 및 adapter 함수 사용
    • 퀴즈 기능: 단답식 퀴즈, 타이머, 점수 기록 및 통계
      • localStorage에 사용자 지정 타이머 값 저장
      • 정답을 대소문자·공백 처리 후 정규식을 사용한 괄호, 쉼표 기준 분리하여 복수 정답 파싱
      • 중첩 setTimeout을 사용한 퀴즈 카운트다운, 시간 초과 시 자동 오답 처리
    • Web Push API 기반 사용자 지정 시각 PUSH 알림
      • Web Push API + VAPID 키쌍으로 브라우저 구독 정보를 DB에 저장
      • node-schedule로 사용자 지정 시각에 web-push 알림 발송
      • Service Worker가 수신하여 OS 알림으로 표시
    • PWA (manifest, Service Worker) 구현
      • manifest.json 및 service-worker.js 파일 구현
    • 부가 기능: 검색, 북마크, 투두리스트

  • Howdo | 지식공유 커뮤니티 웹 개발

    팀
    2023.01
    /images/portfolio/howdo_post.gif/images/portfolio/howdo_order_filter.gif
    team-project-howdo
    • React
    • Tailwind
    • CKEditor
    • Node.js
    • Express
    • MySQL
    • 게시판, 게시글 및 댓글 기능
    • 게시글 검색 및 정렬 기능
    • 웹 에디터를 사용한 이미지 및 영상 업로드
    • 사용되지 않는 이미지는 DB 에서 삭제되도록 스케줄링

  • Tiget | 공연정보 서비스 웹 개발

    팀
    2022.11
    /images/portfolio/tiget_calendar.gif/images/portfolio/tiget_recommend.gif
    team-project-tiget
    • Pug
    • Node.js
    • Express
    • MySQL
    • 캘린더 화면 구현 및 공연 일정 표시
    • 공연 상세 검색 및 결과 페이지 구현
    • 회원 추천 공연과 북마크 기능

토이 프로젝트

교육

  • 2026.02 ~ 2026.04
    코드잇 스프린트 프론트엔드 단기 심화 13기㈜ 코드잇
    • 프론트엔드 심화 교육 및 팀 프로젝트 수행
    • JS 스터디 진행
  • 2023.06 ~ 2023.08
    원티드 프리온보딩 프론트엔드 인턴십 11기㈜ 원티드랩
    • 프론트엔드 관련 교육 및 기업과제 토이 프로젝트 수행
    • 200명 중 6명 우수생 최종 선정
  • 2022.10 ~ 2023.04
    MERN 기반 Full Stack 개발자 양성과정㈜ 한국경영원 인재개발원
    • React, Nodejs, Express, MongoDB, MySQL 강의 수강
    • 개인 및 팀 프로젝트 수행

주요 저장소