Front

Vue3에서 새롭게 등장한 Composition API는 Options API를 단점을 보완해서 새롭게 등장한 API다. Vue3 공식사이트에서 Compositon API로 개발하기를 권장하고 있다. Composition API란 옵션 (data, methos, ...)를 선언하는 대신 가져온 함수 (ref, onMounted, ...)를 사용하여 vue 컴포넌트를 작성할 수 있는 API 세트를 말한다. 옵션 API에서는 함수 작성시 methos 영역에서만 가능했다면 Composition API는 script단 어디서든 함수 작성이 가능하다. 이것들이 다 compositionAPI다. 이것들은 OptionsAPI다 왜 compositonAPI 인가? optionsAPI 에서는 논리적 관심사를 처리하는 코..

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 문법 사용법 // 다른 모듈에서 변수 또는 함수 가져오기..

Root 컴포넌트 렌더링 과정 alias - 파일 시스템 경로에 별칭을 만들때 사용한다 App.vue가 Root 컴포넌트 1. 맨 처음에 Web이 실행되면 index.html 파일을 실행한다. 2. 그러면 스크립트 태그에 선언된 메인 모듈을 가져온다. 그게 main.js 다. 3. main.js를 살펴보면 createApp이란 메서드가 있다. 이건 실제 Vue 애플리케이션. Vue인스턴스를 생성하는 메서드다. 4. 여기에 App.vue가 들어가게 된다. 5. 그리고 생성된 vue인스턴스를 mount() 메서드 안에 #app에 마운트 시킨다. 6. App.vue에 있는 root 컴포넌트가 렌더링 된다. ESLint, Prettier https://ko.vuejs.org/style-guide/ Vue.js ..

DRS Web Project에 헥사고날 아키텍처를 적용할지에 대해 고민했습니다. 제가 조사한바로는 헥사고날 아키텍처(Hexagonal Architecture)는 클린 아키텍처를 기반으로 한, 소프트웨어를 여러 계층으로 나누어 각 계층이 독립적이고 유연하게 동작할 수 있도록 하는 아키텍처 패턴입니다. Quasar는 Vue.js 기반의 프레임워크로 주로 사용자 인터페이스(UI)를 구축하는 데에 특화되어 있습니다. 따라서 헥사고날 아키텍처를 적용하는 데에는 일부 제약이 있을 수 있습니다. 그러나 Quasar 애플리케이션에서도 비즈니스 로직을 분리하고 유지보수성을 향상시키기 위한 일반적인 아키텍처 원칙을 적용할 수 있습니다. 여러 방법으로 비즈니스 로직을 분리할 수 있으며, 그 중에서도 다음과 같은 방법을 고려..

1. Vue란 무엇인가? Vue의 특징 1. 선언적 렌더링 - 선언만해도 템플릿에 사용하면 자동으로 값이 바뀌고 렌더링된다. - 자바스크립트로만 하려면 값을 바꾸고 싶을때마다 다시 변수에 할당해야한다. 2. 반응성 - 값이 바뀌었을때 자동으로 업데이트 된다. 핵심 기능 1. 바인딩 v-bind 디렉티브 - dom의 속성에 데이터를 바인딩해준다. - 템플릿의 태그에서 :로 시작하는건 다 바인딩 2. v-on 이벤트 헨들링 - 템플릿의 태그에서 @로 시작하는건 다 이벤트 3. v-model 양방향 바인딩 4. v-if 5. v-for 6. v-html 7. v-once - 한번만 데이터가 변경되고 반응하지 않게 하는 기능 2. 컴포넌트 이해하기 컴포넌트 - 재사용 모듈 - UI 재사용 한다 문자열 컴포넌트 ..