코린이탈출

이벤트 처리화면에서 발생한 이벤트를 처리하기 위해 v-on 디렉티브와 methods 속성을 활용클릭... 태그에 v-on:click 디렉티브를 추가하여 [클릭] 버튼을 클릭하면 clickBtn() 메서드가 실행되도록 지정함따라서 [클릭] 버튼을 클릭하면 methods 속성의 clickBtn() 메서드에 정의한 alert() 내장 API가 실행됨 클릭...v-on 디렉티브로 메서드를 호출할 때 아래와 같이 인자 값을 넘기는 방법 클릭...event 인자를 이용해 화면 요소의 돔 이벤트에 접근하는 방법HTML 태그에서 v-on:click으로 호출하는 메서드에 인자를 전달하지 않아도 clickBtn:function(event){ }와 같이event 인자를 정의하면 해당 돔 요소의 이벤트 객체에 접근할 수 있음..

뷰 템플릿이란?HTML, CSS 등의 마크업 속성과 뷰 인스턴스에서 정의한 데이터 및 로직들을 연결하여 사용자가 브라우저에서 볼 수 있는 형태의 HTML로 변환해주는 속성 template 속성- 사용자가 볼 수는 없지만 라이브러리 내부적으로 template 속성에서 정의한 마크업 + 뷰 데이터를 가상 돔 기반의 render() 함수로 변환- 변환된 render() 함수는 최종적으로 사용자가 볼 수 있게 화면을 그리는 역할- 변환 과정에서 뷰의 반응성(Reactivity)이 화면에 더해짐 템플릿 속성을 사용하는 방법1) 뷰 인스턴스의 template 속성을 활용하는 방법 : template : Hello {{ message }}2) 싱글 파일 컴포넌트 체계의 코드를 활용하는 방법 Hello {{ mess..

웹 앱의 HTTP 통신 방법HTTP : 브라우저 - 서버 간 데이터를 주고 받는 통신 프로토콜(protocol)동작방식 : 브라우저 특정 데이터를 보내달라고 요청(request) => 서버에서 응답(response)으로 데이터를 보내주는 방식 ajax : 웹 앱 HTTP 통신의 대표적인 사례. 제이쿼리의 ajax.ajax는 서버에서 받아온 데이터를 표시할 때, 화면 전체를 갱신하지 않고 화면의 일부분만 변경할 수 있게 하는 자바스크립트 기법뷰에서도 마찬가지로 ajax를 지원하기 위한 라이브러리를 제공함뷰 프레임워크의 필수 라이브러리로 관리하던 뷰 리소스와 요즘 가장 많이 사용하는 엑시오스(axios) 뷰 리소스초기 코어 팀에서 공식적으로 권하는 라이브러리였으나 2016년 말에 에반이 공식적인 지원을 중단..

라우팅이란?라우팅 : 웹 페이지 간의 이동 방법라우팅은 현대 웹 앱 형태 중 하나인 SPA(Single Page Application, 싱글 페이지 애플리케이션)에서 주로 사용함 라우팅은 화면 간의 전환이 매끄럽게 해줌, 애플리케이션의 사용자 경험을 향상시킬 수 있음라우팅으로 처리하면 화면의 깜빡거림 없이 매끄럽게 전환, 더 빠르게 화면을 조작할 수 있음 뷰, 리액트, 앵귤러 모두 라우팅 이용하여 화면 전환프론트엔드 프레임워크를 사용하지 않고 일반 HTML 파일로도 라우팅 자바스크립트 라이브러리를 이용해라우팅 방식의 페이지 이동을 구현할 수 있음뷰 라우터뷰 라우터 : 뷰에서 라우팅 기능을 구현할 수 있도록 지원하는 공식 라이브러리뷰 라우터를 이용해 뷰로 만든 페이지 간에 자유롭게 이동할 수 있음태그설명페..

컴포넌트 간 통신과 유효 범위뷰는 컴포넌트로 화면을 구성 =>  같은 웹 페이지라도 데이터를 공유할 수 없음- 컴포넌트 마다 자체적으로 고유한 유효범위를 갖기 때문- 뷰 프레임워크 내부적으로 정의된 특징- 각 컴포넌트의 유효 범위가 독립적이기 때문에 다른 컴포넌트의 값을 직접적으로 참조할 수 없음더보기앵귤러1이나 백본과 같은 초창기 자바스크립트 프레임워크에서는 한 화면을 1개의 뷰로 간주따라서 한 화면의 데이터를 해당 화면 영역 어디에서든지 호출할 수 있었음  의 cmp2Data는 100으로 값이 뜨지 않음=> 컴포넌트의 유효 범위로 인해 다른 컴포넌트의 값을 직접 접근하지 못하기 때문에 이렇게 컴포넌트 값을 참조하지 못하기 때문에 생기는 특..

컴포넌트(Component)란?조합하여 화면을 구성할 수 있는 블록(화면의 특정 영역)- 컴포넌트를 활용하면 화면을 빠르게 구조화하여 일괄적인 패턴으로 개발할 수 있음- 화면의 영역을컴포넌트로 쪼개서 재활용할 수 있는 형태로 관리하면 나중에 코드를 다시 사용하기가 훨씬 편리함- 모든 사람들이 정해진 방식대로 컴포넌트를 등록하거나 사용하게 되므로 남이 작성한 코드를 직관적으로 이해할 수 있음- 컴포넌트의 관계는 뷰에서 화면을 구성하는데 매우 중요한 역할을 함- 웹 페이지 화면을 설계할 때도 이와 같은 골격을 유지하면서 설계해야함- 컴포넌트 간의 관계는 자료구조의 트리(Tree) 모양과 유사함더보기트리란?트리란 컴퓨터 자료구조 중 하나로, 노드끼리의 연결이 부모-자식의 구조를 따름전체적인 모양이 나무와 비슷..

* 루트 컴포넌트 : 뷰 애플리케이션을 실행할 때 가장 근간이 되는 컴포넌트이자 최상위 컴포넌트를 의미함뷰 인스턴스의 정의와 속성* 뷰 인스턴스 : 뷰에서 필수적으로 생성해야하는 기본 단위 뷰 인스턴스 생성new Vue({ el: '#app', data : { message: 'Hello Vue.js!' })};el 속성 : 뷰 인스턴스가 그려질 지점data 속성 : message 값을 정의하여 화면의 {{message}} 에 연결 뷰 인스턴스 생성자new Vue()로 인스턴스를 생성할 때 Vue를 생성자라고 함Vue 생성자는 뷰 라이브러리를 로딩하고 나면 접근할 수 있음* 생성자를 사용하는 이유 : 뷰로 개발할 때 필요한 기능들을 생성자에 미리 정의해놓고 사용자가 그 기능..

1. vue.config.js 파일 module.exports = { devServer: { hot: true } }; 넣어주기. 나는 원래 defineConfig가 있어서 const { defineConfig } = require('@vue/cli-service') module.exports = defineConfig({ transpileDependencies: true, devServer: { hot: true } }) 이런 식으로 변경했다. 2. 종속성 설치하기 webpack-dev-server가 이미 설치되어있는지 모르겠지만 그냥 설치해주기~ npm install webpack-dev-server --save-dev 3. 그다음에 npm run serve 하고 실행해주기~!