written by yechoi

GraphQL 서버를 이용해 파일을 업로드하는 방법을 알아본다. 클라이언트 사이드에서는 프레임워크로는 React, 상태관리 라이브러리로 Apollo Client를 사용하고 있다. 서버 사이드에서는 프레임워크로는 NestJS, 서버는 NestJS 내장 서버를 사용한다. 클라이언트 사이드 1. 파일 업로드 버튼 만들기 우선 파일 업로드 버튼을 만들어보자. 기본적으로 input 태그를 사용하면 브라우저별로 아래와 같은 버튼이 만들어진다. 버튼을 예쁘게 만들고 싶어서, label 태그의 for 속성을 활용해 카메라 버튼이 눌리면 input 태그가 눌리도록 변경했다. 📷 2. Apollo-client 업로드 링크 설정 파일을 올리기 위해서는 Apollo Link 설정을 해줘야 한다. Apollo Client 가 ..

Active Record 모델 안에 모든 쿼리 방식을 정해놓고, 모델 메소드를 활용해 오브젝트를 save-remove-load 하는 방식. 간단히 말하자면 모델 내부에 데이터 베이스에 접근하는 방식을 구현하는 패턴. import {BaseEntity, Entity, PrimaryGeneratedColumn, Column} from "typeorm"; @Entity() export class User extends BaseEntity { @PrimaryGeneratedColumn() id: number; @Column() firstName: string; @Column() lastName: string; @Column() isActive: boolean; } 모든 Active Record 엔티티는 Base..

nestjs에서 사용할 수 있는 admin panel 패키지는 대표적으로 두가지가 있다. 하나는 nestjs-admin, 또 다른 건 admin bro. 두 가지 모두 설치를 시도해보았고, 결론부터 말하면 adminbro를 사용하기로 했다. [NestJS] 어드민 패널 설치: nestjs-admin nestjs에서 사용할 수 있는 admin panel 패키지는 대표적으로 두가지가 있다. 하나는 nestjs-admin, 또 다른 건 admin bro. 두 가지 모두 설치를 시도해보았고, 결론부터 말하면 adminbro를 사용하기로 했다. 이 yechoi.tistory.com nestjs-admin과 마찬가지로 adminBro도 자동 어드민 인터페이스를 생성해준다. Django Admin, Rails Adm..

nestjs에서 사용할 수 있는 admin panel 패키지는 대표적으로 두가지가 있다. 하나는 nestjs-admin, 또 다른 건 admin bro. 두 가지 모두 설치를 시도해보았고, 결론부터 말하면 adminbro를 사용하기로 했다. 이 중 nestjs-admin을 소개하고 설치하는 과정에서 겪은 에러와 해결방안을 정리해보려고 한다. nestjs-admin 공식적인 어드민 패널 같아보이는 이 패키지는 사실 공식 패키지는 아니다. Theodo라는 영국회사에서 만든 것. 현재(21.07) 기준, npm 페이지에서 확인해보면 latest는 8개월 전이다. 최근 들어서는 관리가 되지 않는 것으로 보인다. 소개문을 보면 Django Admin을 본따서 제작했다고 한다. 설치는 어렵지 않다. NestJS를 ..

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..