✅ 변수 선언 방식 비교

✅ 사용법

ref – 단일 상태값을 다룰 때 사용한다.

ref는 숫자, 문자열, 불린과 같은 원시값을 반응형으로 만들 때 사용한다.
.value를 통해 접근하며, 가장 기본적인 상태 저장 방법이다.

import { ref } from 'vue'

const count = ref(0)
count.value++

reactive – 객체 전체를 반응형으로 관리할 때 사용한다.

reactive는 객체나 배열 전체를 반응형으로 만들고 싶을 때 사용한다. .value 없이 속성에 직접 접근할 수 있고, 구조가 있는 데이터를 다루기에 적합하다. import { reactive } from 'vue'

const user = reactive({
  id: null,
  name: '',
  email: ''
})

user.name = 'Alice'

toRef – 객체의 특정 속성만 분리해서 다뤄야 할 때 사용한다.

toRef는 reactive 객체에서 특정 속성 하나만 ref처럼 따로 뽑아 사용할 수 있게 한다. 이 방식은 해당 속성을 개별로 넘겨야 하거나, watch나 props로 연결할 때 유용하다.

import { reactive, toRef } from 'vue'

const user = reactive({ name: 'Vue' })
const name = toRef(user, 'name')

name.value = 'React'  // user.name 도 함께 바뀜

toRefs – 구조분해하면서도 반응형을 유지하고 싶을 때 사용한다.

toRefs는 reactive 객체를 구조분해할 때 반응형 연결을 유지해준다. 템플릿에서 개별 속성처럼 사용할 수 있어 컴포넌트 가독성이 좋아진다.

import { reactive, toRefs } from 'vue'

const user = reactive({ name: 'Vue', age: 3 })
const { name, age } = toRefs(user)

name.value = 'Nuxt'

🧩 Vue 3 주요 기능 비교표

🔍 각 기능 예시 코드

📦 플러그인 예시

// myPlugin.js
export default {
  install(app, options) {
    app.config.globalProperties.$sayHello = () => console.log('Hello!');
    app.provide('pluginData', options?.message || 'Default Message');
  }
}

// main.js
import myPlugin from './myPlugin';
app.use(myPlugin, { message: 'Hello from plugin!' });

🧩 컴포저블 예시

// useCounter.js
import { ref } from 'vue';

export function useCounter() {
  const count = ref(0);
  const increment = () => count.value++;
  return { count, increment };
}

// 컴포넌트 내부
const { count, increment } = useCounter();

🔗 Provide / Inject 예시

<!-- ParentComponent.vue -->
<script setup>
import { provide } from 'vue';
provide('message', 'Hello from parent!');
</script>

<!-- ChildComponent.vue -->
<script setup>
import { inject } from 'vue';
const message = inject('message');
</script>

<template>
  <div>{{ message }}</div>
</template>

🎯 커스텀 디렉티브 예시

// directives/v-focus.js
export default {
  mounted(el) {
    el.focus();
  }
}

// main.js
import vFocus from './directives/v-focus';
app.directive('focus', vFocus);

// inputComponent.vue
<!-- 사용 -->
<input v-focus />

🔌 실무에서 자주 쓰는 플러그인 활용 예

Vue 플러그인은 전역 기능을 설정하거나 앱 전체에서 반복되는 로직을 쉽게 공유할 수 있어요.
아래는 실무에서 provide/inject 방식으로 많이 사용하는 전형적인 예시입니다:

📦 $api 플러그인

// plugins/api.js
export default {
  install(app, options) {
    const api = {
      getUser() {
        return fetch(`${options.baseUrl}/user`).then(res => res.json())
      },
      getPosts() {
        return fetch(`${options.baseUrl}/posts`).then(res => res.json())
      }
    }

    app.provide('$api', api)
  }
}

🔐 $auth 플러그인

// plugins/auth.js
export default {
  install(app) {
    const auth = {
      isLoggedIn: () => !!localStorage.getItem('token'),
      getToken: () => localStorage.getItem('token'),
      login(token) {
        localStorage.setItem('token', token)
      },
      logout() {
        localStorage.removeItem('token')
      }
    }

    app.provide('$auth', auth)
  }
}

🧾 $logger 플러그인

// plugins/logger.js
export default {
  install(app) {
    const logger = {
      log: (...args) => console.log('[LOG]', ...args),
      warn: (...args) => console.warn('[WARN]', ...args),
      error: (...args) => console.error('[ERROR]', ...args)
    }

    app.provide('$logger', logger)
  }
}

🛎️ $toast 플러그인 (예: 간단한 alert 기반)

// plugins/toast.js
export default {
  install(app) {
    const toast = {
      success: (msg) => alert(`✅ Success: ${msg}`),
      error: (msg) => alert(`❌ Error: ${msg}`)
    }

    app.provide('$toast', toast)
  }
}

🧩 main.js에서 등록하기

import { createApp } from 'vue'
import App from './App.vue'

import apiPlugin from './plugins/api'
import authPlugin from './plugins/auth'
import loggerPlugin from './plugins/logger'
import toastPlugin from './plugins/toast'

const app = createApp(App)

app.use(apiPlugin, { baseUrl: 'https://jsonplaceholder.typicode.com' })
app.use(authPlugin)
app.use(loggerPlugin)
app.use(toastPlugin)

app.mount('#app')

✅ 컴포넌트에서 사용 예시

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

const $api = inject('$api')
const $auth = inject('$auth')
const $logger = inject('$logger')
const $toast = inject('$toast')

// 예시 사용
onMounted(async () => {
  if ($auth.isLoggedIn()) {
    const user = await $api.getUser()
    $logger.log('User loaded:', user)
    $toast.success('사용자 정보를 불러왔습니다!')
  } else {
    $toast.error('로그인이 필요합니다.')
  }
})
</script>

💡 app.provide()를 활용한 플러그인은 Composition API와 궁합이 좋고,
inject()로 필요한 곳에서만 선택적으로 사용할 수 있어 유지보수가 편해요.

1. Proxy란?

Proxy는 객체를 감싸(wrap) 특정 동작을 가로채고 수정할 수 있도록 해주는 기능입니다.

const proxy = new Proxy(target, handler);

• target: 감싸고자 하는 원본 객체
• handler: 가로채고 싶은 동작을 정의하는 객체 (트랩(trap) 메서드 포함)

handler 객체에는 다양한 트랩(trap)이 존재하며, 이를 활용하여 객체의 동작을 제어할 수 있습니다.

2. 기본 예제: 객체 속성 가로채기

const person = { name: "Alice", age: 25 };

const handler = {
  get(target, property) {
    console.log(`'${property}' 속성을 읽으려 합니다.`);
    return target[property];
  },
};

const proxyPerson = new Proxy(person, handler);

console.log(proxyPerson.name);  // 'name' 속성을 읽으려 합니다. → Alice
console.log(proxyPerson.age);   // 'age' 속성을 읽으려 합니다. → 25

3. 예제: 값 검증 (유효성 검사)

const validator = {
  set(target, property, value) {
    if (property === "age" && (typeof value !== "number" || value < 0)) {
      throw new Error("나이는 0 이상의 숫자여야 합니다.");
    }
    target[property] = value;
    return true;
  }
};

const user = new Proxy({}, validator);
user.age = 30;  // 정상 동작
console.log(user.age); // 30

user.age = -5; // Error: 나이는 0 이상의 숫자여야 합니다.

4. 예제: 동적 속성 기본값 설정

const defaultHandler = {
  get(target, property) {
    return property in target ? target[property] : "값이 없습니다";
  }
};

const user = new Proxy({}, defaultHandler);
console.log(user.name); // "값이 없습니다"
user.name = "Charlie";
console.log(user.name); // "Charlie"

5. 예제: 함수 호출 가로채기

const logger = {
  apply(target, thisArg, args) {
    console.log(`함수 실행: ${target.name}(${args})`);
    return target.apply(thisArg, args);
  }
};

function sum(a, b) {
  return a + b;
}

const proxySum = new Proxy(sum, logger);
console.log(proxySum(5, 3));  // "함수 실행: sum(5,3)" → 8

6. Proxy의 주요 트랩(trap) 목록

결론

Proxy는 객체의 동작을 가로채어 유효성 검사, 기본값 제공, 함수 호출 로깅 등 다양한 활용이 가능합니다. 이를 이용하면 객체를 더욱 강력하고 유연하게 제어할 수 있습니다. 🚀

Vite는 빠른 개발 서버와 최적화된 빌드 시스템을 제공하는 차세대 프론트엔드 빌드 도구입니다. 기존의 Webpack과 같은 번들러의 단점을 개선하며, 특히 Vue, React 같은 최신 프레임워크와 잘 어울립니다.

Vite는 esbuild를 활용하여 개발 서버 속도를 극대화하고, Rollup을 이용한 최적화된 빌드를 제공합니다.

2. Vite의 주요 기능

✅ 빠른 개발 서버

Vite는 기존 번들링 방식이 아닌 ES 모듈(ESM) 기반의 즉시 제공(Serve on Demand) 방식을 사용하여 개발 서버를 빠르게 실행합니다.

✅ HMR(Hot Module Replacement) 성능 향상

Vite는 모듈 단위로 변경 사항을 반영하여 HMR 속도를 극대화하며, 큰 프로젝트에서도 빠르게 적용됩니다.

✅ 빌드 최적화 (Rollup 기반 번들링)

Vite는 Rollup을 사용하여 프로덕션 빌드를 진행하며, 트리 쉐이킹(Tree Shaking)과 코드 스플리팅(Code Splitting) 같은 최적화를 자동으로 수행합니다.

✅ 플러그인 시스템 지원

Vite는 플러그인 API를 제공하며, 기존의 Rollup 플러그인을 그대로 사용할 수 있습니다.

✅ 다양한 프레임워크 지원

Vue, React, Svelte 등 다양한 프레임워크를 공식적으로 지원하며, Vue의 경우 vue-plugin을 제공하여 편리한 개발 환경을 제공합니다.

3. Vite와 Webpack 비교

4. Vite의 동작 방식

🚀 기존 번들러(Webpack)의 문제점

Webpack과 같은 기존 번들러는 모든 파일을 번들링한 후 브라우저에 제공하는 방식으로 동작합니다. 프로젝트가 커질수록 초기 빌드 시간이 증가하며, 개발 서버 속도가 느려지는 단점이 있습니다.

⚡ Vite의 즉시 제공 방식 (ESM 기반)

Vite는 개발 서버 실행 시 파일을 미리 번들링하지 않고, 요청이 들어오면 즉시 변환하여 제공하는 방식을 사용합니다.

1. JS 모듈을 직접 브라우저에서 로드
   • import 문을 통해 개별 파일을 불러오고, 필요할 때만 변환하여 제공
2. 변경된 모듈만 갱신
   • 전체 애플리케이션을 다시 빌드하지 않고, 수정된 부분만 즉시 반영

이 방식 덕분에 서버 시작이 빠르고, 코드 변경 시 즉각적인 반응이 가능합니다.

5. Rollup이란?

Rollup은 JavaScript 모듈을 번들링하는 도구로, Vite의 프로덕션 빌드에서 사용됩니다. 트리 쉐이킹(Tree Shaking)과 코드 스플리팅(Code Splitting) 등의 기능을 제공하여 최적화된 번들 파일을 생성합니다.

Rollup은 단독으로 사용할 수도 있으며, Vite의 내부 빌드 시스템으로 동작합니다.

6. Vite가 필요한 이유

1️⃣ 빠른 개발 환경 구축

Vite는 개발 서버 실행 속도가 빠르고, 코드 변경 시 실시간 반영(HMR)이 원활하여 개발 경험을 향상시킵니다.

2️⃣ 대규모 프로젝트에서도 뛰어난 성능

Webpack 기반 프로젝트에서는 코드가 많아질수록 빌드 시간이 길어지지만, Vite는 ES 모듈을 활용한 방식으로 이러한 성능 저하를 방지합니다.

3️⃣ 최적화된 프로덕션 빌드

Rollup을 기반으로 빌드를 수행하며, 코드 스플리팅 및 트리 쉐이킹 등의 최적화 기능이 기본적으로 적용됩니다.

4️⃣ Vue 3와의 강력한 호환성

Vite는 Vue 3의 공식 개발 환경으로 권장되며, @vitejs/plugin-vue 플러그인을 사용하면 SFC(Single File Component)도 원활하게 처리할 수 있습니다.

이번 글에서는 두 방식의 실행 모델을 심층적으로 분석하여, 왜 require()는 동기적이고 import는 비동기적인지를 설명하겠습니다.

📌 CommonJS(require)와 동기적 로딩

CommonJS의 require()는 호출 시점에서 해당 모듈을 즉시 로드하고 평가를 완료할 때까지 실행을 블로킹합니다. 따라서 코드 실행 흐름을 멈추고 모듈의 모든 내용을 읽고 실행한 후에야 다음 코드가 실행됩니다.

✅ require() 실행 모델 예제

console.log("Before require");

const message = require("./module.js"); // <- 파일을 읽고 실행이 끝날 때까지 대기 (Blocking)

console.log("After require");

📌 실행 흐름

Before require
(module.js 실행 내용)
After require

✅ "Before require"가 출력된 후, require("./module.js")가 실행됩니다. ✅ module.js의 로딩과 실행이 완료될 때까지 블로킹되며, 그 이후 "After require"가 출력됩니다.

📌 require()는 동기적 실행 모델을 따르며, 모듈 로드가 완료될 때까지 실행 흐름을 멈춘다.

📌 ECMAScript Modules(ESM)과 비동기적 로딩

ESM(ECMAScript Modules)의 import는 비동기적으로 실행되며, 모듈을 병렬로 가져옵니다. 즉, import는 블로킹 없이 모듈을 로드하고, 이후 실행 흐름을 유지하면서 로드 완료 후 평가됩니다.

✅ import 실행 모델 예제

console.log("Before import");

import("./module.js").then(() => {
  console.log("Module loaded");
});

console.log("After import");

📌 실행 흐름

Before import
After import
(module.js 실행 내용)
Module loaded

✅ "Before import"가 출력됨 ✅ import("./module.js")는 비동기적으로 실행되므로 즉시 다음 코드("After import")가 실행됨 ✅ module.js가 로드된 후 "Module loaded"가 출력됨

📌 import는 실행 흐름을 블로킹하지 않고, 모듈을 병렬로 가져오면서 필요할 때 평가된다.

🎯 require() vs import 비교 분석

✅ Vite가 ESM을 활용하는 이유 Vite는 require()처럼 모든 파일을 한 번에 로드하는 방식이 아니라, 브라우저의 ESM 기능을 활용하여 필요한 모듈만 비동기적으로 가져오기 때문에 빠른 개발 환경을 제공한다. 🚀

💡 결론

• require()는 동기적(Synchronous) 실행 모델을 따르며, 모듈이 로드될 때까지 실행 흐름을 멈춘다.
• import는 비동기적(Asynchronous) 실행 모델을 따르며, 모듈이 로드되는 동안 다른 코드가 실행될 수 있다.
• Vite와 같은 현대적인 빌드 도구는 ESM을 활용하여 개발 속도를 최적화한다.

고급 개발자로서 효율적인 모듈 로딩을 고려할 때, 어떤 환경에서 어떤 모듈 시스템을 사용할지 깊이 이해하는 것이 필수적입니다. 😊

문제 상황

Webpack 4.0의 devServer를 사용하여 로컬 개발 환경에서 프록시를 설정하고 외부 API(예: https://alpha.com)를 호출하려 할 때, 302 Redirect Error가 발생하는 문제가 있었습니다.

Webpack DevServer 설정

configs.devServer = {
    host: '0.0.0.0',
    port: 3000,
    hot: true,
    historyApiFallback: true,
    allowedHosts: ['all'],
    proxy: {
      '/api': {
        target: 'https://alpha.com',
        changeOrigin: true,
        secure: false,
        headers: {
          Cookie: 'cid=123'
        }
      }
    }
}

이 설정을 적용하기 전에는 API 요청 시 302 에러가 발생하여 정상적으로 데이터를 가져올 수 없었습니다. 하지만 allowedHosts: ['all'] 옵션을 추가한 후 문제없이 API 호출이 이루어졌습니다.

allowedHosts 옵션이 해결책이 된 이유

Webpack DevServer의 allowedHosts란?

allowedHosts는 Webpack DevServer의 보안 정책(CORS, Same-Origin Policy)과 관련된 설정입니다.

기본적으로 Webpack DevServer는 Host Header 검사를 수행하여, 예상하지 못한 도메인에서 접근하는 것을 방지합니다. 예를 들어, localhost:3000에서 실행 중인데 alpha.com의 API를 호출하면 Webpack DevServer가 이를 차단할 수 있습니다.

allowedHosts의 동작 방식

• 기본값: undefined

  • Webpack DevServer는 localhost 또는 127.0.0.1 같은 기본적인 호스트에서만 요청을 허용합니다.

• 특정 도메인을 허용하는 경우:

  allowedHosts: ['alpha.com', 'beta.com']

  • alpha.com, beta.com에서의 요청만 허용합니다.

• 모든 호스트를 허용하는 경우:

  allowedHosts: ['all']

  • 어떠한 도메인에서 접근하더라도 요청을 허용합니다.

302 Redirect 오류의 원인

302 오류는 리디렉션 발생을 의미하며, 여러 원인이 있을 수 있지만 이번 경우에는 Webpack DevServer가 Host Header를 검증하는 과정에서 문제가 발생한 것으로 보입니다.

• allowedHosts가 설정되지 않으면 Webpack DevServer가 Host Header를 검사하고, 프록시 요청을 정상적으로 처리하지 못할 수 있습니다.
• 이때, 브라우저가 302 Redirect를 수행하여 다른 경로로 리디렉션하거나 요청을 차단할 수 있습니다.

allowedHosts: ['all']을 설정하면 Webpack DevServer가 모든 도메인을 신뢰하도록 설정되므로, 프록시 요청이 정상적으로 이루어지고 API 호출이 성공하게 됩니다.

쿠키 설정 방법

Alpha 서버에 정상적으로 로그인한 후, 개발자 도구(F12)를 열고 네트워크 탭에서 요청에 포함된 Cookie 값을 확인합니다. 해당 쿠키 값을 복사한 후, Webpack DevServer의 프록시 설정에서 headers 옵션에 추가하면 됩니다.

예를 들어, cid=12345라는 쿠키 값이 있다면 다음과 같이 설정할 수 있습니다:

headers: {
  Cookie: 'cid=12345'
}

이 방법을 사용하면 Webpack DevServer의 프록시를 통해 Alpha 서버에 인증된 상태로 API를 요청할 수 있습니다.

결론

Webpack DevServer에서 외부 API 호출 시 302 Redirect Error가 발생한다면 allowedHosts: ['all'] 설정을 추가하여 문제를 해결할 수 있습니다. 하지만, 보안상 위험할 수 있으므로 로컬환경에서 개발 및 테스트를 하는 경우에만 사용하는 것이 좋습니다.