미리보기
기본 정보
'함께'라는 단어의 가치를 높게 생각합니다. 새로운 지식을 스스로 탐구하는 데 그치지 않고 모두와 공유하는 데서 즐거움을 느낍니다. 다른 직군의 업무에도 흥미가 많고, 업무 효율성을 높이기 위해 질문하고 소통하는 것을 서슴지 않습니다. 변화에 유연하게 적응하고 새로운 도전을 즐기지만, 새로운 기술을 받아들이기 전 늘 신중하게 생각하는 자세를 가지고 있습니다.
기술 스택
프로젝트
JECT
컴포노트
Description.
디자이너와 개발자들을 위한 컴포넌트 가이드 위키 페이지입니다. Github → 배포 링크 →
v1. 2024.12.17 ~ 2025.02.15
v1. Frontend 2명, Backend 2명, Designer 1명
Experience.
Front-end 팀원
styled-components를 사용해 24개의 컴포넌트 중 18개의 컴포넌트 구현
Storybook을 사용해 구현된 컴포넌트 디자인 및 사용 방법 문서화
6개의 페이지 중 5개 페이지 UI 구현
v1. 기능 명세서에 완료된 기능 13개 중 11개 구현
글로벌 내비게이션 바(GNB) 검색 기능 구현
useInfiniteQuery를 사용해 컴포넌트/디자인 시스템 검색 구현
잦은 상태 업데이트를 방지하기 위해 useDebounce 커스텀 훅 구현
router.push를 사용해 검색된 컴포넌트 클릭 시 상세 페이지로 라우팅
router.push를 사용해 검색된 디자인 시스템 클릭 시 외부 디자인 시스템 페이지로 라우팅
컴포넌트 목록 페이지 구현
IntersectionObserver와 useInfiniteQuery를 사용해 무한 스크롤 구현
zustand를 사용해 컴포넌트 필터 칩 선택/정렬 조건 선택 상태 관리
router.push를 사용해 카드 클릭 시 컴포넌트 상세 페이지 라우팅 구현
컴포넌트 상세 페이지 구현
useQuery를 사용해 컴포넌트 상세 페이지 API 연동
useRef와 IntersectionObserver를 사용해 목차 바로 가기 구현
디자인 시스템 목록 페이지 구현
zustand를 사용해 디자인 시스템 정렬 조건(이름순/조회순) 선택 상태 관리
router.push를 사용해 카드 내 외부 레퍼런스 버튼 클릭 시 해당하는 외부 디자인 시스템 페이지로 라우팅
Project Skill.
Next.js, TypeScript, Tanstack Query(React-Query), Zustand, Axios, styled-components, Storybook, Vercel
JECT
잔디 일기
Description.
하루 회고를 돕는 일기 웹 서비스입니다. Github → 배포 링크 →
v1. 2024. 02 ~ 2024.04.05 / v2. 2024. 07 ~ 2024.09.29
v1. Frontend 3명, Backend 3명 / v2. Frontend 3명, Backend 2명, DevOps 1명, Designer 2명, PM 1명
Experience.
PL (Project Leader)
8개의 페이지 중 4개 페이지 구현
v1. 기능 명세서에 완료된 기능 19개 중 9개 구현
v2. 기능 명세서에 완료된 기능 24개 중 10개 구현
media query를 적용해 온보딩 페이지/마이 페이지/설정 페이지/회원 탈퇴 페이지 반응형 웹 페이지 제작
회원 기능 구현
로그인 페이지
Axios interceptor로 인증 토큰 자동 추가 및 401 에러 처리 학습 블로그 →
Zustand를 이용해 인증 상태 및 로딩 상태 관리
ProtectedRoute hook을 구현해 인가되지 않은 사용자의 페이지 접근 제한
로그아웃 (헤더 프로필 드롭다운)
Axios interceptor로 액세스 토큰 만료(401) 시 자동 로그아웃 처리
로그아웃 버튼 클릭 시 사용자 액세스 토큰 삭제 후 온보딩 페이지로 redirect
회원 탈퇴 페이지
tanstack query를 이용해 회원 탈퇴 API 연동
온보딩 페이지
반응형 디자인을 위한 커스텀 훅 제작
break point에 따라 디바이스 너비 판단
윈도우 resize 이벤트를 활용하여 실시간으로 모바일 상태 업데이트
마이 페이지
사용자 정보 표시
tanstack query를 이용해 사용자 프로필, 일기 검색, 일기 목록(페이지네이션) API 연동
연간 잔디
사용자가 연간 일기를 작성한 수를 시각적으로 보여 주기 위해 잔디 형태의 컴포넌트 구현
윤년여부를 판단해, 연도의 일수를 배열로 하여 컴포넌트를 구현
배열 내 날짜를 파라미터로 전달하는 일기 조회 API 연동
해시태그 필터링 및 최신순/오래된 순 정렬
tanstack query와 쿼리 스트링을 사용해 해시태그 필터링 및 시간순 정렬 구현
설정 페이지 (닉네임/소개글 수정)
tanstack query를 이용해 프로필 수정 API 연동
zustand를 사용해 프로필 정보 상태 관리
Project Skill.
React, TypeScript, Tanstack Query(React-Query), Zustand, axios, styled-components, AWS S3/CloudFront/Route53
포텐데이 X 클로바 스튜디오 해커톤
쿠션
Description.
포텐데이 X 클로바 스튜디오 해커톤을 진행하며 구현한 서비스입니다.
사용자의 메시지를 상황에 맞게 클로바 스튜디오 AI를 사용해 부드럽게 변환해 줍니다. Github → 배포 링크 →
v1. 2024.07.19 ~ 2024.07.28 / v2. 2024.07.29 ~ 2024.08.08
Frontend 2명, Backend 2명, Designer 1명, PM 1명
Experience.
PL (Project Leader)
styled-components를 사용해 13개의 컴포넌트 중 9개의 컴포넌트 구현
5개의 페이지 중 2개 페이지 UI 구현
기능 명세서에 완료된 기능 13개 중 6개 구현
로딩 애니메이션 구현
styled-components에서 keyframes 이벤트를 사용해 로딩 애니메이션 구현
사용자의 지루함을 덜기 위해 React Hook과 setInterval을 사용해 이미지와 메시지가 주기적(800ms)으로 변경되도록 구현
채팅 목록 페이지 구현
tanstack query를 사용해 검색, 채팅방 삭제, 채팅방 목록, 로그아웃/회원 탈퇴 API 연동
서비스 배포
Naver Cloud Platform과 pm2를 사용해 front-end 서버 배포 학습 블로그 →
Nginx를 사용해 포트포워딩 및 SSL 인증서 발급/설정 학습 블로그 →
Project Skill.
React, TypeScript, Tanstack Query(React-Query), Zustand, Axios, styled-components, Naver Cloud Platform
포트폴리오
URL
교육
한국교통대학교
대학교(학사) | 소프트웨어학과
2020.03. ~ 2024.08.
졸업
kakao x 9oormthon DEEP DIVE
사설 교육 | 프론트엔드 1기
2025.04. ~ 현재
재학 중