배포 주소: 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를 사용하여 애니메이션을 추가하였습니다.
페이지 | 영상 |
---|---|
페이지 로딩 | ![]() |
카메라 이동 애니메이션 | ![]() |
중고마켓
리액트와 NEXT.JS, GrapQL, iamport-api를 이용하여 만든 중고 물품 거래 웹페이지입니다.
주요기능
- 상품 등록 / 수정 / 삭제
- 포인트 충전
- 대글 / 대댓글
- 상품 구매
- 로그인 / 로그아웃
페이지 | 영상 |
---|---|
물품 등록 | ![]() |
포인트 충전 | ![]() |
댓글 CRUD | ![]() |
물품 구매 | ![]() |
로그인 및 로그아웃 | ![]() |
고양이 갤러리
Firestore를 이용하여 CRUD를 구현한 웹페이지입니다.
- open-api인 The Cat API 사용
- 저장할 카테고리 생성
- 사진 제목 작성 및 저장
- 사진 제목 수정 및 삭제
페이지 | 영상 |
---|---|
카테고리 생성 | ![]() |
제목 작성 및 저장 | ![]() |
제목 수정 및 삭제 | ![]() |