카테고리 전체102 Next + RTK + Typescript 개발 환경 설정하기 Next + RTK + Typescript 개발 환경 설정 Next.js 와 RTK를 연동하여 사이드 프로젝트를 하려 하는데 레퍼런스들이 좀 각자 개별로 달라서 내가 따로 정리해보려고 포스팅을 적는다. Next.js , Redux Next.js는 서버에서 서버사이드 렌더링을 하기 위한 라이브러리이기 때문에 서버에서 돌아가지만, Redux는 클라이언트(브라우저) 전역 상태 라이브러리기 때문에 브라우저 상에서 동작하게 된다. 원래 리액트 앱에서 리덕스를 사용하게 되면 단 하나의 리덕스 스토어만 존재하게 되지만, Next를 사용하게 되면 리덕스 스토어가 여러개가 생기는 문제가 생긴다. 그래서 Next와 redux를 같이 사용하려면 next-redux-wrapper 라이브러리를 사용해야한다. https://gi.. 2022. 11. 18. 01:45 GraphQL이 무엇일까? 최근 GraphQL이라는 키워드를 많이 보게 되었다. 그리고 문득 궁금증이 생겼다. 과연 GraphQL이 무엇일까? [GraphQL 공식 홈페이지] https://graphql-kr.github.io/ GraphQL: API를 위한 쿼리 언어 GraphQL은 API에 있는 데이터에 대한 완벽하고 이해하기 쉬운 설명을 제공하고 클라이언트에게 필요한 것을 정확하게 요청할 수 있는 기능을 제공하며 시간이 지남에 따라 API를 쉽게 진화시키고 graphql-kr.github.io GraphQL? GraphQL(Graph Query Language)의 약자이다. GraphQL이란 페이스북에서 개발한 쿼리 언어이다. Server API를 구성할 때 사용된다. 우리는 보통 REST API를 많이 사용하는 것처럼 Gr.. 2022. 11. 11. 15:42 안드로이드 스튜디오 다운로드 및 환경 설정 React-Native로 개발할 때 두 가지 방법이 있다. 1. 실행 시 vsCode를 이용해 QR 코드를 찍고, 자신의 모바일에 EXPO 앱을 다운로드하여 실행하는 방법. 2. Android Studio를 이용해 개발하는 방법 이번 포스팅은 안드로이드 스튜디오를 이용해서 React-Native를 세팅하는 방법을 포스팅 할 것이다. https://developer.android.com/studio Download Android Studio & App Tools - Android Developers Android Studio provides app builders with an integrated development environment (IDE) optimized for Android apps. Dow.. 2022. 11. 8. 16:30 [RTK] RTK-Query 공식문서보며 직접 사용해보기 RTK-Query 공식문서 보며 직접 사용해보기 RTK 공식문서에 있는 Query 예제를 따라 해 보면서 실습하겠다. 나는 빠른 진행을위해 타입 스크립트 rtk 템플릿을 다운로드하였다. // Redux + TypeScript template // 가운데 rtk-ts는 자신이 생성할 프로젝트 명이다. npx create-react-app rtk-ts --template redux-typescript 1. createApi 작성 /src 폴더 하위에 service 폴더를 만들고 pokemon.ts 파일을 생성한다. 생성 후 아래와 같이 작성한다. /src/service/pokemon.ts //pokemon.ts import { createApi , fetchBaseQuery } from '@reduxjs/t.. 2022. 11. 7. 18:05 [인프런 강의] zerocho Slack 클론 코딩 (10) - axios로 요청보내기 CORS, proxy zerocho Slack 클론 코딩 (10) - axios로 요청 보내기 CORS, proxy 저번 포스팅에서는 커스텀 훅을 만들어 보았고, 이번 포스팅에서는 axois 요청 및 CORS, proxy에 대해 공부한다. 현재는 리덕스를 사용하지 않기때문에 비동기 요청 로직을 굳이 컴포넌트 밖으로 빼낼 필요가 없다. 회원가입 페이지라면 회원의 정보를 넘기는 비동기 요청을 그냥 회원가입 컴포넌트 내에 작성하는 것이 더 깔끔할 수 있다. 1. axios 설치하기 및 설정 npm i axios axios를 현재 작업중인 프론트 코드에 설치해 준다. alecture/signUp/index.tsx 에 axios 를 import 시켜준다. //axios 추가 import axios from 'axios'; 프론트엔드 .. 2022. 11. 6. 16:52 [RTK] RTK-Query? RTK Query? RTK Query는 데이터를 fetching, caching을 할 수 있는 툴이다. 웹에서 데이터를 가져오는 것을 간단하게 만들어 데이터 패치(가져오기)와 캐싱 로직을 작성할 필요가 없어지게 한다. RTK-Query는 Redux-Toolkit 패키지에 포함되어있는 선택적인 추가 기능이다. 웹 애플리케이션은 일반적으로 서버에서 데이터를 가져오게되고, 데이터 업데이트 및 클라이언트의 캐시 된 데이터를 서버 데이터와 동기화된 상태로 유지해야 한다. RTK-Query는 Apollo Client, React Query, Urql 및 SWR과 같이 데이터 가져오기를 위한 선구적인 솔루션 제공 및 API 디자인에 고유한 접근 방식을 추가한다. RTK Query 특징 - 데이터 패칭(가져오기) 및 .. 2022. 11. 5. 17:37 이전 1 2 3 4 5 6 7 8 ··· 17 다음 728x90
