Byun Sejun

Work

React & Next.js Project

• netflix

  NETFLIX 프로젝트는 The Movie Database (TMDB) API를 이용하여 만들어 보았습니다. 리덕스의 비동기 처리를 위해 리덕스 미들웨어 콘셉트인 redux-thunk 사용하였고 Restful Route 규칙을 사용하여 Http 명령어와 URL을 매칭 시켜 url 디자인을 단순하고 통일성 있게 만들어 보았습니다.

  • WEB VIEW
  • CODE VIEW

  SubPage

  • Home
  • Movies
  • MovieDetail

  • Skill:
  • react router
  • redux
  • redux-thunk
  • bootstrap
  • axios

• blackup

  BLACKUP 프로젝트는 FIREBASE를 이용하여 실시간 데이터베이스, 사용자 인증 로그인을 구현해 보았고 CLOUDINARY를 이용해 이미지를 업로드했습니다. 장바구니 기능은 사용자가 실시간 데이터베이스에 CRUD가 가능하도록 만들어 보았고 wishList는 로그인을 하지 않아도 사용이 가능할 수 있도록 Local Storage를 사용하여 구현해 보았으며 관리자 권한이 있는 유저는 상품 등록 페이지에서 상품 등록이 가능할 수 있게 구현해 보았습니다.

  • WEB VIEW
  • CODE VIEW

  SubPage

  • Home
  • AllProducts
  • ProductDetail
  • LocalWish
  • MyCart
  • NewProduct

  • Skill:
  • react router
  • react query(TanStack Query v4)
  • fire base
  • cloudinary
  • axios

• instagram

  INSTAGRAM 프로젝트는 Next.js와 TypeScript를 기반으로 개발하였고 백, 프론트 로직을 독립적으로 관리 하기 위해 Headless CMS 시스템을 도입하였고 Sanity를 사용하여 개발하였습니다. 데이터 패칭에는 SWR을 사용하였고 사용자의 인증과 관리에는 NextAuth를 사용해 보았습니다.

  • WEB VIEW
  • CODE VIEW

  SubPage

  • Home
  • Search
  • New
  • User

  • Skill:
  • next.js
  • sanity
  • swr
  • nextauth.js
  • typescript
  • tailwind

• 서울, 너와 함께

  서울, 너와 함께 프로젝트는 서울에서 데이트를 계획하는 사람들을 타깃으로 제작한 웹사이트입니다. 주요 기능으론 날씨 예보, 데이트 장소 추천, 식당 추천이 있습니다. Next.js 기반으로 개발되었고 사용한 API는 Google Maps Platform, OpenWeatherMap이 있으며, GoogleMap WebGL 기반 지도 기능을 사용하여 건축물 3D 구현을 가능하게 했고 상태 관리에는 Zustand를 사용하였습니다.

  • WEB VIEW
  • CODE VIEW

  SubPage

  • Home
  • statistics

  • Skill:
  • next.js
  • zustand
  • tailwind