전체 글 (8) 썸네일형 리스트형 [React] Tiny UI Kit 만들어보기 1. Repo 생성 이번프로젝트에서는 yarn을 사용하겠습니다. 2. CRA 프로젝트 생성(typescript) yarn create react-app . --template typescript 3. Eslint, Prettier, Husky 설정 yarn add -D prettier eslint-plugin-prettier eslint-config-prettier .eslintrc.json { "extends": [ "eslint:recommended", "plugin:@typescript-eslint/eslint-recommended", "plugin:@typescript-eslint/recommended", "plugin:prettier/recommended" ] } .prettierrc.json .. [AWS] Elastic Beanstalk + ECR + Git Action 으로 Nest.js 무중단 배포하기 회사에서 EB와 ECR을 통해 Nest.js를 배포하기로 정하여 몇번의 수고 끝에 해당 스택으로 진행 해보고자 합니다. 개인적으로 스타트업에는 잘 맞는 플랫폼이라고 생각하며 빠르고 간편하게 인프라를 구성할 수 있고 신경써서 한번만 구성하게 된다면 오토스케일링, 로드밸런싱, 모니터링, 용량 등등 신경 써야할 부분이 많이 줄어들기 때문에 시도했습니다. ECR을 사용한 이유는 확장되면서 도커를 사용할 일이 많아 미리 연습차원에서 적용해보자 이번 배포 스택에 추가했습니다. 기존에 사용중이었던 CodePipeline, CodeBuild, CodeDeploy 보다는 개인적으로 더 간편하고 좋은 것 같았습니다. 그래서 이번에 잘 정리하여 나중에 다른 프로젝트에서 해당 스팩을 적용하기 편하도록 글을 작성해보고자 합니다.. [AWS] CodeBuild, CodeDeploy, CodePipeline으로 node 배포하기 요즘 자주 CI/CD의 작업을 하게 되었습니다. 나중에 같은 스펙으로 CI/CD를 만들 수 있기 때문에 지금 다시 정리를 해보려고 합니다. 순서대로 따라하면 배포가 자동으로 된다고 생각하시면 됩니다. 어렴풋 기억나는 상태에서 해당글을 읽으면 금방 따라할 수 있는 글이라고 생각해주시면 감사하겠습니다. 1. 기본 EC2 세팅 기본적으로 node 환경과 git을 세팅합니다. (node version은 16.x 입니다.) sudo apt-get install curl curl -sL https://deb.nodesource.com/setup_16.x | sudo -E bash - sudo apt-get install -y nodejs sudo apt-get install build-essential sudo a.. React? 프론트엔드 기술을 선택할 때 항상 고민의 시간이 길었습니다. React vs Angular vs Vue vs Svelte(이건 요즘) 이제는 React가 가장 우위를 점하고 있다고 생각합니다. 2020 스택오버플로우 survey만 봐도 알 수 있습니다. https://insights.stackoverflow.com/survey/2020#technology-web-frameworks-all-respondents2 Stack Overflow Developer Survey 2020 Nearly 65,000 took this comprehensive, annual survey of people who code. Demographics. Most loved, dreaded and wanted technologie.. [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 다음