Leon's Lab

데이터 바인딩 부모 컴포넌트에서 자식 컴포넌트를 사용하려면, 데이터를 전달하거나 전달 받아야 합니다.  vue3.3 이후 버전에서는 defineModel 기능이 지원되는데 이걸 사용하면 양방향 바인딩이 됩니다. 자식 코드  부모코드 Change Data 이렇게 하면 부모쪽에서 changeData 함수를 호출하면 항상 자식 컴포넌트에 반영되는걸 알 수 있다. 전통적인 데이터 바인딩 지금까지도 자주 사용하는 방법은 prop과 emit을 이용하는 방법입니다.  prop은 부모에서 자식으로 데이터 전달하는 단방향이고, emit은 자식에서 부모에 이벤트 트리거를 단방향으로 하는거라서 양방향 바인딩하려면 조금 복잡합니다.  그리고 무엇보다 부모의 데이터의 반응성을 자식에서도 계속 유지..

CORS(Cross Origin Resource Sharing) 에러라고?프런트엔드, 백엔드 따로 개발하다보면 프런트엔드 개발자들이 주로 보는 에러메시지 중 하나입니다. 웹브라우저의 특수성우리가 사용하는 웹브라우저(IExpoler, Chrome 등등)는 굉장히 편리하게 많은 일을 처리할 수 있게 도와줍니다.인터넷뱅킹, 쇼핑, 예약, 민원처리 등등 너무 편한게 많이 있습니다.그런데 웹브라우저라는 하나의 Application을 통해서 이루어지므로, 이 안에서 수많은 인터넷 사기도 많아지게 됩니다.사기꾼들이 웹개발만 알게 되면, 정말 무궁무진한 창조경제가 탄생하기 때문에 일반 인터넷 사용자들은 인터넷 사기에서 자유로울 수 없습니다.따라서 웹브라우저를 개발하는 회사들은 이러한 웹의 취약점을 잘 파악해서 문제가 ..

향후 수정 필요  아래 이라는 태그를 사용하면 그 부분을 외부에서 만든 html로 치환이 가능하다. 아래의 예시는 Button에서 Label을 외부에서 변경하는 간단한 예시이다.   위에서 만든 BaseButton 컴포넌트의 slot 부분을 변경하려면, 사용하는 vue에서 으로 입력하면 BaseButton의 부분이 치환이 된다. Click me! import BaseButton from './BaseButton.vue';

// myPage.vue// about 페이지로 이동하는 코드

Vue 컴포넌트의 생명 주기란? Vue 컴포넌트는 생성, 실행, 소멸에 대한 생명주기가 미리 정해져있고, 개발자는 해당 타이밍에 콜백함수를 호출하여 로직을 추가 할수 있다. onMounted() 콜백 컴포넌트가 마운트 된 후에 호출되는 함수로 가장 많이 사용되는 생명주기 콜백 함수 Vue 공식 문서에 나온 자세한 생명주기 설명 https://ko.vuejs.org/api/composition-api-lifecycle

Text 파일을 하나 열어서 해당 파일의 내용을 log로 출력하는 내용입니다.

ref : 객체에 대한 반응성(reactive)을 가지게 됩니다. isRef : 주어진 값이 ref 객체인지 확인합니다. unref : "val = isRef(val) ? val.value : val"를 수행하는 편의 함수 watchEffect : 반응적으로 종속성을 추적하는 동안에 함수를 즉시 실행하고 종속성이 변경 될 때마다 다시 실행합니다. html 속성중 ref 속성에 관하여 vue component에서 html 요소에 직접 접근하고자 할 경우(자주 있는 경우는 아니지만 필요할때 사용함) ex. methods: { focusInput() { this.$refs.input.focus() # 여거서 Html 요소 직접 사용 } } ES6 구조분해할당 구조 분해 할당이 일어나면 반응성이 사라지므로 주의

개발툴 VS Code 추천 플러그인 - vue(jcbuisson) : Vue문법 확인해주는 기능 - Auto Close Tag(Jun Han) : HTML 태그 자동으로 닫아주는 기능 - Auto Rename Tag : HTML 태그 변경시 연관된 태그의 이름을 자동으로 변경해주는 기능 Chrome 추천 플러그인 - vue.js devtools : vue 구조에 맞게 디버깅 가능 개발 방식 SFC(Single File Component) 구조로 개발(확장자 .vue) 하나의 파일에 HTML, CSS, JavaScript를 묶어서 관리개발하는 방식 해당 내용에 대한 설명 https://vuejs.org/guide/scaling-up/sfc.html#introduction Composition API 방식으..