본문 바로가기

React.js/[완성] 프로젝트2

[CRA, TypeScript, Redux, REST API, GSAP, styled-component] 포켓몬 검색 [소개] - 새로 공부한 Redux, 타입스크립트를 조금 더 심층적으로 공부하기 위한 프로젝트. - pokeapi를 통해 비동기 처리에 대한 작업. 그리고 직접 기획한 의도에 맞게 동적으로 화면에 컨텐츠 노출. [세부내용] - 오픈 REST API 사용. - GSAP 애니메이션 라이브러리로 카드노출 시 애니메이션 적용. [디렉토리 구조] + public + src + api - index.ts + assets + styles + components + Home + Popup + gsap - index.ts + hooks - useFetch.ts + pages - Home.tsx + store + actions - index.ts + reducers - index.ts ※ FLUX 패턴에 맞게 상태관련 디.. 2022. 9. 21.
[개인 프로젝트] 카드뽑기 프로젝트 [소개] 랜덤 뽑기를 통해 나만의 캐릭터를 보관하고 캐릭터들로 덱을 구성해 친구들과 내기를 할 수 있는 서비스입니다. [기능] 1. 이미지 감지(detection)의 결과를 바탕으로 임의 캐릭터 생성 2. 생성된 캐릭터를 성장시켜 덱을 만들 수 있다. 3. 다른 유저와의 상호작용(실시간 대화, 친구 추가, 메시지 전달) [세부내용] 1. 이미지를 업로드하여 이미지에서 감지된 인물에 대한 감정값을 바탕으로 캐릭터를 제공합니다. 2. 캐릭터에 설정된 스탯은 최초 1 ~ 5 사이 랜덤으로 설정됩니다. 3. 사용자는 캐릭터를 보관할 수 있고 캐릭터를 업그레이드 할 수 있습니다. 4. 레벨업을 할때마다 5 ~ 20 사이 활률에 따라 스탯이 결정됩니다. 예를 들어 제일 높은 수치인 20은 1%, 10은 15%의 확.. 2022. 9. 6.