분류 전체보기
IT 및 일상을 공유합니다.
[NestJS] @nest/config 사용하여 환경 변수 구성하자
지난 포스팅에서는 NestJS 프로젝트의 스캐폴딩을 통해 폴더 구조를 설정하고, Module - Controller - Service 구조를 구현했습니다. TypeORM을 사용하여 데이터베이스 설정을 진행하고, 데이터베이스 테이블을 생성하는 과정도 함께 살펴보았습니다. 이번에는 더 유연한 구조를 위해 환경 변수 설정을 통해 환경 변수를 관리하는 방법에 대해 알아보겠습니다. 아래는 이전 포스팅 과정입니다. 참고 부탁드립니다. NestJS와 TypeORM을 활용한 데이터베이스 연동 느린 개발자 stack94.tistory.com 모듈 설치 아래 명령어를 실행하여 "nestjs/config" 모듈을 설치합니다. npm install --save @nestjs/config NODE_ENV 환경 변수를 설정하기 ..
[NestJS] NestJS와 TypeORM을 활용한 데이터베이스 연동 - 2
지난 포스팅에서 TypeORM과 PostgreSQL에 대해서 알아봤습니다. 이번에는 NestJS에서 TypeORM을 활용하여 다루는 방법에 대해서 설명해 볼까 합니다. 혹시 이전 내용에 대해서 모르시다면 아래 링크를 통해 읽어보시면 좋을 거 같습니다. NestJS와 TypeORM을 활용한 데이터베이스 연동 - 1 느린 개발자 stack94.tistory.com 모듈 설치 pg: 8.11.2 typeorm : 0.3.17 @nestjs/typeorm : 10.0.0 class-transformer : 0.5.1 class-validator : 0.14.0 npm install pg typeorm @nestjs/typeorm --save npm install class-validator class-trans..
[NestJS] NestJS와 TypeORM을 활용한 데이터베이스 연동 - 1
이번 포스팅에서는 NestJS에서 TypeORM을 설치하고 활용해서 데이터베이스 연동에 대해서 설명해 볼까 합니다. TypeORM 이란? TypeORM은 TypeScript를 기반으로 한 ORM(Object-Relational Mapping) 라이브러리로, 데이터베이스와의 상호작용을 추상화하여 개발자가 SQL 쿼리 대신 객체 지향적인 방식으로 데이터베이스를 다룰 수 있도록 도와줍니다. ORM은 객체와 데이터베이스 테이블 간의 매핑을 처리하여, 데이터베이스 레코드를 객체로 다룰 수 있게 해 주며, CRUD 작업을 간단하게 처리할 수 있게 해 줍니다. TypeORM은 다양한 데이터베이스 시스템과 호환되며, MySQL, PostgreSQL, SQLite, Microsoft SQL Server 등 다양한 데이터..
[NestJS] NestJS 설치부터 기본 개념 알아보자
NestJS는 모듈화와 의존성 주입을 통해 구조적으로 정리된 백엔드 애플리케이션을 구축하기 위한 현대적인 프레임워크입니다. TypeScript를 기반으로 하여 강력한 기능을 제공하며, Express와 비슷한 런타임을 사용합니다. 또한, NestJS는 Fastify 프레임워크를 래핑하여 동작할 수도 있어 뛰어난 성능을 유지하면서도 개발 생산성을 높일 수 있습니다. NestJS는 국내외에서 빠르게 인기를 얻고 있으며, 다양한 회사에서 프로젝트에 적용하고 있는 추세입니다. 이에 따라 저 또한 NestJS에 대해 공부하고, 기본 개념부터 천천히 탐구해보려 합니다. Documentation | NestJS - A progressive Node.js framework Nest is a framework for bu..
[구글 애드센스] Google 인증 동의 플랫폼(CMP) GDPR 메시지란
구글 애드센스에서 오늘은 어느 정도 수익을 벌었나.. 매번 확인하던 도중 아래와 같이 Google에서 인증한 동의 관리 플랫폼(CMP)을 사용해야 한다고 나오더라고요 저는 경고창 보고 처음에 아.. 또 무효 트래픽 때문에 정지당했나..? 했다가 다시 보니 아래처럼 뭐가 적혀있어서 휴.. 좁쌀만큼 벌던 거 그나마 지키겠다 하고 안심했습니다 ㅎ 아무튼 CMP GDPR에 대해서 간단하게 한번 정리해보고자 합니다. GDPR이란? GDPR(General Data Protection Regulation) 유럽 연합(EU)에서 시행되는 개인정보 보호법입니다. 2018년부터 유효한 법으로 개인정보와 개인정보 처리를 통제하는 규제를 제정했다고 합니다. 어떤 웹사이트에 들어가 보면 뭐 쿠키 허용 요청 뭐 이런 거 뜨잖아요..
[Nuxt3] Nuxt3에서 Pinia 설치하고 사용해보자
Pinia란 Pinia는 2019년 11월경에 Composition API로 Vue용 스토어가 어떻게 생겼는지 재설계하기 위한 실험으로 시작되었습니다. Vue2와 Vue3 모두에게 작동 가능하고 구성된 요소/페이지 내부 상태를 공유할 수 있습니다. 그리고 Vuex와 유사하여 구현하기에 용이합니다. Pinia | The intuitive store for Vue.js Intuitive, type safe, light and flexible Store for Vue pinia.vuejs.org 개발 환경 2023년 8월 기준으로 Nuxt3와 pinia 환경에 대해서 설명합니다. nuxt 3.6.5 @pinia/nuxt 0.4.11 pinia 2.1.4 설치 방법 Nuxt3 프로젝트가 설치된 상태에서 시작합니..
[Nuxt3] devtools compilerOptions 에러 해결하기
Devtools란? Nuxt.js의 개발 도구를 활성화하는 옵션입니다. Nuxt.js는 개발 중에 개발자 도구를 사용하여 애플리케이션을 디버깅하고 모니터링하는 데 도움을 주는 내장된 개발 도구를 제공합니다. 해당 옵션을 true로 설정하면 개발 도구가 활성화되어 개발자 도구를 사용할 수 있습니다. 사용되는 예로는 주로 개발 중에 디버깅에 활용합니다. Vuex 또는 Pinia 상태 확인을 모니터링 가능 컴포넌트 구조 트리를 시각적으로 확인 가능 현재 활성화된 라우터 및 라우터 히스토리 확인 가능 개발 도구의 기능은 Nuxt.js 버전에 따라 다소 다를 수 있습니다. 또한, 개발 도구를 사용하기 위해서는 브라우저의 개발자 도구를 열어야 합니다. 주로 개발 환경에서만 사용하며, 프로덕션 환경에서는 비활성화하는..
[Nuxt3] vuetify3를 Nuxt3에 설치해보자
No match found for location with path "/_nuxt/%EF%BF%BDplugin-vuetify:components/VMain/VMain.sass vuetify 설정시 위에 에러로 고생하신다면 아래 해결방법을 통해서 다른방법으로 vuetify 설치와 설정을 하시면됩니다. 느린 개발자 Nuxt3 Vuetify variables configFile 에러 해결 방법 stack94.tistory.com Vuetify3 설치 이번 포스팅에서는 지난 시간 Eslint와 Prettier설정에 이어 Vue와 Nuxt에서 가장 많이 사용되고 유명한 UI 프레임워크인 Vueitfy에 대해서 설치 및 설정 방법에 대해서 적어볼까 합니다. 23.07월 기준 "nuxt": "^3.6.5", "vue..
[Nuxt3] EsLint Prettier 설치와 타입스크립트 설정해보기
Eslint & Prittier 라이브러리 설치하기 이번 포스팅에서는 Nuxt3에서 Eslint 와 Prittier 관련 라이브러리 설치와 .eslintrc.js 설정하는 방법 또는 타입스크립트 환경을 위한 tsconfig.json 옵션 설정에 대해서 간략하게 설명해볼까 합니다. package.json에서 Eslint와 Prettier 관련 모듈과 Typesciprt에 관한 Eslint plugin을 설치합니다. "devDependencies": { "@nuxt/devtools": "latest", "@nuxt/types": "^2.17.1", "@nuxtjs/eslint-config-typescript": "^12.0.0", "@types/node": "^18.16.19", "@typescript-es..
[Nuxt3] Nuxt3 시작해보자 (ft. 설치 & 환경)
이번에 소개드릴 내용은 Nuxt3입니다. 한 1~2년 정도 Nuxt2로 프로젝트를 진행했었는데요. Nuxt3 가 작년에 안정화가 됐더라도 아직은 시기상조라고 생각해서 그동안 Nuxt2에서만 프로젝트를 진행했었습니다 vue2문법으로 vuex 등 이렇게 쓰다가 vue3문법 사용해보고 싶어서 브리지도 설치해 봤는데 제가 설정을 잘 못한 건지 오류가 자꾸 나서 임시방편으로 Nuxt2에 Composition API 설치해 보고 Pinia 상태관리 모듈 한번 써보고, 컴포저블 여러 개 만들어보고 하다 보니 Nuxt3가 점점 업데이트되었더라고요. 올해에 vue2 수명 종료된다니.. 이번기회에 한번 Nuxt3로 환경설정부터 차근차근 진행하면서 포스팅을 써볼까 합니다. 2023.07.17일 기준) Nuxt 3.6 버전입..
[Nuxt] Nuxt에서 onnxruntime-web 모듈 설치 및 구성하기
최근에는 ChatGPT와 같은 인공지능 모델의 등장으로 개발자들이 구글 검색보다는 모델을 활용하여 정보를 얻거나 개발에 도움을 받는 경우가 많아졌습니다. 저도 요즘 구글 검색보단 ChatGPT를 많이 활용하여 개발을 진행하곤 합니다. 그래서 딥러닝 관련하여 관심이 많아졌는데 이번에 ONNX에 대해서 알게 되어 Nuxt 프레임워크에서 ONNX에 관련된 테스트 프로젝트를 진행해보려고 합니다. 딥러닝 프레임 워크? 이식성? ONNX? 딥러닝 분야에는 다양한 프레임워크가 존재하고 각각 독특한 모델 구조와 형식을 가지고 있습니다. 이로 인해서 다른 프레임워크 간에 모델을 공유하거나 이식하는 것이 번거로웠습니다. 예를 들어 Tensor Flow로 학습한 모델을 PyTorch에서 사용하고자 할 때 이식하기가 힘들었죠..
[Webpack] copy-webpack-plugin 모듈에 대해 알아보자
이번에 회사에서 프로젝트를 진행하던 도중, 테스트 기능을 구현하면서 꼭 필요한 파일이 있어 node_modules에 있는 어떠한 모듈에 정적파일을 복사하여 사용해야 하는 일이 있었습니다. 그래서 이것에 대해서 어떻게 복사할 방법을 고민하던 중 js파일에 fs 모듈을 사용하여 디렉터리를 복사하는 방법을 사용하다 copy-webpack-plugin 모듈을 찾게 되어 간단하게 설정하여 구현한 방법을 소개하려고 합니다. 환경 nuxt 2.15.8 Typescript composition Api 파일 시스템 경로 모듈을 사용하여 파일을 복사하는 방법 const fs = require('fs') const path = require('path') const srcFolder = path.join( __dirname..