허지연

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

JEI 재능교육
교육시스템팀 팀원 | 프론트엔드 파트
2023.12 - 재직 중
수학 문항 저작도구 개발
2023.05 - 진행중
온라인 서비스 내 제공할 수학 문항 컨텐츠를 저작할 수 있는 서비스
에니메이션 모듈 제작
[사용 기술]
TypeScript, React, Fabric.js, Tailwind CSS
사내 서비스 SOL 리뉴얼 개발
2023.02 - 2023.05
사내 과목팀, 연구팀이 문항을 제작하고 관련 텍스트, 이미지, 사운드 데이터를 관리할 때 사용하는 서비스
JavaScript → TypeScript 적용
Tanstack-query 도입으로 서버 상태와 클라이언트 상태 분리 개발
React-hook-form, zod 도입으로 데이터 수정 시 발생하던 과도한 리렌더링 개선
Private router를 개발해 토큰 및 경로의 유효성을 검증할 수 있도록 관심사 분리 및 코드 개선
[사용 기술]
TypeScript, React, Tanstack-query, React-hook-form, Zod, Tailwind CSS
OJT 프로젝트
2023.12 - 2023.02
덧셈 게임
SVG, Vanilla TypeScript를 활용한 SPA 형태의 게임
학습 컨텐츠 - 동물 찾기, 동물 퍼즐 게임
Fabric.js, Vanilla TypeScript를 활용한 SPA 형태의 게임
컨텐츠 저작도구 및 렌더링 엔진
Fabric.js, React를 활용해 컨텐츠 문항을 만들고 풀이할 수 있는 렌더링 엔진을 제작
컨텐츠 학습 서비스
iframe, React를 활용해 컨텐츠 풀이 및 Chart.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
[관련 링크]
Hey,cake
나만의 커스텀 케이크 주문 제작 서비스
2023.02 - 2023.03
소셜 회원가입 및 로그인 기능
Client, Authorization server, Resource server 간의 인가 프로세스를 알고 JWT 토큰을 활용해 구현
일반 사용자 및 업주 마이페이지 기능
JWT 토큰 내에 사용자의 정보를 확인하고 유저 특성 별 마이페이지를 제공하도록 구현
업체 정보 등록 기능
텍스트, 이미지, 날짜 등 다양한 형태의 상태를 다루는 정보 등록 폼을 비제어 컴포넌트 방식으로 다루는 react-hook-form을 활용해 구현
주문 내역 조회 및 삭제 기능
유저 별 주문 내역을 조회하고 삭제할 수 있도록 구현
주문 내역 조회 및 삭제 기능 - 트러블 슈팅
주문 내역 삭제 결과가 화면에 바로 적용되지 않는 문제에 대해 낙관적 업데이트로 사용자 경험 개선
전체 프로젝트 리팩토링
사용자 피드백을 받아 서비스를 개선
[사용 기술]
TypeScript, Next.js, Axios, Tanstack-Query, Chakra UI
[관련 링크]
TRIPEND
유럽 여행 친구 만들기 커뮤니티 서비스
2023.01 - 2023.05
자체 회원가입 기능
Formik, Yup을 활용함에 따라 하나의 state store를 사용해 구현
유저 리스트 조회 검색 기능
검색에 따라 관련 유저 정보를 검색하고 조회할 수 있도록 구현
유저 리스트 조회 및 검색 기능 트러블 슈팅
custom debounce 훅을 도입해 검색어에 따른 api 호출 렌더링 이슈 개선
전체 프로젝트 리팩토링
JavaScript로 개발되었던 프로젝트를 TypeScript로 마이그레이션 함에 따라 타입 안정성 확보
Tanstack-query를 도입해 클라이언트 상태와 서버 상태를 분리해 유지보수 및 잠재적 이슈 개선
[사용 기술]
TypeScript React Axios Tanstack-query Recoil
[관련 링크]
Awards.
UDEMY 우수상
2023.08
맨텍 개발 경진대회
은상
2021.09
Experiences.
프로그래머스
프론트엔드 데브코스
3기
2022.10 - 2023.03
Education.
명지대학교
융합소프트웨어학부
학사
2017.03 - 2022.08