본문 바로가기

전체 글592

2-2. mixin mixin이란?아래처럼 일반적인 vue 컴포넌트에서 export default 부분을 별도 자바스크립트로 만드는 것이라고 보면 된다 많이 중요하다고 생각하는 함수를 mixin 파일 javascript 파일로 만들어 놓으면, 중복적으로 component method를 만들 필요가 없어진다.     아래와 같은 사용법으로 하나로 병합해준다. (created는 created 끼리, mounted는 mounted)그리고 mixin 자바스크립트 먼저 실행된다.    ---------------전역으로 설정하기 index.jsimport axios from 'axios'export default {  methods: {    async $get(url) {      return await axios.get(url).. 2024. 9. 21.
2-1. Custom Directive v-model, v-for, v-if, v-show 이런게 vue에서 지정해놓은 default directive 이다.그런데 custom directive라고 하는 것은, Vue에서 default로 만들어 놓은 디렉티브 외에도 개발자가 추가적인 디렉티브를 만들어서 선언해서 사용할 수 있게끔 제공을 해주는 것이다.   기본 사용법1. data를 아무것도 binding 안 해도 된다.아래에서 v-focus2. 하나의 값만 binding 해도 된다.아래에서 v-color3. key-value로 여러개 넣어도 된다.아래에서 v-demotemplate>  div>    div>      label for="email" class="form-label">이메일주소label>      input type="email.. 2024. 9. 20.
1-13. provide와 inject 일반적으로 하위 컴포넌트에 값 전달할 때 아래처럼 전달한다.다만 이럴 경우 최하위 컴포넌트에서만 필요한 값인 경우, 그 모든 상위 컴포넌트에서 값을 전달만 해주는 부분을 추가해줘야 하기 때문에 복잡해진다.특정 하위 컴포넌트에서만 값이 필요한 경우 provide와 inject를 사용할 수 있다.(depth가 아무리 깊어도!!) https://vuejs.org/guide/components/provide-inject.html#prop-drilling  아래는 provide/inject 사용 예시 2024. 9. 20.
DOM, BOM DOM 자바스크립트 - 웹문서를 제어하기 위해 개발된 언어 HTML 파일을 자바스크립트로 어떻게 제어할 수 있는가? 브라우저 안에는 웹 문서를 해석할 수 있는 렌더링 엔진이 있다. 브라우저로 HTML 파일을 열게 되면 렌더링 엔진이 HTML로 작성된 문서를 한 줄 한 줄 해석한다. 해석이 끝나면 HTML 파일을 객체화 하여 자바스크립트로 접근할 수 있게 한다.-> 문서를 객체화 했다고 해서, 문서 객체 모델 (Document Object Model, DOM) 이라 한다.  Dom은 Tree 구조를 가지고 있다.   브라우저 객체 모델 (BOM, Browser Object Model) 웹 브라우저를 객체화 한 것을 말한다.객체화 한 이유는, 브라우저를 스크립트 언어로 제어하기 위해서이다. https://w.. 2024. 9. 13.