웹 구축 Quasar (Front-End) (1)

 

글을 시작하기 앞서 원래 나는 Web에 W 자도 모르는 상태였으며, 학부생 때 사용한 C++과  JAVA의 아주 얕은 지식이 전부였다...

현재 회사에 입사하여 받은 교육을 시작으로 첫 웹 페이지를 생성해 보았으며 선배들이 잘 만들어 놓은 기반 위에 숟가락과 젓가락만 살포시 놓고 사용하는 중이다...

 

퀘이사는 원래 블랙홀이 주변 물질을 집어삼키는 에너지에 의해 형성되는 거대 발광체를 뜻하는 말이다.

(퀘이사 - 위키백과, 우리 모두의 백과사전 (wikipedia.org) 위키피디아 참조)

 

현재 내가 실무에서 웹 페이지를 만들 때 사용하는 프레임워크인 퀘이사 (Quasar)는 Vue를 기반으로 더 쉽게 UI를 구현할 수 있는 프레임워크이다.

 

자세한 사항은 아래 공식 사이트를 참조하기 바란다.

Why Quasar? | Quasar Framework

 

위에서 언급했듯이 Vue를 기반으로 웹 사이트나 앱의 반응형 UI를 더 편리하게 코딩할 수 있으며 현재 아주 유용하게 사용하고 있다.

 

비슷한 예로 React와 비슷한 프론트엔드 프레임워크라고 보면 된다.

현재 실무에서는 버전 1.9.1v를 사용하고 있는데 지금은 2.7v 까지 나온 상황이다...

버전업을 해야하는데 엄두가 안남...

 

이곳에 새롭게 올릴 글은 v1을 사용하는게 아닌 v2를 사용할 예정이다.

 

v2를 사용하면서 많은 것들이 바뀌었는데 Vue 2에서 Vue 3 문법이 적용된 점, 타입스크립트가 적용된 점 등 바뀐점이 아주 많다. 현재 내가 사용중인 v1은 타입스크립트 문법이 1도 적용되지 않았다...

 

물론 타입스크립트 사용이 필수는 아니지만 이번 계기로 오류 확률을 줄이고 보다 가시성이 좋고 명확한 코딩을 위해 타입스크립트로 진행해보고자 한다.

 

퀘이사를 사용하는 방법은 4가지 방법이 있는데 현재 실무에서 Quasar CLI를 이용하여 사용하고 있다.

퀘이사를 사용하기 위해서는 기본적으로 Node.js가 설치되어야 있어야되고 현재 권장 사항은 아래와 같다.

 

• Node 14+ 이상
• Yarn v1 + 이상 , NPM (두 가지 모두 사용하는 것을 추천한다)

 

Nodejs는 이 글을 쓰는 당시의 LTS버전인 16.15.0 을 설치하였다

그리고 가장 중요한(?) 코딩 툴이 필요한데 나는 비주얼 스튜디오 코드를 사용하고 있다. (갓 VSCode)

Visual Studio Code - Code Editing. Redefined

 

 

위 3가지 (Node, Yarn, VSCode) 필수 설치 완료되었다고 가정하고 기본 퀘이사 페이지를 생성해보자.

위와 같이 폴더 하나를 생성하고 VS 코드로 오픈해보자.

$ yarn create quasar
# or:
$ npm init quasar

터미널 창을 열고 커멘드를 입력해보자. (여기서는 npm을 사용함)

그럼 위와 같이 어떤 형식으로 프로젝트를 생성할 것인지 선택. 여기서는 App with Quasar CLI를 선택하고 프로젝트 명 설정

 

Quasar v2, Typescript 선택!!

 

빌드 방법을 선택, Webpack과 Vite 두 가지 방법이 있는데 Vite는 사용해본적이 없으므로 Webpack으로 진행하겠다.

 

첫 번째로 해야할 일은 역시 헬로 월드가 국룰...

 

그리고 위와 같이 여러 설정을 해주면... 

 

 

드디어 하나의 퀘이사 프레임워크 프로젝트를 생성하였다!

 

다만 위 설정 중에 내가 제대로 알지도 못할뿐더러, 각각의 코딩 취향이 모두 틀리므로 일단은 넘어가도록 하겠다. 프로젝트 설정은 본인이 선택해서 원하는 스타일로 생성!! 

 

(대충 첫 번째 그림부터 API 설정, CSS 스타일 설정, 그 외 설정 등을 선택하고 ESLint의 빡셈 정도(?)와 yarn을 사용하고 있는가? 이다....)

 

다음은 퀘이사를 구동하기 위해 quasar/cli package 를 설치해야한다.

$ yarn global add @quasar/cli
# or
$ npm install -g @quasar/cli

 

 

모두 설치가 완료되면 package.json의 script 부분에 사용할 명령어를 추가해주자.

"dev": "quasar dev",
"build": "quasar build",
"build:pwa": "quasar build -m pwa"

 

드디어 퀘스트 프레임워크 실행을 위한 모든 설정이 완료되었다.

이제 아래 커멘트를 이용하면 로컬에서 퀘이사 기본 웹 화면을 볼 수 있다!

yarn quasar dev
or
npm run dev

 

위 내용은 모두 퀘이사 공식 홈페이지 내용을 그대로 따라한 것이니 보다 자세한 사항은 공식 홈페이지를 참조하기 바란다. (역시 공식문서가 가장 정확하다...!)

Quasar CLI | Quasar Framework

 

localhost:8080 에서 구동된 Quasar 웹 페이지

 

이제 마지막으로 처음 코딩을 시작할 때 무조건...(?) 하는 Hello World를 웹 화면에 찍어보자

처음 만들어진 퀘이사 프로젝트에 여러가지 것들이 있는데 그중에 indexPage.vue를 찾아 편집해보자.

 

Hello world는 국룰...

 

 

우선 이번 글에서는 Quasar 프로젝트를 만들고 실행해본 것으로만 마무리... (생각보다 뭐가 많다...)

 

현재 Quasar 카테고리에서는 어떤 식으로 퀘이사가 구동되는지만 정리하여 올릴 생각이고 나머지 기본적인 Vue문법, 타입스크립트나 자바스크립트 관련 글은 각각 해당하는 카테고리에 업로드할 예정이다.

 

차근차근 기본을 다진다는 생각으로 글을 쓸 예정이며, Quasar 뿐만이 아니라 실무에서 사용했던 모든 기술들을 총 망라해서 하나씩 올릴 것이다. (이쪽 주제 갔다가 이쪽 주제갔다가 할 예정..)