Ji
/
허지연
Share
Sign In
허지연
프론트엔드 개발자
Email
jiy7107@gmail.com
GitHub
https://github.com/Heojiyeon
Blog
https://velog.io/@jiy7107
Career.
JEI 재능교육
교육시스템팀 팀원 | 프론트엔드 파트
2023.12 - 재직 중
온라인 진단 서비스 리뉴얼 개발
2024.07 - 2024.09
재능교육 회원 및 비회원이 수학, 한자, 국어, 영어 과목에 대해 학습 수준을 평가 및 진단받을 수 있는 서비스
기존 진단 과목(수학, 한자) 이외에 국어, 영어 과목 확장 및 채점 대기 기능 추가
iframe 기반 문항 컨텐츠 웹 페이지와 온라인 진단 페이지 간 소통 및 데이터 연동
프롤로그 SVG 애니메이션 에셋 로딩 이슈에 대해 이미지 preload 및 fallback ui를 적용해
사용자 경험 개선
반응형 및 크로스 브라우징 이슈 대응
기능별 커스텀 훅을 도입해 중복 코드 개선
[사용 기술]
TypeScript, React, Zustand, Tailwind CSS
수학 문항 저작도구 개발
2024.05 - 2024.06
온라인 서비스 내 제공할 수학 문항 컨텐츠를 저작할 수 있는 서비스
에니메이션 모듈, 클릭 모듈, 사운드 모듈 제작
Fabric.js 기존 컴포넌트를 확장한 커스텀 클래스형 컴포넌트를 생성해 문항 내 엘리먼트에 기능을 탈부착할 수 있도록 구현
저작 문항 render 화면 내 트리거에 따라 저작한 문항이 동작할 수 있는 렌더링 기능 구현
useReducer 훅을 도입해 상태 관리 코드 분리 및 복잡도 개선
[사용 기술]
TypeScript, React, Fabric.js, Jotai, Tailwind CSS
사내 서비스 SOL 리뉴얼 개발
2024.02 - 2024.05
사내 과목팀, 연구팀이 문항을 제작하고 관련 텍스트, 이미지, 사운드 데이터를 관리할 때 사용하는 서비스
텍스트, 이미지, 사운드 수정 페이지, 관리자 페이지 제작
JavaScript → TypeScript 적용
Suspense, ErrorBoundary를 적용해 사용자 경험 개선
Tanstack-query 도입으로 서버 상태와 클라이언트 상태 분리 개발 및 캐싱 적용
React-hook-form, zod 도입으로 데이터 수정 시 발생하던 과도한 리렌더링 개선
Private router를 개발해 토큰 및 경로의 유효성을 검증할 수 있도록 관심사 분리 및 코드 개선
[사용 기술]
TypeScript, React, Tanstack-query, React-hook-form, Zod, Tailwind CSS
OJT 프로젝트
2023.12 - 2024.02
덧셈 게임
SVG, Vanilla TypeScript를 활용한 SPA 형태의 게임
관련 링크
https://github.com/Heojiyeon/jei-ojt-week1
학습 컨텐츠 - 동물 찾기, 동물 퍼즐 게임
Fabric.js, Vanilla TypeScript를 활용한 SPA 형태의 게임
관련 링크
https://github.com/Heojiyeon/jei-ojt-week2
컨텐츠 저작도구 및 렌더링 엔진
Fabric.js, React를 활용해 컨텐츠 문항을 만들고 풀이할 수 있는 렌더링 엔진을 제작
관련 링크
https://github.com/Heojiyeon/jei-ojt-week3-4
컨텐츠 학습 서비스
iframe, React를 활용해 컨텐츠 풀이 및 Chart.js를 기반으로 결과 통계 그래프를 확인할 수 있는 서비스
관련 링크
https://github.com/Heojiyeon/jei-ojt-week5-6
영단어 게임
Phaser를 활용한 게임
관련 링크
https://github.com/Heojiyeon/jei-ojt-week7-8
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
[관련 링크]
Github
Awards.
UDEMY 우수상
2023.08
맨텍 개발 경진대회
은상
2021.09
Experiences.
프로그래머스
프론트엔드 데브코스
3기
2022.10 - 2023.03
Education.
명지대학교
융합소프트웨어학부
학사
2017.03 - 2022.08
Made with SlashPage