프론트엔드/Vue
-
웹소켓과 devServer 설정 (Vue 3 기준)프론트엔드/Vue 2024. 5. 23. 18:52
웹소켓과 devServer 설정 (Vue 3 기준)웹소켓 (WebSocket)웹소켓은 클라이언트와 서버 간의 전이중 통신 채널을 제공하는 프로토콜입니다. HTTP와 달리, 웹소켓 연결은 초기 요청 후에 연결을 유지하며, 양방향 데이터 전송을 가능하게 합니다. 이는 실시간 애플리케이션(예: 채팅, 실시간 피드 업데이트 등)에 유용합니다.웹소켓 설정 예시 (Vue 3 + Socket.IO)클라이언트 측 (Vue 3 + Socket.IO)// main.jsimport { createApp } from 'vue';import App from './App.vue';import router from './routes';import { io } from 'socket.io-client';import SocketIO ..
-
Vue 3에서 컴포넌트 내에서 사용할 수 있는 다양한 옵션 및 메서드프론트엔드/Vue 2024. 5. 14. 22:22
Vue 3에서 컴포넌트 내에서 사용할 수 있는 다양한 옵션 및 메서드Vue 3에서는 Composition API와 Options API를 모두 지원하며, 여기서는 주로 Options API를 중심으로 설명하겠습니다. 1. data : 컴포넌트의 상태를 정의하는 데 사용됩니다. 객체를 반환하는 함수로 정의됩니다.export default { data() { return { message: 'Hello, Vue 3!' }; }}; 2. methods : 컴포넌트 내에서 사용할 메서드를 정의합니다. 주로 이벤트 핸들러로 사용됩니다.export default { data() { return { count: 0 }; }, methods: { increment(..