PROJECT9 개인 프로젝트 7 카드를 이름과 마나 코스트 순으로 정렬을 바꿀 수 있게 하고 모든 직업군에서 적용되는 중립 카드를 안 볼 수 있게 기능을 추가해보려고 합니다. 정렬 // 현재 정렬 상태 (1,2,3,4) const [filterOrder, setFilterOrder] = useState(1); // 중립 카드 온오프 const [onNeutral, setOnNeutral] = useState(true); // 직업 선택 시 카드 리스트 저장 const [currentCard, setCurrentCard] = useState(props.currentHeroCard); // 이름 순 카드 오름차순 정렬 const nameAscendSort = () => { setFilterOrder(1); const sortedArray .. 2023. 7. 10. 개인 프로젝트 6 카드 데이터들이 이름만 나오는 게 밋밋하다고 생각해 카드 컴포넌트에 배경 이미지를 카드 일부분의 이미지를 보여주는 방법으로 추가했습니다. https://hsreplay.net/cards/#playerClass=MAGE&gameType=ARENA 하스스톤 카드 통계 수집 가능한 모든 하스스톤 카드 통계를 비교합니다. 가장 승률이 높은 카드와 가장 많이 플레이한 카드를 찾아보세요. hsreplay.net 이 사이트를 참고해서 말이죠. div 태그 background 스타일링 위와 같이 만들었습니다. import { useEffect, useState } from "react"; import { CardStructure } from "../card.model"; interface CardProps { card.. 2023. 7. 7. 개인 프로젝트 5 하스스톤 투기장에서는 카드 덱을 구성할 동안 세 번의 보기 중 하나를 고르는 행위가 30번 반복됩니다. 그 보기들을 카드 목록들에서 보이게 하기 위해 검색창을 만들고 그 카드들이 보이게 하려고 합니다. Input 생성 및 변수 관리 App.tsx const App: React.FC = () => { // 카드 검색 데이터 저장 const [cardFilter, setCardFilter] = useState([]); // 검색 데이터 상태 끌어올리기 위한 함수 const filterCardHandler = (filter: string[]) => { setCardFilter(filter); }; return ( ); }; 위와 같이 최상단에서 데이터를 관리하기 위해 만들고 인풋창으로 함수를 내려줘 상태 끌어.. 2023. 7. 7. 개인 프로젝트 4 스타일링 방법을 고민하다 인라인 스타일링으로 간단히 구현해 놓은 부분이 있고 그 부분에 className만 적용해서 바꿀 수 있는 tailwindcss를 사용해 보기로 했습니다. 설치 및 세팅 https://tailwindcss.com/docs/installation Installation - Tailwind CSS The simplest and fastest way to get up and running with Tailwind CSS from scratch is with the Tailwind CLI tool. tailwindcss.com 공식 사이트가 있어 설치하기 쉬었고 빠르게 적용해 볼 수 있었습니다. npm install -D tailwindcss npx tailwindcss init tail.. 2023. 6. 23. 개인 프로젝트 3 환경 변수 설정에서 통신 에러는 오타가 있었습니다... 역시 푹 쉬면서 해야 사소한 게 보이나 봅니다. (─‿─) 영웅 선택 및 카드 데이터 호출 다음과 같이 선택된 영웅의 카드들을 저장할 변수를 만들고 영웅 변경 시 데이터를 변경할 함수를 내려줍니다. const [currentHeroCard, setCurrentHeroCard] = useState([]); const currentHeroCardHandler = (card: CardStructure[]) => { setCurrentHeroCard(card); }; return ( {heroData.map((el) => { return ; })} ); import { CardStructure } from "../card.model"; // Props 구조.. 2023. 6. 20. 개인 프로젝트 2 개인 사정으로 오래 쉬고... 시작한다 시작한다 미루다 드디어 다시 개인 프로젝트에 손을 댔습니다. 코딩을 조금 쉬니 모든 게 초기화된 기분이지만 차근차근 해보겠습니다. !(•̀ᴗ•́)و 환경 변수 설정 링크를 통합해서 관리하고 Oauth 인증을 위한 Client Secret을 숨기기 위해 설정했습니다. 다음과 같이 env 파일을 만들고 아래와 같이 내용을 채웠습니다. REACT_APP_OAUTH=여기에 Client Secret 입력 그리고 App.tsx에 POST 요청을 통해 토큰을 받아 로컬스토리지에 저장했습니다. useEffect(() => { fetch("https://oauth.battle.net/token", { body: "grant_type=client_credentials", header.. 2023. 6. 19. 개인 프로젝트 1 설치 및 설정 깃헙 레포에 새 레포를 만들고 클론을 떠서 그 폴더 안에 리액트-타입스크립트 프로젝트를 생성합니다. npx create-react-app . -template typescript tsconfig.json 설치를 하고 기초 설정을 합니다. tsc --init https://typescript-kr.github.io/pages/compiler-options.html TypeScript 한글 문서 TypeScript 한글 번역 문서입니다 typescript-kr.github.io 감시 모드로 설정합니다. tsc -w 블리자드 API https://develop.battle.net/ 블리자드 API를 이용하기 위해선 일단 계정과 인증기 등록이 완료되어야 합니다. 완료되었으면 사이트에 들어가 API.. 2023. 5. 18. 프로젝트) 쿠키와 요청 구조화 기본적으로 토큰은 리액트 쿠키를 이용하여 저장했습니다. https://www.npmjs.com/package/react-cookie react-cookie Universal cookies for React. Latest version: 4.1.1, last published: 2 years ago. Start using react-cookie in your project by running `npm i react-cookie`. There are 554 other projects in the npm registry using react-cookie. www.npmjs.com import { Cookies } from 'react-cookie'; const ACCESS_TOKEN = 'token'; con.. 2023. 2. 28. 프로젝트) 소셜 로그인 프로젝트에서 로그인 부분을 담당해 구글을 통한 소셜 로그인을 구현하기로 했습니다. 소셜 로그인을 처음 시도해보기도 하고 백엔드 분과 배운 내용과 방식이 달라 서로 연결하는 법을 헤매느라 고통을 받고 있었습니다. 하지만 결국 블로그 하나를 발견하고 문제점을 알아낼 수 있었습니다. https://www.hacksoft.io/blog/google-oauth2-with-django-react-part-2#overview Google OAuth2 with Django REST Framework & React: Part 2 See how to implement an end-to-end server-side Google OAuth2 flow with Django REST framework & React. www.ha.. 2023. 2. 27. 이전 1 다음
