Backend/Nestjs (4) 썸네일형 리스트형 [Nestjs] Nestjs + GraphQL 적용한 TodoList 만들기 (4) Front Part 구성 1. 기본 Next.js 구성 구성에 앞서서 프로젝트를 backend, frontend로 폴더를 나눠보도록하겠습니다. 이제 해당 frontend 폴더안에 next.js의 기본 구성을 하겠습니다. cd frontend npx create-next-app@latest --typescript 2. 실행 cd todolist npm run dev localhost:3000 3. ESLint , Prettier 설정하기 ESLint는 JS문법에서 에러를 표시해주는 도구입니다. 가이드라인이라고 보면 쉽습니다. 코팅스타일과 에러의 기준을 지정할 수 있습니다. 협업시에는 정말 필수가 되기 때문에 설정합니다. 우선 충돌없이 동시에 사용하기 위하여 아래의 패키지를 설치합니다. npm i -D es.. [Nestjs] Nestjs + GraphQL 적용한 TodoList 만들기 (3) GraphQL 구성 1. Package 설치 npm install --save @nestjs/graphql apollo-server-express graphql 2. Module 구성 GraphQLModule의 options(debug, playground)은 Apollo Instance로 전달됩니다. import { Module } from '@nestjs/common'; import { AppController } from './app.controller'; import { AppService } from './app.service'; import { CommonConfigModule } from './common/config/config.module'; import { TodoModule } fro.. [Nestjs] Nestjs + GraphQL 적용한 TodoList 만들기 (2) 프로젝트 생성 TodoList 프로젝트를 만들기 위한 프로젝트 생성을 합니다. nestjs의 기본 프로젝트 생성은 아래의 링크에서 확인하시면 자세한 설명을 확인하실 수 있습니다. https://docs.nestjs.com/ 1. 프로젝트 생성 npm i -g @nestjs/cli nest new nest-graphql-todolist 2. 프로젝트 실행 npm run start:dev Typeorm + Mysql TodoList 프로젝트의 Todo를 관리하기 위해서 Typeorm과 mysql을 사용하기로 했습니다. 프로젝트 생성을 했기 때문에 Typeorm과 mysql 연결을 위한 구성과 간단한 todo entity를 만들어보겠습니다. 1. Package 설치 npm install --save @nest.. [Nestjs] Nestjs + GraphQL 적용하기 (1) 글을 쓴 이유 GraphQL은 2019년쯤 개발을 하면서 제가 만든 서비스에 접목 시켜봤습니다. 그때는 새로운 패러다임이며 나도 맛좀 보고싶다라는 생각에 꾸역꾸역 접목 시켰던 기억이 있습니다. 그 후로는 접목시켜 사용하지는 못했습니다. 이유는 그 당시에는 REST API가 생산성이 훨씬 높다고 판단했기 때문입니다. 그래서 잊고 살다가 특정요청에 대한 API를 계속 만드는 작업과 유지보수의 문제로 골골대다 GraphQL이 생각나서 다시 공부해서 잘 써보자!! 라는 다짐하에 글을 쓰게 되었습니다. GraphQL? 특징 첫 번째, Endpoint는 하나! 우리가 흔히 알고 있는 REST API에서는 다양한 Endpoint를 호출했습니다. 근데 GraphQL은 하나의 Endpoint를 제공하며, 단 한 번의 요.. 이전 1 다음