본문 바로가기

Dev111

Axios Axios 액시오스 뷰에서 권고하는 HTTP 통신 라이브러리 Promise 기반의 HTTP 통신 라이브러리 ※ Promise 란? - 자바스크립트에서 비동기 처리에 사용되는 객체 ※ 비동기 처리란? - 특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 먼저 수행하는 특성 액시오스 설치 CDN https://github.com/axios/axios GitHub - axios/axios: Promise based HTTP client for the browser and node.js Promise based HTTP client for the browser and node.js - GitHub - axios/axios: Promise based HTTP client for the browser a.. 2023. 1. 11.
Vue Router Vue Router 뷰 라우터 싱글 페이지 애플리케이션을 구현할 때 사용하는 라이브러리 라우터란 네트워크에서 데이터를 송수신하는 장치를 의미 웹에서 라우터는 웹 페이지 간의 이동하는 방법 및 경로를 설정 뷰 라우터 설치 - CDN vue링크 하단에 vue-router링크를 추가한다 인스턴스 VueRouter를 생성한다 Vue의 router 속성에 사용할 라우터를 넣는다 var router = new VueRouter({ // VueRouter라는 인스턴스를 router라는 변수에 담음 }); new Vue({ el: '#app', router: router // Vue의 속성 중에는 router가 있고, 여기에 위에서 정의한 변수 router를 넣음 }); 라우터에 페이지 정보 넣기 인스턴스 VueRou.. 2023. 1. 11.
Emit Emit 에밋 emit은 발산, 내뿜다라는 뜻이 있다. 하위 컴포넌트가 상위 컴포넌트와 통신 하기위해서는 하위에서 이벤트를 발생시켜 상위로 올린다. 이벤트를 올릴 때 사용하는 것이 $emit()이다. emit은 뷰에서 제공하는 api(기능)이다. v-on:하위 컴포넌트 이벤트="실행할 상위 컴포넌트 메소드" var appHeader = { template: 'Click me', // 버튼을 클릭했을 때 실행될 함수(메소드) passEvent methods: { passEvent: function() { this.$emit('pass'); // 상위로 보낼 이벤트 pass } } } new Vue({ el: '#app', components: { 'app-header': appHeader }, method.. 2023. 1. 5.
Props Props 프롭스 Properties의 약자로 부모컴포넌트로부터 자식컴포넌트가 데이터를 받기 위해 사용하는 속성이다. 자식컴포넌트에 props:[프롭스이름]을 정의하고, 가져올 상위 컴포넌트 '데이터이름을' 매칭한다. v-bind:프롭스속성이름="상위컴포넌트데이터이름" 로 데이터를 불러오고 {{ 프롭스이름 }}으로 데이터 사용 var appHeader = { template: '{{ propsdata }}', // 프롭스 이름으로 데이터 사용 props: ['propsdata'] // 하위 컴포넌트 프롭스 이름 정의 } new Vue({ el: '#app', components: { 'app-header': appHeader }, data: { message: 'hi' // 상위 컴포넌트 데이터 } }).. 2022. 11. 13.
뷰 인스턴스 Reactivity 반응성 데이터의 변화가 있으면 새로고침 없이 변화를 감지해서 반응하는 것 뷰 인스턴스 new Vue() 형태로 생성한 객체 Vue로 개발할 때 필수로 생성해야하는 생성자 필요한 기능을 생성자에 미리 정의해 두고 그 기능을 재정의하여 사용함 뷰 인스턴스를 참고하기 위한 변수로 vm을 자주 사용(VeiwModel의 줄임말) var vm = new Vue() vm으로 Vue 라이브러리는 사용할 수 있음 인스턴스란? 프로그램에서 객체를 실체화한 것 = 실제로 동작할 것 실체화된 인스턴스는 메모리에 할당됨 var vm = new Vue({ // options }) vm 변수에 인스턴스를 담으면 new에 의해 메모리에 빈 공간이 생성된다. 생성자 함수 객체 리터럴 {...}을 사용하면 객체를 만.. 2022. 11. 12.
Vue란? 코드의 재사용과 유지보수 편리성을 위해 정해진 약속대로 구조를 만들어야 한다. 이 구조를 디자인 패턴이라고 한다. MVC 패턴 Model + View + Controller Controller: 브라우저 요청을 받으면 Model을 통해 데이터를 가져오고 View를 제어하여 사용자에게 전달 Model: 데이터를 가공하는 클래스의 집합 View: Controller가 폼 형태로 준 결과를 표시하고 사용자의 입력을 받아 데이터를 업데이트 왜 사용할까? 보이는 페이지, 데이터 처리, 연결하기로 나누어 각 요소가 맡은 임무에만 집중 서로 분리된 역할은 유지보수, 확장성, 유연성이 증가 한계 복잡한 화면과 데이터 구성 시 Controller에 여러 Model과 View가 복잡하게 얽히게 됨 Model과 View의 .. 2022. 11. 7.
반응형

티스토리툴바