미리보기

입점사

기술 스택

Typescript, Next.js, Recoil, React-query, Styled-components, Storybook

주문/발주, 취소/반품/교환, 배송정보관리, 정산관리 페이지 작업

• 필터링, 페이지네이션 등 custom hook 구현
• 재사용 가능한 공통 컴포넌트 구현
  • 모달 관련 상태 관리 값들이 많아져 전역 상태관리 모달을 도입
  • 유효성 검사 결과 및 API 통신 완료에 대한 시각적인 피드백을 제공하기 위해 스낵바 도입

컴포넌트 문서화를 위해 Storybook 도입

React-query 도입

• 변경되는 데이터를 바로 확인할 수 있도록, 화면이 focus 이벤트를 받을 때마다 서버 상태를 동기화
• 로딩 상태관리 및 응답값에 대한 처리가 편리하게 개선

서비스

기술 스택

Javascript, Vue.js, HTML5, CSS3, PHP

UI/UX 개선 및 유지 보수

• 기획팀 및 백엔드 개발자와 협업하여, PHP와 jQuery로 구축된 레거시 사이트에서 Vue.js와 REST API 방식으로 리뉴얼
• 전체적인 페이지 UI/UX 개선에 따른 퍼블리싱과 API 바인딩 작업

장바구니 기능 오픈

• 주문서 페이지
  • 쿠폰, 포인트 등의 사용에 따라 주문금액과 적립금 계산
• 부분 / 전체 환불 프로세스
  • 환불 프로세스 기획 및 기존 UI 컴포넌트 활용하여 UI 제작
  • 환불 사유를 받아 판매자의 책임 여부 또는 사용자의 책임 여부를 파악하여 환불 시 환불되는 금액, 쿠폰 및 포인트를 계산

로그인, 회원가입

• 인증 방식을 session에서 jwt로 변경
• access token 만료 시 재발급 구현
• 소셜 로그인 기능 구현 (카카오, 네이버, 애플)

기타

• 메인 페이지의 초기 로딩 시 모든 API를 받아오는데 많은 시간이 소요되어 Intersection Observer 활용해 화면에 보이는 부분만 API 호출을 하도록 개선
• 검색 시 debounce을 적용하여 300ms마다 API 요청해 검색어 추천 API 호출 최적화
• 검색 필터(카테고리, 브랜드, 배송, 가격)를 적용시키고 해당 값을 URL 쿼리 스트링에 추가해 링크를 공유하거나 뒤로가기 시에도 필터링 값을 유지할 수 있도록 구현
• API 호출 시 발생한 오류를 사용자에게 명확히 안내하기 위해 에러 모달을 도입하여, CX팀으로 들어오는 문의를 신속하게 파악하고 해결할 수 있도록 조치

Frontend

기술 스택

Typescript, Next.js, Recoil, React-query, Tailwind, Vercel

구현 사항

• axios interceptors를 활용하여 accessToken 만료 시 401 에러를 감지하고 refreshToken으로 accessToken을 재발급 받도록 구현
• SEO 최적화를 위해 정적 메타 데이터와 동적 메타 데이터를 추가
• useInfiniteQuery와 IntersectionObserver를 이용하여 무한 스크롤을 구현
• react-github-calendar 라이브러리를 수정하기 위해 patch-package 사용
• next/image를 활용하여 이미지 최적화를 진행
• 반응형으로 구현
• Vercel에 배포

Backend

기술 스택

Typescript, Express, TypeORM, PostgreSQL, Docker, AWS EC2, Cloudinary

구현 사항

• Rest API 개발 및 DB 설계
• JWT와 cookie로 인증 구현
• Google 소셜 로그인 기능 구현
• 클라이언트에서 받아온 이미지 파일을 multer를 사용하여 처리한 후 Cloudinary에 업로드
• CORS 처리
• Docker를 활용하여 AWS EC2에 PM2로 무중단 배포
• AWS Certificate Manager를 사용하여 SSL 인증서를 발급받고, 이를 Route 53을 통해 설정한 Load Balancer에 연결하여 HTTPS를 구현

관련 링크

Deploy
Frontend Github
Backend Github

닉네임을 뭘로 하면 좋을까? 내 이름으로 할 수도 없고 뭐 재밌는 거 없나? 싶으셨죠? 이때 ChatGPT API를 활용한 닉네임 생성기가 여러분의 고민을 해결해 줄 수 있습니다!

Frontend

기술 스택

Javascript, HTML/CSS, Cloudflare Pages

구현 사항

• 사용자로부터 입력을 받은 후, 해당 API에 요청하여 추천된 닉네임을 화면에 표시할 수 있도록 JavaScript를 통해 구현

Backend

기술 스택

Javascript, Express, AWS Lambda

구현 사항

• ChatGPT API를 활용하여 닉네임을 추천하는 API를 개발

관련 링크

Github
Deploy

유용하게 사용하던 UI 컴포넌트를 다른 개발자들과 공유하고자 npm에 업로드

기술 스택

Typescript

구현 사항

• 모바일 웹이나 앱에서는 bottomsheet 형태로 나타나고, 웹에서는 모달 형태로 나타나도록 구현
• 순수 자바스크립트로 web components를 활용해 구현하여, 어떤 프레임워크를 사용하던 상관없이 적용 가능
• web components를 처음 사용하는 분들을 위해 React.js와 Vue.js 같은 프레임워크의 예시를 업로드

관련 링크

Github
npm
블로그 포스팅

오늘의 기분을 날씨로 표현할 수 있는 일기장

기술 스택

JavaScript, React, PostCSS, Firebase Realtime Database, Firebase Authentication

구현 사항

• 오늘의 기분을 선택하고 일기를 추가하면 날씨로 오늘의 기분이 나타납니다.
• 날짜, 기분, 이미지, 제목, 내용을 추가할 수 있습니다.
• Firebase Authentication를 이용하여 google 또는 github 계정으로 로그인
• Firebase Realtime Database로 CRUD를 구현
• Firebse Hosting으로 배포
• 이미지 관리 서비스인 Cloudinary를 활용하여 업로드 된 이미지의 사이즈를 최적화

관련 링크

Github
Deploy

5주 동안 협업을 통해 기업 과제 수행(프로젝트)

노원 창업대전에 C#과 Unity로 제작한 게임을 출품 (Github)