Vue란? Vue 인스턴스 Vue 컴포넌트 Vue 프로젝트 생성해보기 (이제 스프링을 곁들인...) Axios Router Vue Router란? Vue에서 라우팅 기능을 사용할 수 있게 해주는 라이브러리 Routing이란? 어떤 네트워크 안에서 통신 데이터를 보낼 때 최적의 경로를 선택하는 과정이다. Vue에서는 route로 모듈을 구현해서 path와 component를 설정해서 해당 path로 접근하면 설정 해놓은 컴포넌트가 보여지는 것으로 사용했었다. 구현 Vue 프로젝트를 생성할 때 default 설정이 아닌 manually로 선택을 하면 router와 Vuex를 선택하는 곳이 있다. 프로젝트를 설정할 때 router를 선택하거나 아니면 명령어로 install을 해준다. Router 설치 명령어 ..

Vue란? Vue 인스턴스 Vue 컴포넌트 Vue 프로젝트 생성해보기 (이제 스프링을 곁들인...) Axios Router 이 글은 4번의 Vue 프로젝트 생성해보기에서 만든 프로젝트로 한다.. 이 글을 읽기 전에 Vue 프로젝트의 구조와 흐름을 알고 와야한다.... Axios 개념 node.js와 브라우저를 위한 Promise 기반 HTTP 클라이언트. 브라우저 호환성 특징 Promise(ES6) 사용 요청과 응답데이터의 변형 요청 및 응답 데이터 변환 JSON 데이터에 대한 자동 변환 XSRF 로부터 보호하기 위한 클라이언트 측 지원 설치방법 현재 Vue프로젝트 위치에서 터미널을 열어 명령어를 입력한다. npm install axios 이렇게 설치가 완료 되었다면 생성했던 Vue프로젝트를 연다. sr..

Vue란? Vue 인스턴스 Vue 컴포넌트 Vue 프로젝트 생성해보기 (이제 스프링을 곁들인...) Axios Router 내가 Vue.js와 Spring Boot로 토이프로젝트를 할 때 썻던 방식이다. 내가 하는게 무조건 맞다는 건 아님 node.js를 이용해서 vue와 vue-cli install 했다고 가정하고 진행을 하겠다. 설치를 안했다면 이 블로그를 보고 설치방법을 따라해주면 된다. https://velog.io/@jinsu6688/VueCLI-%EC%84%A4%EC%B9%98 VueCLI 설치 책을 보고 공부한 VueCLI설치 방법을 simple하게 작성해보았습니다.윈도우의 경우 : 명령프롬프트(cmd)맥의 경우: 터미널조금 기다리면 위의 command가 나오면서끝날 것이다.딱 위의 vue만..

Vue란? Vue 인스턴스 Vue 컴포넌트 Vue 프로젝트 생성해보기 (이제 스프링을 곁들인...) Axios Router Component란? 인스턴스이며 레이아웃인 Vue의 강력한 기능 중 하나. 특징 인스턴스이기 때문에 모든 옵션 객체를 사용할 수 있다. 그리고 라이프사이클을 사용할 수 있다. 전역 컴포넌트 저번 포스팅인 인스턴스에서 new Vue를 통해 새 Vue 인스턴스를 만들 수 있었다. 전역 컴포넌트의 등록 방법은 Vue.component('컴포넌트 명',{ // 옵션들 }) 이렇게 등록이 가능하다. 그 외에도 컴포넌트 .vue 파일을 생성해서 만든 후에 옵션 부분에 등록을 할 수 있다. 컴포넌트 생성 후 Vue.component('컴포넌트 명', import한 컴포넌트) 후에 태그 명을 컴..

Vue란? Vue 인스턴스 Vue 컴포넌트 Vue 프로젝트 생성해보기 (이제 스프링을 곁들인...) Axios Router 이전 글 https://my-trash-code.tistory.com/31 Vue.js란? 지금도 아는게 없어서 좀 그렇지만 예전에 쓴 글들은 너무 처참해서 다시 정리해서 써야겠다. 1. Vue란? 2. Vue 인스턴스 3. Vue 컴포넌트 4. Spring Boot 적용 5. Axios 6. Router 1. Vue란? 1) 설명 웹 페이.. my-trash-code.tistory.com 2. Vue 인스턴스 개념 Vue 인스턴스는 생선된 Vue 오브젝트라고 생각하면 된다. 자바에서 객체를 실체화 하면 인스턴스라고 부르듯이... 앱의 진입점이 되며 템플릿 렌더링 부터 데이터 바인딩..

지금도 아는게 없어서 좀 그렇지만 예전에 쓴 글들은 너무 처참해서 다시 정리해서 써야겠다. Vue란? Vue 인스턴스 Vue 컴포넌트 Vue 프로젝트 생성해보기 (이제 스프링을 곁들인...) Axios Router 1. Vue란? 1) 설명 웹 페이지 화면을 개발하기 위한 프론트엔드 프레임워크이다. JavaScript FrameWork이다. 2) 특징 MVVM 패턴을 사용한다. Virtual DOM을 사용한다. 가볍다. Component를 사용하여 재사용이 가능하고, 레이아웃 기능을 한다.(다시 보고 느낀 것은 약간 Tiles의 느낌이 났다.) MVVM 패턴을 사용한다. Mode - View - ViewModel의 줄임말 로직과 UI(User Interface)의 분리를 위해 설계된 패턴 웹페이지는 DO..

Docker에 Redis설치 후 적용하기 사양 Mac OS 컨테이너 생성 및 네트워크(브리지) 설정 먼저 Terminal에 docker image를 pull해준다. 명령어는 다음과 같다. docker pull redis redis만 치면 최신 버전을 다운 받는거 같다. docker에서 image로 가서 보면 redis가 추가된 것을 볼 수 있다. redis-cli를 통해 캐시 확인 및 데이터를 확인하려면 network를 구성한다. docker network create redis-net 설정한 네트워크를 확인하려면 docker network ls 를 치면 위의 이미지 처럼 현재 네트워크들을 볼 수 있다. 이제 컨테이너를 생성하고 포트는 6379, redis-net 이라는 브리지를 사용하기 위해서 아래의 ..

하루에 두번 나눠서 올린다. 이번에는 검색을 했을 때 지도 안에 마커들의 리스트를 표현 해줬다. 다시 한번 말하지만 공식 가이드문서에 나와있는데로 만들어봤다. 나머지 기능들은 고민하면서 만들어 봐야겠다... css나 이런게 부족해서 화면을 잘 못띄울거 같다... keyWordSearch () { this.isOk = true // 마커를 담을 배열 var markers = [] const container = document.getElementById('map')// 지도를 표시할 div const options = { center: new kakao.maps.LatLng(33.664, 6.890), level: 10 } const map = new kakao.maps.Map(container, opti..