반응형 Frontend/React29 리덕스 툴킷과 많이 사용하는 미들웨어(redux-saga, redux-thunk 등) 리덕스 툴킷은 Redux를 편리하게 사용할 수 있도록 도와주는 도구이다. 여기에는 몇 가지 흔히 사용되는 미들웨어가 있다. redux-thunk 비동기 작업을 처리하기 위한 미들웨어로, 함수 형태의 액션을 생성하여 비동기 작업을 수행할 수 있다. const fetchData = () => { return async (dispatch) => { dispatch(fetchDataRequest()); try { const data = await api.fetchData(); dispatch(fetchDataSuccess(data)); } catch (error) { dispatch(fetchDataFailure(error)); } }; }; redux-logger 액션의 디스패치와 상태의 변화를 콘솔에 로깅하.. 2023. 12. 22. 리덕스와 리덕스 툴킷(createSlice, handleActions) 사용해야 하는 도구나 함수의 선택은 개인적인 취향, 프로젝트의 규모, 팀의 선호도 등 여러 요소에 따라 다를 수 있다. 그러나 Redux Toolkit은 Redux 코드를 작성하는 데 있어서 편의성과 효율성을 제공하므로, 많은 프로젝트에서는 Redux Toolkit을 선호하는 경향이 있다. 여기 몇 가지 고려해야 할 사항이 있다: 프로젝트 규모와 복잡도: 작은 규모의 프로젝트에서는 Redux Toolkit의 편의성이 더 큰 장점이 될 수 있다. 큰 규모의 복잡한 애플리케이션의 경우에는 더 많은 커스터마이징이 필요할 수 있으므로 해당 요구에 맞게 Redux의 기본 기능을 직접 사용할 수도 있다. Redux Toolkit의 특징 활용: Redux Toolkit은 createSlice, configureSto.. 2023. 12. 22. 패키지 의존성 충돌 버전 에러 해결 ERESOLVE unable to resolve dependency tree 에러 원인 redux-actions을 설치하고 npm run dev를 했는데 'vite'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는 배치 파일이 아닙니다. 이런 오류가 떠서 yarn.lock과 pakage-lock.json 파일을 삭제해주고 npm install을 했는데 뜬 오류다. (redux-actions를 설치했는데 왜 redux-devtools-extension과 redux의 버전충돌이 이제서야 뜨는건지 모르겠다.. ) npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! While resolving: react-redux-tutorial@0.0.0 npm ERR! .. 2023. 12. 15. [React] 헷갈리는 리액트 이벤트 핸들러 작성법 import React from 'react' const Counter = ({ number, onIncrease, onDecrease }) => { return ( { number } +1 -1 ) } export default Counter 이걸 작성하다가 궁금한점이 생겼다. onClick={onIncrease()}를 하지 않는 이유는 뭘까? ChatGPT씨에게 물어보았다ㅎㅎ onClick={onIncrease()}와 onClick={onDecrease()}를 사용하는 것은 함수를 호출하려는 시도를 나타냅니다. 그러나 일반적으로 React에서는 함수를 직접 호출하는 것이 아니라, 이벤트 핸들러로 함수 참조(reference)를 전달해야 합니다. 만약 onClick={onIncrease()}를 사용하면.. 2023. 12. 8. [Firebase] 파이어베이스를 이용해서 앱 배포하기 11. 파이어베이스를 이용해서 앱 배포하기 1. 깃헙 commit&push 2. firebase를 사용하기위한 모듈 전역 설치 npm install -g firebase-tools firebase login 3. build하기 npm run build 4. firebase 시작하기 firebase init 화살표와 스페이스바 이용해서 다음 선택지 체크 Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys 이미 만들어진 프로젝트 호스팅할거임 Please select an option: Use an existing project firebase 프로젝트 선택하기 Select a default Fir.. 2023. 12. 8. [React] 포켓몬도감 만들기8 - Typescript로 변경하기 완성한 포켓몬도감 배포 주소이다. 완성된 포켓몬도감 01. 타입 스크립트를 사용하기 위한 준비하기 typescript 설치 npm install -D typescript @types/react @types/react-dom vite.config.js -> vite.config.ts 확장자 변경 tsconfig.json, tsconfig.node.json, vite-env.d.ts(/src/) 가져오기 vite로 typescript + 리액트 프로젝트 생성하면 기본으로 생성되는 파일을 가져온다. main.tsx 확장자 변경 index.html에서 main.tsx로 변경 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).r.. 2023. 12. 8. [React] 포켓몬도감 만들기7 03. 로그인 페이지 생성하기 01. Firebase에 대해서 Firebase란? 모바일 및 웹 애플리케이션을 만들기 위해 구글에서 개발한 플랫폼이다. 대부분의 앱을 만들때 필요한 부분들 인증 / 데잉터베이스 / 스토리지 / 푸시알림 / 배포 등등 을 자동으로 만들어주는 플랫폼이다. firebase를 이용한 앱 구조 02. Firebase와 애플리케이션 연결하기 firebase 사이트 firebase 바로가기 회원가입 & 로그인 콘솔로 이동 프로젝트 생성 firebase연결하기 npm install firebase firebase.js 파일 생성 export default app;추가 03. 로그인 페이지를 위한 경로 생성 및 Navbar 생성하기 router, Layout 생성 const Layout .. 2023. 12. 8. [React] 포켓몬도감 만들기6 16. React Portal 로 모달 생성하기 Portals란 ? Portal은 부모 컴포넌트의 DOM 계층구조 바깥에 있는 DOM 노드로 자식을 렌더링 하는 최고의 방법을 제공한다. ReactDOM.createPortal(child, container) 첫번째 인자 child는 엘리먼트, 문자열, 혹은 fragment와 같은 어떤 종류이든 렌더링할 수 있는 React자식이다. 두번째 인자 container는 DOM 엘리먼트이다. Portal을 이용한 모달 생성 테스트 프로젝트 생성 npx create-react-app react-portal-modal 실행npm run start 문제점 첫번째 div와 두번째 div가 같은 z-index(1)가지고 첫번째 div안에 자식인 모달이 z-index 100.. 2023. 12. 8. [React] 포켓몬도감 만들기5 11. Damage Relations 컴포넌트 생성하기 데미지 관계 데이터 포켓몬의 타입이 어떤 타입에 강한지, 약한지 관계를 표현하는 부분 앞서 받아온 DamageRelations데이터를 살펴보자. console.log(pokemon?.DamageRelations); 한 포켓몬이 가진 타입에 따라서 더블데미지를 주는 타입(double damage to), 더블데미지를 받는 타입(double damage from), 하프데미지를 주는 타입(half damage to), 하프데미지를 받는 타입(half damage from), 데미지를 안주는 타입(no damage to), 데미지를 안받는 타입(no damage from) 여섯가지 관계를 시각화한다. UI에 넣어주기 위한 가공된 데이터 최종 형태 가공 첫.. 2023. 12. 8. [React] 포켓몬도감 만들기4 01. React Router Dom App.jsx에서 라우팅 설정 import { BrowserRouter, Route, Routes } from 'react-router-dom'; ... 02. React Router Dom APIs 중첩라우팅(Nested Routes) 리액트 라우터의 가장 강력한 기능중 하나. 복잡한 레이아웃 코드를 어지럽힐 필요가 없다. 대부분의 레이아웃은 URL의 세그먼트에 연결되며 React Router는 이를 완전히 수용한다. Outlet 자식 경로 요소를 렌더링하려면 부모 경로 요소에서 Outlet을 사용해야한다. 이렇게 하면 하위 경로가 렌더링될때 중첩된 UI가 표시될 수 잇다. 부모 라우트가 정확히 일치하면 자식 인덱스 라우트를 렌더링하거나 인덱스 라우트.. 2023. 12. 8. [React] 포켓몬도감 만들기3 15. AutoComplete 기능 생성하기 검색을 했을때 그에 관련된 검색어를 가져올 수 있게 서버에서 포켓몬 이름을 전달해주면 좋지만 그런 API는 없다. 따라서 이 기능을 구현하려면 프론트엔드에서 먼저 모든 포켓몬의 데이터를 가지고 있어야 한다. 현재는 포켓몬 데이터 limit을 20으로 설정하고있기 때문에 소스 코드의 수정이 필요하다. refactoring function App() { // 모든 포켓몬 데이터를 가지고 있는 State const [allPokemons, setAllPokemons] = useState([]); // 실제로 리스트로 보여주는 포켓몬 데이터를 가지고 있는 State const [displayedPokemons, setDisplayedPokemons] = useStat.. 2023. 12. 8. [React] 포켓몬도감 만들기2 ## 08. API를 통해 포켓몬 데이터 가져오기 ### Axios란 무엇인가? * Axios는 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리이다. * 쉽게 말해서 백엔드랑 프론트엔드랑 통신을 쉽게 하기위해 Ajax와 더불어 사용한다. Client Poke API 서버 (fetch()) (fetch => response => json) ### Axios 사용방법 * axios 모듈설치 `npm i axios` ```js const [pokemons, setPokemons] = useState([]); const url = 'https://pokeapi.co/api/v2/pokemon/?limit=100&offset=0'; useEffect(() => { .. 2023. 12. 8. 이전 1 2 3 다음 반응형 최근댓글 최근글 인기글 © Copyright 2023 jngmnj
최근댓글