일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
- 부동소수점
- 파이썬
- Cloud Spanner
- 텍스트북
- 스플릿키보드
- 엣지컴퓨팅
- 42seoul
- 스타트업
- 이노베이션아카데미
- 창업
- schema first
- 정렬
- enable_if
- mistel키보드
- uuid-ossp
- GraphQL
- 자료구조
- 쿠버네티스
- 프라이빗클라우드
- c++
- 어셈블리어
- psql extension
- 레이캐스팅
- raycasting
- 어셈블리
- SFINAE
- 동료학습
- 42서울
- 도커
- adminbro
- Today
- Total
목록GraphQL (2)
written by yechoi
GraphQL 서버를 이용해 파일을 업로드하는 방법을 알아본다. 클라이언트 사이드에서는 프레임워크로는 React, 상태관리 라이브러리로 Apollo Client를 사용하고 있다. 서버 사이드에서는 프레임워크로는 NestJS, 서버는 NestJS 내장 서버를 사용한다. 클라이언트 사이드 1. 파일 업로드 버튼 만들기 우선 파일 업로드 버튼을 만들어보자. 기본적으로 input 태그를 사용하면 브라우저별로 아래와 같은 버튼이 만들어진다. 버튼을 예쁘게 만들고 싶어서, label 태그의 for 속성을 활용해 카메라 버튼이 눌리면 input 태그가 눌리도록 변경했다. 📷 2. Apollo-client 업로드 링크 설정 파일을 올리기 위해서는 Apollo Link 설정을 해줘야 한다. Apollo Client 가 ..
Code first 이 방법은 TypeScript로만 작업하고 언어 구문 간의 컨텍스트 전환을 피하려는 경우 유용합니다. 타입스크립트로 클래스를 짜면 해당 클래스에 해당하는 graphql 스키마를 만들어 줍니다. 코드 우선 접근 방식에서는 데코레이터와 TypeScript 클래스를 사용하여 해당 GraphQL 스키마를 생성합니다. import { Field, ID, ObjectType } from '@nestjs/graphql'; @ObjectType() export class Recipe { @Field(type => ID) id: string; @Field() title: string; @Field({ nullable: true }) description?: string; @Field() creatio..