나만의 컴퓨터 공학

"App 컴포넌트의 데이터 전달"의 문제점불필요한 컴포넌트도 데이터를 전달받아야함.컴포넌트 트리 구조가 깊게 연결되어 있을수록 데이터 전달이 매우 번거로움.provide컴포넌트에서 정의 데이터를 자신과 컴포넌트 트리 구조로 연결된 하위 컴포넌트에 공유하는 기능.injectprovide 기능으로 공유한 데이터를 가져올 때 사용하는 기능.default 속성으로 기본값을 따로 지정할 수도 있음.컴포넌트 구분 없이 모든 컴포넌트에 데이터를 공유하고 싶으면 App-Level provide 기능을 사용해야 한다.main.js 파일에서 provide 기능을 사용한다는 의미임.(모든 컴포넌트에서 provide()함수로 정의한 데이터를 공유함) App.vuescript>import FirstChild from './co..

컴포넌트에 속성과 이벤트를 뷰에 정의할 수 있는데, 사용자 정의 속성 및 사용자 정의 이벤트를 만들어서 적용할 수 있다. 속성사용자 정의 속성 : 전역 등록하거나 지역 등록한 컴포넌트를 사용할 때 컴포넌트와 함께 속성을 정의. App.vue 코드script>import UserProfile from './components/UserProfile.vue'; export default{ components : { UserProfile, }, data(){ return{ name : 'LJH', company : 'ljh99', age : 26, }; }, }script>template> UserProfile :name="name" :company="company" :age="age"/>template>st..

라이프 사이클 훅(Life Cycle Hook)Vue.js 프레임 워크에서 컴포넌트는 생성되고 파괴될때까지 여러 단계(생명주기)를 거치면서 특정 기능과 역할을 하는 함수를 호출할 수 있도록 설계되어 있다.그러한 함수를 훅 이라고 한다.컴포넌트에서 호출되는 함수를 라이프 사이클 훅이라고 한다.라이프 사이클 훅 예제 코드script> export default{ beforeCreate(){ console.log('beforeCreate'); }, created(){ console.log('created'); }, beforeMount(){ console.log('beforeMount'); }, mounted(){ console.log('mounted'); }, beforeUpdate(){ console.lo..

뷰에서는 복잡한 구조를 보다 심플하고 유연하게 제공하기 위해 컴포넌트, 슬롯, 데이터 공유 기술을 제공하고 있다.유연하고, 모듈화된 구조로 개발하고 관리하기 좋다. 코드의 재사용성과 유지보수성 향상도 가능하다. 컴포넌트(Componet)자바스크립트 기반 프레임워크에서의 애플리케이션을 구성하고 관리하는 방식.특정 기능이나 작업을 독립적으로 수행하기 위한, 논리적으로 구분된 코드 단위.컴포넌트 기반 아키텍처(CBA, Component-Based Architecture)한 웹 어플리케이션을 여러 컴포넌트로 구분해, 페이지 단위가 아니라 컴포넌트 단위로 설계하는 방식.Vue.JS --> 컴포넌트 기반 아키텍처컴포넌트 기반 아키텍처 설계 방식의 장점재사용성(reusability) : 컴포넌트를 같은 기능이나 작업..

Vue.Js를 사용하여 간단한 Calculator를 만들어 보았다.script> export default { // Vue 컴포넌트를 정의하는 부분 data() { // 컴포넌트에서 사용하는 데이터 반환 return { output: null, // 현재 출력될 값을 저장 prev: null, // 이전에 입력한 숫자 또는 계산 결과를 저장 cur: null, // 현재 입력 중인 숫자를 저장 operator: null, // 선택된 연산자를 저장 (+, -, *, / 등) } }, methods: { operation(e) { // 버튼 클릭 시 호출되는 메서드 (계산 처리) const number = e.currentTarget.value; // 클릭된 버튼의 value 값을 가져옴 (숫자 또는 연..