Contact
Email: jeonmye@gmail.com
Phone: 01086674402
프로젝트
휴대폰 개통 안내 웹서비스
휴대폰 개통 안내와 실시간 상담 연결을 돕는 정적 웹사이트입니다.
2024.6.24 ~ 현재
Frontend 1명
구현한 기능
Webpack과 Babel을 사용한 개발환경 구축
•
CRA 없이 Webpack과 Babel을 처음부터 직접 설정하여 프로젝트를 구축
사용자 경험 개선
•
Route의 React.lazy와 Suspense 기능을 적용하여 초기 렌더링 최적화
•
webpack-bundle-analyzer 로 분석하여 모듈별로 chunk로 분리 후 react lazy import
검색엔진 최적화(SEO)
•
CSR 환경에서 SEO를 개선하기 위해 react-snap, react-helmet을 사용 메타 태그를 동적으로 설정
배포
•
AWS S3 , CloudFront 를 사용하여 정적 웹사이트 배포
뷰포트별 반응형 웹, 레이아웃 개발
•
window 객체 내 Viewport 정보를 활용하여 현재 화면의 상태인 isMobile값을 반환하는 useViewport 훅 제작
메인페이지
개통방법 페이지
구글 플레이 / 애플 스토어 앱설치 연동
상담 문의 페이지
사용 기술
•
React : 본인의 기술 습득 수준을 고려했으며, 풍부한 생태계로 생산성을 높이기 위해 선택하였습니다.
•
Styled-Components : CSS-in-JS의 이점을 활용해 개발 생산성을 높이기 위해 선택했습니다.
Happi-Day
생일 카페와 아이돌 굿즈 공구와 같은 이벤트 홍보를 위한
아이돌 팬덤 플랫폼입니다.
2023. 12 ~ 2024.5
Frontend 4명, Backend 4명
내가 기여한 부분
마이페이지 제작
•
react-hook-form의 validate와 pattern속성을 이용하여 올바르지 않은 정보를 입력했을 때, error mesaage 표시
•
react-query를 활용하여 프로필 수정, 회원 탈퇴, 주문 취소, 아티스트 구독/취소 api 연동
•
react-query의 useInfiniteQuery로 무한스크롤 구현
•
쿼리파라미터로 받아온 아티스트 유형에 따라 다른 UI가 노출되도록 구현
공통 컴포넌트 / custom hooks 제작
•
react-qeury 도메인별 커스텀 쿼리를 정의하고 구조화하여 팀원들에게 공유
•
useRef를 사용해 관찰하려는 element가 현재 viewport에 진입했는지의 상태를 반환하는 IntersectionObserver 커스텀 훅 제작
•
확장성을 고려한 Modal 컴포넌트 제작
관리자 페이지 제작
•
react-query를 활용하여 아티스트 추가, 아티스트 수정 api 연동
프론트엔드 기술 환경 구성
•
전체 디렉터리 구조 설계
•
Axios의 인터셉터, 인스턴스를 활용하여 네트워크 요청 모듈화
프로필 관리
나의 게시물
아티스트 구독 페이지
팀 수정
사용 기술
•
React - 다이나믹 UI의 SPA 웹페이지를 만들기 위해 사용하였습니다.
•
TypeScript: 컴파일에서의 에러 캐치로 디버깅을 쉽게 하고 프로젝트의 생산성과 안정성을 높이는 장점이 있어 사용했습니다.
•
NextJS 13 - App Router: SEO 최적화, metadata 간편 생성, 서버 컴포넌트를 사용하기 위해 App Router를 채택했습니다.
•
React-Query: server state와 client state 분리하고, 캐싱 처리를 간단하게 해주는 이점이 있어 사용했습니다.
•
Recoil: 간단한 사용법과 낮은 러닝커브로 프로젝트에서 Redux보다 더욱 간단하게 전역 상태를 관리할 수 있고 유지보수가 쉽다고 생각하여 사용하였습니다.
•
Tailwind CSS: 유틸리티 기반 CSS 프레임워크로 SSR방식의 nextjs와 호환성을 높히기 위해 사용했습니다.
Plead
변호사와 의뢰인 간 원활한 소통과 자료공유를 위한 서비스로, 리걸 테크 스타트업 ‘PLEAD’에서 협업한 프로젝트입니다.
23.09.25 ~ 23.10.27 (4주)
Frontend 1명, Backend 3명
내가 기여한 부분
변호사 사이트(플리드) 개발
•
기존 통합되어 있던 사건을 없애고 개인 회생 사건으로 분리하여 컴포넌트화
•
사건Id값을 Recoil을 이용해 전역 상태로 받아와 페이지를 구현
•
파일 업로드, 드래그하여 파일 순서 변경, 휴지통, 영구 삭제, 파일 미리 보기 구현 (기존 기능을 변형)
•
변호사가 confirm 한 파일에 대해서 의뢰인이 파일을 더 이상 수정, 삭제를 못하도록 권한 설정
의뢰인 사이트(영쩜일) 개발
•
의뢰인의 결제 여부에 따라 다르게 보여지는 UI 구현
•
사건 증거 파일 교환 페이지 UI/UX 구현
사용 기술
•
NextJS 13 - Page Router : 파일 시스템 기반 라우팅을 경험해볼 수 있었습니다.
•
React-Query: 기존 구현되어 있는 useQuery, useMutation 커스텀 훅을 이해하고 재사용해보면서 react-query에 대한 이해도를 높일 수 있었습니다.
•
TypeScript: 처음엔 타입 지정을 위해 시간이 많이 소요됐지만, 협업에 있어 생산성이 향상됨을 경험할 수 있었습니다.
•
Chakra UI: props 기반의 간단하고 모듈적인 점이 장점으로 다가왔습니다.
•
Recoil : useRecoilState, useRecoilValue 기능으로 global state를 사용해볼 수 있었습니다.
•
MonoRepo : 공통으로 사용되는 리소스를 자유롭게 사용할 수 있었습니다. 특히 기존에 구현되어있던 요청과 응답 DTO를 참고하여 서버와의 통신 정의를 보다 명확히 할 수 있었습니다.
•
Swagger: 백엔드와 사전 논의한 파라미터와 네이밍이 다를때 바로 체크할 수 있다는 점이 좋았고, 일반적인 문서보다 효율적임을 느꼈습니다.
GypPT
트레이너의 맞춤 PT를 집에서도 받아볼 수 있는 서비스입니다.
23.09.04 ~ 23.9.22 (3주)
Frontend 4명, Backend 4명
내가 기여한 부분
트레이너 프로필 페이지
•
IntersectionObserver를 사용하여 무한스크롤 구현
운동 달성 체크리스트 페이지
•
유저의 멤버십 등급(브론즈, 실버, 골드)에 따른 접근 권한
•
Checkbox 구현
•
현재 요일을 표시하는 주간 캘린더 기능 구현
•
S3를 이용한 식단 사진 업로드 / 모달 컴포넌트
상담 페이지
•
글 / 댓글 작성, 수정, 삭제
기획
•
Miro 툴을 활용한 User flow 작성
•
기능 요구 정의서 작성 기여
사용 기술
•
React - 리액트 렌더링 동작과 과정에 대해 탐구해 볼 수 있었습니다.
•
SCSS - 모듈화, Nesting, 변수 등을 사용하여 CSS의 한계를 보완하였습니다.
KREAM
한정판 거래 플랫폼 ‘KREAM’을 클론한 서비스.
23.08.21 ~ 23.09.01 (2주)
Frontend 2명, Backend 4명
내가 기여한 부분
스크럼 프로세스를 통해 프로젝트를 관리
•
주기적으로 목표를 정하고 스프린트 기간을 설정
•
매일 10분마다 데일리 스탠드업 회의를 하며 각 파트마다 진행상황을 공유
•
스프린트가 끝나면 회고를 통해 잘한 점과 개선할 점을 도출하여 다음 스프린트때 반영
로그인 / 회원가입 페이지 제작
•
이용약관 동의, 아이디와 비밀번호 유효성 검사를 진행
•
react-router-dom을 활용하여 로그인 여부에 따른 라우팅 처리
상품 목록 페이지 제작
•
쿼리스트링을 사용하여 필터, 정렬 기능 구현
•
IntersectionObserver를 사용하여 무한스크롤 구현
상품 상세 페이지 제작
•
신발 사이즈 선택 모달 컴포넌트 구현
•
선택한 신발 사이즈에 따라 관련된 데이터 (table data, 평균 거래가, 즉시 판매가, 즉시 구매가) 가 동적으로 업데이트되도록 구현
•
현재 체결 상태를 보여주는 Table 구현
•
JWT 인증 기반으로 로그인 여부 확인를 확인하고 조건부로 Table이 렌더링 되도록 구현
회원가입
.gif&blockId=bda5744f-de0a-4cb9-b0cd-3969c05084b6)
로그인
상품 목록 (정렬 기능)
.gif&blockId=c32fdaeb-408c-4ca0-a1c9-4f6abf9cfb30)
상품 상세페이지
사용 기술
•
React - JSX 문법을 익히고 컴포넌트 기반의 구현 방식을 경험하기 위해 사용했습니다.
•
SCSS - CSS를 보다 편리하게 작성하기 위해 사용했습니다.