GraphQL과 Apollo 열 세번째 이야기 - TypeScript + Nest에서 GraphQL 사용해 보기

GraphQL과 Apollo 열 세번째 이야기 - TypeScript + Nest에서 GraphQL 사용해 보기 - 실습 해보기

2023. 12. 7. 22:46ㆍBack-End 작업실/Nest.js

728x90

카카오페이 | 마음 놓고 금융하다

여기를 눌러 링크를 확인하세요.

qr.kakaopay.com

NestJS로 배우는 백엔드 프로그래밍:타입스크립트 환경의 차세대 서버 프레임워크를 만나다

COUPANG

www.coupang.com

"이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다."

🗂 목차

🤔 내가 만난 문제

⚠️ [Nest.js] TypeORM Table 관계가 맺어졌을 때, Seeding (feat. Migration)
⚠️ [Spring Boot 3.0] Could not resolve org.springframework.boot:spring-boot-gradle-plugin
⚠️ [Spring Boot 3] Spring Doc(Swagger) White Label Error

📋 부록

🔍 [Nest.js] 초기 환경 구성 (feat. TypeORM, QueryBuilder, GraphQL, Apollo)
🔍 [SOLID][Nest.js][Java + Spring] Interface를 활용한 결합도 분리 (Interface를 이용한 Dependency Injection - DI)

🚀 GraphQL과 Apollo 열 세번째 이야기

🔽 TypeScript + Nest에서 GraphQL 사용해 보기 - 실습 해보기

📦 개요

자프링(Java + Spring Boot)에서도 그랬듯 지난 글까지 Nest.ts를 이용하여 GraphQL 환경 구성을 위한 작업을 진행해 보았어요.

자프링 글과 마찬가지로 실습을 진행해 보도록 할게요.

🔽 세번째 이야기 실습

📦 Overfetching

Overfetching 문제에 대한 이야기는 자프링 실습 때 보다 자세히 이야기 해 보았어요.

Nest.ts의 경우 이를 모두 해결해서 구성을 하였기 때문에 자프링 내용을 참고해 주시면 좋을 거 같아요.

GraphQL과 Apollo 열번째 이야기 - Java + Spring Boot에서 GraphQL 사용해 보기 - 실습 해보기

자바 ORM 표준 JPA 프로그래밍:스프링 데이터 예제 프로젝트로 배우는 전자정부 표준 데이터베이 COUPANG www.coupang.com "이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제

junyharang.tistory.com

📦 Underfetching

이번엔 Underfetching에 대해 실습하면서 분석해 보려고 해요.

728x90

query getEquipmentsAndSupplies {
  getEquipmentList(
    pageNumber: 1,
    perPageSize: 10
  ) {
    statusCode,
    message,
    pagination {
      perPageSize,
      totalCount,
      totalPage
      data {
     		equipmentId,
        usedBy,
        newOrUsed
      }
    }
  }
  
  getSupplyList(
    pageNumber: 1,
    perPageSize: 10
  ) {
    statusCode,
    message,
    pagination {
      perPageSize,
      totalCount,
      totalPage
      data {
        supplyId,
     		teamId,
      }
    }
  }
}

{
  "data": {
    "getEquipmentList": {
      "statusCode": 200,
      "message": "Success",
      "pagination": {
        "perPageSize": 6,
        "totalCount": 6,
        "totalPage": 1,
        "data": [
          {
            "equipmentId": "machanical keyboard",
            "usedBy": "developer",
            "newOrUsed": "used"
          },
          {
            "equipmentId": "pen tablet",
            "usedBy": "developer",
            "newOrUsed": "used"
          },
          {
            "equipmentId": "ergonomic mouse",
            "usedBy": "designer",
            "newOrUsed": "used"
          },
          {
            "equipmentId": "dual monitor",
            "usedBy": "developer",
            "newOrUsed": "used"
          },
          {
            "equipmentId": "whiteboard",
            "usedBy": "planner",
            "newOrUsed": "used"
          },
          {
            "equipmentId": "sketchb",
            "usedBy": "designer",
            "newOrUsed": "new"
          }
        ]
      }
    },
    "getSupplyList": {
      "statusCode": 200,
      "message": "Success",
      "pagination": {
        "perPageSize": 10,
        "totalCount": 10,
        "totalPage": 1,
        "data": [
          {
            "supplyId": "calculator",
            "teamId": 5
          },
          {
            "supplyId": "chair",
            "teamId": 3
          },
          {
            "supplyId": "ergonomic mouse",
            "teamId": 1
          },
          {
            "supplyId": "headphone",
            "teamId": 4
          },
          {
            "supplyId": "hoodie",
            "teamId": 2
          },
          {
            "supplyId": "mug",
            "teamId": 1
          },
          {
            "supplyId": "stempler",
            "teamId": 4
          },
          {
            "supplyId": "t shirt",
            "teamId": 5
          },
          {
            "supplyId": "usb hub",
            "teamId": 3
          },
          {
            "supplyId": "webcam",
            "teamId": 2
          }
        ]
      }
    }
  }
}

위 내용을 보면 하나의 쿼리를 보내 두 개의 각각 원하는 응답값을 받은 걸 확인할 수 있어요.

이렇게 두 개의 스키마에 대해 조회를 날게면 하나의 요청으로 두 개의 값을 얻을 수 있는 걸 확인할 수 있어요.
Join 이나, 다른 걸 하지 않고도 이렇게 얻을 수 있는 것이에요.

근데 위에서 Supply는 Http Status Code와 Message를 받고 싶지 않다면 어떻게 해야 할까요?

위와 같이 받고 싶지 않는 Field를 요청에 보내지 않으면 해당 내용은 응답하지 않는걸 볼 수 있어요.
이렇게 Overfetching 문제에 대해 자유롭게 원하는 값만 받을 수 있어요.

{
  "data": {
    "getEquipmentList": {
      "statusCode": 200,
      "message": "Success",
      "pagination": {
        "perPageSize": 6,
        "totalCount": 6,
        "totalPage": 1,
        "data": [
          {
            "equipmentId": "machanical keyboard",
            "usedBy": "developer",
            "newOrUsed": "used"
          },
          {
            "equipmentId": "pen tablet",
            "usedBy": "developer",
            "newOrUsed": "used"
          },
          {
            "equipmentId": "ergonomic mouse",
            "usedBy": "designer",
            "newOrUsed": "used"
          },
          {
            "equipmentId": "dual monitor",
            "usedBy": "developer",
            "newOrUsed": "used"
          },
          {
            "equipmentId": "whiteboard",
            "usedBy": "planner",
            "newOrUsed": "used"
          },
          {
            "equipmentId": "sketchb",
            "usedBy": "designer",
            "newOrUsed": "new"
          }
        ]
      }
    },
    "getSupplyList": {
      "pagination": {
        "perPageSize": 10,
        "totalCount": 10,
        "totalPage": 1,
        "data": [
          {
            "supplyId": "calculator",
            "teamId": 5
          },
          {
            "supplyId": "chair",
            "teamId": 3
          },
          {
            "supplyId": "ergonomic mouse",
            "teamId": 1
          },
          {
            "supplyId": "headphone",
            "teamId": 4
          },
          {
            "supplyId": "hoodie",
            "teamId": 2
          },
          {
            "supplyId": "mug",
            "teamId": 1
          },
          {
            "supplyId": "stempler",
            "teamId": 4
          },
          {
            "supplyId": "t shirt",
            "teamId": 5
          },
          {
            "supplyId": "usb hub",
            "teamId": 3
          },
          {
            "supplyId": "webcam",
            "teamId": 2
          }
        ]
      }
    }
  }
}

위의 실습을 통해 Underfetching 문제가 해결 되는 걸 알 수 있어요.

📦 두 번의 데이터 베이스 조회 - REST API도 구성해 보기

비즈니스 로직에서 두 번의 데이터베이스 조회를 통해 한번에 값을 반환 받는 방법에 대해 이야기 해보려 해요.

주니는 teamId를 이용해서 Team과 People 정보를 가져올 수 있게 구성해 보려고 해요.

위 Resolver(리졸버)는 teamId를 받아 정보를 반환할 수 있는 Router에요.

src/app/team/service/team-impl.service.ts

비즈니스 로직은 위와 같이 되어 있는데, 88번째 줄에서 TypeORM을 이용해서 TeamId를 이용하여 Team 정보를 조회하도록 하였어요.

그런 뒤 90번째 줄에서 teamId를 통해 QueryBuilder에 Custom Method를 만들어 People 정보를 조회하는데, Team에 소속된 사람은 여러명이기 때문에 Array(배열)로 반환하게 하였고, 이를 map()을 이용하여 반복문을 돌리면서 데이터베이스에서 조회된 People Entity를 PeopleResponseDto로 변환한 뒤 이를 다시 배열 변수 peopleResponseDto로 받게 해 주었어요.

그런 뒤 데이터베이스에서 조회된 결과가 Null인지 확인하고, Null이 아니라면 TeamAndMemberResponseDto 객체를 만들고, 생성자를 이용해서 객체가 만들어 지게 한 뒤 반환하게 해 주었어요.

src/app/team/model/dto/response/team-and-member-response.dto.ts

DTO는 위와 같이 구성 되어 있는데, 12번째 줄과 같이 한 개의 팀에 소속된 여러 사람을 받기 위해 멤버 변수를 배열로 하여 PeopleResponseDto가 담길 수 있게 선언해 주었고, 생성자를 이용해서 값이 담길 때, 22번째 줄을 보면 peopleResponseDto에 값이 있을 경우 그 값을 그대로 members라는 멤버 변수에 넣어주고,
없다면 빈 배열을 넣게 하여 Null이 담기지 않게 조치해 주었어요.

src/app/people/repository/people-query-builder.repository.ts

TypeORM QueryBuilder를 이용하여 findAllByTeamId()를 만들었는데, teamId를 조회한 뒤 나오는 모든 값을 PeopleEntity[]에 담아 반환해 주었어요.

여기서 Team Table과 Join을 맺기위해 69번째 줄과 같이 Left Join이 맺어지게 해서 값을 가져오도록 처리해 주었어요.

이렇게 하면 TeamId를 이용하여 해당 Router가 호출될 때, Team 정보와 People 정보가 함께 담긴 DTO를 반환할 거에요.

그리고 위 38번째 줄과 같이 Query Schema(쿼리 스키마)를 구성해 주었어요.

반환되는 Type은 위와 같이 구성해 주었어요.

data 필드는 위 DTO로 정의된 Type 형식으로 반환되게 해 주었어요.
여기서 주목해야 할 점은 50번째 줄이에요. 50번째 줄에 필드 이름(members)와

반환되는 DTO의 변수명이 일치해야 되기 때문이에요.
만약 다르면 Null이 담겨 나올거에요.

query getTeamAndPeopleByTeamId {
  getTeamByTeamId(teamId: 1) {
    statusCode,
    message,
    data {
      teamId,
      manager,
      office,
      extensionNumber,
      mascot,
      cleaningDuty,
      project,

      members {
        peopleId,
        teamId,
        firstName,
        lastName,
        sex,
        bloodType,
        serveYears,
        role,
        hometown
      }
    }
  }
}

이렇게 쿼리를 날리면 teamId를 전달하여 Team 정보와 해당 Team에 소속된 사람들 정보를 받아오는 걸 확인할 수 있어요.

그리고 위 내용을 REST API로도 구성해 보려고 해요.
그 전에 보다 편리하게 API Docs를 확인할 수 있는 Swagger를 먼저 구성해 볼게요.

Nest.js에서 Swagger 설치 방법에 대한 상세 내용은 이 곳에 작성해 두었어요.
많은 관심 부탁드려요.

[BackEnd][Node.js][nest.js-PJ] 사내 개발자 커뮤니티 서비스 - 초기 구성(Pipe, TypeORM, Configuration, Swagger, Lo

Project Git Hub 🗂 목차 ● [BackEnd][Node.js][nest.js-PJ] 사내 개발자 커뮤니티 서비스 - 초기 구성(Pipe, TypeORM, Configuration, Swagger, Logger) ● [BackEnd][Node.js][Nest.js] 사내 개발자 커뮤니티 서비스 - 회원 가입

junyharang.tistory.com

npm install @nestjs/swagger swagger-ui-express --save

Swagger Config를 적용하기 위해 13번째 줄과 같이 설정해 줍니다.

http://localhost:8081/swagger-ui/index.html

만약 위와 같이 No operations ... 라고 나오면 Module에 컨트롤러가 제대로 등록되지 않았을 수 있어요.

src/app/team/controller/team-rest-api.controller.ts

여기서 한가지 주목해야될 점은 GraphQL의 리졸버는 Providers에 넣어주지만,
REST API의 Controller(컨트롤러)는 controllers에 꼭 넣어주어야 해요.

위와 같이 컨트롤러 Code를 생성해 주었어요.

http://localhost:8080/swagger-ui/index.html

이렇게 Swagger가 나온걸 확인할 수 있어요.

http://localhost:8081/swagger-ui/index.html#/TEAM%20%EA%B4%80%EB%A0%A8%20API/TeamRestApiController_getTeamByTeamId

{
  "statusCode": 200,
  "message": "Success",
  "data": {
    "teamId": 1,
    "manager": "Mandy Warren",
    "office": "101A",
    "extensionNumber": "#5709",
    "mascot": "Panda",
    "cleaningDuty": "Monday",
    "project": "Hyperion",
    "members": [
      {
        "peopleId": 3,
        "teamId": 1,
        "lastName": "Nathan",
        "firstName": "Jenkins",
        "sex": "male",
        "bloodType": "B",
        "serveYears": 1,
        "role": "planner",
        "hometown": "Texas"
      },
      {
        "peopleId": 8,
        "teamId": 1,
        "lastName": "Isabella",
        "firstName": "Martin",
        "sex": "female",
        "bloodType": "A",
        "serveYears": 3,
        "role": "developer",
        "hometown": "Georgia"
      },
      {
        "peopleId": 12,
        "teamId": 1,
        "lastName": "Kate",
        "firstName": "Owen",
        "sex": "female",
        "bloodType": "B",
        "serveYears": 2,
        "role": "developer",
        "hometown": "Maine"
      },
      {
        "peopleId": 16,
        "teamId": 1,
        "lastName": "Byron",
        "firstName": "Barnes",
        "sex": "male",
        "bloodType": "A",
        "serveYears": 3,
        "role": "designer",
        "hometown": "Idaho"
      },
      {
        "peopleId": 27,
        "teamId": 1,
        "lastName": "Brian",
        "firstName": "Hunt",
        "sex": "male",
        "bloodType": "B",
        "serveYears": 2,
        "role": "planner",
        "hometown": "Indiana"
      },
      {
        "peopleId": 29,
        "teamId": 1,
        "lastName": "Violet",
        "firstName": "Pearson",
        "sex": "female",
        "bloodType": "AB",
        "serveYears": 5,
        "role": "designer",
        "hometown": "Pennsylvania"
      },
      {
        "peopleId": 35,
        "teamId": 1,
        "lastName": "Sally",
        "firstName": "Fox",
        "sex": "female",
        "bloodType": "AB",
        "serveYears": 5,
        "role": "planner",
        "hometown": "Messachusetts"
      },
      {
        "peopleId": 42,
        "teamId": 1,
        "lastName": "Russ",
        "firstName": "Lawrence",
        "sex": "male",
        "bloodType": "O",
        "serveYears": 5,
        "role": "designer",
        "hometown": "New York"
      },
      {
        "peopleId": 47,
        "teamId": 1,
        "lastName": "Leroy",
        "firstName": "Elliott",
        "sex": "male",
        "bloodType": "AB",
        "serveYears": 2,
        "role": "developer",
        "hometown": "Indiana"
      },
      {
        "peopleId": 50,
        "teamId": 1,
        "lastName": "Ned",
        "firstName": "Butler",
        "sex": "male",
        "bloodType": "O",
        "serveYears": 2,
        "role": "planner",
        "hometown": "Messachusetts"
      }
    ]
  }
}

위와 같이 REST API를 이용해서 조회를 해도 반환 받는 값은 GraphQL과 동일한 것을 알 수 있어요.

📦 Float, Boolean Type 가지고 놀기

이번에는 일곱번째 이야기에서 EquipmentsAdv를 만들어 Float와 Boolean 자료형을 구성하는 방법에 대해 실습해 보려고 해요.

GraphQL과 Apollo 일곱번째 이야기 - GraphQL Data Type에 대해 알아보아요 😀

GraphQL과 타입스크립트로 개발하는 웹 서비스:설계부터 개발·배포까지 따라 하며 완성하는 웹 풀 COUPANG www.coupang.com "이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를

junyharang.tistory.com

src/graphql/schema/equipment/equipment.graphqls

위와 같이 9 ~ 14번째 줄에 쿼리 함수를 선언해 주었어요.

src/app/equipment/resolver/equipment.resolver.ts

리졸버 코드는 위와 같이 만들어 주었어요.

src/app/equipment/service/equipment-Impl.service.ts

위와 같이 이미 만들어져 있던 QueryBuilder의 검사와 페이징 처리가 가능한 Method를 호출하여 처리해 주었어요.

이에 대한 자세한 내용은 이 전 글을 참고해 주세요.

GraphQL과 Apollo 열두번째 이야기 - TypeScript + Nest.js에서 GraphQL 사용해 보기 - 실습 환경 구성

NestJS로 배우는 백엔드 프로그래밍:타입스크립트 환경의 차세대 서버 프레임워크를 만나다 COUPANG www.coupang.com "이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받

junyharang.tistory.com

해당 실습을 위해 일곱번째 이야기에서는 위와 같이 resolver를 작성해 주었었어요.
이를 Type Script와 Nest.js에 맞게 변환해 볼게요.

src/app/equipment/model/dto/response/equipment-adv.response.dto.ts

이 내용은 위와 같이 DTO 생성자에서 처리해 주었어요.

17번째 줄에 Equipment 변수에 담긴 usedBy 값이 developer라는 문자열인지를 확인하고, 맞다면 랜덤 숫자(소수점 2번째 자리까지)를 생성하여 담길 수 있도록 처리해 주었어요.

그리고, 21번째 줄은 Equipment 변수에 담긴 newOrUsed new라는 문자열인지 확인하고, 맞다면 True를 아니라면 False가 들어가게 해 주었어요.

이렇게해서 쿼리를 날려보면 정상적으로 Float와 Blooen이 생긴 객체를 받을 수 있어요.

📦 Enum Type

이번에는 일곱번째 이야기에서 공부해봤던 Enum Type에 대해 실습해 볼게요.

src/graphql/schema/common/enums.graphqls

위와 같이 Enum Type만 담을 수 있는 enums.graphqls를 만들어 주고, 그 안에 Enum Type들을 정의해 주었어요.

src/graphql/schema/people/people.graphqls

그리고 위와 같이 ResponseDto Type에 자료형 타입을 각각 Enum Type으로 지정해 주었어요.

일곱번째 이야기에서는 배열 Type과 Objet Type에 대해서 공부하고, 실습해 보았는데,
이미 Dto 객체로 반환받는 방법과 배열 Type으로 받는 방법에 대해 이야기 해 보았기 때문에 따로 실습하진 않을게요.

📦 Interface

이번에는 여덟번째 이야기에서 공부해 보았던 Interface(인터페이스)에 대해 실습해 보도록 할게요.

GraphQL과 Apollo 여덟번째 이야기 - GraphQL Union과 Interface 그리고 인자와 인풋 타입에 대해 알아보아

junyharang.tistory.com

실습하기 전에 여덟번째 이야기에선 Union에 대해서도 이야기를 해 보았어요.
하지만, 주니가 느꼈을 때, Union이라는 걸 실제 서비스에서 얼마나 많이 쓸까?가 의문이 들었어요.
하나의 List에 각기 다른 N개의 객체를 담아서 보내는 것은 이미 위에서 해 보았고, 어떤 조건이 주어졌을 때, 그 조건이 맞으면 A 객체를 아니면 B 객체를 주는 등의 사용을 하는데, 아직까지는 실제 필요하다고 느끼지 못해서 일단! 실습은 하지 않도록 할거에요.

src/graphql/schema/software/software.graphqls

여덟번째 이야기에서 이야기했던 대로 위 두 Type은 객체 이름 중 usedBy가 겹치는 걸 알 수 있어요.
참고로 여덟번째 이야기에서는 ID 객체 이름이 모두 id 였기 때문에 이것도 겹쳤지만, 주니는 유니크한 ID 이름을 부여하기 위해 위와 같이 이름을 정해주어서 겹치지 않는걸 알 수 있어요.

이 부분만 Interface로 따로 빼 볼게요.

src/graphql/schema/common/interface/interface.graphqls

위와 같이 Interface를 만들어 주었어요.

그리고 위와 같이 각각의 Type 들이 Tool Interface(인터페이스)를 구현될 수 있도록 해주었어요.

query findeBygetEquipmentAndSoftwareListPagingUseByInterface {
  getEquipmentList(
    pageNumber: 1,
    perPageSize: 10
  ) {
    statusCode,
    message,
    pagination {
      perPageSize,
      totalCount,
      totalPage
      data {
        equipmentId,
        usedBy,
        count,
        newOrUsed
      }
    }
  }

  getSoftwareList(
    usedBy: "developer",
    developedBy: "Eclipse Foundation",
    description: "integrated development environment",
    pageNumber: 1,
    perPageSize: 5,
    orderBy: true
  ) {
    statusCode,
    message,
    pagination {
      perPageSize,
      totalCount,
      totalPage,
      data {
        softwareId,
        usedBy,
        developedBy,
        description
      }
    }
  }
}

위와 같이 결과값을 받는걸 확인할 수 있고, Equipmensts와 Softwares 배열 객체가 반환된걸 확인할 수 있어요.

이렇게 해서 주요 실습을 모두 마쳤어요.

🔽 실습 마무리

📦 짧은 회고

Nest.ts 만의 특징을 익히고, TypeORM Version Up으로 인한 변동 사항으로 꽤 많이 고생을 했어요.
이렇게 실습을 마무리하니 Nest.ts 사용법도 다시 한번 익힐 수 있었고, 보다 GraphQL에 대해 이해하게 된 거 같아 너무 기분 좋아요.

이제 REST API도 사용할 수 있고, GraphQL도 사용할 수 있으며, 자프링과 Nest.ts를 가지고도 사용할 수 있게 되었어요.

자프링 회고록에도 썼지만, 아직까지 편리하고, 좋다라는 느낌은 크게 못 받았어요.
토이 프로젝트 등에서 계속 써 가면서 REST API와 계속 비교하면서 코딩해 보면 좋겠다라는 생각이에요.

하지만, 한가지 분명한 건 GraphQL을 썼을 때, URI 이름 짓는 것에 대한 어려움은 사라진다는 것이에요.

GitHub에 실습에서 사용한 코드를 그대로 올려 두었어요!

Lisense.md와 README.md를 꼭 읽어봐 주시고, 필요하시면 사용해 주시면 좋겠어요!

아참! GitHub에 ⭐️ 이거 눌러주시면 정말 고맙겠습니다 😀

GraphQL과 타입스크립트로 개발하는 웹 서비스:설계부터 개발·배포까지 따라 하며 완성하는 웹 풀

COUPANG

www.coupang.com

"이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다."

GitHub - junyharang-coding-study/GraphQL-Study: GraphQL을 공부하고, 실습한 코드에요 😀

GraphQL을 공부하고, 실습한 코드에요 😀. Contribute to junyharang-coding-study/GraphQL-Study development by creating an account on GitHub.

github.com

카카오페이 | 마음 놓고 금융하다

여기를 눌러 링크를 확인하세요.

qr.kakaopay.com

728x90

저작자표시 비영리 변경금지

'Back-End 작업실 > Nest.js' 카테고리의 다른 글

[Nest.js] JWT를 이용한 인증, 인가 그리고 Multi part 이야기 - ① 초기구성 (0)	2024.01.14
[Nest.js] 개념 정리 (0)	2024.01.13
GraphQL과 Apollo 열 두번째 이야기 - TypeScript + Nest.js에서 GraphQL 사용해 보기 - 실습 환경 테스트 (0)	2023.12.05
GraphQL과 Apollo 열 한번째 이야기 - TypeScript + Nest.js에서 GraphQL 사용해 보기 - 실습 환경 구성 (0)	2023.12.05
[Nest.js] 초기 환경 구성 (feat. TypeORM, QueryBuilder, GraphQL, Apollo) (0)	2023.12.05

Juny's ITLog

Juny's ITLog

태그

최근글

댓글

공지사항

아카이브

🗂 목차

🤔 내가 만난 문제

📋 부록

🚀 GraphQL과 Apollo 열 세번째 이야기

🔽 TypeScript + Nest에서 GraphQL 사용해 보기 - 실습 해보기

📦 개요

🔽 세번째 이야기 실습

📦 Overfetching

📦 Underfetching

📦 두 번의 데이터 베이스 조회 - REST API도 구성해 보기

📦 Float, Boolean Type 가지고 놀기

📦 Enum Type

📦 Interface

🔽 실습 마무리

📦 짧은 회고

'Back-End 작업실 > Nest.js' 카테고리의 다른 글

관련글

티스토리툴바

Juny's ITLog

태그

최근글

댓글

공지사항

아카이브

🗂 목차

🤔 내가 만난 문제

📋 부록

🚀 GraphQL과 Apollo 열 세번째 이야기

🔽 TypeScript + Nest에서 GraphQL 사용해 보기 - 실습 해보기

📦 개요

🔽 세번째 이야기 실습

📦 Overfetching

📦 Underfetching

📦 두 번의 데이터 베이스 조회 - REST API도 구성해 보기

📦 Float, Boolean Type 가지고 놀기

📦 Enum Type

📦 Interface

🔽 실습 마무리

📦 짧은 회고

'Back-End 작업실 > Nest.js' 카테고리의 다른 글

관련글

티스토리툴바

📦 개요