FrontEnd19 [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. [Vue.js] Vue Router 설치 및 설정 Vue.js를 사용하면 싱글 페이지를 구성할 수 있다는 점이 가장 흥미롭다. 기존에 html이나 jsp를 사용해서 프로젝트를 만드는 경우, 보통은 여러개의 페이지를 만들고 컨트롤러 단에서 모든 Request를 받아 해당 페이지를 리턴 시켜주는 형태로 구성을 했다. 이런 경우엔 URL이 변경되는 경우 서버에 매번 요청해야 하기 때문에 페이지 변경에 따라 DOM이 새롭게 갱신되었다. 하지만, 라우터를 사용하게 되면 페이지 이동 시 마다 서버에 요청하여 페이지를 새롭게 갱신(새로고침)하는 것이 아니라 미리 해당 컴포넌트(화면 정보)를 가지고 있다가 페이지 이동 시에 라우터를 통해 화면을 형성하게 된다.(= SPA방식) ( 라우터를 사용하게 되면 화면전환이 아주 매끄럽게 진행된다. ) ### 참고용 vue-ro.. 2021. 11. 11. 이전 1 2 3 4 5 다음
