미리보기
기본 정보
‘이거 있으면 진짜 편하겠다.’ 일상에서 생기는 문제와 비효율적인 상황을 해결하고자 코딩을 공부하게 되었습니다. 새롭게 알게 된 내용, 잘 알고 있는 내용을 공유하고, 프로젝트가 더 나은 방향으로 갈 수 있도록 적극적으로 소통하고자 합니다. 책임감과 신뢰를 중요하게 생각합니다. 평소 주제를 넓게 펼쳐가며 학습하는 스타일이지만 프로그래밍 분야는 깊게 탐구하려 노력합니다. 특히 React를 이해하기 위해 공식 문서 스터디를 했고 forwardRef, createPortal, startTransition 등을 프로젝트에 적용해 DX, UX 친화적인 컴포넌트를 만들 수 있었습니다. 근간이 되는 Javascript를 이해하기 위해 라이브러리 없이 이력서를 PDF로 바꿔주는 사이트를 제작했습니다. 앞으로도 새로운 기술을 배워나가면서 기본기를 익히기 위해 라이브러리 없이 구현하는 경험을 이어나가고자 합니다. 프론트, 백엔드에 연연하지 않고 만들고자 하는 것을 거침없이 만들어나갈 수 있는 소프트웨어 엔지니어가 되고 싶습니다.
프로젝트
패스트타임
기타
2023.09. ~ 진행 중
부트캠프 수강생을 위한 정보 제공형 익명 커뮤니티
Frontend Lead (FE 3, BE 4)
Github
Blog - 고민했던 요소
tiptap 라이브러리로 rich text 에디터를 구현했습니다. 에디터가 어떤 방식으로 화면에 그려지는지 이해하고, 게시글을 발행하기 위해 컨텐츠를 세분화 하는 방식을 백엔드 팀원과 회의를 통해 정립했습니다.
React Query를 활용해 무한 스크롤 및 optimistic updates를 구현했습니다. useInfiniteQuery가 어떤 방식으로 수행 되는지 이해할 수 있었습니다.
Suspense와 React Error Boundary를 활용해 비동기 상태를 선언적으로 관리하고 에러가 앱 전반으로 전파되지 않게 구현 했습니다.
Axios interceptor를 활용해 401에러 발생 시 access token을 재발급 하는 로직을 구현, UX를 개선했습니다. 쿠키, 스토리지를 이용한 로그인 로그아웃의 다양한 방식을 이해할 수 있었습니다.
createPortal과 CSS keyframe을 이용해 마이페이지 반응형 모달을 구현했습니다. CSS display, visibility에 대해 이해하고 애니메이션을 사용해야 할 때를 알게 되었습니다.
Github Actions를 통해 PR시 자동으로 lint, build 테스트를 하는 로직을 구현했습니다.
사용 기술
React, Typescript, Vite, Recoil, React Query, Axios, SCSS, Firebase
야나바다
야놀자X패스트캠퍼스 부트캠프
2024.01. ~ 2024.01.
취소 불가 상품에 대해 판매자는 수수료를 절약하고, 구매자는 값싼 가격에 구매할 수 있는 야놀자의 패밀리 서비스
Frontend Lead (FE 5, BE 4, PM 5, UIUX 1)
Github
Blog - 고민했던 요소
프로젝트 팀장으로 React Query의 핵심 기능인 useQuery와 useMutation에 대해 설명하고 IntersectionObserverAPI와 함께 무한 스크롤을 어떻게 구현하는지 공유했습니다.
카카오지도 API를 활용해 숙소 리스트 지도를 구현했습니다. 지도에 마커를 표시하는 방식을 이해하고 현 위치 재검색, 내 위치 보기와 같은 기능을 추가했습니다.
Framer Motion을 활용해 컴포넌트 상태에 따른 애니메이션을 구현했습니다. 복잡한 애니메이션을 설계하는 데 자신감을 얻는 기회가 되었습니다.
리액트의 forwardRef를 활용해 React Hook Form과도 유연하게 연동되는 공통 인풋 컴포넌트를 제작했습니다. 또 리액트에서 제공하는 컴포넌트 타입에 대해 이해하는 계기가 되었습니다.
StompJS를 활용해 실시간 채팅 기능을 구현했습니다. 백엔드 팀원과의 긴밀한 소통이 필요한 이유와 정확한 오류의 원인을 잡아내기 위해 몰입할 수 있는 시간이었습니다.
사용 기술
React, Typescript, React Kakao Maps SDK, Framer Motioin, StompJS, Emotion
이력서받아라
개인
2024.02. ~ 2024.02.
이력서를 내가 원하는 일정한 형식의 PDF로 자동 변환 및 다운로드
개인 프로젝트
Github
리액트에 의존하지 않고 프로젝트를 마무리 하는 경험을 가지고자 시작하게 되었습니다. Webpack 설정부터 라우팅, 엘리먼트 생성 등을 직접 구현하면서 자바스크립트와 번들링 대해 더 잘 이해할 수 있었습니다.
리액트가 엘리먼트를 생성하는 방식에 대해 탐구해보는 시간을 가질 수 있었습니다.
Monorepo로 마이그레이션을 해 클라이언트, 서버 코드를 한 레포지토리에서 관리했습니다.
NodeJS 기반 서버를 AWS EC2에 배포하고 전체 서비스를 혼자 만들어 나가는 경험을 해볼 수 있었습니다.
Puppeteer를 활용해 HTML을 PDF로 변환하고 addStyleTag로 스타일을 주입했습니다.
라이트하우스 성능 점수 100점을 달성해볼 수 있었습니다.
사용 기술
Typescript, Webpack, NodeJS, Turborepo, Zod, Puppeteer
포트폴리오
기술 스택
JavaScript, TypeScript, React, react-query, Figma
외국어
영어
일상 회화 가능
자기소개
학습
저는 다양한 관심사만큼 특정 분야에 대한 초중반 학습 속도가 빠르다고 생각합니다. 한번에 대충 이해하려 하지 않고 시간이 하루이틀 더 걸리더라도 모르는 부분은 혼자서 최대한 학습하려고 노력합니다. 그러다 내용의 난이도 때문에 끝내 습득하지 못한 지식은 동료나 멘토님께 질문 한 뒤, 잘 정리해놓고 배경지식을 더 채운 후 다시 학습합니다. 프로그래밍을 접하고 처음엔 엄청 어려워 보였던 개념이 갑자기 눈에 들어오는 경험을 여러번 해보았습니다. 앞으로도 어려운 개념을 접했을 때 부끄러워 하지 않고 도움을 구하며 학습한다면 해결하지 못할 문제는 없다고 생각합니다.
신뢰
시간 약속부터 큰 약속까지 한 번 내뱉은 말은 꼭 지키고자 합니다. 프로젝트 과정에서 실력이 부족하다면 정중하게 학습 시간을 조금만 달라고 말씀드리는 편입니다. 그럼에도 구현에 어려움이 있다면 솔직하게 말씀드리고 다른 방향을 모색합니다. 이런 일련의 과정이 신뢰와 책임감을 쌓아가는 것이라고 생각합니다.
기타 경력
- 손샘영어 중등부 강사
어떻게 하면 더 정확하고 쉽게 가르칠 수 있을지 항상 고민했습니다. 이 경험 덕분에 새로운 지식을 마주했을 때 저만의 방식으로 이해하고, 어렵거나 복잡한 지식을 머릿속에서 정리할 수 있었습니다. 또 잘 알고 있는 기술을 팀원에게 설명하고 함께 프로젝트를 만들어 나갈 수 있었습니다. - 유튜브 편집 및 아이디어스 디자인 판매
제가 편집한 결과물에 반응이 오고, 그 반응에 따라 개선해나가는 경험을 해볼 수 있었습니다. 다양한 어도비 프로그램의 기본기를 쌓을 수 있었습니다. 프로그래밍이 코딩이 전부라고 생각하지 않고, 다양한 분야의 경험이 생각을 확장시키고 의외의 방식으로 문제를 해결하게 될 때가 있다고 생각합니다.