미어캣의 필기장

Package.json : 프로젝트의 정보를 정의합니다. (name, version, dependencies...) 의존하는 패키지들의 정보를 version range(범위)으로써 정의합니다. "name" : "example", "version" : "1.0.0", "dependencies" : { "A" : "

라우팅 : 웹 페이지 간의 이동 방법 SPA(Singal Page Application) : 페이지를 이동할 때마다 웹 페이지를 요청하여 갱신하는 것이 아니라 미리 페이지들을 받아 놓고 이동 시에 클라이언트의 라우팅을 이용하여 화면을 갱신하는 방식 뷰 라우터 : 뷰에서 라우팅 기능을 구현할 수 있도록 지원하는 라이브러리 라우터 셋팅 : 설치 : npm install vue -router@4 src폴더에 router.js를 만들고main.js에 라우터를 사용한다고 말해줍니다. import { createWebHistory, createRouter } from "vue-router"; const routes = [ { path: "/경로", component: import해온 컴포넌트, } ]; const ..

컴포넌트는 Vue에서 강력한 기능중에 하나입니다. 쉽게 이해 하자고 하면 최상위 페이지를 App.vue라고하고 컴포넌트를 하나 생성한다고 하면 다음과 같이 생각 할 수 있습니다. App.vue의 기본적인 내용은 건드리지 않고 Component의 내용만을 수정하면서 페이지를 쉽게 바꿀 수 있습니다. 컴포넌트는 재사용이 쉽고 코드의 간결화를 통해서 사용한다면 Vue 특유의 빠른 렌더링을 통해서 컴포넌트의 내용들만 바꿔가면서 페이지를 수정할 수 있습니다. 저는 개인적으로 JSP로 코드 구성을 했을 때 ajax를 통해서 페이지내용을 바꿔가는 것과 비슷했던 것 같습니다.

최근에 Vue를 공부하게 되어서 Vue관련 노트한 내용들을 끄적여 볼까 해서 작성하게 되었습니다. Props는 상위 컴포넌트의 데이터를 하위 컴포넌트로 전달하기 위한 방법 중에 하나입니다. 사용방법은 다음과 같습니다. // 상위 컴포넌트 //ex) 상위 컴포넌트 데이터 바인딩을 사용할때에는 콜론 ' : '을 사용해줍니다. // 하위 컴포넌트 export default { props : { 전달 받은 변수명 : 데이터 타입 } } // ex) 하위 컴포넌트 props : { send : String, // 이후 해당 컴포넌트에서 사용 } 전달 받은 변수 명과 데이터타입을 props 안에서 선언해줍니다.