나만의 컴퓨터 공학

지금까지 포스팅 한 것을 보면 기본 문법의 대부분 Vue2에서 사용하는 옵션스 API 방법이다.하지만, 요구하는 기능이 복잡해지고 다양한 로직을 유연하고 조직적으로 구성하고 관리하기 위한 방법으로 Vue3에서는 컴포지션 API를 제공한다.함수 기반 접근 방식 제공하여 개발자가 기능별로 코드를 구성할 수 있게 지원한다.옵션스API : data, computed, methods, lifecycle hook 포함한 객체 기반 옵션 속성으로 구성된 API구분옵션스API컴포지션API장점직관적쉽게 배울수 있음소규모 애플리케이션에 적합함함수 친화적기능별로 코드를 작성하기 쉬움로직의 재사용성이 좋음대규모 애플리케이션에 적합함단점컴포넌트가 복잡해질수록 관련 로직이 분산되어 코드의 재사용성과 가독성이 떨어짐옵션스API에 ..

컴포넌트 슬롯컴포넌트(vue)를 재사용할 수 있는 구성 요소로 생성해주는 도구템플릿 조각을 자식 컴포넌트에 전달하고 자식 컴포넌트가 자체 템플릿 내에서 전달받은 템플릿 조각을 렌더링 할 수 있게 해준다.슬롯을 사용하기 전 App.vuescript>import CustomButton from './components/CustomButton.vue';export default{ components : { CustomButton, }}script>template> CustomButton>CustomButton>template>style scoped> style> 슬롯을 사용하기 전 CustomButton.vuetemplate> button class="btn">Clickbutton>template>style ..

컴포넌트의 데이터 참조방법(ref)부모컴포넌트와 자식컴포넌트는 서로의 컴포넌트에서 정의된 data, computed, methods 옵션 속성에 접근할 수 있다.ref 속성으로 컴포넌트의 참조를 생성하여 접근한다.App.vuescript>import RefChild from './components/refChild.vue'; export default{ components : { RefChild, }, data(){ return{ parentNum : 10, } }, computed : { numOddEven(){ return this.parentNum % 2 === 0 ? '짝수' : '홀수'; }, }, methods :{ getParentNum(){ return this.parentNum; } },..

"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 값을 가져옴 (숫자 또는 연..

폼(form) : 사용자로부터 데이터를 입력받는 요소들의 그룹이며 서버로 전송하기 위해 사용 프론트에서 서버로 데이터를 전송하는 방법 2가지form action="/login_process">form>form 태그에 action 속성을 이용해서 지정된 경로로 전송하여 처리하는 방법.form id="loginForm"> form> script> document.getElementById("loginForm".addEventListener('submit', function(event){ //자바스크립트로 사용자로부터 입력받은 값을 받아온다. const id = document.getElementById("id").value;  //사용자 입력 데이터를 서버에 전송하기 위한 AJAX 요청 만들기 const ..

자바스크립트에서 이벤트를 다룰때 document객체의 여러 속성과 메서드를 조합해서 사용한다.이벤트는 사용자와 상호작용해서 발생하는 사건(마우스 클릭, 더블 클릭, 드래그 앤 드롭, 키보드)1. v-on 디렉티브 : methods 옵션 속성으로 이벤트 연결. 이벤트 타입(click, keyup, keydown, doubleclick)2. 이벤트 핸들러에 이벤트 객체를 전달하지 않으면, 이벤트 객체를 이벤트 핸들러가 처리하지 못한다. 이벤트 객체와 값을 함께 사ㅛㅇ하려면 $event와 값을 함께 넘겨주어야 한다. 3. modifier는 이벤트 처리 방식을 제어하는데 사용하는 기능. modifier를 사용하면 DOM이벤트 동작을 변경하거나 기능을 추가할 수 있다. 예제 : keyup 이벤트로 enter(숫자..