[개발 공부] Twitter 따라 만들기 #1 - 프로젝트 생성

Quasar Framework

Quasar Framework는 Vue.js기반의 오픈소스 프레임워크입니다.

Quasar Framework를 사용하면 빠르게 반응형 웹 애플리케이션을 개발할 수 있습니다.

다음은 Quasar의 다양한 기능입니다. Quasar 공식 문서에서 확인할 수 있습니다.

• SPAs (Single Page App)
• SSR (Server-side Renedered App) (+ optional PWA client takeover)
• PWAs (Progressive Web App)
• BEX (Browser Extension)
• Mobile Apps (Android, iOS,...) through Cordova or Capacitor
• Multi-platform Desktops Apps (using Electron)

---

Quasar Framework 설치하기

개발환경은 Windows OS의 Visual Studio Code를 사용했습니다.

Visual Studio Code의 Terminal에 다음과 같은 명령어를 입력해 Quasar Framework를 설치해줍니다.

$ npm install -g @quasar/cli

만약 설치가 잘 안된다면 다음과 같은 명령어를 입력해도 됩니다.

관리자 권한으로 설치를 실행하는 것입니다.

$ sudo npm install -g @quasar/cli

Quasar Framework의 설치가 끝나고, Quasar 프로젝트를 생성해 주겠습니다.

$ quasar create [프로젝트 이름]

그러면 Quasar 로고와 함께 프로젝트 설정값들을 입력해 프로젝트 설정을 진행해주시면 됩니다.

Project product name : Qwitter
Project description : Firebase 학습을 위한 트위터 만들어 보기
Author : Paul Kim
Pick you favorite CSS preprocessor : Sass with indented syntax(recommended) 선택
Auto-import in-use Quesar components & directives
      -also treeshakes Quasar; minimum bundle size 선택
Check the features needed for your project : 전부 비활성화
ESLint의 경우 협업할때 사용하면 좋습니다
Continue to install project dependencies after the project has been created? : Yes, use NPM

이렇게 하면 프로젝트 설정이 완료되고, 다음과 같은 명령어로 프로젝트를 실행할 수 있습니다.

cd [프로젝트 이름]  //해당 프로젝트로 이동해서
quasar dev

그럼 자동으로 인터넷 브라우저 창에서 프로젝트가 실행됩니다.

실행 화면