Song Minu

옛날에 Vite 기반의 VueJS 프로젝트로 https://github.com/smw0807/pubg_your.stat 이걸 만들었었다.만들고서 서비스를 시도 안 했던 이유는 결과물이 만족스럽지 않다는 단순한 이유였다. 그리고 이번에는 조금 제대로 만들어 보자! 해서 팀을 구하는 목적으로 Nuxt3 최신 버전으로 만들어 보았다.https://github.com/smw0807/pubg.your_team GitHub - smw0807/pubg.your_team: 배틀그라운드 팀 구하기 사이트배틀그라운드 팀 구하기 사이트. Contribute to smw0807/pubg.your_team development by creating an account on GitHub.github.com인증 및 데이터베이스는 ..

https://nuxt.com/modules/tailwindcss @nuxtjs/tailwindcss · Nuxt ModulesAdd Tailwind CSS to your Nuxt application in seconds with PurgeCSS included for minimal CSS.nuxt.com공식문서에 있는 tailwindcss 모듈을 설치하면 아래와 같은 에러가 출력되면서 실행되지 않는다.로그에서 설치하라는 @tailwindcss/postcss를 설치해봐도 같은 에러가 발생한다. 모듈을 설치하지 말고 tailwindcss의 공식문서에 있는 방법으로 설치하면 된다.https://tailwindcss.com/docs/installation/framework-guides/nuxt Install ..

NextJS와 NestJS를 이용해 배틀그라운드 스탯검색과 매치분석 사이트를 만들었다.AI를 이용해 만들었고, 덕분에 생각보다 빠른 시간 내에 완성을 했다.프론트는 디자인 쪽에 많은 도움을 받았고, 백엔드는 배그 API로부터 얻는 결괏값을 처리하는데 도움을 받았다.특히 매치에 대한 API는 1개의 매치에 너무 많은 데이터가 들어있어서 인터페이스를 만드는 것과 데이터 처리를 너무 수월하게 처리할 수 있었다. 처음 배그 API를 이용해 만들었던 프로젝트(https://github.com/smw0807/pubg_your.stat)는 프론트로만 처리해서 만들었었다.이걸 만들당시 플레이어 스탯 정보 조회와 채팅 기능을 만들면서 많은 시간을 사용해 매치 API 사용은 포기했었다.이번에 시간이 좀 생겨서 매치 API..

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 ..