미리보기
기본 정보
반복되는 업무와 프로세스를 개선하여 업무의 효율성과 생산성을 높이는 것에 흥미가 있습니다. SNS 플랫폼 팀 프로젝트에서, React-Hook-Form을 활용해 폼 유효성 검사와 에러처리 과정을 간소화했습니다. 컴포넌트 분리와 커스텀 훅으로 코드의 재사용성을 향상 시켰습니다. 또한, 코드 리뷰를 통해 코드 품질을 개선하고자 노력했습니다. 업무의 효율을 높이기 위해 작업 내역과 계획을 팀원들과 공유하는 것이 중요하다고 생각합니다. 주기적인 스크럼을 통해 업무 상황을 공유하고, Google Sheets 등의 도구를 활용하여 기능 명세서와 회의록 등을 기록합니다.
기술 스택
React, JavaScript, HTML/CSS, redux-toolkit, react-query, Git, GitHub, Firebase, Figma, Google Sheets, TypeScript
프로젝트
Deskoration
개인
2023.10. ~ 2024.01.
프로젝트 소개
나만의 데스크셋업 사진을 업로드하고, 구매한 상품의 정보를 공유하는 SNS 서비스
프로젝트 목적
협업과 실무 경험을 쌓기 위한 팀 프로젝트
사용 기술 및 헙업 툴
React.js, JavaScript, Redux-Toolkit, React-Hook-Form, React-Query, React-Router, Styled-Components , Firebase, Figma, Discord, Google SpreadSheet
담당 업무 및 역할
- 이미지 마커 개발
- 앱의 핵심 기능인 이미지 마커를 통해 상품을 등록하고, 원하는 위치로 마커를 이동시킬 수 있습니다.
- HTMLElement의 offset, client를 활용하여 동적으로 좌표값을 계산하였습니다.
- JavaScript EventListener를 활용하여 드래그 앤 드롭 기능을 구현했습니다.
- 좋아요, 피드 등의 각종 소셜 기능 구현
- API를 활용하여 좋아요, 프로필, 피드 페이지의CRUD 기능을 구현했습니다.
- Firebase를 활용하여 채팅의 데이터 구조를 설계하고, 채팅 목록 페이지를 구현했습니다.
- Redux-Toolkit을 사용한 동적인 header 구현
- 전역 상태관리 툴인 Redux-Toolkit를 사용하여 페이지마다 내용이 달라지는 header를 구현했습니다.
- 효율적인 Form 관리
- React-Hook-Form을 사용하여 유효성 검사와 에러 핸들링의 간결화를 도모했습니다.
- 공통으로 사용할 수 있는 Input 컴포넌트와 Custom Hook을 생성하여 재사용성을 향상시켰습니다.
- 디자인
- Figma를 활용하여 로고와 splash를 제작하고, 애플리케이션의 디자인 전반을 담당했습니다.
- Keyframes로 애니메이션 효과를 주어 사용자 경험을 개선하도록 시도했습니다.
- 미디어쿼리를 이용한 반응형 웹 구현을 했습니다.
협업 과정에서 발생한 문제와 이를 해결한 경험
프로젝트의 채팅 기능 개발 중, 팀 내 작업 속도 불균형이 발생하여, 동료의 업무 일부를 대신 처리하는 일이 몇 차례 반복되었습니다. 소통을 통해 채팅 데이터 구조 설계에 대한 어려움이 있다는 것을 파악했고, 이에 즉시 Firestore 사용법 신속히 익히고, 일반적인 채팅 데이터 구조에 대한 자료를 수집했습니다. 수집한 자료를 바탕으로 저희 프로젝트에 알맞게 데이터 구조를 함께 재설계함으로써 프로젝트 지연을 성공적으로 해결했습니다. 이 과정에서 팀 내 문제를 적극적으로 해결하고, 팀원 간의 긴밀한 협력과 소통의 중요성을 몸소 체득했습니다.
Music Player
개인
2023.08. ~ 2023.12.
프로젝트 소개
mp3파일을 업로드하여 나만의 재생 목록을 만들고 음악을 들을 수 있는 음악 플레이어
프로젝트 목적
React와 JavaScript 숙련도 향상을 위한 개인 프로젝트
사용 기술
React.js, JavaScript, Styled-Components, Recoil, React-Router, jsmediatags, Figma, Firebase
담당 업무 및 역할
- 음악 파일의 메타 데이터를 자동으로 추출하는 기능
- 사용자가 mp3를 업로드하면 곡의 정보를 직업 기입할 필요 없이 파일의 메타 데이터를 추출하여 화면에 자동으로 표시되도록 기능을 구현했습니다.
- 미디어 파일 재생 기능
- JavaScript의 url.createObjectURL() 메서드를 이용하여 브라우저에서 파일을 재생하는 기능을 구현했습니다.
- HTMLAudioElement의 다양한 메서드를 활용하여 재생, 일시정지, 볼륨, 곡 이동 등의 다양한 기능을 구현했습니다.
- Firebase를 활용한 재생 목록 저장 기능
- Firebase Storage와 Firestore를 활용하여 재생 목록을 저장하고 다시 로드할 수 있는 기능을 제공합니다.
프로젝트를 통해 배운 점
Recoil를 활용하여 전역 상태 관리에 대한 원리와 중요성을 이해할 수 있었습니다. JavaScript의 다양한 객체와 메서드를 활용하여 언어에 대한 숙련도를 향상시킬 수 있었습니다. 첫 프로젝트였던 만큼 완성도의 측면에서는 완벽하지 않지만, 실제 개발 과정을 경험하고 프로그래밍에 대한 자신감을 키울 수 있는 기회가 되었습니다.
포트폴리오
교육
멋쟁이 사자처럼
사설 교육 | 프론트엔드 스쿨 7기
2023.07. ~ 2023.11. | 졸업
성신여자대학교
대학교(학사) | 사학과
2011.03. ~ 2016.08. | 졸업
자기소개
프론트엔드 개발자가 되고자 하는 이유
이전 직장에서 오퍼레이터로 일하며 단순 반복 업무의 한계를 느꼈습니다. 저는 문제를 발견하고 해결하는 과정에서 더 큰 만족감을 느꼈고, 전문성을 갖춘 분야에서 창의력을 발휘하고 싶었습니다. 실제로, 작업 프로세스를 개선해 생산성을 두 배로 끌어올리고, 작업 칸반을 만들어 업무 효율을 향상시킨 경험을 통해 솔루션을 만들어내는 일의 중요성을 깨달았습니다. 특히 UX, 사용자와의 인터랙션에 흥미가 있어 프론트엔드 개발자의 길을 선택했습니다. 사용자의 니즈와 피드백을 바탕으로 사용자가 일상에서 자연스럽게 사용하고, 삶의 질을 높여주는 인터페이스를 개발하는 프론트엔드 개발자가 되고 싶습니다.
팀프로젝트를 통한 성장 경험
팀프로젝트를 통해 협업 능력의 향상과 기술적인 성장이라는 큰 수확을 거두었습니다.
먼저, 협업에서 가장 중요한 것은 팀원 간의 업무 공유라고 생각했습니다. 초기 기획단계에서 구글 스프레드 시트를 활용하여 각 페이지별로 필요한 기능을 명세화하였고, 업무를 체계적으로 분담했습니다. 그리고 디스코드를 이용하여 매일 각자 수행한 작업 내용과 다음 날의 계획을 공유함으로써 업무 진행 상황을 파악하여 필요한 부분에서 서로 도움을 주고 받을 수 있었습니다.
기술적으로는, React Hook Form, React Query와 같은 새로운 라이브러리를 처음으로 경험했습니다. 이전까지는 라이브러리를 거의 사용해보지 않아 이는 저에게 큰 도전이었습니다. 또한, Firebase를 이용하여 채팅 기능을 구현하면서 데이터베이스에 대해서도 새롭게 접할 수 있었습니다. 그리고 학습한 내용을 블로그에 기록하고 팀원과 공유하였습니다.
이러한 경험을 통해 배운 것들을 바탕으로 앞으로 맡게 될 역할에도 기여할 수 있도록 최선을 다하겠습니다.
몰입해본 경험
가장 몰입하여 즐겼던 경험 중 하나는 밴드 활동을 했던 경험입니다. 평소 음악에 관심이 많아 음악을 해보고 싶어 기타 동호회에 가입했고, 그곳에서 만난 사람들과 밴드를 결성하여 약 4~5년간 활동을 했었습니다. 매주 금요일 저녁마다 연습실에 모여 합주를 하였고, 더 큰 목표를 설정하여 콘텐스트에 참여하거나 자작곡을 음원으로 발표하기도 했습니다. 밴드 활동은 단순히 취미를 넘어서 새로운 성장과 배움의 기회가 되었습니다. 각자 다른 실력을 조율하기 위해 개인 시간을 할애하여 연습을 하기도 했고, 때로는 다른 멤버를 기다려주기도 했습니다. 이러한 경험은 서로 다른 능력과 배경을 가진 팀원들과 조화롭게 협력하는 방법을 가르쳐주었습니다.