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

1. username input이 email이 아닐 경우에 비활성화 처리 - 정규표현식 필요 (이미 잘 만들어져 있는걸 사용하자) - computed 속성 필요 2. 아이디, 패스워드가 없으면 로그인버튼 비활성화 - html 정규 표현식 disabled 필요 1. 여러 컴포넌트에서 사용할거면 utils 폴더를 만들고 valdation.js 파일로 따로 빼놓자 const validateEmail = email => { return String(email) .toLowerCase() .match( /^(([^()[\]\\.,;:\s@"]+(\.[^()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\..

{{ item.subject }}

1. vue-js-modal 을 install 받아준다 npm install vue-js-modal --save https://www.npmjs.com/package/vue-js-modal vue-js-modal Modal Component for Vue.js. Latest version: 2.0.1, last published: a year ago. Start using vue-js-modal in your project by running `npm i vue-js-modal`. There are 187 other projects in the npm registry using vue-js-modal. www.npmjs.com 2. main.js에 vue-js-modal 플러그인을 추가해준다. impor..