김유진
FrontEnd Developer
안녕하세요,
홍익대학교 컴퓨터공학과 4학년 재학 중이며 GDSC Hongik Lead를 맡고 있습니다.
일상 속 문제를 프론트엔드 기술을 통해 해결하는 것을 즐깁니다.
Contact
•
Email : gene028@naver.com
•
Phone : 010-9937-4176
•
Github : https://github.com/eugene028
•
Blog : https://velog.io/@gene028
Work Experience
•
당근 (2024.01.02 ~ ) 웹 프론트엔드 인턴 Projects
Imhere!
유지보수가 가능한 환경을 만들기 위하여 개발 환경을 개선했습니다.
•
디자인이 따로 되어 있지 않아 html 기본 태그로 개발되어 있던 서비스를 Figma를 활용하여 디자인 팔레트, 시스템을 생성하여 깔끔한 웹 뷰 형식으로 디자인을 진행하였습니다.
•
기존 JS로 된 코드를 팀원과 함께 마이그레이션하여 TS로 개발하여, 코드의 안정성을 높였습니다.
•
재사용 가능한 컴포넌트를 정리하여 추후 추가되는 기능에서도 활용할 수 있도록 하였습니다.
사용자의 서비스 이용 경험에 대한 피드백을 듣고 서비스를 지속적으로 운영하며 반영하고 있습니다.
•
장소 위치를 불러오는 시간이 3초 정도 소요되는데 이 시간 동안 서비스가 멈춘 것처럼 화면이 보여 불편함을 호소하는 유저가 많았습니다. 위치 정보 상태를 불러오는 과정을 사용자가 인지할 수 있도록 로딩 상태를 추가하여 현재 웹이 가지고 있는 state를 확인할 수 있도록 하였습니다.
•
framer-motion 라이브러리를 이용하여 부드러운 화면 전환과 컴포넌트 전환 효과를 주었습니다. 또한, react-toastify 를 이용하여 사용자가 서비스를 이용하면서 피드백과 결과물을 즉각적으로 받을 수 있도록 하였습니다.
TIFY
•
•
14가지의 질문 종류와 3가지의 질문 유형에 대한 설문조사 페이지를 useFunnel 커스텀 훅을 이용하여 처리하였습니다. 객관식/다수선택/주관식 유형의 질문을 답변 가능한 Funnel 컴포넌트로 처리해 답변 상태를 관리하였습니다.
팀원들과 함께 개발하는 환경이 비옥해지도록 노력하였습니다.
•
Storybook을 이용하여 디자인시스템을 구축하였습니다. Figma의 Dev 모드를 적극적으로 활용하여 제작해야 하는 디자인 컴포넌트에 대한 명세를 꼼꼼히 확인하며 디자인시스템을 세팅하였습니다.
•
Chromatic UI Testing Library를 활용하여 디자이너 및 개발 팀원들에게 비주얼 리뷰를 요청했습니다. Github Actions를 이용하여 공통 UI 관련 폴더가 수정될 때 자동으로 스토리북이 배포될 수 있도록 하였습니다. 이를 통하여 디자인 QA를 꼼꼼히 진행할 수 있었습니다.
모바일 웹 뷰 환경을 고려하여 개발하며 디테일을 챙기기 위해 고민합니다.
•
IOS 사용 기기 유저들이 키보드 입력 시 전체 웹 뷰가 화면이 밀려 올라가는 현상을 해결하기 위하여 커스텀 훅을 작성하였습니다.
•
3D 에셋과 복잡한 애니메이션은 Lottie 컴포넌트 제작을 요청하여 더 좋은 해상도를 화면에 나타내며 팀원들이 복잡한 에셋을 자유롭게 사용할 있도록 하였습니다.
두둥!
•
모노레포 배포를 통하여 Storybook으로 공통 UI 컴포넌트 개발을 진행했습니다. TicketCounter, ListHeader, Popup UI, Profile Popup 컴포넌트의 재사용성을 고려하여 디자인 의도에 맞는 컴포넌트를 개발했습니다.
•
팀원들의 코드리뷰를 적극적으로 반영하여 동료 개발자들이 재사용할 수 있는 코드를 작성하기 위하여 노력하였습니다.
•
티켓 옵션 생성 및 티켓 옵션 유형 지정, 가격 지정 기능을 개발했습니다.
•
티켓 옵션 기능(Drag & Drop)을 이용하여 사용자가 직관적으로 복잡한 티켓에 대한 설정을 편리하게 할 수 있도록 구현하였습니다.
바닐라 JS로 노션 클론 코딩
•
많은 기능을 담당하고 있는 문서 작성 페이지의 변화에 따라, 다른 글이나 글 목록에 대한 관계 없는 state가 변화하는 문제가 발생하여 화면이 무분별하게 랜더링되는 현상이 발생하였습니다. 이를 개선하기 위하여 state 변화에 대한 조건을 꼼꼼히 확인하여 방어코드를 작성하여 불필요하게 성능을 떨어트리는 코드의 발생을 방지할 수 있도록 하였습니다.
•
모든 변수를 state로 관리하고 있어 이에 대한 팀원의 코드 리뷰에 따라 화면에 보이는 view에 직접적으로 영향을 미치는 변수들을 최우선으로 state로 관리함으로써, 무분별하게 사용하고 있던 상태관리 로직을 분리하도록 하였습니다.
반려동물 생활 공유 서비스, PetTalk
•
게시글 보기 및 작성하기, 사진 업로드하기, 친구 추가/삭제, 활동 중인 친구, 기능 개발
•
프론트에 캐싱되는 서버 데이터 갱신을 위해 reload 를 사용하는 팀원들을 설득하여 queryKey 지정을 통하여 invaildateQueries를 활용하여 데이터를 refetch하는 방식으로 개선하며 리액트 쿼리를 처음 사용하는 팀원들을 위해 예시 코드를 작성하여 공유하였습니다.
•
모바일 웹 뷰로 제작되었기 때문에, meta 태그를 수정하여 크롬에서 메인 화면으로 추가할 수 있도록 네이티브 앱처럼 동작하는 아이콘 세팅, 웹앱 서비스 이름을 세팅하여 프로젝트의 완성도를 높이기 위하여 기여하였습니다.
Skills
Frontend
•
React, Next.js, Vue
•
JavaScript, TypeScript
•
Recoil, Jotai, React-Query, zustand, zod, react-hook-form
•
Styled-components, emotion.js, tailwindCSS, vanilla-extract
•
Storybook, chromatic
•
yarn berry
•
yarn workspace
DevOps & etc
•
Nginx, aws S3
•
Docker, Github Actions
•
Figma
Presentation
개발자를 위한 Figma
GDSC Hongik의 DevTalk 세미나의 Speaker로 참여하여 <개발자를 위한 Figma> 발표 세션을 진행하였습니다. 지식 공유의 긍정적인 힘을 믿고 제가 속한 환경의 개선을 위하여 노력합니다.
방황을 마주하기까지의 여정
홍익대학교 컴퓨터공학과 DevTalk 세미나의 Speaker로 참여하여 <방황을 마주하기까지의 여정> 발표 세션을 진행하였습니다. 프론트엔드를 선택하기까지의 진로 고민과 그 고민 속에서 제가 택한 길에 대한 이유를 설명하고 방황에 대한 긍정적인 의미에 대한 메시지를 전달합니다.
Activities
GDSC Hongik
•
Effective Typescript 스터디 운영
•
파트별 오프라인 밋업 주도, DevRel 팀 운영을 통한 커뮤니티 활성화에 노력
•
데브톡 세미나 1회 발표
멋쟁이 사자처럼
개발 기초 교육, 프로젝트 및 해커톤 운영 개발 학회
홍익대학교 멋쟁이 사자처럼 대학 9기 학생 (2021.02.01 ~ 2022.01.31)
홍익대학교 멋쟁이 사자처럼 대학 10기 대표 (2022.02.01 ~ 2023.01.31)
멋쟁이 사자처럼 대학 10기 디자인트랙장 (2022.02.01 ~ 2023.01.31)
•
멋쟁이 사자처럼 9기 연합대학해커톤 ‘어흥올림픽’ 운영 및 기획
•
멋쟁이 사자처럼 10기 신촌 소재 대학 연합해커톤 운영 및 기획
•
멋쟁이사자처럼 10기 해커톤 참여
•
컴퓨터공학과 연합 데브톡 세미나 운영단
교내 7개 컴퓨터공학과 학과와 연합하여 개발에 대한 인사이트와 경험을 공유하는 DevTalk 세미나 운영
연합 데브톡 세미나 창립 멤버 (2023.07.16 ~ 2023.11.08)
•
기존 GDSC Hongik의 학생들만이 참여할 수 있었던 데브톡 세미나에 대한 혜택을 컴퓨터공학과 학우들 모두가 받을 수 있도록 교내 7개 학회와의 연합을 제안하여 학과 단위 행사로 세미나를 운영
•
•
스피커로 참여하여 1회 발표
삼성 드림클래스 대학생 멘토
6명의 중학생의 온라인 학급 담임으로 활동하여 학생들이 꿈을 키우는 데 도움을 주는 멘토링 활동 진행
2022 대학생 멘토 (2022.03.01~2023.02.28)
•
중학교 학생들이 진로와 직업을 찾는 과정에 도움을 줄 수 있도록 다양한 직업군에 대한 자료를 제공하며 진로를 탐색할 수 있도록 함
•
코딩과 독서, 논리수리영역에 학습자료를 준비하여 학생들이 미래 역량을 키울 수 있도록 함
•
고민상담을 진행하고 학습 방향에 대한 가이드라인을 제시하여 멘토링 활동을 진행함
•