[Quasar] Quasar야, 너는 참 눈부시구나! - [완]

Quasar: the black hole, the most luminous persistent source of light in the universe

 

DB 데이터를 받아 q-pagination을 사용해 Quasar식 페이징처리하는 법과 Quasar Dark mode를 좀 다뤄보려했으나

 

여러분들이 공식문서 예제를 보고도 충분히 할 수 있을 것 같아서 스킵하려한다.

 

공식문서를 보고도 모르겠다면 댓글을 달아달라.

 

Quasar 시리즈 마지막 장을 시작하자.

 

 

마우스 클릭 위치 반경의 데이터만 지도 화면에 나오게하였다.

 

구현은 열흘전에 해놓고 왜 이제서야 올리냐면

 

사실 프론트 Vue 백 Oracle SQL로 한거라 굳이 Quasar 시리즈일 필요가 있나 생각이 들어서.

 

 

일단 Oracle DB에 도를 라디안으로 바꿔주는 SQL 함수를 만든다.

180/pi = 57.29577951...

MySQL에는 RADIANS 함수가 존재하지만 오라클엔 존재하지 않기 때문에 직접 만들어줘야 한다.

 

 

하버사인 공식을 적용해 쿼리를 짜면 된다.

 

이를 Mybatis와 Express를 연동해주면 프론트에서 클릭한 위치의 위도 경도만 보내주면 반경 2km의 데이터만 출력할 수 있다.

 

프론트단의 스크립트가 너무 길어서 응용할 수 있게끔 코드는 간략하게만 보여드리는 점 양해바란다.

 

 

눈썰미가 좋은 사람은 맨 위 gif 이미지에서 클릭한 위치의 주소가 비동기로 변하는 점을 알 수 있을 것이다.

 

var url = 부분부터 클릭한 위치의 주소를 url로 넘겨주는 코드다. (난 그냥 간지용으로 하긴 했지만 구글 맵에서 이를 어떻게 이용했는지 한 번 생각해보자)

 

쨌든 이렇게 프론트에서 클릭한 위치의 위도와 경도를 넘겨주면 끝.

 

하면서 느낀거지만 제주도에 참 이쁜 호텔들이 많다

 

컴포넌트 간에는 props를 이용하여 클릭한 위치의 데이터들을 넘겨주었다.

 

 

 

이제 여기까지 하고

 

왜 Quasar를 쓰는지, 이제 그 빛을 발할 때다.

 

Quasar는 한 번의 코드 작성으로 SPA, SSR, PWA, 모바일 앱, 데스크톱 앱 및 브라우저 확장까지 전부 빌드가 가능하다.

 

 

일단 spa 방식의 빌드다.

 

quasar build -m spa

 

이 명령어 하나로 빌드가 끝난다.

 

 

그럼 dist/spa 폴더가 생성되는데

 

이걸 여러분이 원하는 방식으로 배포하면 끝이다.

 

예를들어 firebase로 배포한다면 firebase init 명령어로 저 dist/spa 폴더를 지정해주고 overwrite? 질문에 모두 No만 해주면 끝이다.

 

다른 빌드 방법은 나중에 빌드만 다루는 포스팅으로 찾아뵙도록 하겠다.

 

 

다음 시리즈는 '얼렁뚱땅 파이토치' 시리즈다.

 

 

 

As always, Thanks for watching, Have a nice day.