Life.Contains("Coding");

각 Vue component 인스턴스는 생성될 때 일련의 초기화 단계를 거친다. 예를 들어 데이터 관찰을 설정하고, 템플릿을 컴파일하고, 인스턴스를 DOM에 마운트하고, 데이터가 변경되면 DOM을 업데이트해야 한다. 그 과정에서 수명 주기 훅(lifecycle hooks)이라 불리는 함수도 실행하여 특정 단계에서 개발자의 의도가 담긴 코드를 추가할 수 있는 기회를 제공한다. Registering Lifecycle Hooks 예를 들어, mounted 훅은 component가 초기 렌더링 및 DOM 노드 생성이 완료된 후 코드를 실행하는 데 사용할 수 있다. export default { mounted() { console.log(`the component is now mounted.`) } } 인스턴스 ..

프론트엔드에서 form을 처리할 때 form input elements의 상태를 JavaScript의 상태와 동기화해야 하는 경우가 많다. 값 바인딩을 수동으로 연결하고 이벤트 리스너를 변경하는 것은 번거로운 작업이다. v-model 지시문은 위의 내용을 단순화하는데 도움이 된다. 또한 v-model은 , element와 같은 다양한 유형의 입력에 사용할 수 있다. 사용되는 element에 따라 자동으로 다른 DOM 속성 및 이벤트 쌍으로 확장된다. 텍스트 유형의 과 의 경우 value 속성과 input 이벤트 사용 와 의 경우, checked 속성과 change 이벤트를 사용 는 value를 속성으로 사용하고 change를 이벤트로 사용 tip. v-model은 모든 form element에서 감지되는..

승우아빠의 키친마이야르가 오픈한 지 5개월 정도가 된 것 같은데 난 벌써 네 번째 방문이다. 지난번 방문하였을 때 쯔란 갈비 리조또와 상하이 크림파스타는 너무 만족스러웠으나 내 기준 올리브유 향이 많이 나는 쌈장숙성 삼겹 튀김피자는 아쉬웠었다. 그다음으로 궁금했던 마이야르 저크 치킨을 시킬 걸 후회했었는데 결국 또 예약에 성공해버렸다. 마이야르 저크 치킨 무조건 시켜야지. 영업시간 11:30 ~ 21:00 (라스트 오더 20:30) 브레이크 타임 15:00 ~ 17:30 매주 일요일, 월요일 휴무 대표 메뉴 상하이 크림파스타 23,000원 마이야르 스테이크 36,000원 이젠 몸이 기억하는 키친마이야르의 위치. 근데 경기도민이라 그런지 대중교통 루트가 다양해서 4번 모두 서로 다른 방법으로 방문했다. 이..

Listening to Events 일반적으로 @ 기호로 사용되는 v-on 지시문은 DOM 이벤트를 수신하고 트리거 될 때 사전 정의해둔 JavaScript 코드를 실행시킨다. 'v-on:click="handler"' 또는 줄여서 '@click="handler"'와 같이 사용한다. 핸들러 값은 다음 중 하나일 수 있다. 인라인 핸들러: 이벤트가 트리거 될 때 실행되는 인라인 JavaScript(네이티브 onclick 속성과 유사) 메서드 핸들러: Component에 정의된 메서드 이름 또는 메서드를 가리키는 경로 Inline Handlers 인라인 핸들러는 일반적으로 다음과 같은 간단한 경우에 사용된다. data() { return { count: 0 } } Add 1 Count is: {{ count ..

v-for v-for 디렉티브를 사용하여 배열을 리스트로 렌더링 할 수 있다. v-for 디렉티브는 'item in items' 형식의 특수 구문이 필요하다. 여기서 items는 소스 데이터 배열이고 item은 반복되는 배열 요소의 별칭(alias)이다. data() { return { items: [{ message: 'Foo' }, { message: 'Bar' }] } } {{ item.message }} v-for 범위 내에서 템플릿 표현식은 모든 상위 범위 속성에 액세스 할 수 있다. 또한 v-for은 현재 아이템의 인덱스에 대한 선택적 두 번째 별칭(alias)도 지원한다. data() { return { parentMessage: 'Parent', items: [{ message: 'Foo'..

v-if 디렉티브 v-if는 조건부로 블록을 렌더링 하는 데 사용된다. 블록은 디렉티브 표현식이 true 값을 반환하는 경우에만 렌더링 된다. Vue is awesome! v-else 디렉티브 v-else를 사용하여 v-if에 대한 else 블록을 나타낼 수 있다. Toggle Vue is awesome! Oh no 😢 v-else element는 v-if 또는 v-if-else element 바로 뒤에 와야 한다. 바로 뒤에 오지 않는다면 인식되지 않는다. v-else-if v-else-if는 이름에서 알 수 있듯, v-if의 else if 블록 역할을 한다. 여러 번 연결되어 사용될 수 있다. A B C Not A/B/C v-else와 마찬가지로 v-else-if element는 v-if 또는 v-e..

데이터 바인딩의 일반적인 요구사항은 element의 클래스 목록과 인라인 스타일을 조작하는 것이다. 클래스와 스타일 모두 속성이므로 v-bind를 이용하여 처리할 수 있다. 표현식으로 최종 문자열을 계산하기만 하면 된다. 하지만 문자열 연결을 방해하는 것은 성가시고 오류가 발생하기 쉽기에 Vue는 v-bind가 class와 style과 함께 사용될 때 특별한 개선 사항을 제공한다. 문자열 외에도 표현식은 객체 또는 배열로 평가될 수 있다. Binding HTML Classes Binding to Objects :class(v-bind:class의 약자)에 객체를 전달하여 클래스를 동적으로 전환할 수 있다. 위 구문은 active 클래스의 존재 여부가 isActive의 값(true/false)에 따라 결정..

Basic Example 템플릿 내에서의 표현식은 매우 편리하지만 간단한 작업을 위한 것으로, 템플릿에 너무 많은 로직을 넣으면 코드가 복잡해지고 유지보수가 어려워질 수 있다. 예를 들어, 아래와 같이 중첩된 배열을 가지는 객체가 있을 때 export default { data() { return { author: { name: 'John Doe', books: [ 'Vue 2 - Advanced Guide', 'Vue 3 - Basic Guide', 'Vue 4 - The Mystery' ] } } } } 그리고 author가 이미 책을 가지고 있는지의 여부에 따라 다른 메시지를 표시하고 싶다면 Has published books: {{ author.books.length > 0 ? 'Yes' : 'N..

Declaring Reactive State Options API에서는 data 옵션을 사용하여 component의 반응 상태를 정의하며 옵션 값은 객체를 반환하는 함수여야 한다. Vue는 새 component 인스턴스를 만들 때 함수를 호출하고 반응형 시스템으로 객체를 감싸 component 인스턴스에 $data로 저장한다. 편의상 최상위 수준의 속성도 component 인스턴스를 통해 바로 노출된다. export default { data() { return { count: 1 } }, // `mounted`는 추후에 설명될 lifecycle hook mounted() { // `this`는 component 인스턴스를 나타냄 console.log(this.count) // => 1 // 데이터도 변..

이전에도 송도에 방문한 적 있었지만 센트럴파크는 2년 전에 한 번 방문해본 것이 전부였다. 워낙 공원 산책을 좋아하는 나이기에 센트럴파크가 참 맘에 들었다. 공원을 거닐다 보니 무료 전망대가 있다는 표지판을 확인해 방문하고자 하였으나 코로나로 인해 휴관이었기에 어쩔 수 없이 발을 돌려야 했다. 2년이 지난 5월, 간만에 송도에 방문하게 되었고 생각난 김에 G타워를 검색해봤더니 마침 G타워 IFEZ 홍보관이 재개관하는 당일이었다. 이건 못 참지. 바로 G타워로 향했다. 운영 시간 월~금 10:00 ~18:00 주말 및 공휴일 미운영 10인 이상 관람 시 온라인으로 예약 필 이용 요금 무료 IFEZ 홍보관에 올라가는 방법은 어렵지 않다. G타워를 로비 한 켠에 IFEZ 홍보관 관련 패널이 위치한 곳으로 들어..