Front

reactive 함수는 객체나 배열같은 레퍼런스 타입을 반응형 객체로 만들 수 있다. String, number, boolean 이러한 프리미티브한 타입을 반응형 객체로 만들려면 어떻게 해야할까? primitive 타입에 reactive 함수를 쓰면 반응형으로 동작하지 않는다. reactive 함수는 객체나 배열같은 reference 타입의 반응형 상태, 반응형 객체를 선언하는 함수이기 때문이다. console.log 로 찍어보면 메시지는 그냥 string이다. 자바스크립트 언어의 특성을 보면 당연한 결과다. 아에 값 자체를 새로 바꿔버리기 때문이다. retrun시킨 message (콧수염괄호 안에 있는 message) 와 addMessage() 함수 안에 있는 message 두개의 상태를 서로 동기화 ..

텍스트 보간법 데이터 바인딩의 가장 기본형태인 콧수염 괄호를 사용하는것 입니다. 콧수염괄호를 사용하면 해당 문법은 컴포넌트 인스턴스의 message 값으로 대체 됩니다. message 속성이 변경될 때 마다 갱신됩니다. v-once 데이터가 변경되어도 갱신(반응)되지 않는 일회성 보간을 수행할 수 있다. 문자열 : {{ message }} v-html html을 출력하려면 v-html 디렉티브를 사용해야 합니다 텍스트 : {{ rawHtml }} v-html : 웹사이트에서 임의의 HTML을 동적으로 렌더링하면 XSS 취약점으로 쉽게 이어질수 있고 이는 위험할 소지가 있습니다. html 보간법은 반드시 신뢰할 수 있는 콘텐츠에서만 사용하고 사용자가 제공한 콘텐츠에서는 절대 사용하면 안됩니다. XSS 취약..

Setup()setup() 함수(hook)은 CompositionAPI 사용을 위한 진입점 역할을 합니다그리고 setup 함수는 컴포넌트 인스턴스가 생성되기 전에 실행됩니다.  기본 사용 방법입니다.첫번째 매개변수로는 props가 넘어옵니다두번째 매개변수로는 Context가 넘어옵니다.Context에서는 attrs, slot, emit, expose 속성이 있습니다.Context의 속성에 관해서는 다른 포스팅에서 설명하겠습니다.

ref(), onMounted()는 Options API를 보완해 Vue.js3에 새롭게 Composition API 다. Composition API의 종류는 다양하지만 API의 성격에 따라 포괄적인 용어로 구별할 수 있다. 이러한 용어가 어떤 의미를 갖고 있는지 API를 배우기 전에 먼저 살펴보자 Composition API는 성격에 따라 3개로 나뉜다. - 반응형 API - 라이프 사이클 훅 - 종속성 주입 파랑 - 반응형 API 빨강 - 라이프 사이클 훅 노랑 - 종속성 주입 반응형 API (Reactivity API) 말 그대로 반응하는 데이터와 관련된 API 세트다. 라이프 사이클 훅 Vue 인스턴스나 컴포넌트가 생성될 때, 미리 사전에 정의된 몇 단계의 과정을 거치게 되는데 이를 라이프 사이..

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

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