Juwon

브라우저와 서버 간에 통신을 도와주는 Promise 기반의 HTTP 클라이언트 라이브러리입니다. Axios란? Axios는 서버와 브라우저를 위한 Promise 기반 HTTP 클라이언트입니다. 서버 사이드에서는 http 모듈을 사용하고, 클라이언트( 브라우저 )에서는 XMLHttpRequests를 사용합니다. npm install axios yarn add axios Axios의 특징 브라우저를 위한 XMLHttpRequests 생성 서버를 위한 http 요청 생성 Promise API를 지원 요청 및 응답 인터셉트 요청 및 응답 데이터 반환 요청 취소 JSON 데이터 자동 변환 XSRF를 막기 위한 클라이언트 사이드 지원 *XSRF : 사이트 간 요청 위조하여 클라이언트에 대한 공격 ( 공격 대상은 C..

이번 포스팅에서 다뤄볼 Vue.js 어디서든 Store 호출하기입니다. store.js import { createStore } from "vuex" const store = createStore({ state(){ return{ data : 'Vuex' } }, mutations : { setDataFunction(context, text){ context.data = text } }, actions : { setTimeOutFunction(context, text){ setTimeout( text => { this.commit('setDataFunction', text) }, 3000) } }, export default store Actions 함수에서 Mutations 함수를 호출할때 사용하는 구..

Vuex 설치 명령어 //npm npm install vuex@next --save //yarn yarn add vuex@next --save Vuex는 Vue.js의 applications이며 state management pattern( 상태 관리 패턴 ) 역할을 합니다. 모든 컴포넌트에서 접근할 수 있는 중앙 데이터 저장소로 코드의 재사용성을 확장시켜주는 기능이 있습니다. 상위 컴포넌트와 하위 컴포넌트 간에 props, emit 같은 기능의 상위 호환이라고 생각하시면 됩니다. vue 3 버전은 vuex 4 버전은 호환하고 vue 2 버전은 vuex 3 버전을 호환합니다. vuex 예시코드 Main.js import { createApp } from 'vue' import App from './App..

vue의 대표적인 기능인 디렉티브를 알아볼 수 있는 시간입니다. 앞서 Pure JavaScript의 10줄을 단 2줄~3줄로 줄이는 역할을 하는 기능 디렉티브입니다. v-text {{텍스트}} 해당 요소(Element)의 textContent를 업데이트합니다. text의 일부만 업데이트해야 하는 경우엔 mustache interpolation(머스태시 보관법)을 사용합니다. ( 사용법 {{변수명}} ) v-show Flag가 참일 경우 보입니다. v-show 디렉티브는 조건이 변경될 때 transition을 전환합니다. v-if Flag가 참일 경우 보입니다. v-if는 자주 사용하는 디렉티브 중 하나입니다. 변수 Flag의 진리 값에 따라 요소를 조건부로 렌더링 합니다. 요소와 포함된 디렉티브 / 컴포..

Vue 3 version 기준으로 작성된 포스트입니다. 글쓰기 앞서서 많이들 들어보셨을 듯 한 React, Anguler, Vue 등 많은 프레임 워크/라이브러리가 있습니다. React, Vue, Anguler의 공통적인 특징은 Single Page Application이라는 것입니다. Single Page Application (SPA)? 쉽게 말하는 SPA는 한 페이지 내에서 만 동작하는 웹 개발 방식을 의미합니다 . 한 페이지 내에서 다른 컴포넌트를 호출하고 사용하고 보여주는 방식이라고 할 수 있습니다. 컴포넌트(Compunent)? Component는 레고 블록 하나하나 혹은 객체 하나하나라고 생각하시면 이해가 빠를 수 있습니다. 컴포넌트 여러 개를 조합하여 화면을 구성할 수 있는 블록을 의미합니..