Song Minu

https://discord.com/developers/applications Discord Developer Portal — API Docs for Bots and Developers Integrate 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..

패키지 설치 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..

넉스트3를 하나하나 알아보기 위해 최근 설치했다. 알아보기 위해 설치했는데 컴포넌트나 디자인 같은 것들을 하나하나 만들기엔 너무 많은 시간이 소요될 것 같아 디자인 프레임워크를 찾아봤다. https://nuxt.com/modules?category=UI Modules · Nuxt Comprehensive UI toolkit for Vue.js and Nuxt.js that empowers you to build amazing user interfaces with ease. With Vunix, you can leverage the power of popular utility-first CSS frameworks like Tailwind CSS, Unocss, WindiCss, or use your own..

프로젝트 설치 npx nuxi init 공식문서에 나와 있는 설치 방법으로 설치를 하면 이렇게 생성이 된다. nuxt2에서는 설치 시 기본적인 디렉터리들을 생성해줬었는데 nuxt3는 없다. 처음 설치하고 봤을 때 조금 당황... 공식문서를 봐보면 layouts 규칙 적용 방법이 여러가지로 보이는데 nuxt2와 같은 형식으로 빠르게 적용 방법만 작성 layouts, pages 디렉터리 생성 먼저 app.vue는 삭제해버린 후 layouts, pages 디렉터리를 추가한다. layouts layouts 디렉터리 안에 기본 레이아웃 용 파일로 default.vue와 테스트를 위해 sub.vue 파일을 생성 후 아래와 같이 소스코드 작성 //default.vue default.vue //sub.vue sub.v..

요즘 대부분의 라이브러리들은 타입스크립트를 기반으로 많이 만들어져 공유되고 있다. 그래서 타입스크립트 환경에서 해당 라이브러리들을 사용할 때는 별문제 없이 사용한다. 하지만, 자바스크립트로만 만들어져 있는 라이브러리들의 경우 타입스크립트 환경에서 사용할 때 애먹는 경우도 생각보다 있다. 타입스크립트 환경의 프로젝트에서 타입 정의가 되어 있지 않은 라이브러리를 사용할 경우 볼 수 있는 에러 중 하나이다. 위 설명 처럼 @types를 통해 설치하면 되는 경우도 있지만 없는 경우도 있다. 없을 경우 본인이 스스로 타입 정의를 해줘야 한다. 몇 번 겪고서 상당히 불편함을 느꼈었는데, 오늘 강의를 듣던 중 알게 된 사이트가 있어서 공유할 겸 블로그 글을 작성하게 되었다. https://www.typescriptl..