본문 바로가기

개발26

gql 초기 세팅 Apollo server는 nodejs 서버와 같은 오픈소스 서버이나 gaphql 을 사용할 수 있음. express로 만든 것도 middleware만 사용하면 graphql로 바꿔줄 수 있음. graphql api를 만들어주기 위해 먼저 npm init 을 한다; npm init -y 그 다음에 아폴로 서버를 설치해줌 npm apollo-server graphql (더 나은 개발경험을 위해 nodemon도 설치) server.js 파일을 만들어주고 gitignore 생성해준뒤 git init을 해준다. server.js에는 apollo server와 gql을 임포트해준다. import {ApolloServer, gql} from "apollo-server" 2022. 11. 21.
Recoil은 부모-자식 prop의 전달 문제를 해결한다! 기존에 리액트에서는 부모로부터 자식으로 prop을 전달하기 위해 먼 경로를 거쳐야 하는 문제가 있었다. 이 문제를 해결하기 위해 recoil이 도입되었다. recoil은 상태관리 라이브러리이고, redux보다 이해하기 쉽다. 우선 npm install recoil을 해주고 상태관리하고싶은 것은 atom에 넣어준다. atom에는 key와 default를 지정해준다. key는 atom을 식별하는데 사용되는 고유한 문자열이고, default는 atom의 초깃값 또는 Promise 또는 동일한 타입의 값을 나타내는 다른 atom이나 selector이다. const namesState = atom({ key: 'namesState', default: ['', 'Ella', 'Chris', '', 'Paul'], .. 2022. 11. 21.
React Query는 데이터를 캐싱한다! 리액트 쿼리는 서버 상태 가져오기, 캐싱, 동기화 및 업데이트를 쉽게 만든다. API를 가져올 때 사용하는 코드를 몇 줄만으로 줄일 수 있다. 우선 npm i react-query 로 설치해준 다음에 다음과 같이 기본 세팅한다. import { QueryClient, QueryClientProvider } from "react-query"; const queryClient = new QueryClient(); export default function App() { return ( ); } useQuery를 사용하면 isLoading, data 값을 더 쉽게 가져올 수 있다. 첫번째 인자에는 유니크한 값, 두번째 인자에는 promise를 반환하는 함수(fetcher)를 넣어주어야 한다. const [is.. 2022. 11. 19.
TypeScript에서 Obejct 타입을 선언할 때 interface를 사용! TypeScript는 객체에 그냥 접근할 수가 없고, 타입을 명확히 알려주어야 한다. 이 때문에 interface를 사용한다. interface User { name:string, age: number } const user:UserInfo = { name: "Chloe", age: 30, } 위와 같이 선언하면 된다. 2022. 11. 13.

티스토리툴바