button import Button from "./components/Button"; import { createContext, useReducer,useState } from "react"; export const UserContext = createContext(null); export default function App() { const reducer = (current_state, action )=> { switch (action.type){ case "ADD": return [...current_state, action.xxx]; case "DEL": return [current_state.filter((v,i) => v !== action.xxx)]; default: return curre..

부서삭제 부서삭제 부서번호 삭제 {{ msg }} 부서번호 부서이름 위치 {{ dept.deptno }} {{ dept.dname }} {{ dept.loc }} npm install vue-router props Bar Bar{{ pw }} Baz Baz {{ pw }} Foo Foo props-od:{{ id }} $router.params.id={{ $useRouter.params.id }} Knu knu userid={{ userid }} NotFound Not Found app에서 라우팅연습 Home login/abcd Baz-pw /my/abcd knu {iserid:"홍길동"} http://localhost:8081/#/login/abcd http://localhost:8081/#/my/12..

eventBus eventBus.vue HelloWorld.vue {{msg}} HelloWorld2로 이벤트 전달 HelloWorld2.vue {{ msg }} app.vue EventBus Input.vue list.vue {{ index + 1 }}. {{ data }} 삭제 App.vue slot 아름다운 밤입니다 {{ msg }} App.vue {{ A.message }} {{ A.header }} {{ A.footer }} HelloWorld.vue {{ msg }} {{ footerText }} src_14_slot4_SpeechBox_named helloWorld.vue {{ msg }} App.vue {{ A.header }} {{ A.message }} {{ A.footer }} axo..

event01_click2 {{ result }} 값1: 값2: + - * / 이벤트 실습 가격: 갯수: 10 15 20 {{ total }} 도서목록{{ msg }} {{ book.name }}, {{ idx }}번, 가격: {{ book.price }} 삭제 선택삭제 람다 도서목록{{ msg }} {{ book.name }}, {{ idx }}번, 가격: {{ book.price }} 삭제 선택삭제 이벤트 @click="prevent” preventDefault(); target.html로 이동 {{ msg }} 다음 -preventDefault 구글 전송 이벤트 수식어 {{ msg }} x() x() once 2. preventDefault이벤트 수식어 다음1 y 다음2 y2 다음2 prevent ..

vue.js vue - 푸론트 javascript 파일 vue2 : update 종료 cli 방식 p/g :프로젝트 단위로 vue 파일 작성 ⇒ build 이후 html 이나 jsp 에 포함 cdn 방식 p/g: 라이브러리를 html, jsp , thymeleaf 에서 직접 (jquery 방식) vue3 cli 방식 p/g :프로젝트 단위로 vue 파일 작성 ⇒ build 이후 html 이나 jsp 에 포함 cdn 방식 p/g: 라이브러리를 html, jsp , thymeleaf 에서 직접 (jquery 방식) vue create 프로젝트명 npm install npm run serve ⇒server 가동 ctrl + c ⇒ 서버 끄기 App.vue 부모컴포넌트의 값 {{x}} {{ y }} {{z[0]..