Vue.js6 EventSource 정의- 서버로부터 실시간 이벤트 스트림을 수신하는 데 사용되는 JavaScript의 기능 - 웹 페이지에서 사용자에게 실시간 업데이트를 제공하거나 서버에서 발생하는 이벤트를 수신하여 처리하도록 해줌- 서버-클라이언트 간의 단방향 통신에 주로 활용 (Ex - SSE) 특징단방향 통신: EventSource는 서버에서 클라이언트로의 단방향 통신을 지원하기 때문에 클라이언트는 서버로부터 데이터를 수신할 수 있지만 서버로 데이터를 전송할 수 없음HTTP 프로토콜 사용: EventSource는 HTTP 프로토콜을 통해 서버와 클라이언트 간의 통신을 수행하며 서버는 Content-Type이 text/event-stream으로 설정된 HTTP 응답을 보내고, 클라이언트는 이를 수신하여 이벤트 스트림을 처리합니다.이.. 2024. 5. 2. 이벤트 종류 마우스 이벤트 - click=요소에 마우스를 클릭했을 때 이벤트가 발생 - dbclick= 요소에 마우스를 더블클릭했을 때 이벤트가 발생 - mouseover= 요소에 마우스를 오버했을 때 이벤트가 발생 - mouseout= 요소에 마우스를 아웃했을 때 이벤트가 발생 - mousedown= 요소에 마우스를 눌렀을 때 이벤트가 발생 - mouseup= 요소에 마우스를 떼었을 때 이벤트가 발생 - mousemove= 요소에 마우스를 움직였을 때 이벤트가 발생 - contextmenu= context menu(마우스 오른쪽 버튼을 눌렀을 때 나오는 메뉴)가 나오기 전에 이벤트 발생 키 이벤트 - keydown= 키를 눌렀을 때 이벤트가 발생 - keyup= 키를 떼었을 때 이벤트가 발생 - keypress= .. 2024. 2. 23. v-on 수식어 이벤트 수식어 .stop - 자식 요소의 이벤트가 부모 요소의 이벤트를 호출하지 않도록 설정 Click .prevent - 페이지 새로고침 방지 ex) 입력창에 무언가를 입력한 다음 전송 버튼을 눌러도 렌더링 X Sign up .self - 자식 요소의 이벤트를 실행해도 부모 요소의 메소드 실행 X - .self를 지정한 부모 요소를 직접 실행해야지만 이벤트가 실행됨 .once - 이벤트를 실행했을 때 해당하는 메소드를 단 한번만 실행되도록 설정 - v-on의 .once가 아닌 v-once로도 적용가능 .capture - 우선순위를 무시하고 가장 먼저 실행 EX) div3 -> div2 -> div1 순서가 정상이지만 div1 -> div3 -> div2 순으로 실행 div1 div2 div3 .pass.. 2024. 2. 23. Vue 기본 문법 텍스트 보간법 - {{ }}(이중 중괄호) 를 통해 Vue에서 정의한 데이터와 html에서 정의한 데이터를 서로 바인딩하는 방법 HTML 메세지: {{ msg }} JavaScript const app = Vue.createApp({ data() { return { msg: "learn Vue" } } }); app.mount("#user-goal"); 디렉티브(Directive) - DOM 요소에 특별한 속성으로 추가되어 화면의 동적인 동작을 처리하는데 사용되는 명령어 - Vue를 통해 실행되는 모든 내장 디렉티브들은 명칭이 v-로 시작함 - 하나의 요소에 두 개의 디렉티브를 함께 사용 권장 X v-html - HTML 요소에 Vue의 data에서 정의한 변수를 동적 바인딩하여 출력할 때 사용 - XS.. 2024. 1. 23. Vue 기본 세팅 기본 세팅- npm install -g @vue/cli → Vue 설치- 안에 HTML 코드를 작성- 2024. 1. 23. Vue.js 정의 및 특징 정의 - 가상 DOM을 기반으로 하는 반응형 및 컴포넌트 기반 아키텍처를 제공하는 JavaScript 프레임워크의 한 종류 ※ DOM(Document Object Model, 문서 객체 모델) = 같은 html문서의 태그들을 JavaScript가 이용할 수 있도록 생성한 객체 모델 - HTML + CSS + JavaScript를 혼용 특징 - 가벼운 크기 - 단순하고 직관적인 문법 - Vue 앱은 HTML 코드의 한 부분만 제어할 수 있음 (자식 요소 제어 가능) - MVVM 패턴 = Model-View-ViewModel 패턴으로 데이터와 비즈니스 로직을 담당하는 Model, 사용자에게 보여지는 시각적인 요소인 View, View에 대한 상태와 동작을 정의하고 Model과의 데이터 바인딩 및 사용자 입력.. 2024. 1. 15. 이전 1 다음
