Contact
Name: Mihye Jeon
Phone: 01086674402
Email: jeonmye@gmail.com
Channel
•
투명하게 일하며 서로 신뢰하는 조직을 좋아합니다.
•
UI, UX에 대해 고민하고 이야기하며 개선하는 과정을 좋아합니다.
•
가독성이 높고 유지보수하기 용이한 코드를 작성하는 것이 좋은 개발자의 기본이라고 생각합니다.
•
유연한 태도를 가진 개발자, 다른 사람들이 생각할 때 같이 일하고 싶은 개발자가 되는 것이 목표입니다.
Skills
HTML/CSS
● favicon, Open Graph protocol, SEO 등의 적용 경험이 있습니다.
● Flexbox를 사용한 레이아웃 구성, 미디어 쿼리를 사용한 반응형 웹페이지를 구현할 수 있습니다.
● Sass(Scss) 등의 CSS Preprocessor를 사용할 수 있습니다.
JavaScript
● ES6 문법을 활용해 웹 어플리케이션을 개발하는 데 익숙합니다.
● JavaScript의 비동기 처리 방식을 이해하고 작업할 수 있습니다
React
● 리액트 앱의 동작원리를 이해하고 있습니다.
● 컴포넌트의 라이브 사이클을 이해하고 제어할 수 있습니다.
TypeScript
● 때에 따라 interface와 type을 적절히 나누어 사용할 수 있습니다.
ETC
Next.js, React-query, Webpack, AWS(S3, CloudFront), TailwindCSS, Styled-Components,
Git & Github, Jira
Work Experience
멜로우 주식회사
Project
Happi-Day
생일 카페 및 아이돌 굿즈 공구와 같은 이벤트의 홍보를 위한 아이돌 팬덤 플랫폼.
•
기간 : 23.12 ~ 24.05 (6개월)
•
인원 : 8명 ( FE : 4명 / BE : 4명 )
•
활용한 기술 스택 : React TypeScript Next.js @tanstack/react-query TailwindCSS Recoil
•
배경, 성과
◦
아이돌 생일 카페, 공구와 같은 이벤트를 한 플랫폼에 모아 볼 수 있는 서비스입니다.
◦
실제 서비스 출시 경험을 위해 또 서비스의 목표를 함께 이루고 싶어, 팀원으로서 합류하게 되었습니다.
◦
80%까지 진행되었지만 실제 출시까지는 이루어지지 못했습니다.
•
구현한 기능 및 역할
◦
프론트엔드 공통 기능 모듈화
▪
공통적으로 사용하는 react-query 커스텀 훅, 로직 등을 모듈화하는 작업을 주도
▪
Axios의 인터셉터, 인스턴스를 활용하여 네트워크 요청 모듈화를 진행
◦
마이페이지 개발
▪
뷰포트 별 반응형 웹 개발
▪
react-hook-form 라이브러리와 S3를 이용한 프로필 수정 기능 개발
▪
IntersectionObserver를 활용한 무한스크롤 커스텀 훅 제작
▪
prop drilling을 해소하기 위해 Recoil을 사용하여 전역관리 및 회원정보 체크
◦
프론트엔드 기술 환경 구성
▪
Next.js App Routing 프로젝트에 적합한 폴더 구조를 설계하여 팀 내에 공유
▪
안정적인 개발자 경험을 위해 스프린트 단위의 업무 프로세스를 도입하고 Jira를 담당하여 github과 연동하고 관리
▪
gitfow 브랜치 전략과 코드리뷰 문화를 도입하여 팀 프로세스 정립
◦
UX/UI 디자인
▪
디자인 일관성을 위해 figma을 도입. 색상 변수화 및 시맨틱 컬러 개념, 공통 컴포넌트를 고려하여 디자인 시스템을 도맡아 작업
▪
로그인, 회원가입, 마이페이지의 웹뷰, 모바일뷰 UX/UI 디자인 구현
•
트러블 슈팅
◦
문제상황
◦
해결방안
◦
해당 경험을 통해 알게된 점
휴대폰 개통 안내 웹 서비스
휴대폰 개통 방법과 요금제를 안내하고 상담원과 연결해 주는 웹 사이트
•
기간 : 24.06.24 ~ 현재
•
인원 : 1명
•
활용한 기술 스택 : React Styled-Components AWS(S3, CloudFront) Webpack Babel
•
Github : https://github.com/jeonmye/Ntelecom
•
배경, 서비스 소개
◦
지인의 부탁으로 휴대폰 개통 안내와 상담원 연결을 돕는 정적 웹사이트를 제작했습니다.
◦
SEO를 통한 검색엔진 상위 노출을 최우선 목표로 두고 개발했습니다.
◦
고객들이 언제든 실시간으로 상담을 요청할 수 있는 UI/UX를 고민하며 구현했습니다.
•
진행상황
◦
AWS S3와 CloudFront를 사용하여 배포 완료
◦
사이트맵 개선, 이미지 사이즈 최적화를 통한 SEO 개선 진행 중
•
구현한 기능
◦
Webpack을 이용한 프로젝트 설정
▪
프론트엔드 빌드 과정과 원리가 궁금하여 직접 webpack을 설정
◦
번들 사이즈, 앱 성능 최적화
▪
webpack-bundle-analyzer 로 분석하여 모듈별로 chunk로 분리 후 react lazy import 처리
▪
FCP을 10% , Speed index을 27% 개선
▪
SplitChunks를 통해 중복된 청크를 제거하여 번들 사이즈 약 77% 감소시켰고 이후 지속적인 개선을 시도중
◦
SEO 개선
▪
시멘틱한 html 구조로 웹 접근성 개선
▪
react-snap, react-helmet을 사용하여 메타태그를 동적으로 제어
◦
웹 서비스 배포
▪
AWS S3와 CloudFront를 활용한 정적 웹 호스팅
▪
CloudFront를 통해 http → https로 리다이렉트되도록 구현
◦
뷰포트별 반응형 웹, 레이아웃 개발
‘플리드’ 프로젝트 (기업 협업)
리걸 테크 스타트업 ‘PLEAD’에서 협업 한 프로젝트.
•
기간 : 23.09.25 ~ 23.10.27 (4주)
•
인원 : 4명 ( FE : 1명 / BE : 3명 )
•
활용한 기술 스택 : React TypeScript Next.js React-Query Recoil ChakraUI
•
개요
◦
변호사와 의뢰인 간 원활환 소통과 자료 공유를 위한 서비스입니다.
◦
실제 스타트업에 팀으로 합류하여 주어진 업무를 수행했습니다.
•
구현한 기능 및 역할
◦
변호사 사이트(플리드) 개발
▪
기존 통합되어 있던 사건을 분류 (일반 → 개인회생)
▪
Recoil로 사건을 전역 상태로 받아와 페이지 개발
▪
변호사와 의뢰인 간 증거 파일 교환 기능 구현 (기존 기능을 변형하여 구현)
•
사건/증거 등록, 파일 업로드, 드래그하여 파일 순서 변경, 휴지통, 영구 삭제, 파일 미리 보기
▪
변호사가 confirm 한 파일에 대해서 의뢰인이 파일을 더 이상 수정, 삭제를 못하도록 권한 설정
◦
의뢰인 사이트(영쩜일) 개발
▪
의뢰인의 결제 여부에 따른 화면 변화
▪
사건 증거 파일 교환 페이지 UI/UX 구현
◦
모노레포를 통한 협업
▪
레포 내부의 shared 등 공통으로 사용되는 리소스를 자유롭게 사용할 수 있다는 장점을 경험
GypPT
트레이너의 맞춤 PT를 집에서도 받아볼 수 있는 서비스. 집-피티
•
기간 : 23.09.04 ~ 23.9.22 (3주)
•
인원 : 8명 ( FE : 4명 / BE : 4명 )
•
활용한 기술 스택 : React SCSS
•
Github : https://github.com/jeonmye/GypPT
•
개요
◦
바쁜 현대 사회에 맞춰 원하는 시간과 장소에서도 맞춤 PT를 받을 수 있으면 좋겠다는 생각에서 프로젝트를 시작하게 됐습니다.
◦
기획부터 디자인, 개발까지 직접 참여하였습니다.
•
구현한 기능 및 역할
◦
트레이너 프로필 페이지
▪
IntersectionObserver를 사용한 무한 스크롤 구현
◦
운동 달성 체크리스트 페이지
▪
오늘 날짜를 나타내는 주간 캘린더 기능 구현
▪
S3를 이용한 식단 사진 업로드 기능
▪
tab 공통 컴포넌트를 만들어 재사용에 용이하도록 함
◦
상담 페이지
▪
글/댓글 작성, 수정, 삭제
◦
기획 & github
▪
Miro 툴을 활용한 User flow 작성
▪
기능 요구 정의서 작성 기여
▪
git 커밋 히스토리를 깔끔하게 유지하기 위해 Squash와 Rebase를 적극 활용
KREAM 클론 코딩
한정판 거래 플랫폼 ‘KREAM’을 클론한 서비스.
•
기간 : 23.08.21 ~ 23.09.01 (2주)
•
인원 : 6명 ( FE : 2명 / BE : 4명 )
•
활용한 기술 스택 : React SCSS
•
개요
◦
기존의 여러 서비스 중 ‘경매’라는 기능과 트랜디한 UX/UI가 마음에 들어 시작했습니다.
◦
강의나 참고 자료 없이 사이트만 참고하여 직접 코드로 구현했습니다.
•
구현한 기능 및 역할
◦
로그인 / 회원가입 페이지 개발
▪
쿠키를 이용한 일반 로그인 및 회원가입 구현
▪
react-router-dom을 활용하여 로그인 여부에 따른 라우팅 처리
◦
상품 목록 페이지 개발
▪
상품 목록 필터링, 정렬 기능 구현
▪
IntersectionObserver를 사용한 무한 스크롤 구현
◦
상품 상세 페이지 개발
▪
신발 사이즈 선택를 선택하는 모달 컴포넌트 구현
◦
Project Manager 역할 수행
▪
칸반 보드를 적용하여 같은 기간 내에 80% 개발 목표보다 10%를 더 완료
▪
데일리 스크럼 안건 관리 및 회의 기록을 통해 프로젝트와 팀원들의 진척도를 파악 및 리드
Education
위코드 48기
2023.06~2023.8
•
HTML, CSS, Javascript를 이용한 프론트엔드 개발 전반에 대한 학습
•
Reac의 기본 기능(상태, 이벤트 처리, 컴포넌트 값 전달 등) 을 학습하고 프로젝트를 진행
•
Github를 통한 프로젝트를 협업으로 git branch 전략(git flow)과 병합 전략(merge, rebase, squash) 을 터득
경인여자대학교
2012.03~2015.02
•
유아교육학과 졸업
유아교육에 대한 관심이 많아 사립유치원에서 7년 동안 교사일을 하던 중, 학교 웹서비스를 사용하며 직접 서비스를 만들어보고 싶다는 생각에 일을 그만두고 관련 역량을 기르고자 개발 공부를 시작했습니다.
Introduce
•
프론트엔드 빌드 과정과 원리에 대한 궁금증을 바탕으로, Webpack과 Babel을 사용해 직접 개발 환경을 구성한 경험이 있습니다. 이를 통해 CRA와 비교 분석을 진행했으며, 성능 측정 결과를 토대로 Webpack 설정을 최적화하여 빌드 속도, 번들사이즈, 자산 처리 성능 등을 개선했습니다. 이 과정에서 빌드 과정에 대한 이해도를 높이고, 효율적인 설정 방식을 적용하여 성능 향상을 이끌어냈습니다.
•
사용자 경험을 고려하여 UI/UX를 개선한 경험이 있습니다. 특히 기업 협업 프로젝트에서, 의뢰인과 변호인 간 증거 파일 교환페이지의 UI/UX를 개선한 바 있습니다. 기존에는 제출된 증거 파일과 제출할 증거 파일이 명확하게 구분되지 않아 사용자경험이 저하되는 문제가 있었습니다. 이를 담당자에게 제안하여, 제출 상태에 따른 파일 구분을 구현하여 의뢰인의 가시성을 향상시킬 수 있었습니다.
•
유치원 교사로 근무하며 동료와 협력하고 학부모와 상담을 진행하며 소통의 중요성을 배웠습니다. 이 과정에서 존중을 기반으로 한 효과적인 커뮤니케이션 스킬을 익혔고, 이를 토대로 팀 프로젝트에서도 원활한 소통을 유지하고 있습니다. 그 결과 팀원들로부터 긍정적인 평가를 받았으며, 새로운 프로젝트에 합류 제안을 받기도 했습니다