# directive

jonghunbok

제 블로그에선 주석도 함께 볼 수 있습니다! Vue의 장점 중 하나는 사용하기 쉽다는 것이다.최근 Vue 2를 쓰다가 Vue 3를 이용해 개발을 하는데, Vue 2보다는 반응성 시스템에 대해 더 깊은 이해를 요구하지만 여전히 내부 동작 기작을 이해하지 않아도 적당히 넘어갈 수 있을만큼 진입장벽이 낮다고 느껴진다. 이런 사용성은 비숙련자도 빠른 개발을 할 수 있게 해주지만, Vue에서 제공하는 기능을 적극적으로 학습하지 않게 하는 요인이 되기도 하는 것 같다.학습이 강요되지 않으니, 이미 익숙해진 기능에만 의존하는 경우도 생긴다. 업무 도중에 디렉티브를 사용하면 좋을 것 같은 기능을 만나,디렉티브에 대해 조사를 하면서 조금은 더 Vue에 대해 이해하게 되어 그 내용을 남긴다. > ### Vue Directive의 어원 > > ![dir

jujuclub

Vue 단일 파일 컴포넌트 기반의 프레임워크다. 웹의 view를 구성하는 요소인 HTML, CSS, JavaScript 코드를 .vue 확장자를 가진 하나의 파일에 모두 정의하는 방식으로 적당한 규모의 프로젝트에서 관리의 생산성을 높이고, 협업이 쉬운 것으로 알려져 있다. 뷰 인스턴스(Instance)는 뷰로 화면을 개발하기 위해 필수적으로 생성해야하는 기본 단위이며 new Vue()를 사용하여 뷰 객체를 생성한다. React에 비해 가볍고 빠르게 개발이 필요한 경우 선호 컴포넌트 기반의 웹 프로그래밍 가능 선언적 렌더링 (HTML 확장), JS상태 변경을 virtual Dom으로 효율적 관리가

moon-tree

◆ JSP 주석 1) `` JSP주석 이 주석은 서버 실행 시점에서 사라지므로 사용자는 볼 수 없습니다. 2) HTML주석 이 주석은 클라이언트(사용자)에게 전달 됩니다. 자동 주석 단축키 : Ctrl + Shift + c ◆ Directive 1) 페이지의 기본 설정을 위한 코드 `` 형태로 작성 language="java"는 이 페이지에서 사용 가능한 언어를 설정(Java만 가능) contentType은 사용자가 받게 될 완성품의 형태와 인코딩 방식을 설정 text/html 을 MIME-TYPE이라고 부른다(대분류/세분류) charset은 사용자가 받게될 글자의 표현 방식을 말한다 pageEncoding은 서버에서 이 페이지를 제작할 때 사용할 글자 표현 방식 ◆ HTML HyperText Markup Language 하이퍼텍스트

bluetuna1101

드롭다운 메뉴 개발중, 밖을 눌러도 꺼지게 하는 필요성을 느껴 제작

completed1991

v-if 사용 v-show v-if, v-show 차이점 v-if는 dom구조 자체를 변경 -> dom구성을 전부 하지않음. 조건에 맞는것만 (lazy 함) -> 즉, 초기비용이 크지 않음 -> 조건이 바뀔때 dom구조를 바꾸므로 렌더링 비용이 큼 -> **변경이 자주 일어나지 않는

completed1991

array 배열[] v-for="값, 인덱스 in 배열" key="" object 객체{} 둘다 표현 가능하다. v-for="값, 키 in 객체" key=""

holicme7

1. v-text, v-html 디렉티브 v-text , {{ }} innerText 속성에 연결됨. 태그 문자열을 HTML 인코딩하여 나타내기 때문에 화면에는 태그 문자열이 그대로 나타남. v-html innerHtml 속성에 연결됨. 태그 문자열을 파싱하여 화면에 나타냄. XSS 공격 등에 취약하여 꼭 필요한 경우가 아니면 v-text 를 사용하는걸 추천. 2. v-bind 디렉티브 Element의 콘텐츠 영역(시작태그와 종료태그 사이의 영역)을 설정하는 것이 아닌 요소 객체의 속성들을 바인딩하기 위해 사용 아래처럼 v-bind:src에서 v-bind를 생략하고 :src 와 같이 작성해도 됨. 3. v-model 디렉티브 1,2 번의 디렉티브들은 모두 단방향 디렉티브이다. HTML 요소에서 값을 변경하더라도 모델 객체의 값이 바뀌지 않는다. 화면에서 변경한 값이 모델 객체에 반

coral2cola

Two Pass Assembly 대부분의 어셈블러는 source file을 두 번 읽는다. 1. First pass : symbol table을 만든다. 각 symbol에 대해 second pass에서 사용할 value를 계산하고 기록한다 symbols : global variables, functions, labels values : addresses(symbol의 location), data printf는 symbol인건 알겠는데 코드만으로는 뭔지 알 수가 없다. 라이브러리에 정의되어있기 때문임. 어셈블리 파일에 definition이 존재하지 않아서 resolve할 수 없고 value를 생성해낼 수 없음. 하지만 linking의 과정을 수행하면 그 때에 l

ohmy0418

컴포넌트 구조로 작성하기 컴포넌트 시스템은 vue의 중요한 개념 중 하나로, 작고 독립적이며 재사용할 수 있는 컴포넌트로 구성된 대규모 애플리케이션을 구축할 수 있게 해주는 추상적인 개념이다. vue에서 component는 미리 정의된 옵션을 가지고 있는 vue 인스턴스다. 대규모 애플리케이션에서는 개발을 보다 쉽게 관리할 수 있도록 전체 앱을 component 단위로 나누는 것이 필수적이다. vue 인스턴스 vue에서 지원하는 API 모든 vue 앱은 vue함수로 새 vue 인스턴스를 만드는 것부터 시작한다. vue 인스턴스를 생성할 때 options 객체를 전달해야 한다. 이 옵션을 사용해서 원하는 다양한 동적 이벤트를 구현할 수 있다. vue 앱은 new Vue를 통해 만들어진 Root Vue Instance로 구성되며 선택적으로 중첩이 가능하고, 재사용이 가

zeesoo

1. HTML/JS Tag 1-1. view > 리스트, 테이블 구성을 이야기 함 1-2. 요청하기 (request) > - Anchor <table class="colorscripter-code-table" style="margin:0;padding:0;border:none;background-color:#fafafa;border-radius:4px;" cellspacing="0"

noyo0123

출처: https://www.edureka.co/blog/angular-directive/ Angular Essentials 디렉티브 정리 Directives ( built-in, attribute, structural ) 에서 attribute 디렉티브1 HTML attribute 처럼 HTML 요소, 컴포넌트에 특정 속성을 추가할 수 있다. 마치 attribute 처럼! 어떻게 사용하나? textBlue directive textBlue 라는 디렉티브를 써서 p태그 안 텍스트 컬러를 blue로 만들거에요. app.component.ts 어떻게 만들어짐? text-blue.directive.ts 파일을 생성합니다. 사용하려는 모듈이 존재하는 디렉토

supermoony

웹 프론트엔드 개발을 하다 보면, IntersectionObserver Web API를 활용하여 다양한 기능들을 구현하곤 한다. Infinite scroll, Lazy Loading, Advertisement, Analytics 등 수많은 곳에서 활용이 가능하다. 위의 기능들은 모두 scrollEvent를 활용하여 구현되어왔었다. 그러나 IntersectionObserver가 발표되고 대부분의 브라우저에서 사용 가능하게 되면서 이제는 반드시 알아야 할 API가 되었다. 2020년 3월 현재 기준 대부분의 PC와 모바일 브라우저에서 지원하며(IE 미지원), polyfill를 제공하기 때문에, 크로스 브라우징에 대한 걱정이 없다. [IntersectionObserver에 대해 자세하게 다룬 포

kay

1. Vue project 만들기 뷰가 설치되어 있지 않다면 설치합니다. $ yarn global add @vue/cli $ vue create vue-lazy-loading $ cd vue-lazy-loading 서버 실행 $ yarn serve or npm run serve 스크린샷 2019-08-29 오후 11.43.31.png 2. 이미지 리스트 컴포넌트 생성 ImageList.vue 생성 ImageItem.vue 생성 기본 세팅 Code 보기 App.vue