IT
IT 및 일상을 공유합니다.
[NestJS] NestJS 설치부터 기본 개념 알아보자
NestJS는 모듈화와 의존성 주입을 통해 구조적으로 정리된 백엔드 애플리케이션을 구축하기 위한 현대적인 프레임워크입니다. TypeScript를 기반으로 하여 강력한 기능을 제공하며, Express와 비슷한 런타임을 사용합니다. 또한, NestJS는 Fastify 프레임워크를 래핑하여 동작할 수도 있어 뛰어난 성능을 유지하면서도 개발 생산성을 높일 수 있습니다. NestJS는 국내외에서 빠르게 인기를 얻고 있으며, 다양한 회사에서 프로젝트에 적용하고 있는 추세입니다. 이에 따라 저 또한 NestJS에 대해 공부하고, 기본 개념부터 천천히 탐구해보려 합니다. Documentation | NestJS - A progressive Node.js framework Nest is a framework for bu..
[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..
[Express] 카카오 로그인 서버 구현하기 (Rest API key) - 1
안녕하세요. 요즘 회사가 너무 바빠지다 보니 개발 관련 포스팅 올리는 게 쉽지가 않네요 ㅠ.. 점점 더워지는데 다들 몸 관리 잘하시고 열심히 같이 공부 한번 진행해 봅시다! 이번 포스팅 주제는 "FrontEnd에서 카카오 인가 코드 받아서 사용자 정보 받아보기"입니다. 이전에 React와 Nuxt로 카카오 로그인 과정과 방법에 대해서 설명을 해봤는데요. 카카오 Developers 내 애플리케이션에서 도메인과 redirect URI를 프런트 정보로 등록하여, 인가코드를 받고 여기까지 하면 프런트가 할 일은 다했다!라고 끝낸 포스팅이 있습니다. 만약에 이 과정을 못 보셨다면 아래 링크를 통해서 한번 읽어주시면 감사하겠습니다!! [React] 카카오(Kakao) 로그인 구현해 보기 React [React] 카..
[Nuxt] Nuxt2 환경에서 composition-API와 pinia 설정방법
안녕하세요. 한 주간 잘 지내셨나요? 22년 11월 Nuxt3 3.0 버전을 발표했는데요 그에 따라 nuxt2에서 nuxt3로 마이그레이션 하는 개발자 분들도 많아졌다고 생각합니다. 물론 아직 Nuxt3에서 지원되는 부분이 Nuxt2에 비해서 부족하다고 하지만 새로운 기능과 여러 요건들에 따라서 새로운 프로젝트를 시작하거나, nuxt3 기능을 맛볼 수 있는 nuxt Bridge 버전으로 마이그레이션 하시는 분들 또한 있을 겁니다. 이번 포스팅에서는 Nuxt Bridge를 제외하고 Vue 3.0에서 새롭게 도입된 Composition API 모듈을 사용가능하게 설정하는 방법과 Pinia라는 Vue 애플리케이션에서 상태 관리를 위한 라이브러리 또한 설정해 볼 겁니다. 컴포지션 API와 Typescript와 ..
[TypeScript] 타입스크립트에서 함수 사용법을 알아보자
함수 타입스크립트로 3가지 방식으로 정의할 수 있습니다. 1. 함수의 매개변수(파라미터) 타입 2. 함수의 구조 타입 3. 함수의 반환 타입 함수 타입 선언 function sub(num1: number, num2 :number):number{ return num1 - num2 } sub(3,2) // 1 sub(1) // Too few parameters sub(3,2,1) // Too many parameters 함수의 매개 변수(파라미터)와 반환 값에 타입을 정의합니다. 반환 값에 타입은 지정하지 않으면 void로 사용할 수 있으며, 보통 return 되는 거에 따라 추론돼서 적용됩니다. 함수 매개변수 function sub(num1: number, num2 ?:number):number{ retu..
[JavaScript] FormData 알아보고 서버로 이미지 전송해보자
프로젝트를 진행하던 도중 백엔드로 이미지파일과 이미지 정보를 전송하는 일이 있었는데 그때 사용하는 FormData라는 API를 사용하는 방법에 대해서 간단하게 알아보고자 합니다. 서버에 데이터 전송 과정클라이언트에서 서버로 데이터를 주고받을 때 HTTP 통신 규약으로 전송이 되는데, HTTP Request Header에 전송할 데이터는 어떤 것인지 명시하기 위해 Content-Type이라는 속성을 사용합니다. RestFul API 요청을 많이 사용하므로 보통은 Content-Type에 application/json으로 설정하여 많이 사용합니다. 정리하면 Body에 담은 데이터를 어떤 방식으로 인코딩하여 전송할지 설정하는 것입니다. 이미지 데이터 전송 과정통상 알고 있는 이미지 데이터는 png나 jpg인데..