Awesome Quasar 참고하기
오늘은 Awesome Quasar에서 내가 참고할만한 사례를 집중적으로 찾아서 한 번 그 구조를 분석해보려고 한다. 오늘의 목표는 내가 개발할 앱의 설정을 다른 사람들이 만든 웹과 앱을 참고하여 만들어보려고 한다. 처음부터 맨땅에 헤딩하는 것보다는 남들도 다양한 과정을 거쳐서 만든 고차원적(?)인 완성물들을 보며 단계를 조금 jump하는 방법이다.
일단 Awesome Quasar, Awesome Quasar App을 찾아본다. 제목과 설명들을 보고 자신에 필요한 웹 사이트를 열어서 확인해본다. 이제 개발자 도구를 열어 그 사이트들의 코드를 확인해준다. 맥에서는 cmd + option + i나 fn + f12로 조회할 수 있다. 기본적으로는 개발자 도구에서 Elements를 확인해준다. 그러면 관련된 html등 코드가 나오게 된다. 그리고 아래 computed에서 기본적인 구조를 확인할 수 있다.
일단 간단해 보이는 페이지 하나를 들어갔다. 거기서 seeting부분에 들어가서 개발자 도구로 html 코드를 확인해봤다. 오. 깔끔하다고 생각했다. 근데 toggle이 있었다. 열어보니 방대한 코드가 쏟아진다. 일단 분석을 하기에는 어려움이 있어 보여 세 부분으로 나눠서 보기로 했다.
이렇게 간단하게만 생각했는데, 열어보면 되게 많다. 일단 body부분만 붙여넣기 하고 code를 보기로 했다. 어우 많다...
일단 이 html file은 크게 세 부분으로 나눠 볼 수 있다. 기본적으로 구조는 이 세 개를 포괄하는 <html dir="ltr"~~~> 부분 아래, <head> </head>, <body> </body>가 있다. 그 중에 진짜 화면에 직접적으로 표시하는 영역인 body부터 보려고 한다.
이 바디의 구조 또한 하위에 굉장히 많은 것들이 있다. <div id="q-app" data-v-app="">, <div class="q-layout q-layout--standar" tabindex="-1" style="min-height: 934px;"> 이렇게 뻗어나가서 엄청나게 많은 줄을 구성하고 있다. 대강 화면에서 Quasar를 이용해 class 정의를 하지 않고 끌어다 쓰는 듯하다. 그리고 head에는 title, meta, link가 병렬로 적혀있다.
적혀있는 코드를 그대로 복사해 VSC에 옮겨적어보니 양이 엄청나고, 내가 원하는 대로 나오지 않았다. 그 이유는 아마 Quasar project로 만들지 않아서 그런 듯하다. 제대로 quasar 프레임워크를 가져다 사용해야지 그 퀘이사 기능을 사용할 수 있기 때문인 듯하다.
바로 다음 포스팅에서 실제 화면을 구현해보도록 하겠다.
