맨땅에 ho-ding

[VUE] Vue.js 자주 사용하는 ES6 문법 정리

hojun — Wed, 2 Apr 2025 22:38:48 +0900

화살표 함수 (Arrow function)

기존 함수에서는 this를 사용, 화살표 함수에서는 this없이 사용
함수 로직이 한 줄이면 { } 생략 가능

<script setup>
    // ES5 일반 함수 문법
    function fncES5(val) {
        console.log(val);
    }
    // ES6 화살표 함수 문법
    const fncES6_1 = (val) => {
        console.log(val);
    }

    // 함수 로직이 1줄이면 {} 생략 가능
    const fncES6_2 = (val) => console.log(val);
</script>

템플릿 리터럴 (Template literals)

백틱( ` ) 을 사용
문자열과 자바스크립트 표현식 혼용 가능

<script setup>
    let text = 'ES6!';
    
    const fncES6 = () => {
        console.log(`Hello, ${text}`);  // Hello, ES6!
    }     
</script>

모듈 (Modules)

import, expert 문법 사용
다른 js 파일에서 파일 내용을 가져옴

// component.js
const  component = {
    fncES6() {
        console.log('hello, ES6!');
    }
}

<!-- vue -->
<script setup>
    import es6Comp  from './component.js'
    es6Comp.fncES6();   // hello, ES6!
</script>

분해와 확장 문법

분해 문법은 { , } 사용
확장 문법은 ... 사용

<script setup>
    let obj = {
        prop1 : 'hello, ',
        prop2 : 'ES5!',
        prop3 : 'hello, ',
        prop4 : 'ES6!',
    }

    // ES5 분해 문법
    const prop1 = obj.prop1;
    const prop2 = obj.prop2;

    // ES6 분해 문법
    const {prop3, prop4} = obj;
    
    console.log(prop1 + prop2); // hello, ES5!
    console.log(prop3 + prop4); // hello, ES6!
    
    // ES5 확장 문법
    let objES5 = {
        name : 'Alice',
        prop1 : obj.prop1,
        prop2 : obj.prop2
    }

    console.log(objES5.prop1 + objES5.name); // hello, Alice

    // ES6 확장 문법
    let objES6 = {
        name : 'John',
        ...obj  
    }

    console.log(objES6.prop3 + objES6.name) // hello, John
</script>

[VUE] Composition API - axios

hojun — Sun, 30 Mar 2025 00:02:39 +0900

Composition API에서 axios를 사용하는 기본적인 방법을 알아보겠습니다.

ref, onMounted를 활용한 axios.get

<template>
    <h2>jsonplaceholder REST API axios.get</h2>
    <p v-if="loading">Loading...</p>
    <p v-else-if="error">Error : {{ error }}</p>
    <pre v-else>{{ data }}</pre>
</template>

<script setup>
    import { ref, onMounted } from 'vue';
    import axios from 'axios';

    const data = ref(null);
    const loading = ref(true);
    const error = ref(null);
    
    async function fetchData() {
        try {
            const response = await axios.get('https://jsonplaceholder.typicode.com/posts/1');
            data.value = response.data;
        } catch(err) {
            error.value = err.message;
        } finally {
            loading.value = false;
        }
    }

    onMounted(fetchData);
</script>

✅ 설명

onMounted()에서 fetchData()를 호출하여 API 데이터를 가져옴
ref()를 활용해 data, loading, error 상태를 관리
axios.get(url)을 통해 비동기 요청을 실행
try-catch-finally를 사용하여 오류 처리 및 로딩 상태 관리

✅ 결과

axios 성공 여부에 따른 responMessage 호출

ref 를 활용한 axios.post

<template>
    <h2>jsonplaceholder REST API axios.post</h2>
    <input v-model="title" placeholder="title" />
    <textarea v-model="body" placeholder="body"></textarea>
    <button @click="sendData">submit</button>
    <p>{{ responMessage }}</p>
</template>

<script setup>
    import { ref } from 'vue';
    import axios from 'axios';

    const title = ref('');
    const body = ref('');
    const responMessage = ref(null);
    
    async function sendData() {
        try {
            const response = await axios.post('https://jsonplaceholder.typicode.com/posts', {
                title: title.value,
                body : body.value,
                userId : 1
            })
            responMessage.value = `Post created with ID: ${response.data.id}`;
        } catch (err) {
            responMessage.value = `Error: ${err.message}`;
        }
    }

</script>

✅ 설명

v-model을 사용해 사용자 입력을 받아 axios.post() 실행
응답 메시지를 responseMessage에 저장

✅ 결과

button submit 후 axios 성공 여부에 따른 responMessage 호출

[VUE] Composition API - provide, inject

hojun — Fri, 28 Mar 2025 20:22:03 +0900

Composition API에서 provide와 inject는 부모 컴포넌트에서 데이터를 제공(provide)하고, 하위 컴포넌트에서 이를 주입(inject)받아 사용할 수 있도록 하는 기능입니다.

provide와 inject의 핵심 개념

provide(key, value): 부모 컴포넌트에서 데이터를 제공
inject(key, default value(없이도 사용 가능) ): 자식 컴포넌트에서 데이터를 주입받아 사용
깊은 컴포넌트 트리에서도 데이터를 쉽게 전달 가능 (props를 여러 단계 거칠 필요 없음)

provide, inject 기본 사용 방법

✅ 부모 컴포넌트에서 데이터 제공 (provide)

<!-- parentComponent.vue -->
<template>
    <h2>parentComponent</h2>
    <childComponent />
</template>

<script setup>
    import { provide, ref } from 'vue'
    import childComponent from './childComponent.vue'

    const message = ref('parent message')
    
    // provide로 자식 컴포넌트에 데이터를 제공
    provide('requestMessage', message)
    
</script>

✅ 자식 컴포넌트에서 데이터 주입 (inject)

<!-- childComponent.vue -->
<template>
    <h2>childComponent</h2>
    <p>receive message : {{ requestMessage }}</p>
</template>

<script setup>
    import { inject } from 'vue';

    // inject로 부모 컴포넌트의 데이터를 주입
    const requestMessage = inject('requestMessage')
    
</script>

✅ 결과(parentComponent.vue)

부모 컴포넌트의 requstMessage를 받아와 자식 컴포넌트 내 Received message 영역에서 'parent message' 를 출력합니다.

반응형 데이터 전달 (provide + reactive or ref)

provide는 반응형 상태를 그대로 전달할 수 있습니다.

✅ 부모 컴포넌트에서 데이터 제공 (provide + ref)

<!-- parentComponent.vue -->
<template>
    <h2>parentComponent</h2>
    <p>count : {{ count }}</p>
    <button @click="increment">증가</button>
    <childComponent />
</template>

<script setup>
    import { provide, ref } from 'vue';
    import childComponent from './childComponent.vue';

    const count = ref(0);

    // provide로 자식 컴포넌트에 데이터를 제공
    provide('count', count);

    // count를 증가시키는 함수
    function increment() {
        count.value++;
    }
</script>

✅ 자식 컴포넌트에서 데이터 주입 (inject)

<!-- childComponent.vue -->
<template>
    <h2>childComponent</h2>
    <p>count from parent : {{ count }}</p> 
</template>

<script setup>
    import { inject } from 'vue';

    // inject로 부모 컴포넌트의 데이터를 주입
    const count = inject('count')
</script>

✅ 결과(parentComponent.vue)

부모 컴포넌트의 증가 버튼을 눌러 count가 증가하면 자식 컴포넌트에도 즉시 반영됩니다.

inject 기본값 설정

만약 부모에서 provide하지 않았다면 inject 시 undefined가 될 수 있습니다.
이때 기본값을 설정할 수 있습니다.

✅ 부모 컴포넌트에서 데이터 미제공 (~~provide~~ + ref)

<!-- parentComponent.vue -->
<template>
    <h2>parentComponent</h2>
    <p>count : {{ count }}</p>
    <button @click="increment">증가</button>
    <childComponent />
</template>

<script setup>
    import { ref } from 'vue';
    import childComponent from './childComponent.vue';

    const count = ref(0);

    // provide로 자식 컴포넌트에 데이터를 미제공
    // provide('count', count);

    // count를 증가시키는 함수
    function increment() {
        count.value++;
    }
</script>

✅ 자식 컴포넌트에서 데이터 주입 (inject)

<!-- childComponent.vue -->
<template>
    <h2>childComponent</h2>
    <p>count from parent : {{ count }}</p> 
</template>

<script setup>
    import { inject } from 'vue';

    // inject로 부모 컴포넌트의 데이터를 주입
    const count = inject('count', 123) // default value로 123을 설정
</script>

✅ 결과(parentComponent.vue)

부모 컴포넌트에서 provide를 제공하지 않아 자식 컴포넌트에서 설정한 디폴트 값인 123 이 출력됩니다.

provide 함수 전달

단순한 값뿐만 아니라 함수도 provide를 통해 전달할 수 있습니다.

✅ 부모 컴포넌트에서 데이터 제공 (provide + ref)

<!-- parentComponent.vue -->
<template>
    <h2>parentComponent</h2>
    <p>count : {{ count }}</p>
    <button @click="increment">증가</button>
    <childComponent />
</template>

<script setup>
    import { provide, ref } from 'vue';
    import childComponent from './childComponent.vue';

    const count = ref(0);

    
    provide('count', count); // provide로 자식 컴포넌트에 데이터를 제공
    provide('increment', increment) // provide로 자식 컴포넌트에 함수 제공

    // count를 증가시키는 함수
    function increment() {
        count.value++;
    }
</script>

✅ 자식 컴포넌트에서 데이터 주입 (inject)

<!-- childComponent.vue -->
<template>
    <h2>childComponent</h2>
    <p>count from parent : {{ count }}</p> 
    <button @click="increment">증가(부모 함수)</button>
</template>

<script setup>
    import { inject } from 'vue';

    const count = inject('count'); // inject로 부모 컴포넌트의 데이터를 주입
    const increment = inject('increment'); // inject로 부모 컴포넌트의 함수 주입
</script>

✅ 결과(parentComponent.vue)

자식 컴포넌트에서도 부모가 제공한 increment() 함수를 실행하여 count를 변경할 수 있습니다.

provide, inject 글로벌 상태 관리

Composition API에서 provide와 inject를 사용하면 간단한 글로벌 상태 관리가 가능합니다.
부모 → 자식→ 손자 컴포넌트로 전달이 가능합니다.

✅ 부모 컴포넌트에서 데이터 제공 (provide)

<!-- parentComponent.vue -->
<template>
    <h2>parentComponent</h2>
    <childComponent />
</template>

<script setup>
    import { provide, ref } from 'vue'
    import childComponent from './childComponent.vue'

    const message = ref('parent message')
    
    // provide로 자식 컴포넌트에 데이터를 제공
    provide('requestMessage', message)
    
</script>

✅ 자식 컴포넌트에서 데이터 미주입 (~~inject~~)

<!-- childComponent.vue -->
<template>
    <h2>childComponent</h2>
    
    <!-- 손자 컴포넌트 -->
    <grandChildComponent />
</template>

<script setup>
    import grandChildComponent from './grandChildComponent.vue';
</script>

✅ 손자 컴포넌트에서 데이터 주입 (inject)

<!-- grandChildComponent.vue -->
<template>
    <h2>grandChildComponent</h2>
    <p>receive message : {{ requestMessage }}</p>
</template>

<script setup>
    import { inject } from 'vue';

    // 부모 컴포넌트에서 provide된 데이터를 자식 컴포넌트에서 사용하지 않고 손자 컴포넌트에서 inject
    const requestMessage = inject('requestMessage');
    
</script>

✅ 결과(parentComponent.vue)

부모 컴포넌트에서 제공한 데이터를 자식 컴포넌트에서 inject 하지 않고 손자 컴포넌트에서 사용할 수 있습니다.

정리

기능	설명
provide(key, value)	부모 컴포넌트에서 데이터 제공
inject(key, defaultValue?)	자식 컴포넌트에서 데이터 주입
반응형 데이터 전달	ref 또는 reactive로 선언한 데이터를 전달 가능
함수 제공	provide로 함수를 전달하여 자식에서 실행 가능
기본값 설정	inject에서 기본값을 설정할 수 있음

[VUE] Composition API - toRef, toRefs

hojun — Wed, 26 Mar 2025 22:24:17 +0900

reactive로 만든 객체는 반응형이지만 개별 속성을 구조 분해 할당하면 반응형을 잃어버릴 수 있습니다.
이를 방지하기 위해 toRef와 toRefs를 사용하여 개별 속성을 ref로 변환할 수 있습니다.

toRef 사용 방법

toRef는 reactive 객체의 특정 속성을 ref로 변환합니다.
이렇게 하면 .value 없이 reactive 객체처럼 사용할 수 있습니다.

<template>
    <p>count : {{ count }}</p>
    <button @click="increment">증가</button>
</template>

<script setup>
    import { reactive, toRef } from 'vue';

    const state = reactive({ 
        count : 0,
        name : 'John'
    });
    
    // state.count를 개별 ref로 변환
    const count = toRef(state, 'count');

    const increment = () => {
        count.value++; // toRef를 사용했으므로 ref처럼 .value를 사용할 수 있음
    }
</script>

✅ toRef가 사용 이유

reactive 객체의 속성을 직접 구조 분해 하면 반응형이 사라짐
toRef를 사용하면 해당 속성을 ref로 유지할 수 있음

<template>
    <p>count : {{ count }}</p>
    <button @click="increment">증가</button>
</template>

<script setup>
    import { reactive, toRef } from 'vue';

    const state = reactive({ 
        count : 0
    });
    
    const count = state.count; // 반응형이 깨짐 (count는 그냥 숫자가 됨)

    const increment = () => {
        count.value++; // count의 속성이 number가 되어 .value를 사용할 수 없음
    }
</script>

toRefs 사용 방법

toRefs는 reactive 객체의 모든 속성을 ref로 변환합니다.
toRef를 여러 번 사용할 필요 없이 한 번에 변환할 수 있습니다.

<template>
    <p>이름 : {{ name }}</p>
    <p>나이 : {{ age }}</p>
    <button @click="updateAge">나이 변경</button>
</template>

<script setup>
    import { reactive, toRefs } from 'vue';

    const state = reactive({ 
        name : "John",
        age : 35
    });
    
    // state의 모든 속성을 ref로 변환
    const { name, age } = toRefs(state);

    const updateAge = () => {
        age.value = 17; // age가 toRefs로 인해 ref로 변환되어 .value 사용 가능
    }
</script>

✅ toRefs가 사용 이유

reactive 객체의 속성을 직접 구조 분해 하면 반응형이 사라짐
toRef를 사용하면 모든 속성을 ref로 유지할 수 있음

toRef, toRefs 차이점

속성	toRef	toRefs
변환 대상	특정 속성	모든 속성
반환 타입	ref (단일 값)	{ [key]: ref } (객체)
사용 사례	특정 속성만 ref로 변환할 때	reactive 객체 전체 속성을 ref로 변환할 때

[VUE] Composition API - ref, reactive

hojun — Wed, 26 Mar 2025 21:30:17 +0900

Composition API에서 ref와 reactive는 반응형 상태를 만들기 위해 사용됩니다. 두 속성은 동작 방식과 사용법에 차이가 있습니다.

ref (단일 값 또는 객체를 감싸는 반응형 래퍼)

ref는 기본 자료형(number, string, boolean 등) 또는 객체를 감싸서 반응형으로 만듭니다.

✅ ref 예제 (기본 자료형)

<template>
    <div>
        <p>count : {{ count }}</p>
        <button @click="increment">count 증가</button>
    </div>
</template>

<script setup>
    import { ref } from 'vue';

    const count = ref(0); // 숫자형 타입

    // 값 증가
    const increment = () => {
        count.value++; // .value를 사용해야 함
    }
</script>

✅ ref 예제 (객체)

<template>
    <div>
        <p>나이 : {{ user.age }}</p>
        <button @click="updateAge">나이 변경</button>
    </div>
</template>

<script setup>
    import { ref } from 'vue';

    const user = ref({
        name : 'james',
        age : 15
    })

    // 나이 변경
    const updateAge = () => {
        user.value.age = 29; // 객체 안의 속성도 반응형
    }
</script>

✅ ref 특징

.value를 사용해야 값에 접근 가능
객체를 감쌀 수도 있지만, reactive보다 덜 직관적일 수 있음

reactive (객체나 배열의 반응형 상태)

reactive는 객체와 배열을 반응형으로 만듭니다. 기본 타입(number, string, boolean 등)은 reactive로 만들 수 없습니다.

✅ reactive 예제 (객체)

<template>
    <div>
        <p>나이 : {{ user.age }}</p>
        <button @click="updateAge">나이 변경</button>
    </div>
</template>

<script setup>
    import { reactive } from 'vue';

    const user = reactive({
        name : 'James',
        age : 15
    })

    // 값 변경
    const updateAge = () => {
        user.age = 29;    // .value 필요 없음
    }
</script>

✅ reactive 예제 (배열)

<template>
    <ul>
        <li v-for="item in items" :key="item">{{ item }}</li>
    </ul>
    <button @click="addItem">추가</button>
</template>

<script setup>
    import { reactive } from 'vue';

    const items = reactive(["James", "Bob"]);

    // 값 추가
    const addItem = () => {
        items.push("Emma"); // 반응형
    }
</script>

✅ reactive 특징

.value를 사용하지 않고 직접 속성에 접근 가능
객체/배열의 속성 변경도 자동 반응형
기본 자료형(number, string, boolean 등)에는 사용할 수 없음

ref, reactive 주요 차이점

비교 항목	ref	reactive
데이터 유형	기본형(number, string, boolean 등) & 객체 가능	객체, 배열 (배열도 객체로 취급)
반응형 구조	.value 사용 필요	.value 없이 직접 접근 가능
배열 지원	가능 (ref([]))	가능 (reactive([]))
비구조화 할당	안됨 (const { count } = state는 반응형을 잃음)	안됨 (객체의 속성을 직접 구조 분해하면 반응형을 잃음)
주요 사용 사례	단일 값, 원시 타입, 간단한 상태 관리	복잡한 객체나 배열의 반응형 관리

ref vs reactive 선택 기준

✅ ref 선택

number, string, boolean 과 같은 기본형 데이터를 다룰 때
반응형 객체라도 .value 사용이 불편하지 않을 때
단순한 상태 저장 (ref(0), ref('hello') 등)

✅ reactive 선택

객체 또는 배열을 다룰 때
.value 없이 직관적으로 속성 변경을 원할 때
복잡한 상태 관리가 필요한 경우

결론

기본 데이터(number, string, boolean 등)는 ref 사용합니다.
객체/배열은 reactive를 사용하면 .value 없이 접근 가능합니다.

[VUE] Composition API - watch, watchEffect

hojun — Wed, 26 Mar 2025 18:21:13 +0900

Composition API에서 watch와 watchEffect는 반응형 데이터를 감시할 때 사용되지만, 작동 방식과 사용 목적에 차이가 있습니다.

watch (명시적인 감시 대상)

watch는 특정 반응형 변수를 감시하여 값이 변경될 때만 실행됩니다.

<template>
    <div>
        <p>count : {{ count }}</p>
        <button @click="count++">count 증가</button>
    </div>
</template>

<script setup>
    import { ref, watch } from 'vue';

    const count = ref(0);

    // count 값이 변경될 때마다 실행되는 watch
    watch(count, (newVal, oldVal) => {
        console.log(`count값이 ${oldVal}에서 ${newVal}로 변경되었습니다.`)
    })
    
</script>

✅ 출력 값

✅ button 클릭 후 출력 값

✅ button 클릭 후 콘솔

✅ 특징

count를 명시적으로 감시
값이 변경될 때만 콜백 실행
기본적으로 처음 한 번 실행되지 않음

watchEffect (자동 감지)

watchEffect는 내부에서 사용된 반응형 데이터를 자동으로 감지하여 실행됩니다.

<template>
    <div>
        <p>count : {{ count }}</p>
        <button @click="count++">count 증가</button>
    </div>
</template>

<script setup>
    import { ref, watchEffect } from 'vue';

    const count = ref(0);

    // count가 사용되었으므로 자동 감지됨
    watchEffect(() => {
        console.log(`count 값 : ${count.value}`)
    })
</script>

✅ 출력 값

✅ button 클릭 전 콘솔(컴포넌트가 마운트 될 때 watchEffect가 실행되므로 콘솔이 찍힙니다.)

✅ button 클릭 후 출력 값

✅ button 클릭 후 콘솔

✅ 특징

count를 명시적으로 지정하지 않아도 자동으로 추적
컴포넌트가 마운트될 때 즉시 실행
내부에서 사용된 반응형 변수를 모두 감지

watch, watchEffect 차이점

비교항목	watch	watchEffect
사용 목적	특정 반응형 데이터 변경 감지	관련된 반응형 데이터 자동 감지
종속성 추적 방식	감시할 변수를 명시적으로 지정	내부에서 자동으로 감지
콜백 실행 시점	값이 변경될 때 실행	즉시 실행 후, 종속된 값이 변경될 때 실행
초기 실행 여부	기본적으로 X (immediate: true 옵션 필요)	기본적으로 즉시 실행
비동기 처리	O (비동기 로직 가능)	O (비동기 로직 가능)
Deep 감지 필요 여부	deep: true 옵션 필요	자동으로 deep 감지

watch, watchEffect 선택 기준

✅ watch 선택

특정한 반응형 데이터만 감시하고 싶을 때
이전 값과 새로운 값을 비교해야 할 때
실행을 제어하고 싶을 때 (초기 실행 X)

✅ watchEffect 선택

감시할 변수를 명확히 지정하지 않고 자동으로 추적하고 싶을 때
여러 반응형 변수를 한 번에 감지하고 싶을 때
반응형 데이터가 변경될 때 즉시 효과를 적용하고 싶을 때

결론

watch는 특정 변수를 감시할 때 사용합니다.
watchEffect는 내부에서 사용된 모든 반응형 변수를 자동 감지합니다.
초기 실행이 필요한 경우 watchEffect가 더 적합합니다.
이전 값과 비교해야 하면 watch가 더 적합합니다.

[VUE] Composition API - computed, watch

hojun — Wed, 26 Mar 2025 17:25:30 +0900

computed와 watch는 반응형 데이터의 변경을 감지하고 적절한 처리를 수행할 때 유용합니다. 각각의 사용법을 설명하겠습니다.

computed (계산된 속성)

computed는 종속된 반응형 데이터가 변경될 때 자동으로 재계산되는 속성입니다. 주로 값의 캐싱과 의존성 기반 자동 업데이트가 필요할 때 사용합니다.

<template>
    <div>
        <p>가격 : {{ price }}</p>
        <p>수량 : {{ quantity }}</p>
        <p>총 가격 : {{ totalPrice }}</p>
    </div>
</template>

<script setup>
    import { ref, computed } from 'vue';

    const price = ref(10000);   // 가격
    const quantity = ref(3);    // 수량
    
    // 총 가격을 계산할 computed
    const totalPrice = computed(() => price.value * quantity.value);
</script>

✅ 출력 값

✅ 특징

종속된 반응형 값(price, quantity)이 변경될 때만 다시 계산 (캐싱 기능)
computed 값은 함수처럼 호출하지 않고 속성처럼 접근(totalPrice.value)

watch (감시자)

watch는 특정 반응형 데이터의 변화를 감지하고 특정 로직을 실행할 때 사용됩니다.

<template>
    <div>
        <p>count : {{ count }}</p>
        <button @click="count++">count 증가</button>
    </div>
</template>

<script setup>
    import { ref, watch } from 'vue';

    const count = ref(0);

    // count 값이 변경될 때마다 실행되는 watch
    watch(count, (newVal, oldVal) => {
        console.log(`count값이 ${oldVal}에서 ${newVal}로 변경되었습니다.`)
    })
    
</script>

✅ 출력 값

✅ button 클릭 후 출력 값

✅ button 클릭 후 콘솔

✅ 특징

첫 번째 인자로 감시할 반응형 데이터를 전달
두 번째 인자로 (newValue, oldValue) => { ... } 형태의 콜백 함수를 전달
반응형 데이터가 변경될 때마다 실행

computed, watch 차이점

비교항목	computed	watch
사용 목적	종속된 값이 변경될 때 자동 계산	특정 값이 변할 때 실행할 동작 수행
리턴값	계산된 값	콜백 함수 실행 (리턴값 없음)
캐싱 여부	O (같은 값이면 재계산 안 함)	X (항상 실행)
비동기 처리	X (권장되지 않음)	O (비동기 처리 가능)

결론

computed : 데이터의 변화에 따라 자동으로 계산되는 값을 생성할 때 사용합니다.
watch : 특정 데이터의 변화를 감지하여 특정 로직을 실행할 때 사용합니다.

[VUE] Option API 방식과 Composition API 방식의 차이점

hojun — Tue, 25 Mar 2025 01:25:24 +0900

옵셔널 API (Option API)

옵셔널 API는 Vue 2에서 사용되던 기본 API 스타일로, 컴포넌트의 상태와 로직을 옵션 객체를 통해 정의합니다.

예를 들어, data, methods, computed, watch 등의 옵션을 사용하여 컴포넌트를 정의합니다.

<template>
    <div>{{ message }}</div>
    <button type="button" @click="updateMessage()">button</button>
</template>

<script>
    // Option API 방식
    export default {
        data() {
        return {
            message: 'Hello, Vue2!'
        };
        },
        methods: {
        updateMessage() {
            this.message = 'updated message!';
        }
        }
    }
</script>

✅ 장점

직관적이고 간단한 구조
Vue 2와의 호환성
작은 프로젝트에서 적합

✅ 단점

대규모 애플리케이션에서 로직 분리가 어려울 수 있음
복잡한 컴포넌트에서 상태와 로직을 재사용하는 것이 불편

컴포지션 API (Composition API)

컴포지션 API는 Vue 3에서 도입된 새로운 API 스타일로, 로직을 함수로 구성하고, 이를 setup() 함수 안에서 정의합니다. ref, reactive, computed, watch와 같은 Composition API 기능을 사용하여 상태와 로직을 정의합니다.

<template>
    <div>{{ message }}</div>
    <button type="button" @click="updateMessage()">button</button>
</template>

<script>
    // Composition API 방식
    import { ref } from 'vue';

    export default {
        setup() {
            const message = ref('Hello, Vue3!');
            const updateMessage = () => {
                message.value = 'updated message!';
            };

            return { message, updateMessage};
        }
    }
</script>

✅ 장점

로직을 더 유연하고 재사용 가능하게 관리
복잡한 애플리케이션에서 코드가 잘 분리되고 유지보수 용이
setup()을 사용하여 컴포지션에 필요한 모든 상태 및 메서드를 명확하게 정의 가능

✅ 단점

처음에는 다소 복잡하게 느껴질 수 있음
Vue 2와 호환되지 않음 (Vue 3 이상에서만 사용 가능)

script setup

컴포지션 API 에서는 위와 같이 <script> 태그 안에 setup() 함수를 정의하는 방식이 아닌 <script setup>을 사용하게 되면 export default, return을 사용하지 않고 코드를 작성할 수 있어 더욱 간결합니다.

컴포넌트를 처음 가져올 때 한 번만 실행되는 일반적인 <script>와 달리, <script setup> 내부의 코드는 컴포넌트의 인스턴스가 생성될 때마다 실행합니다.

<template>
    <div>{{ message }}</div>
    <button type="button" @click="updateMessage()">button</button>
</template>

<!-- Composition API script setup 방식 -->
<script setup>
    import { ref } from 'vue';

    const message = ref('Hello, Vue3!');
    const updateMessage = () => {
        message.value = 'updated message!';
    };
</script>

결론

옵셔널 API : 간단하고 직관적인 코드 구조를 제공하지만, 복잡한 애플리케이션에서는 관리가 어려울 수 있습니다.
컴포지션 API : 더 많은 유연성과 재사용성을 제공하며, 특히 대규모 애플리케이션에서 코드의 유지보수와 확장이 용이합니다.

티스토리 소스코드 예쁘게 출력하기

hojun — Sun, 2 Feb 2025 02:51:30 +0900

1. 포스팅 시 코드블럭을 통해 코드 작성

2. 포스팅 저장 및 확인

포스팅 작성 중

※ 저장된 포스팅을 확인했을 때 작성한 코드가 아래와 같이 색깔 구분 없이 보여질 수 있습니다.

이때 티스토리 플러그인에서 Syntax Highlight 를 적용해 줘야 합니다. (아래 3, 4번 확인)

포스팅 작성 후

3. 티스토리 플로그인에서 Syntax Highlight 를 적용

1) 블로그 관리에서 '플러그인' 클릭

2) '코드 문법 강조(Syntax Highlight)' 클릭

3) 테마 선택 및 변경사항 적용

4. 포스팅 내 코드 영역 Syntax Highlight 적용 확인

Syntax Highlight 적용 이전과 다르게 테마에 맞춰 예쁘게 적용된 것을 볼 수 있습니다 :)

[JAVA] 필터(Filter)

hojun — Sun, 2 Feb 2025 01:56:36 +0900

필터란 무엇인가?

필터(Filter)는 Java Servlet API에서 제공하는 기능으로, 클라이언트 요청이 서블릿에 도달하기 전에 요청을 가로채거나, 서블릿의 응답이 클라이언트로 보내지기 전에 응답을 가로채는 역할을 합니다.
주로 다음과 같은 용도로 사용됩니다.
- 로깅(Logging): 요청과 응답을 로깅해서 추적
- 보안(Security): 인증 및 권한 부여
- 데이터 압축(Data Compression): 서버에서 클라이언트로 보내는 응답 데이터를 압축
- 요청 및 응답 인코딩: 문자 인코딩 처리

필터의 구조와 동작 원리

필터는 javax.servlet.Filter 인터페이스를 구현하여 사용합니다. 기본적으로 3개의 메서드를 구현해야 합니다.

init(FilterConfig filterConfig): 필터 초기화 메서드로, 필터가 처음 생성될 때 호출됩니다.
doFilter(ServletRequest request, ServletResponse response, FilterChain chain): 실제로 요청과 응답을 처리하는 메서드입니다. 요청이 필터를 통과할 때마다 이 메서드가 호출됩니다.
destroy(): 필터가 종료될 때 호출되는 메서드로, 리소스 정리 등을 담당합니다.

동작 흐름:

클라이언트가 요청을 보내면, 필터는 doFilter() 메서드를 통해 요청을 처리하고, 필요한 경우 FilterChain을 사용해 요청을 서블릿으로 넘기거나, 응답을 수정하여 클라이언트에게 전달할 수 있습니다.

public class MyFilter implements Filter {
    public void init(FilterConfig filterConfig) throws ServletException {
        // 초기화 코드
    }

    public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain)
            throws IOException, ServletException {
        // 요청 처리 (로깅, 보안 체크 등)
        chain.doFilter(request, response); // 서블릿으로 요청 전달
        // 응답 처리 (압축, 수정 등)
    }

    public void destroy() {
        // 정리 코드
    }
}

필터의 장점과 사용 예

장점:
- 재사용성: 필터는 여러 서블릿에서 공통적으로 사용될 수 있기 때문에 중복 코드를 줄일 수 있습니다.
- 유지보수성: 기능이 분리되어 있기 때문에 각 필터를 독립적으로 관리하고 수정할 수 있습니다.
- 효율성: 서블릿을 거치기 전에 미리 필터를 사용하여 불필요한 작업을 줄이거나, 요청을 가공하는 등의 최적화가 가능합니다.
사용 예:
- 로그 필터: 요청이 들어올 때마다 어떤 요청이 있었는지 로그를 남기는 필터를 만들어 관리할 수 있습니다.
- 인증/권한 부여 필터: 요청이 올 때마다 인증 여부를 확인하여 인증되지 않은 사용자의 접근을 차단할 수 있습니다.
- 성능 최적화 필터: 응답이 클라이언트에게 전송되기 전에 데이터 압축이나 캐시 처리 등을 통해 성능을 개선할 수 있습니다.

필터 설정 및 주의사항

필터 설정:

필터는 web.xml에 설정하거나, @WebFilter 어노테이션을 사용하여 설정할 수 있습니다.

예시 (web.xml 설정):

<filter>
    <filter-name>MyFilter</filter-name>
    <filter-class>com.example.MyFilter</filter-class>
</filter>
<filter-mapping>
    <filter-name>MyFilter</filter-name>
    <url-pattern>/example/*</url-pattern>
</filter-mapping>

예시 (어노테이션 사용):

@WebFilter("/example/*")
public class MyFilter implements Filter {
    // 필터 구현
}

주의사항:
- 필터 순서: 필터가 여러 개 있을 경우 실행 순서를 지정할 수 있으며, 순서에 따라 요청 및 응답 처리의 흐름이 달라질 수 있습니다.
- 필터 성능: 너무 많은 필터를 사용하거나, 각 필터의 처리 로직이 복잡하면 애플리케이션의 성능에 영향을 미칠 수 있습니다.

마무리

Java에서 필터는 매우 강력한 도구로, 다양한 기능을 구현하고 요청과 응답을 유연하게 처리할 수 있습니다. 이를 통해 보안, 로깅, 데이터 처리 등 여러 분야에서 효율적이고 유지보수 가능한 방법을 제공할 수 있습니다.