분류 전체보기
NestJs Validating ArgsTypes
NestJs Validating ArgsTypes
2021.05.23data transfer object 의 유효성 검사 class validator 를 사용하여 각 필드의 유효성 검사를 합니다. pipe line에 쓰일 class-transformer도 설치합니다. npm i class-validator npm i class-transformer create-restaurant.dto.ts import { InputType, Field, ArgsType } from '@nestjs/graphql'; import { IsBoolean, IsString, Length } from 'class-validator'; @ArgsType() export class CreateRestaurantDto { @Field((type) => String) @IsString() @Lengt..
Nestjs - InputTypes and ArgumentTypes
Nestjs - InputTypes and ArgumentTypes
2021.05.22Mutation 만들기 restaurants.resolver.ts 파일에 다음과 같이 Mutation을 만듭니다. import { Resolver, Query, Args, Mutation } from '@nestjs/graphql'; import { CreateRestaurantDto } from './dtos/create-restaurant.dto'; import { Restaurant } from './entities/restaurant.entity'; @Resolver((of) => Restaurant) export class RestaurantResolver { @Mutation((returns) => Boolean) createRestaurant( @Args('name') name: string..
NestJs - Arguments
NestJs - Arguments
2021.05.22TypeScript 와 Graphql 의 type 선언 차이 import { Resolver, Query, Args } from '@nestjs/graphql'; import { Restaurant } from './entities/restaurant.entity'; @Resolver((of) => Restaurant) export class RestaurantResolver { // graphql 에서 list를 명시하는방법 @Query((returns) => [Restaurant]) // typescript 에서 list를 명시하는 방법 restaurants(@Args('veganOnly') veganOnly: boolean): Restaurant[] { return []; } } 위의 코드를 살펴보..
Nestjs - ObjectType
Nestjs - ObjectType
2021.05.22ObjectType NestJs의 ObjectType을 이해하기 쉽게 데이터베이스와 유사한 entity 를 만들겠습니다. 폴더 구조는 이전 글을 참고해주세요 restaurants.entity.ts 라는 파일을 만들어 주세요 ObjectType은 데코레이터로써 작동합니다. GraphQL 의 관점에서 봤을때 Restaurant가 어떻게 생겼는지 묘사합니다. // entity 란 데이터 베이스 모델을 생각하면 이해하기 쉽다. import { Field, ObjectType } from '@nestjs/graphql'; // 아직 데이터베이스가 없어서 이해하기 쉽게 특징을 살펴본후 데이터 베이스를 추가할 예정 @ObjectType() export class Restaurant { /..
typescript, react 로 만드는 slack
typescript, react 로 만드는 slack
2021.05.19front end setup 원하는 곳에 my-slack 폴더를 만들고 하위 폴더로 front 폴더를 만듭니다. 제일 처음 해줘야하는 것 npm init name 은 웬만하면 npm 에 설치한 패키지와 겹치지 않게 주의! react로 작업하기 때문에 다음과 같이 설치합니다. $ npm i react react-domtypescript 도 설치합니다. $ npm i typescript @types/react @types/react-domeslint 와 prettier setup $ npm i -D eslint $ npm i -D prettier eslint-plugin-prettier eslint-config-prettiereslint 와 prettier 를 연결 해줍니다. * rc setup .prett..
setup webpack dev server
setup webpack dev server
2021.05.19현재 hello world 문구를 수정하면 build 를 다시해야 반영이 됩니다. 매번 build를 하지 않게 hot reloading을 설정합니다. hot reloading hot reloading을 사용하기 위해서는 front 에서도 server가 필요합니다. $ yarn add webpack-dev-server -D npm 의 사소한 에러들이 있는데 아직 해결하지 못해서 yarn 으로 대체했습니다. 추후에 수정하겠습니다. webpack-dev-server 는 추후에 proxy server의 역활도 합니다. cors에러 문제 해결 등등.. $ yarn add webpack-cli $ yarn add -D @types/webpack-dev-server $ yarn add @pmmwh/react-refr..
code splitting and emotion
code splitting and emotion
2021.05.19코드 스플릿팅 을 하기위해서 패키지를 설치합니다. yarn add @loadable/component yarn add -D @types/loadable__componettypescript를 사용할시 두번째 줄도 설치 import LogIn from "@pages/LogIn"; 에서 다음과 loadable을 import 한뒤 @import loadable from "@loadable/component"; const LogIn = loadable(() => import("@pages/LogIn")); 으로 변경할 수 있습니다. css in javascript styled component 와 emotion 가장 유명한건 styled component지만 emotion이 설정이더 간단하여 emotion을 사용..
make custom hook by react
make custom hook by react
2021.05.19front 폴더 아래 hooks 라는 폴더를 생성하고 useInput.ts 파일을 생성합니다. customhook 은 반복되는 상태 관리 코드를 줄이려고 할때 사용합니다. mkdir hooks && touch useInput.tsuseInput.ts import React, { useCallback, useState } from "react"; const useInput = (initalData: any) => { const [value, setValue] = useState(initalData); const handler = useCallback((e) => { setValue(e.target.value); }, []); return [value, handler, setValue]; }; export ..
npm install 종속성 error 해결하기
npm install 종속성 error 해결하기
2021.05.19위와 같이 install 을 했을시 에러가 발생했을때 $ npm i OOO --save --legachy-peer-deps를 사용하여 해결 할 수있다
Nestjs + react Day1
Nestjs + react Day1
2021.05.19backend 시작하기 nest.js cli 를 사용하여 app을 만듭니다. $ nest g application nuber-eats-backend uber eats 를 clone coding 하기 위해서 nuber-eats 라고 프로젝트명을 설정했습니다. 그리고 git 저장소를 만들고 gitognore를 추가합니다. .gitignore nodemodule/ package-lock.json dist/그리고 이번 프로젝트에서는 REST를 사용하는 대신 GRAPHQL 을 사용할 예정입니다. $ npm i @nestjs/graphql graphql-tools graphql apollo-server-express 다음과 같이 설정합니다. app.moudles 은 main.ts 로 import 되는 유일한 mod..
master 브랜치와 premium 브랜치 둘다 push하기
master 브랜치와 premium 브랜치 둘다 push하기
2021.02.27master 를 github 에 push 한뒤 유료 버전 premium branch 도 git hub에 push 하겠습니다. git push 를 하게 되면 다음과 같은 error message 가 나왔습니다. 로컬 레포지토리(working directory) 에서 리모트 레포지토리 (github) 로 push 를 할려면 --set-upstream 이라는 옵션을 줘야합니다. 해당 옵션은 tracking 정보 설정을 위함 입니다. 그래야 git push 만으로도 push를 자동적으로 할수 있습니다. $git push --set-upstream origin premium premium branch 가 정상적으로 push 되었습니다. 마지막으로 log 를 살펴보겠습니다. premium branch에도 origi..
branch merge 하기
branch merge 하기
2021.02.27master branch 에서 나눗셈을 하는 devide 함수를 추가하겠습니다. 그런다음 git add . 를 하고 git commit 을 해주겠습니다. 그런데 이때 무료버전에 있는 모든 기능은 유료버전에 있어야 한다고 해봅시다. git 에는 어떤 branch 에서 한 commit 을 그대로 다른 branch에서 할수 있는 기능이 있습니다. premium 브랜치로 이동하겠습니다. $git checkout premium 아직 유료버전엔 devide function 이 없습니다. master branch의 devide function 을 premium branch에도 합쳐보겠습니다. git merge master 하지만 merge 를 할때 문제가 생길 수 도 있습니다. premium branch에서 devi..