나만의 컴퓨터 공학

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

컴포넌트의 데이터 참조방법(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; } },..

폼(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 ..