JH 개발 블로그

useQuery useQuery React hook 은 Apollo 애플리케이션에서 쿼리를 실행하기 위한 기본 API 입니다. React 컴포넌트 내에서 쿼리를 실행하려면 useQuery GraphQL 쿼리 문자열을 호출하고 전달합니다. 컴포넌트가 랜더링되면 UI 를 랜더링하는데 사용할 수 있는 useQuery 는 아폴로 클라이언트로부터 객체를 리턴한다. loading, error, data 예를 들어 보겠습니다. GET_DOGS 라는 GraphQL 쿼리를 생성합니다. import { gql, useQuery } from '@apollo/client'; const GET_DOGS = gql` query GetDogs { dogs { id breed } } `; 다음으로 Dogs 라는 구성요소를 만들고, ..

reducer 이전에는 주요 상태 업데이트(useState 등)를 컴포넌트 내부에서 했다면, 이번에는 컴포넌트와 상태 업데이트 로직을 분리시킬 수 있는 방법이 있는데 이 함수가 바로 useReducer 이다. 이 훅 함수를 통해서 상태 업데이트를 바깥에 작성할 수도 있고 심지어 다른 파일에 작성 후 불러와서 사용할 수도 있다. useReducer Hook 함수를 사용해보기전에 우선 reducer 가 무엇인지 알아보겠다. reducer 는 현재 상태와 액션 객체를 파라미터로 받아와서 새로운 상태를 반환해주는 함수이다. function reducer(state, action) { // 새로운 상태를 만드는 로직 // const nextState = ... return nextState; } reducer 에..

리액트에서 데이터 흐름을 컨트롤 하는 방법(state 관리하는 법)은 여러가지가 있다. state 와 props 를 사용해서 컴포넌트 간에 전달 React Context 사용 mobx 사용 redux를 사용 등등등... 이중에서 우리는 Context 에 대해서 알아보자. Context context를 이용하면 단계마다 일일이 props를 넘겨주지 않고도 컴포넌트 트리 전체에 데이터를 제공할 수 있다. 일반적인 React 애플리케이션에서 데이터는 위에서 아래로 (즉, 부모로부터 자식에게) props를 통해 전달되지만, 애플리케이션 안의 여러 컴포넌트들에 전해줘야 하는 props의 경우 (예를 들면 선호 로케일, UI 테마) 이 과정이 번거로울 수 있다. context를 이용하면, 트리 단계마다 명시적으로 ..

https://momentjscom.readthedocs.io/en/latest/moment/05-query/06-is-between/ Is Between - momentjs.com From here you can search these documents. Enter your search terms below. momentjscom.readthedocs.io https://velog.io/@dojunggeun/JavaScript-Moment.js%EB%A5%BC-%EC%9D%B4%EC%9A%A9%ED%95%98%EC%97%AC-Date-Time-%EA%B4%80%EB%A6%AC%ED%95%98%EA%B8%B0 [JavaScript] Moment.js를 이용하여 Date 다루기 자바스크립트에서 날짜, 시간..

타입 추론 let bool = true; const arr = [1, 2, 3]; const tuple = [true, 1]; // bool = 1; // Error! 3번째는 배열의 요소가 각각 boolean과 number이기에 최종적으로 추론되는 타입은 boolean과 number의 유니온 타입의 배열, 코드로 나타내면 (boolean | number)[] 이다. 여기에서 배열에서 사용된 요소들의 타입을 각각 추론하여 유니온 타입으로 만들어 내는 방식을 TypeScirpt 에서는 Best common type이라고 부른다. Best common type Best common type 은 말 그대로 가장 일반적인 타입이다. 여러가지 자료형이 배열 내부에서 사용되고 있을 때, 그 여러가지 자료형을 포괄할..

Material UI 에서 제공하는 기본적인 컴포넌트가 있지만 완벽하게 가져다 쓰는 경우는 거의 없다. 사용자의 입맛에 따라 커스텀을 하는 경우가 많다. 그럼 사용자의 스타일을 적용하는 방법에 대해서 알아보자. makeStyles Hook Material UI는 직관적으로 사용자 정의 스타일을 적용할 수 있도록 makeStyles React hook을 제공합니다. makeStyles는 @material-ui/core/styles 패키지에서 import 할 수 있으며, 인자로 커스텀 스타일 객체를 받습니다. 커스텀 스타일 객체의 클래스 이름을 키로 갖고 해당 클래스의 CSS 속성을 정의한 객체를 값으로 갖습니다. 이것도 결국은 훅이구나... import React from "react"; import { ..

input 구성 value 의 초기값: keyword = '' onChange 에 함수를 넣음(setState) 검색기능 구현 자바스크립트의 내장 함수 sort, filter 이용 sort 는 원배열을 바꿈 (안에 인자를 생략하면 오름차순으로 정렬) 반면, filter 는 원배열을 바꾸지 않음 toLowerCase 는 대소문자에 관계없이 검색해주기 위함 React + Node Express 체크박스 필터 기능 위와 같이 체크박스 구성 Node Express 도 알면 좋을 것 같아서 다음도 같이 살펴보자. Product.find() 데이터를 조회 할 때는 find() 메소드가 사용됩니다. query를 파라미터 값으로 전달 할 수 있으며, 파라미터가 없을 시, 모든 데이터를 조회합니다. 다시 리액트 체크박스..

앞서 graphQL 의 스키마 작성을 nexus 를 통해 해보았다. (참고로 예전 게시물과 이어지는 포스팅이다.) 2022.02.26 - [GraphQL] - nexus 이해하기1 (공식문서 참고) 2022.02.26 - [GraphQL] - nexus 이해하기2 (공식문서 참고) 2022.02.26 - [GraphQL] - nexus 이해하기3 (공식문서 참고) 이제 DB 와의 상호작용을 prisma client 를 통해 할 수 있도록 해보겠다. prisma 를 통해 이렇게 바꿀 수가 있다.!!! // api/graphql/Post.ts // ... export const PostQuery = extendType({ type: 'Query', definition(t) { t.list.field('dra..

api 에 mutation 추가하기 mutation 이란 Mutation 은 데이터베이스 상태가 변할 때 사용되는 것이다. mutation 을 설정하는 context 와 입력 받는 인자와 같은 arg 에 대해서 배워볼 것이다. Writing GraphQL mutations Exposing GraphQL objects for mutation operations Working with GraphQL Context Working with GraphQL arguments context 연결 https://nexusjs.org/docs/getting-started/tutorial/chapter-adding-mutations-to-your-api/ 3. Adding mutations to your API 3. Ad..

SDL 이 뭘까 앞서서 // api/graphql/Post.ts import { objectType } from 'nexus' export const Post = objectType({ name: 'Post', //