미리보기
기본 정보
저는 사용자 경험과 디테일에 관심이 많은 프론트엔드 개발자입니다.
프로젝트
마이크로 블로깅 플랫폼
개인
2023.10. ~ 2024.02.
개요
Snap Story는 간편하게 마이크로 블로깅을 즐길 수 있는 플랫폼으로, 서버리스 플랫폼인 Firebase를 사용하여 제작되었습니다. 사용자는 손쉽게 글을 작성하고 이미지를 첨부하여 자신만의 이야기를 공유할 수 있습니다.
구현 내용
UI / UX
shadcn의 디자인 시스템을 사용하여 사용자에게 친화적인 UI를 구현하였습니다. React Router의 동적 라우팅을 사용하여 사용자 경험을 개선했습니다.
사용자 인증
React Hook Form과 Zod를 활용하여 아이디 및 비밀번호 검사 기능을 구현하였습니다. 또한 Firebase의 Authentication 관련 메서드를 통해 서버와 통신하여 회원가입, 간편 로그인 등의 기능들을 구현하였습니다.
게시물 작성 / 수정 / 삭제
React Hook Form과 Zod를 활용하여 최소 글자 수, 이미지 파일 용량 등을 검사하는 기능을 구현하였습니다. Firebase의 실시간 데이터베이스 기능을 사용하여 게시물의 상태가 실시간으로 공유됩니다. 로그인 전역 상태를 활용하여 게시물 수정 / 삭제 기능들을 구현하였습니다.
계정 설정
Firebase의 Storage와 실시간 데이터베이스를 활용하여 사용자의 이름과 프로필 사진을 변경합니다. 그리고 계정을 삭제할 수도 있습니다.
빌드 / 배포
Vite를 사용하여 개발 서버가 빠르게 실행 되어 코드 변경 사항이 실시간으로 반영됩니다. 또한 ESBuild를 이용하여 빌드 시간을 단축하였습니다. Firebase의 Hosting 기능을 이용하여 현재 버전을 배포하고 있습니다.
기술 스택
TypeScript, React, React Router, React Hook Form, Zod, Tailwind CSS, Vite, Firebase
기술 블로그
개인
2023.06. ~ 진행 중
개요
제가 직접 사용하기 위해 개발한 기술 블로그입니다. 주로 프론트엔드 개발에 관련된 기술적인 경험과 학습 내용을 비정기적으로 기록하고 있습니다.
구현 내용
CLI
gatsby-blog-starter를 사용하여 라우팅 설정, 템플릿 구성 등을 설정하였습니다.
UI / UX
기존 템플릿에서 CSS 애니메이션, 레이아웃 구조 등을 추가, 수정하였습니다. 이력서 페이지와 Github 링크를 추가하여 지금 보고 계신 이력서와 제 Github를 쉽게 찾으실 수 있습니다.
Migration
JavaScript로 구성된 프로젝트를 TypeScript로 마이그레이션하였습니다.
빌드 / 배포
Gatsby를 사용하여 빌드할 때 모든 페이지가 사전에 렌더링 되어 초기 로딩 속도를 증가시켰습니다. Netlify를 Github와 연동하여 자동으로 배포를 수행합니다.
기술 스택
TypeScript, React, Gatsby, Netlify
식자재 최저가 비교 웹 앱
서일대학교
2022.03. ~ 2022.12.
개요
장보고는 서울시에서 제공한 오프라인 마켓의 식자재 공공 데이터를 이용하여 최저가를 비교해주는 웹 서비스입니다. 기획 1명, 개발 2명, 총 3명으로 진행된 팀 프로젝트입니다. 저는 프론트엔드의 모든 부분을 전담하였습니다.
구현 내용
REST API와 비동기 통신을 사용하여 백엔드와 데이터를 주고 받았습니다.
UI / UX
styled-components를 활용하여 모바일 해상도로 제작하였습니다. 내비게이션 바, 검색창, 아코디언 메뉴 등을 구현하였습니다. React Router의 동적 라우팅을 사용하였습니다.
사용자 인증
Redux를 사용하여 로그인 상태를 전역 상태로 관리하였습니다. 네이버와 카카오 간편 로그인을 이용하여 손쉽게 로그인할 수 있습니다.
지역, 매장 별 품목 조회
지역에 따른 시장, 매장의 정보를 선택하면 해당 매장 혹은 지역의 품목 가격, 단위 등을 최저가로 정렬하여 조회할 수 있습니다.
품목 정렬 / 검색
카테고리, 가격 순으로 품목들을 정렬합니다. 원하는 품목의 이름을 검색하여 정보를 확인할 수 있습니다.
리뷰 기능
좋아요와 싫어요를 활용하여 매장에 대하여 리뷰를 남길 수 있습니다.
기술 스택
JavaScript, React, React Router, React-Redux, styled-components
자기소개
무언가를 만들고 기여할 때 보람을 느낍니다.
개발을 할 때 저에게 가장 큰 보람은 새로운 기술을 배우고 이를 실제로 구현해나가는 과정에서 찾을 수 있습니다. 처음으로 Todo-List를 개발해봤을 때, 팀 프로젝트로 다같이 하나의 프로덕트를 만들었을 때의 성취감 덕분에 개발자를 해보자는 생각을 가지게 되었습니다. 처음에는 프론트엔드의 개념과 구조에 대한 학습이 쉽지 않았지만, 점진적으로 이를 이해하고 적용함으로써 높은 수준의 사용자 경험을 제공하는 애플리케이션을 개발할 수 있었습니다.
이러한 경험들을 통해 개발자로서의 역량을 향상시키고, 사용자들에게 더 나은 경험을 제공함으로써 진정한 보람을 느낄 수 있습니다. 끊임없는 도전과 학습 과정에서 저에게 주어진 문제를 해결하고 발전하는 것이 저의 개발자로서의 가치를 높이는 길이라고 믿습니다.
소통은 적은 것보다 많은 것이 좋다고 생각합니다.
졸업작품을 준비할 때, 초반에는 소통을 거의 하지 않았습니다. 이로 인해 서로의 생각 차이로 인한 프로젝트 방향성의 혼란과 진행 속도 저하가 발생했습니다. 이런 문제를 인지하고 소통의 중요성을 깨닫게 되어 매주 팀원들과 디스코드를 활용하여 회의를 진행했습니다. 회의 중에는 각자 의견을 자유롭게 공유하고, 의견 충돌 시 조율을 통해 효율적인 결정을 내리기 위해 노력했습니다.
회의록을 작성하며 토의한 내용과 결정사항을 명확하게 정리하여 팀 전체가 공유할 수 있도록 했습니다. 또한, 회의 시간 외에도 팀원 간의 소통을 지속적으로 유지하기 위해 개별 미팅을 설정하여 추가 의견이나 문제점을 공유하고 해결책을 모색했습니다. 이를 통해 원활한 의사소통을 유지하고 프로젝트를 효과적으로 진행할 수 있었습니다.
피드백을 주저하지 않습니다.
개발 프로세스에서 피드백은 지속적인 성장의 핵심 요소라고 믿고 있습니다. 졸업작품을 준비하면서, 제가 작성한 코드나 프로젝트의 구조에 대한 피드백을 받는 것을 주저하지 않고 활용했습니다. 피드백을 통해 부족한 부분이나 개선할 점을 파악하고, 코드 품질을 유지하기 위해 노력했습니다.
처음에는 부끄러운 면이 있었지만, 그 경험을 통해 빠르게 성장할 수 있었습니다. 주변 동료들로부터 받은 다양한 시각과 조언을 통해 더 나은 코드 작성 방법을 습득하고 개선점을 찾아내는 데 도움이 되었습니다. 피드백은 단순히 부정적인 경험이 아니라, 성장과 발전을 위한 소중한 기회로 인식하고 이를 통해 지속적인 개선을 이끌어내고 있습니다.
포트폴리오
URL
교육
서일대학교
대학교(전문학사) | 소프트웨어공학
2018.03. ~ 2023.02. | 졸업