본문 바로가기
[vue] vue.js에서 axios 사용하여 서버 통신(vue material 테이블에 데이터 뿌리기) 간단한 예제를 통하여 vue에서 axios를 통하여 서버 통신 하는 법을 알아보겠습니다. axios란 · axios는 Vue에서 서버를 통신할때 사용하는 HTTP 통신 라이브러리 입니다. · axios는 자바스크립트 비동기 처리에 사용되는 객체인 promise를 기반으로 이루어졌습니다. · aixos는 오픈소스이므로 axios github를 통하여 자세한 내용을 확인할 수 있습니다. · 이와 비슷하게 jQuery에서는 ajax를 이용하여 데이터를 호출, 받아오고, 수정하는 작업을 합니다. axios 요청 방법 데이터 불러오기: axios.get(url[, config]) 데이터 입력하기: axios.post(url[, data[, config]]) 데이터 수정하기: axios.patch(url[, dat..
[vue] vue.js 컴포넌트 생성(컴포넌트로 쪼개기) vue.js 하위 컴포넌트 만들기 한개 이상의 페이지를 레이아웃 또는 기능별로 쪼개어 분리하고, 상위 vue 파일에서 통합 관리 하는 것을 컴포넌트화 라고 합니다. 순서 1. 폴더 안에 각 하위 컴포넌트 vue 파일 생성 2. 상위 컴포넌트(App.vue) script 내에 하위 컴포넌트로 import로 콜 3. export default, components 메소드 안, import한 하위 컴포넌트 export 처리 4. 상위 컴포넌트 template 태그내, 각 하위 컴포넌트 태그 삽입 이렇게 컴포넌트 작업이 완료되었습니다. main.js 파일을 확인해 보면, 각각의 하위 컴포넌트가 하나로 합쳐진 App.vue 파일이 import가 되어 아래 vue 인스턴스를 통하여 Virtual Dom 화면에 출력..
[vue] vue.js 기초 정리 요약(pass props/emit event) vue.js 기초 정리편 vue 공식 문서, 기술 블로그와 인프런의 vue.js 기초강의, Vue.js 시작하기 - Age of Vue를 듣고 참조하여 정리하였습니다. Vue.js 공식 문서 https://vuejs.org/v2/guide/ Introduction — Vue.js Vue.js - The Progressive JavaScript Framework vuejs.org Vue.js란? Progressive Javascript framework for buiding user interfaces and front-end applications Vue.js의 핵심 Reactivity (반응성) Vue의 가장 큰 특징으로서, 데이터에 대한 변화를 vue에서 감지하여 화면에 바로 반영합니다. 즉, 데이터..
[react] 리액트 window용 개발환경 설치하기(ft. cra, node.js npm yarn) 리액트 개발 환경 설치 방법입니다. 1. Node.js 설치 Node.js는 크롬 v8 자바스크립트 엔진을 기반으로 한 서버사이드 자바스크립트 런타임입니다. 아래 Node.js 공식 홈페이지로 이동해주세요. nodejs.org/ko/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org node.js 첫 화면에서 오른쪽의 최신 버전으로 다운로드합니다. 설치 화면 위의 추가적인 설치 화면이 나오면서 설치가 완료됩니다. 최신 node.js는 설치와 동시에 npm이라는 패키지 관리 도구까지 설치가 됩니다. 이제 npm을 이용하여 create react app을 설치하여 리액트 프로젝트를 시작할 수 있..
반응형