DumakIt / Portfolio

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

배포 주소: https://minki.site

Installation

  yarn install

주요 기술 스택 및 선택 이유

기술 이유
React 컴포넌트 기반 접근 방식을 통해 재사용할 수 있는 UI 요소를 구축할 수 있으며, 가상 DOM을 사용하여 효율적인 렌더링을 지원합니다. 이를 통해 웹 애플리케이션의 복잡성을 관리하고, 유지 보수를 용이하게 할 수 있기 때문에 선택하였습니다.
NEXT.JS NEXT.JS는 리액트 기반의 프레임워크로, 서버 사이드 렌더링(SSR), 정적 사이트 생성(SSG), 라우팅 등의 기능을 통해 더 좋은 성능으로 개발할 수 있으며, 프로젝트를 확장하거나 유지 보수하기 쉽게 만들어 주기 때문에 선택했습니다.
TypeScript 개발자가 의도한 변수나 함수 등의 목적을 더욱 명확하게 전달 가능하고 전달된 정보를 기반으로 코드 자동완성이나 잘못된 변수/함수 사용에 대한 에러 알림 같은 피드백을 받을 수 있게 되므로 순수 자바스크립트에 비해 생상성 향상할 수 있기 때문에 선택하였습니다.
React-Three-Fiber React-Three-Fiber는 React의 상태 훅(useState, useEffect 등)을 활용하여 threeJS 요소의 속성과 동작을 관리할 수 있으며, 여러 기능을 쉽게 사용할 수 있도록 도와주는 라이브러리를 사용할 수 있기 때문에 선택했습니다.
GraphQL GraphQL은 클라이언트가 원하는 응답 값을 받을 수 있기 때문에 이로 인해 네트워크 트래픽과 데이터 전송량을 최적화할 수 있어 효율성을 높일 수 있기 때문에 선택했습니다.

3D 메인페이지

React-Three-Fiber를 사용하여 만든 메인페이지 입니다.

React-Three-Fiber에 대한 자료가 많이 부족하여 공부 및 적용하느라 많이 부족한 부분이 있습니다.
GLTF 3D모델을 사용하였고 GSAP를 사용하여 애니메이션을 추가하였습니다.

페이지 영상
페이지 로딩 main1
카메라 이동 애니메이션 main2

중고마켓

리액트와 NEXT.JS, GrapQL, iamport-api를 이용하여 만든 중고 물품 거래 웹페이지입니다.

주요기능

  • 상품 등록 / 수정 / 삭제
  • 포인트 충전
  • 대글 / 대댓글
  • 상품 구매
  • 로그인 / 로그아웃
페이지 영상
물품 등록 중고마켓 작성
포인트 충전 중고마켓 충전
댓글 CRUD 중고마켓 댓글
물품 구매 중고마켓 구매
로그인 및 로그아웃 중고마켓 로그인

고양이 갤러리

Firestore를 이용하여 CRUD를 구현한 웹페이지입니다.

  • open-api인 The Cat API 사용
  • 저장할 카테고리 생성
  • 사진 제목 작성 및 저장
  • 사진 제목 수정 및 삭제
페이지 영상
카테고리 생성 고양이 카테고리 생성
제목 작성 및 저장 고양이 저장
제목 수정 및 삭제 고양이 수정 삭제

About


Languages

Language:TypeScript 99.6%Language:JavaScript 0.3%Language:CSS 0.0%