본문 바로가기

분류 전체보기49

VUE 데이터 바인딩 데이터 바인딩(Data Binding)은 HTML 화면 요소를 뷰 인스턴스의 데이터와 연결하는 것을 의미합니다. 주요 문법으로는 {{ }} 문법과 v-bind 속성이 있습니다. {{ }} - 콧수염 괄호 {{ }}는 뷰 인스턴스의 데이터를 HTML 태그에 연결하는 가장 기본적인 텍스트 삽입 방식입니다. {{ }}는 모양이 콧수염과 비슷하다고 하여 콧수염 괄호라고 부릅니다. 뷰뿐만 아니라 다른 언어나 프레임워크에서도 자주 사용되는 템플릿 문법(template syntax)입니다. 앞의 예제에서 계속 다뤘기 때문에 많이 익숙하겠지만 간단히 형식을 정리하면 다음과 같습니다. 아래 코드는 data 속성의 message 속성 값인 Hello Vue.js!를 태그 안의 {{ message }}에 연결하여 화면에 나.. 2024. 1. 21.
VUE 템플릿(Template) 뷰 템플릿이란? 뷰의 템플릿(Template)은 HTML, CSS 등의 마크업 속성과 뷰 인스턴스에서 정의한 데이터 및 로직들을 연결하여 사용자가 브라우저에서 볼 수 있는 형태의 HTML로 변환해 주는 속성입니다. 템플릿 속성을 사용하는 방법은 두 가지로, 첫 번째는 ES5에서 뷰 인스턴스의 template 속성을 활용하는 방법입니다. 지금까지 예제에서 주로 사용한 t e m p l a t e: H e l l o {{message}}와 같은 코드가 템플릿을 의미합니다. ES5에서 template 속성 여기서 템플릿 속성에 대해 한 가지 알아둘 특징이 있습니다. 사용자가 볼 수는 없지만 라이브러리 내부적으로 template 속성에서 정의한 마크업 + 뷰 데이터를 가상 돔 기반의 render() 함수로 변환.. 2024. 1. 21.
VUE HTTP 통신 웹 앱의 HTTP 통신 방법 요즈음 웹 앱에서 서버에 데이터를 요청하는 HTTP(HyperText Transfer Protocol) 통신은 필수로 구현해야 하는 기능입니다. 과거의 웹 사이트가 정적인 텍스트나 간단한 이미지를 나타내는 데 그쳤다면 이제는 사용자와의 상호 작용에 따라 데이터를 동적으로 화면에 표시해 줘야 하기 때문입니다. 여기서 HTTP는 브라우저와 서버 간에 데이터를 주고받는 통신 프로토콜(protocol)입니다. 브라우저에서 특정 데이터를 보내달라고 요청(request)을 보내면 서버에서 응답(response)으로 해당 데이터를 보내주는 방식으로 동작합니다. 서버에 ‘해당 데이터를 보내주세요.’라는 메시지를 보내는 게 바로 ‘HTTP 요청을 보낸다’와 같은 의미입니다. 웹 앱 HTTP .. 2024. 1. 20.
vue 라이프 사이클에 대하여 beforeCreate 인스턴스가 생성되고 나서 가장 처음으로 실행되는 라이프 사이클 단계입니다. 이 단계에서는 data 속성과 methods 속성이 아직 인스턴스에 정의되어 있지 않고, 돔과 같은 화면 요소에도 접근할 수 없습니다. created beforeCreate 라이프 사이클 단계 다음에 실행되는 단계입니다. data 속성과 methods 속성이 정의되었기 때문에 this.data 또는 this.fetchData()와 같은 로직들을 이용하여 data 속성과 methods 속성에 정의된 값에 접근하여 로직을 실행할 수 있습니다. 다만, 아직 인스턴스가 화면 요소에 부착되기 전이기 때문에 template 속성에 정의된 돔 요소로 접근할 수 없습니다. 그리고 data 속성과 methods 속성에 접근.. 2024. 1. 14.

티스토리툴바