Front

Vue.js와 Quasar에서 Axios를 사용하여 API 요청 시마다 일관된 Header를 설정하려면 Axios의 인스턴스를 생성하고 해당 인스턴스에 기본 설정을 추가할 수 있습니다. 이를 통해 모든 요청에서 동일한 설정을 사용할 수 있습니다. 아래는 Quasar와 Vue.js에서 Axios를 사용하여 Header에 sessionId를 추가하는 예제입니다: Axios 인스턴스 생성: axios.js와 같은 파일을 생성하여 Axios 인스턴스를 만듭니다.이렇게 하면 $axios를 사용하여 API 요청을 할 수 있게 됩니다. javascriptCopy code // src/boot/axios.js import axios from 'axios'; const axiosInstance = axios.create..

Card형 UI가 나타날때 왼쪽에서 부터 스스륵 나타나는 효과를 주고싶었다. 공식문서에 적혀져 있는 방법과는 다르게 구현했다. 1. qusar.config 파일의 framwork 안에 있는 animations : 'all' 로 변경 framework: { config: {}, // iconSet: 'material-icons', // Quasar icon set // lang: 'en-US', // Quasar language pack // For special cases outside of where the auto-import strategy can have an impact // (like functional components as one of the examples), // you can man..

코드 포맷팅 설정 ESList / Prettier 1단계 : VSCode 편집기 설정 ctrl + , 단축키로 편집기 세팅화면 확인 가능 Format On Save 체크 해제 Default Formatter : ESLint 선택 Tab Size : 2로 변경 format on save 체크되어 있으면 안된다 tab Size 2로 설정 2단계 : Package.json의 devDependencies에 라이브러리를 세팅한다 라이브러리 설치로 VSCode 편집기에서 Plugin으로 Prettier를 사용하는 것이 아닌 설정 파일로 Prettier를 사용할 수 있게 된다. 추후 팀원이 추가되더라도 동일한 포맷팅 유지가 가능해진다. "devDependencies": { "@quasar/app-vite": "^1...

Vue.js와 TypeScript를 사용하여 비지니스 로직을 클래스로 만들고, 그 클래스를 Vue 컴포넌트에서 사용하는 예제 TypeScript로 작성된 클래스 파일(BusinessLogic.ts) // BusinessLogic.ts export default class BusinessLogic { private data: string; constructor() { this.data = ''; } setData(value: string): void { this.data = value; } getData(): string { return this.data; } processData(): string { // 비지니스 로직을 추가하거나 가정합니다. return `Processed: ${this.data}`;..

function 으로 구현시 코드 import axios from 'axios'; // axios.create 할때 주입한 속성은 인스턴스로 데이터 요청 할때마다 무조건 이 속성들이 정의된 상태로 수행된다. const instance = axios.create({ baseURL: process.env.VUE_APP_API_URL, // HTTP 헤더에 있는 속성 headers: { Authorization: 'test1234', }, }); function registerUser(userData) { return instance.post('signup', userData); } function loginUser(userData) { return instance.post('login', userData);..

Vite는 기본적으로 ES 모듈 시스템을 사용하며, CommonJS의 require 문법을 지원하지 않습니다. 대신, ES 모듈의 import 문법을 사용해야 합니다. 하지만 일부 라이브러리나 코드베이스에서 require를 계속 사용해야 하는 경우에는 플러그인 사용으로 대체할 수 있습니다. 이 포스팅에선 import 문법 대체 방법만 다룹니다. 개발환경 : Vue3 + Quasar Build 도구 : Vite 기존 require 사용하던 예시 const multilingual = require('multilingual'); import 문법으로 변경 예시 import * as multilingual from 'multilingual'; import 문법 사용법 // 다른 모듈에서 변수 또는 함수 가져오기..