본문 바로가기

분류 전체보기68

[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.
[Spring Boot] DB 정보 세팅하기 1. 단일 DB 설정 : SpringBoot에서 하나의 DB만을 연결할 때엔 application.properties에 해당 DB 정보를 세팅해주면 된다. ### DB 세팅을 위한 설정 #DB URL 주소입력 spring.datasource.url= # 유저이름 입력 spring.datasource.username= # 패스워드 입력 spring.datasource.password= # 드라이버명 spring.datasource.driver-class-name= ### Mybatis 설정 # Mapper에서 리턴시킬 DTO, VO가 있는 패키지 명시,Mapper에서 패키지명을 생략하고 클래스명만 쓸 수 있다. mybatis.type-aliases-package= # Mapper가 있는 위치 mybatis.. 2021. 11. 10.
[Vue.js] Vue.js 설치, 프로젝트 세팅 https://kr.vuejs.org/v2/guide/installation.html 설치방법 — Vue.js Vue.js - 프로그레시브 자바스크립트 프레임워크 kr.vuejs.org Vue.js는 JavaScript 의 프레임 워크 중에 하나로 React, Angular의 장점들을 모아서 만들었다고 한다. React와 Angular를 아직 공부하지 못해서 Vue.js에 어떤 장점들이 모인건지 파악하기는 아직 힘들지만 앞으로 두 가지의 프레임워크를 더 공부하고 나면 판단할 수 있을 거 같다 ! Vue.js 는 도큐먼트가 쉽게 사용할 수 있도록 설명이 잘 되어있는 편이다. [ 설치방법 ] 1. 직접 script 에 추가하는 방법(vue 참조하는 형태) : script에 추가 2. NPM을 사용하는 방법 .. 2021. 11. 9.