Share
Sign In

허지연

프론트엔드 개발자
Email jiy7107@gmail.com

Career.


JEI 재능교육

교육시스템팀 팀원 | 프론트엔드 파트
2023.12 - 재직 중
온라인 진단 서비스 리뉴얼 개발 및 유지보수
2024.07 - 2024.11
재능교육 회원/비회원이 과목별 학습 수준을 평가 및 진단받을 수 있는 서비스
기존 진단 과목(수학, 한자) 이외에 국어, 영어 과목 확장 및 채점 대기 기능 추가
프롤로그 SVG 에니메이션 에셋 로드 이슈에 대해 pre load & suspense loading 처리 (0.568초 → 0.319초 약 43% 개선)
lazy load & manual chunks 적용으로 번들 사이즈 축소
iframe 기반 문항 컨텐츠 웹 페이지와 온라인 진단 페이지 간 소통 및 데이터 연동
사용자 트래킹을 위한 Google Analytics 태그 추가
반응형 및 크로스 브라우징 이슈 대응
retry 커스텀 로직 추가로 사용자 경험 개선
[사용 기술]
TypeScript, React, Zustand, Tanstack-Query, Tailwind CSS
[관련 링크]
수학 문항 저작도구 개발
2024.05 - 2024.06
온라인 수학 문항 컨텐츠 저작 서비스
문항 내 object에 부착할 수 있는 에니메이션 모듈, 클릭 모듈, 분수 모듈, 사운드 모듈 개발
기본 fabric object 클래스 컴포넌트를 확장해 기능 및 속성을 추가한 커스텀 컴포넌트 개발
저작 화면과 문항 풀이(클라이언트) 화면 간 iframe을 활용한 소통 로직 구현
Canvas event emitter를 활용한 controller를 중심으로 canvas내 추가/변경/삭제되는 object 데이터 관리
[사용 기술]
TypeScript, React, Canvas API, Fabric.js, Jotai, Tailwind CSS
사내 서비스 SOL 리뉴얼 개발
2024.02 - 2024.05
사내 과목 연구팀이 사용하는 문항 개발 및 관련 텍스트, 이미지, 사운드 데이터 관리 백오피스 서비스
텍스트, 이미지, 사운드 관리 페이지, 관리자 페이지 제작
JavaScript → TypeScript 마이그레이션 적용
Suspense, ErrorBoundary를 적용해 사용자 경험 개선
토큰 유무 및 경로 유효성 검증 로직을 분리한 private router 적용
[사용 기술]
TypeScript, React, Tanstack-query, React-hook-form, Zod, Zustand, Tailwind CSS
OJT 프로젝트
2023.12 - 2024.02
사내 온보딩 프로그램으로 기술 학습을 위한 프로젝트 진행
[사용 기술]
JavaScript, React, TypeScript, Tailwind CSS, Fabric.js, Phaser

Side Projects.

POINT [UDEMY 우수상]

센터 전용 기록 템플릿 및 링크 관리 서비스
2023.07 - 2023.08
센터 기록 템플릿 생성 기능
문항 별 (텍스트, 미디어, 선택형) CRUD 구현
각 문항의 필수 여부, 이동 기능 및 유효성 검증을 거쳐 템플릿을 생성하는 기능 구현
센터 기록 템플릿 생성 기능 - 트러블 슈팅
미디어 첨부 버튼 클릭 시 이벤트가 중복으로 발생하는 이슈에 대해 디버깅 진행 및 이벤트 캡쳐링을 확인하고 해결
onChange마다 상태를 업데이트하며 발생했던 렌더링 문제를 onBlur를 적절히 활용해 개선
생성 완료된 템플릿이 메인 화면에 바로 적용되지 않는 문제를 낙관적 업데이트로 사용자 경험 개선
센터 기록 템플릿 편집 기능
기존에 생성한 템플릿의 내용을 불러와 수정할 수 있는 CRUD 구현
전체 프로젝트 리팩토링
관심사에 따라 provider를 적절히 분리 및 적용해 코드의 유지 보수 및 렌더링 이슈 개선
태블릿과 웹 사이의 사용자 경험의 차이를 알고 자연스러운 경험을 제공하기 위해 UI 개선
사용자 피드백을 받아 서비스를 개선
전체 프로젝트 초기 세팅 및 협업을 위한 규칙 생성
Husky eslint-stage를 적용해 프로젝트 협업 효율성 증대
package-lock.json 기반의 버전 정보 고정을 도입하여 의존성 버저닝 이슈 방지
[사용 기술]
TypeScript React Context API Axios SWR Emotion
[관련 링크]

Awards.

UDEMY 우수상

2023.08

맨텍 개발 경진대회
은상

2021.09

Experiences.

프로그래머스
프론트엔드 데브코스
3기

2022.10 - 2023.03

Education.

명지대학교
융합소프트웨어학부
학사

2017.03 - 2022.08
Made with SlashPage