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