Song Minu

Nuxt3에는 GraphQL을 사용해 본 적이 없어서 찾아봤다.npx nuxi@latest module add graphql-client이걸 입력해 nuxt 모듈을 추가한다.그리고 nuxt.config.ts에 modules 안에다 nuxt-graqph-client를 추가하고, runtimeConfig에 graphql 이 적용된 백엔드 주소를 넣어주면 된다.내가 작성한 GQL_HOST 값은 http://localhost:5001/graphql임이것만 해주면 끝.그리고 queries 디렉터리를 만들고 .gql 파일을 만들면 된다.이건 테스트를 위해 현재 백엔드에 작성한 쿼리다.이걸 실행하기 위해 nuxt에서 queries 디렉터리 안에 test.gql 파일을 생성 후 아래와 같이 쿼리를 작성했다.추가적으로 ..

컨테이너 환경 표시커맨드 실행 설명docker version도커 클라이언트와 서버 버전 표시docker info구체적인 환경 정보 표시컨테이너의 3대 기능컨테이너 이미지 빌드커맨드 실행 예 설명docker build -t 리포지터리:태그 . docker image build -t 리포:태그 .현 디렉터리에 있는 Dockerfile을 바탕으로 이미지를 빌드docker images docker image ls로컬 이미지 목록docker rmi 이미지 docker image rm 이미지로컬 이미지 삭제docker rmi -f ‘docker images -aq’ docker image prune -a로컬 이미지 일괄 삭제이미지의 이동과 공유커맨드 실행 예 설명docker pull 원격_리포지토리[:태그]원격 리..

kubectl 커맨드의 기본kubectl 커맨드의 기본 구조는 다음과 같이 세 부분으로 구성된다.커맨드로 동작을 지정리소스 타입과 이름으로 대상이 되는 오브젝트를 지정옵션kubectl [name] [option]커맨드커맨드 사용 예 개요getkubectl get -f get은 지정한 오브젝트의 목록을 한 줄에 하나씩 출력kubectl get kubectl get kubectl get describekubectl discribe -f get보다 더 자세한 정보를 출력kubectl discribe kubectl discribe kubectl discribe applykubectl apply -f 매니페스트에 기술된 오브젝트가 존재하지 않으면 생성하고, 존재하면 변경createkubectl cr..

https://discord.com/developers/applications Discord Developer Portal — API Docs for Bots and DevelopersIntegrate your service with Discord — whether it's a bot or a game or whatever your wildest imagination can come up with.discord.com여기로 접속 한다. 우측 상단에 있는 저 버튼을 누른다. 애플리케이션 이름을 입력 후 Create 클릭  생성하면 이 페이지로 이동된다.여기서 애플리케이션의 아이콘, 설명, 태그 등 정보를 입력할 수 있고 약관 링크, 개인정보보호링크 같은 것도 추가할 수 있다.필요에 따라 입력하면 된다.그리..

nest에서 제공하는 내장 로거를 사용하면 이러한 형식 로그가 출력이 된다. 내장 로거를 커스텀할 수도 있긴 한데, 위 포맷이 마음에 들었고, 맨 앞의 [Nest]만 내 프로젝트 이름을 넣고 싶었다. 하지만 내장 로거로는 할 수 없고 winston 패키지를 이용해야 한다. 설치 npm i nest-winston winston 적용 커스텀 로거를 만들어서 내장 로거를 대체할 생각이다. 내장로거로 대체하지 않고 따로 사용한다고 하면 이런 식으로 사용해야하는데...가져오는 것도 많고 손이 가지 않는 방식이라 내장로거를 바꾸는걸 택했다. src 안에 logger 디렉터리 생성 후 그 안에 winston.logger.ts 파일 생성 후 아래와 같이 작성 import { WinstonModule, utilities..

NestJS 공식홈페이지를 보면 환경변수 설정에 대해서 다양한 방법들을 확인할 수 있다. 그중 난 Joi를 이용한 방법이 가장 좋은 방법 같아서 이 방법을 사용하고 있다. 패키지 설치 npm i @nestjs/config joi 적용 공식 문서에선 app.module.ts의 imports 안에 선언에서 작성하는 예시를 보여준다. 난 app.module.ts에는 만들어진 모듈이나 프로바이더를 가져와서 딱 넣기만 하는 방식으로 만들고 싶어서 좀 수정했다. 먼저 src 밑에 config 디렉터리를 생성 후 config.module.ts 생성 후 아래와 같이 작성한다. import { Module } from '@nestjs/common'; import { ConfigModule as NestConfigModu..

https://minu0807.tistory.com/154 [토이프로젝트] PUBG your.stat 길고 긴 작업 끝에 드디어 끝났다. 완벽하게 끝낸 건 아니지만 너무 오랜 시간 작업을 했고, 다른 하고 싶은 것들을 계속 못하고 있어서 이 정도로 마무리하기로 했다. 해결할 수 없어 포기한 부 minu0807.tistory.com 여기서 만들었던 토이 프로젝트를 다른 곳에서 무료로 배포한 상태에서 방치를 하고 있었다. 최근 확인할 게 있어서 접속을 해보니 꺼져있길래 다시 배포하려고 하니 안 되는 상황이 발생했다. 처음 저 프로젝트를 마무리하고 깃허브에서 제공하는 pages에 배포를 해보려다가 봐도 이해가 잘 안 돼서 안 하고 있다가 오늘 적용시켰다. 1. 배포종류 먼저 레파지토리의 프로젝트를 pages ..

예전부터 NestJS가 자바스크립트로 스프링을 경험해 볼 수 있다고 해서 사용해보고 싶은 프레임워크 중 하나였다.하지만 나중에 공부해봐야지....하면서 계속 미루고 미루고 있었다.그러던 중에 최근 NestJS를 사용해서 백엔드 개발 일을 할 수 있는 좋은 기회가 생겨 하게되었다.일로 접한다면 미룰 수 없다는 생각이 들었고 이때 아니면 또 계속 미룰 것 같다는 생각에 바로 한다고 했다.프로젝트는 NestJS에 ORM으로 Prisma를 사용하고 있었고, 클라이언트와 서버 간의 데이터 요청과 전달을 해주는 쿼리 언어 및 런타임으로 GraphQL을 사용하고 있었다.3개다 들어보기만 하고 처음 만져보는 거라 집에 와서 설치부터 세팅을 직접 해봤다.NestJS설치 및 프로젝트 생성# NestJS cli 설치npm ..

패키지 설치 yarn, npm 중 본인의 환경에 맞는 걸로 설치한다. yarn add pinia @pinia/nuxt npm install pinia @pinia/nuxt nuxt.config.ts 수정 modules에 설치한 nuxt용 피니아를 적용시킨다. export default defineNuxtConfig({ modules: ['@pinia/nuxt'], }); 이러면 끝이다. nuxt 모듈 패키지라 적용방법이 쉽다. store 디렉터리 및 파일 추가 프로젝트 내부에 store 디렉터리를 추가한다. 그리고 그 안에 테스트를 위해 myStore.ts를 만들고 아래와 같이 소스코드를 작성한다. import { defineStore } from 'pinia'; export const useMyStor..

전에 vite, vue3, typescript와 파이어베이스를 이용해 프로젝트를 만들었었다.(https://minu0807.tistory.com/154) 최근 시간 날 때 nuxt3를 공식문서를 보면서 조금씩 이용해 보다가 vuefire라는 걸 이용해 파이어베이스를 쉽게 사용할 수 있는 것 같아 한 번 사용해보려고 했으나.... 생각보다 불편해서 그냥 firebase 패키지만 사용했다. 정확한 이유는 본문 맨 마지막에 작성... 이 글에서는 파이어베이스-파이어스토어에 있는 데이터를 가져오는 것까지만 작성했다. 본문에서 작업한 프로젝트는 https://minu0807.tistory.com/157 https://minu0807.tistory.com/158 [VueJS] Nuxt3 설치 및 layouts, p..