[JS] 비동기처리(콜백함수)

자바스크립트에서 웹페이지를 구성할 때 비동기처리가 필요한 경우가 많다.비동기처리시 필요한 콜백함수 문법은 다음과 같다.  [콜백함수 문법]1. callback함수 full로 사용// sayHello함수 정의function sayHello(name, callback) { callback(name);}// sayHello함수 사용sayHello("myName", function temp(name) { console.log(name);}); 2. 함수이름 없이사용// sayHello함수 정의function sayHello(name, callback) { callback(name);}// sayHello함수 사용sayHello("myName", function (name) { conso..

사용자의 입력에 따라 값이 변할 수 있는 변수는 ref로 선언한다.ref로 선언한 변수는 사용자의 입력에따라 값이 변하는 "반응성을 가진 변수"가 된다. [예시] {{ userInput }}

router로 주소경로를 설정하고 파라미터를 받아서 해당 router 주소로 가는 방법. [구조]data.js -> app.vue (data)전달 전송- data는 data.js -> app.vue -> detail.vue로 전달- url parameter는 router에서 /detail/:id로 정의하고 detail.vue에서 '$route.params.id'로 받아서 사용 [App.vue] -data를 router에 전달한다 [router.js]import { createWebHistory, createRouter } from "vue-router";import TitlePage from '../components/TitlePage.vue';import Detail from '../component..

[chage 이벤트]사용자가 새로운 입력한 후 버튼을 클릭하거나 엔터를 치면 발동되는 이벤트 [예시] 검색 1. 사용자가 input칸에 입력한후 enter나 검색버튼 클릭2. @change이벤트 발동3. {부모 component의 함수}로 입력값($event.target.value) 전달

부모=>자식 데이터 전달부모 component에서 자식 component로 데이터를 전달하려면 html에서 데이터를 전달하고자식 component에서 script에서 props로 데이터를 정의해 줘야 한다. [ 부모component.vue]  [자식component.vue] {{ text }}  자식=>부모 데이터 전달[자식component.vue] 닫기  [부모component.vue]  자식 component에서 버튼클릭시 부모component에서 closeModel 이벤트가 활성화 되면서 isModle=false가 수행된다.

HTML for문html에서 포문은 위와같이 쓸 수 있다.dataList에서 값을 하나씩 가져와서 값은 data에, 인덱스는 index에 넣는다.key는 데이터들을 구분해주는 값으로서 항상 넣어야 한다. 이벤트(@)@click="flag=true;"이벤트를 받을떄는 "@"를 붙여준다. 변수대입(:)어떤 속성값에 값이 아닌 변수를 넣을땐 앞에 콜론(:)을 붙여준다. text부분에 변수를 넣기("{{}}")장르: {{ movie.category }}텍스트가 나오는 부분에 변수를 쓰고실으면 중괄호로 두번 감싼다 예시 {{ movie.title }} 장르: {{ movie.category }} 좋아요 {{ movie.like }} ..

HTML코드 this is h1 1 this is h1 2 this is h1 3 click to change color click to change class mouse over this is h2 this is h3 this is h2(out of div) JS코드 // -------------------------------[이벤트동작]------------------------------- // 1. 클릭으로 색깔 바꾸기 function handleTitleClickColor() { // element가 블루면 토마토, 토마토면 블루로 const nowColor = changeColorElement.style.color; let newColor; if (nowColor==="blue") { ne..

HTML코드 this is h1 1 this is h1 2 this is h1 3 click to change color click to change class mouse over this is h2 this is h3 this is h2(out of div) JS코드 // -------------------------------[불러오기]------------------------------- // 1. id로 불러오기 const callById = document.getElementById("line1"); console.log(callById); console.log("className : ",callById.className); console.log("innerText : ",callById.in..