악분의 블로그

들어가며 이 글은 가비아에서 구매한 도메인을 aws route53에 연동 방법을 설명합니다. aws route 53설정 aws route 53메뉴에서 host zone을 만듭니다. host zone에는 가비아에서 구매한 도메인을 입력합니다. host zone이 만들어지면 nameserver가 생성됩니다. 이 nameserver를 가비아에 등록해야 aws route 53와 가비아가 연결됩니다. 가비아 설정 nameserver를 가비아에 등록하기 위해, 가비아 네임서버 관리 페이지로 이동합니다. aws route53에서 확인한 nameserver을 입력합니다. 약 30분 ~ 하루 정도 기다리면 가비아와 aws route53연결이 완료됩니다. 연결 테스트 연결이 제대로 되었는지 확인하기 위해 테스트 recor..

들어가며 이 글은 cloudflare에 등록한 site를 삭제 방법을 설명합니다. 삭제 방법 cloudflare site에 접속한 후, 오른쪽 하단에 "Remove site from cloudflare" 링크를 클릭합니다.

들어가며 qursar이 제공하는 colum크기 설정 방법을 학습합니다. layout 12등분과 colum나누기 공식문서 링크: https://quasar.dev/layout/grid/introduction-to-flexbox#distribution-of-size quasar는 column이 12등분되어 있습니다. col-{x}로 item이 차지하는 크기를 설정할 수 있습니다. two thirds one sixth auto size based on content and available space fills remaining available space 예제 q-card를 이용하여 카드를 한개 만들었는데, 가로 사이즈가 카드 크기가 아니라 화면 크기만큼 차지하는 문제가 있습니다. column클래스로 크기를..

들어가며 box처럼 보이는 css를 만들고 div태그에 적용하는 예제입니다. 내용 div태그 여러개 만듭니다. 각 div태그에는 square css를 사용하게 설정합니다. css를 설정합니다. border를 설정하여 테두리를 만들고 display를 inline-block으로 설정하여 한 라인에 box가 오도록 설정합니다. .square { height: 80px; width: 80px; background-color: white; border: 1px solid black; display: inline-block; }

들어가며 이 글은 quasar flexbox에 대해 간단히 살펴봅니다. quasar flexbox란? flexbox는 css속성으로 행, 열 배치를 쉽게(유연, flexible) 설정할 수 있습니다. quasar에도 flexbox속성을 지원합니다. row class를 사용하면 flex-direction row를 사용합니다. column class를 사용하면 flex-direction column을 사용합니다. navbar 만들기 예제 flexbox의 장점은 정렬을 쉽게 할 수 있습니다. 아래는 flexbox items-center와 justify-between속성을 이용하여 item간 정렬을 했습니다. item간 세로기준 가운데 정렬과 가로기준 between정렬을 했습니다. Quasar APP

들어가며 안녕하세요. 이 글은 quasar color사용방법을 학습합니다. quasar color란? quasar는 색깔을 class로 사용할 수 있도록 미리 정의했습니다. 사용방법 tag class로 color를 지정하면 되는데, bg과 text2가지 유형으로 지정할 수 있습니다. bg는 백그라운드, text는 텍스트입니다. .... ... 아래 예제는 primary와 cyan색깔을 백그라운드로 설정한 예입니다. primary cyan 컴퍼넌트에 적용 quasar컴퍼넌트에도 color을 지정할 수 있습니다. style에서 color속성을 사용하시면 됩니다.

들어가며 이 글은 quasar에서 saas 전역변수를 설정하는 방법을 소개합니다. saas 전역변수 saas 전역변수는 src/css/quasar.variables.scss에 설정되어 있습니다. 변수 값을 수정하면 프로젝트 전체에 영향을 미칩니다. theme-builder 변수 모음은 quasar에서 builer형태로 제공합니다. 링크: https://quasar.dev/style/theme-builder Export버튼을 누르면 변수와 값이 자동으로 추출됩니다. 이 추출된 값을 src/css/quasar.variables.scss에 붙여넣어서 사용할 수 있습니다.

들어가며 이 글은 vuejs를 개발 할 때 좋은 extension을 소개합니다. extension 목록 vscode Vue VSCode Snippets auto rename tag volar HTML CSS support chrome vuejs devtools

들어가며 quasar를 처음 공부할 때, 최소한 알아야하는 quasar 프로젝트 구조를 학습합니다. 프로젝트 구조 quasar는 컴퍼넌트 구조로 되어 있으므로 pages, components, router를 가집니다. 그리고 quasar가 시작되면 로드하는 boot와 quasar를 설정하는 quasar.config.js파일이 있습니다.

들어가며 quasar는 23.3월 기준 프로젝트 생성 방법이 4가지 입니다. 저는 quasar CLI를 이용하여 프로젝트를 생성하기로 했습니다. 생성방법 공식문서가 매우 잘되어 있기 때문에, 공식문서 명령어 그대로 실행하여 프로젝트를 생서하시면 됩니다. 저는 npm을 사용했고, vite를 사용했습니다. $ npm i -g @quasar/cli $ npm init quasar packages.json scripts추가 기본 quasar packages.json에 dev, build scripts를 추가합니다. 참고자료: https://quasar.dev/start/quasar-cli#running-without-the-global-quasar-cli { ... "scripts": { "dev": "quas..