목록IT/Vue & Quasar (11)
And Brain said,
서버를 한 번에 구동시키고 싶었는데 마침 구독하고 있는 블로그에 관련한 글이 올라와 쉽게 적용할 수 있었다. https://h-owo-ld.tistory.com/141 [Node] 백&프론트서버 두 개를 한번에 열기 npm install concurrently --save concurrently Run commands concurrently. Latest version: 7.3.0, last published: a month ago. Start using concurrently in your project by running `npm i concurrently`... h-owo-ld.tistory.com 일단 가장 먼저 사용법 실사용 예 이제 back 서버 쪽에서 npm run dev로 한 번에 이리오너..
이번 시간엔 마커를 클릭 시 해당 숙소의 정보가 뜨도록 할 것이다. 카카오 api가 지원하는 이벤트 함수가 더럽게 말을 안 들어서 예상보다 시간이 오래 걸렸다. 이전 시간의 마커 찍는 코드부터 수정이 좀 있다. 원래는 for 문이 돌아가며 addListner로 마커 하나하나 click 이벤트가 적용이 되어 function을 실행시키는건데 더럽게 안 되서 결국 메소드를 하나 더 만들었다. 근데 저 안에서 function으로 만드는 것이랑 뭐가 차이가 있길래 안 됐던건진 모르겠다. 메소드 만들고나니 이게 더 괜찮은듯 다음 시간엔 마커에 필터링을 적용시켜보겠다. Thanks for watching, Have a nice day.
미네르바의 올빼미는 황혼녘에 날개를 편다. data 속성의 값은 화면 요소의 상태가 되는 데이터 객체이다. 템플릿 문법 Mustache 문법과 v-bind 속성이 있다. [v-bind 속성] 아이디, 클래스, 스타일 등의 HTML 속성 값에 뷰 데이터 값을 연결할 때 사용한다. 형식은 v-bind 속성으로 지정할 HTML속성 앞에 접두사로 v-bind: 를 붙여준다. v-bind 문법을 :로 간소화할 수 있다. [Mustache 문법] 뷰 인스턴스의 데이터를 HTML 태그에 연결하는 텍스트 삽입 방식이다. 다른 언어나 프레임워크에서도 사용되는 템플릿 문법이다. {{ }} 안에 자바스크립트 표현식을 쓸 수 있다. methods 속성 Vue 인스턴스의 생성자 옵션 객체에서 methods 속성으로 정의한다. ..
imageSrc에 마커로 사용하고싶은 이미지 넣기 (벡터이미지는 안 됨) imageSize로 마커사이즈 임의로 조절가능 Thanks for watching, Have a nice day..
이번 시간엔 저번 시간에 얘기한대로 Quasar를 이용하여 지도에 마커를 찍어볼 것이다. 지도는 카카오 api를 사용한다. 마커에 들어갈 데이터는 이 글을 참고하기 바란다. https://theworldaswillandidea.tistory.com/8 oracleDB를 잔뜩 담은 mybatis를 express에 넣어 보내버리기 oracledb , mybatis-mapper, express, http 기본적인 모듈들을 설치한다. app.use(express.json()) app.use(express.urlencoded({extended:true})) JSON 데이터를 post하기 위한 만반의 준비. 원래는 body-parse.. theworldaswillandidea.tistory.com 일단 데이터를 받..