FrontEnd/Vue.js6 [Vue.js] Vuex , store로 상태 관리하기( JWT, token 저장 ) 상태관리를 위한 store를 사용하기 위해선 먼저 Vuex를 설치 해야한다. * Vuex 설치 npm install vuex --save npm을 사용해서 vuex를 설치해주면 store.js를 생성해서 상태 관리를 하면 된다. store는 어떤 데이터를 컴포넌트끼리 쉽게 공유하기 위해서 사용하게 되는데, 이런 목적으로 로그인 시 Java web token(jwt)를 store를 통해 관리하게 된다. store에서 사용할 수 있는 기능은 크게 state / getters / mutations / action이 있다. - state(상태) : 관리하고자 하는 상태 - getters : 말 그대로 state값들을 리턴하기 위한 getter 로직 - mutations (변이): state를 변화시키는로직, m.. 2021. 12. 10. [Vue.js] Vue.js 서버 연결 시 CORS (Cross Origin)문제 해결하기 * Axios로 서버API에 접근했을 때 발생하는 상황 - CORS ( Cross-Origin Resource Sharing : 교차 출처 리소스 공유) : HTTP 헤더를 사용해서 실행중인 웹(www.aaa.co.kr)에서 다른 출처(www.aaa_1.co.kr)의 API에 접근하려고 할 때 이 권한을 부여하도록 브라우저에게 알려주는 체제이다. 기본적으로 브라우저에서는 보안 상의 이유 때무에 이 교차 출처 요청을 제한하고 있기 때문에 어떠한 설정값도 없이 서로 다른 출처를 가지고서 데이터를 공유하고자 하면 아래의 메시지가 나오게 된다. ( 'ur' has been blocked by CORS policy: ~~ 라고 발생한다. ) 이를 해결하긴 위해선 '이 리소스에 접근하는 것이 허용된 출처' 임을 명.. 2021. 11. 23. [Vue.js] Vue.js axios service 설정 ( Axios 라이브러리 ) * Axios 라이브러리 만들기 작은 규모의 프로젝트를 하게되면 몰라도 큰 프로젝트를 하는 경우엔 하나의 컴포너트 안에 수많은 비동기 처리 로직이 생길 수 밖에 없다. 이런 경우에 Axios 로직만을 따로 처리해 service.js 로 만들어 처리하기로 했다. (컴포넌트에서는 응답/오류를 받아 처리만 해주는 형태가 된다.) -> 백엔드에서 MVC 패턴에서 service(비즈니스 로직)를 만드는 것과 비슷하다고 생각하면 될 듯 하다 ! 1) service 만들기 - schoolService.js import $axiosInst from '@/axios/AxiosInst'; export class schoolService { /** * school 로그인 하기 */ schoolLogin(loginObj) {.. 2021. 11. 19. [Vue.js] Axios 설치 및 사용(전역 설정, 인터셉터 설정 ) * Axios란, 브라우저, Node.js를 위한 Promise를 활용하는 HTTP 비동기 통신 라이브러리이다. 한 마디로 Axios는 Ajax처럼 백엔드와 프론트엔드 의 통신을 위해 사용되는 비동기 통신 방법이라고 생각하면 된다. ( Promise = 비동기 로직을 처리하기에 유용한 JS 객체를 말함 ) * Vue.js에 Axios 설치 및 사용하기 1. Axios 설치 npm i axios //axios 설치 2-1. Axios 기본으로 사용 통신방법은 Ajax와 마찬가지로 GET, POST, PUT,DELETE를 사용할 수 있다. then => 응답이 올바르게 내려온 경우 반환값(response)에 대한 로직 작성 catch => 응답오류가 생긴 경우 발생한 요류에 대한 로직 작성 2-3 Axios.. 2021. 11. 18. 이전 1 2 다음
