IT/Nuxt & vue
IT 및 일상을 공유합니다.
[Nuxt] vuetify custom svg 파일 연결하기
nuxt에서 svg파일을 사용할 때 아래 라이브러리를 활용하여 래핑 해서 사용을 했습니다. 예를 들어서 import CloseIcon from '~/asset/images/icon/icon-close.svg?inline' 이런 식으로 컴포넌트에서 사용했습니다. @nuxtjs/svg: "^0.4.1", 위에 라이브러리를 사용하여 svg파일을 컴포넌트로 사용하는데는 문제가 없었는데 vuetify2에 v-text-field 컴포넌트에서 close 아이콘을 변경하려면 내부적으로 스타일 클래스를 찾아서 css파일로 변경하여 사용해야 하고 이게 생각해 보니 재사용성도 부족하고, 하드코딩으로 되는 거 같아서 svg파일을 vuetify2 icon에 mdi 아이콘을 사용하는 것처럼 등록하여 사용하는 게 더 나을 거 같다..
[Nuxt] Nuxt에서 onnxruntime-web 모듈 설치 및 구성하기
최근에는 ChatGPT와 같은 인공지능 모델의 등장으로 개발자들이 구글 검색보다는 모델을 활용하여 정보를 얻거나 개발에 도움을 받는 경우가 많아졌습니다. 저도 요즘 구글 검색보단 ChatGPT를 많이 활용하여 개발을 진행하곤 합니다. 그래서 딥러닝 관련하여 관심이 많아졌는데 이번에 ONNX에 대해서 알게 되어 Nuxt 프레임워크에서 ONNX에 관련된 테스트 프로젝트를 진행해보려고 합니다. 딥러닝 프레임 워크? 이식성? ONNX? 딥러닝 분야에는 다양한 프레임워크가 존재하고 각각 독특한 모델 구조와 형식을 가지고 있습니다. 이로 인해서 다른 프레임워크 간에 모델을 공유하거나 이식하는 것이 번거로웠습니다. 예를 들어 Tensor Flow로 학습한 모델을 PyTorch에서 사용하고자 할 때 이식하기가 힘들었죠..
[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와 ..
[Nuxt] Typesciprt 환경에서 Nuxt $refs 정의 방법
Nuxt2 Typescript 환경에서 $refs를 사용하려고 할 때 TS2532: Object is possibly 'undefined' 에러를 발생하여 어떤 방법으로 해결할지 알아본 내용에 대해서 소개해보려고 합니다. vue-property-decorator와 클래스 형식으로 사용하지 않고 Vue.extend로 구현한 내용입니다. 참고해 주세요! 에러 상황 Nuxt3 환경은 아직 여의치 않은 거 같아 Nuxt2 프로젝트로 진행을 하게 되었습니다. Js로 구현된 컴포넌트들을 Ts로 변환하면서 구현해 가던 중 $refs로 해당 자식 컴포넌트의 메서드를 호출하는 일이 생겨 사용할 때 이러한 에러가 났습니다. TS2532: Object is possibly 'undefined' TS2339: Property..
[i18n] 배열에서 i18n 다국어 적용하는 방법을 알아보자
Nuxt 및 vue 환경에서 i18n으로 다국어를 작업하던 와중 문자열 데이터가 포함된 배열을 번역 설정을 할 때 언어 변경 시 선택된 언어로 렌더링이 되지 않는 현상이 있어 이를 해결하는 방법을 알아보겠습니다. 참고로 i18n 설정 방법을 모르신다 하시면 아래 포스팅을 참고해 주세요. 2023.01.30 - [IT/Nuxt & vue] - [Nuxt] 구글시트(google sheet)를 이용한 다국어(i18n) 자동화 처리 느린 개발자 프론트엔드 백엔드 학습정리 및 정보공유 블로그입니다. stack94.tistory.com 다국어 Json 파일 예를 들어 한국어 및 영어 번역 파일을 한번 생성해보겠습니다. ※위 포스팅 구글 시트로 연결하셨으면, 구글 시트에서 key값 설정하여 만들어지는 json 파일로..
[Nuxt] 구글 시트에서 적용한 다국어( i18n) vee-validate 사용하기
저번 포스팅에서 구글시트와 i18n을 설정하여 다국어 세팅을 해보았습니다. 이 설정 방법으로 버튼이나 HTML 태그에 글자들을 구글 시트 key 값을 참조하여 쿠키에 저장해 둔 i18n_redirected 값으로 한국어든 영어로든 설정을 할 수 있었습니다. 그러면 이번 포스팅에서는 다국어 변경하는 버튼과 각 텍스트필드(TextField)에 Validation을 적용했을 때 error Message에 대해서 다국어 적용을 하는 방법을 알아보겠습니다. 참고로 아래 구글 시트와 i18n이 적용되어 있는 상태에서 진행됩니다. 설정을 안 했으면 아래에 이전 포스팅에서 설정방법을 진행하고 보셔야 합니다. 2023.01.30 - [IT/Nuxt & vue] - [Nuxt] 구글시트(google sheet)를 이용한 ..
[Nuxt] Vuetify 설치 방법 및 Material icon 설정
Nuxt2 환경에서 Cli 명령어로 간단하게 Nuxt 프로젝트와 Vuetify 설치를 진행을 해보고 Material icon을 설정하는 방법을 알아보도록 하겠습니다. Nuxt2 설치 cli 명령어로 나오는 밑에 단계들 진행 # nuxt2 프로젝트 생성 cli 명령어 npx create-nuxt-app NuxtTest # 1. 프로젝트 이름 설정 create-nuxt-app v5.0.0 ✨ Generating Nuxt.js project in . ? Project name: (NuxtTest) # 2. 언어 설정 ? Programming language: (Use arrow keys) > JavaScript TypeScript # 3. package manager 설정 ? Package manager: (..
[Nuxt] Axios interceptors 사용하기
Nuxt2로 프로젝트를 진행하면서 백엔드 서버와의 통신할 때 제가 Axios Interceptors 설정과 처리하는 방식을 한번 작성해보려고 합니다. Axios Interceptors 란? request와 response가 then 또는 catch로 처리되기 전에 가로챌 수 있게 해주는 axios 라이브러리입니다. 정리하면 Http Request , Response가 then catch 처리되기 전에 부가적인 처리 작업을 할 수 있습니다. Request Interceptors? config 옵션 설정 headers 설정 jwt 인증이나 관련 부분 처리 -> 헤더에 담아서 보낼 때 로딩 관련 로그 작업 Response Interceptors? 에러 핸들링 -> statusCode 별로 에러 처리나, 에러 ..
[Nuxt] Axios 와 Proxy 사용 방법 (CORS)
이번 포스팅은 NuxtJS에서 Axios 구성과 Proxy 설정 방법에 대해서 설명해보려고 합니다. 회사에서 백엔드와 작업할때 CORS 문제와 API 작업에서 삽질했던 부분을 정리하고자 합니다. CORS 란? Cross Origin Resource Sharing의 약자로, 현재 웹페이지 도메인에서 다른 웹페이지 도메인으로 리소스가 요청되는 경우를 말한다. HTTP , HTTPS 와 같은 프로토콜이 다른경우 domainA.com과 domainB.com처럼 도메인이 다른 경우 8080 포트와 3000 포트처럼 다른 경우 이처럼 Cross-Origin 이란 위 3가지 중 한 가지라도 다른 경우를 말합니다. CORS가 없이 모든 곳에서 데이터를 요청할 수 있으면, 다른 사이트에서 본인이 개발한 사이트를 흉내 낼..
[Nuxt] 구글시트(google sheet)를 이용한 다국어(i18n) 자동화 처리
🔑 개요 국제화를 고려한 웹 애플리케이션을 구현하기 위해, 국제화 처리 모듈을 사용하여 구현한 예시를 입니다. 기본적인 nuxt-i18n 모듈만 사용한 방법과 public-google-sheets-parser 라이브러리를 기반으로 한 nuxt-google-sheets-parser 모듈을 사용하여 자동화 처리한 방법을 설명합니다. 🔑 nuxt-i18n 참고문서) nuxt-i18n Introduction i18n (Internationalization) for your Nuxt project i18n.nuxtjs.org 1. package install npm install @nuxtjs/i18n 2. nuxt.config.js 설정 modules: [ [ '@nuxtjs/i18n', { // 대응할 언어들..
[Nuxt] 구글 로그인
기존에 사용하던 웹용 구글 로그인 라이브러리가 중 2023년 3월 31일 일자로 중단될 예정이라 새로운 웹용 Google ID 서비스 솔루션 을 사용하여 진행해 보기로 한다. 기존 웹용 Google 로그인 문서 웹 앱에 Google 로그인 통합 | Authentication | Google Developers 이 페이지는 Cloud Translation API를 통해 번역되었습니다. Switch to English 의견 보내기 웹 앱에 Google 로그인 통합 컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요. developers.google.com 새롭게 적용된 Google 로그인 문서 Google JavaScript API로 로그인 참조 | Authentication | G..
[Nuxt] 카카오 로그인 Nuxt 설정 및 카카오 정보 발급 - ②(END)
Nuxt 카카오 로그인 설정 및 카카오 정보 발급 Nuxt 프로젝트를 하나 만들어주자. npx create-nuxt-app create-nuxt-app v3.4.0 ✨ Generating Nuxt.js project in test # 프로젝트명 입력 ? Project name: (test) # 프로그래밍 언어 선택 ? Programming language: (Use arrow keys) > JavaScript TypeScript # 패키지 매니저 선택 ? Package manager: (Use arrow keys) > Yarn Npm # UI 프레임워크 선택 ? UI framework: (Use arrow keys) > None Ant Design Vue Bootstrap Vue Buefy Bulma C..