로메오의 블로그

Figma 목록 Asset 가져오기 Community에서 ios 15 UI kit을 검색합니다. Drafts에 복제되었습니다. Drafts에서 확인 가능합니다. Assets에서 status를 검색해서 마우스 오른쪽 클릭 Shift + 2를 눌러 ios Status 디자인 을 확인 할 수 있습니다. Layer 탭에서 선택된 컴포넌트를 확인 할 수 있습니다. 해당 프레임을 선택하고 Command + c 복사합니다. 내 파일에서 Page를 추가하고 붙여넣기 합니다. 같은 방법으로 몇가지 프레임을 더 가져옵니다. 프레임을 모두 선택해서 Tidy up을 선택합니다. 프레임간 간격을 동일하게 맞추고, 커서를 이용해 수정할 수 있습니다. 원형 표시자로 순서 변경도 가능합니다. 캔버스 사이즈 설정 프레임에서 Desig..

VUE.JS 목록 주석 scss // 한줄 주석 : css 파일에 표시되지 않음 /* 여러줄 주석 : css 파일에 표시됨 */ css @charset "UTF-8"; /* 여러줄 주석 *//*# sourceMappingURL=index.css.map */ 변수 scss $gray: #333; $white: #fff; body {background: $gray; color: $white} css body { background: #333; color: #fff; }/*# sourceMappingURL=index.css.map */ 선택자 html 테스트 1 테스트 2 테스트 3 scss .list { color: red; ul { border: 1px solid red; > li { background:..

VUE.JS 목록 VScode 확장 프로그램 설치 ... "liveSassCompile.settings.formats": [ { "format": "expanded", "extensionName": ".css", "savePath": "~/../css/", "savePathReplacementPairs": null } ] ... 프로젝트 폴더 구조 폴더 구조를 위와 같이 만듭니다. hello 자동 컴파일 $color: red; body { background: $color } index.scss 파일에 코딩하고 저장하면 Live Scss Compliler가 css 파일을 생성해줍니다. VUE.JS 목록

VUE.JS 목록 pinia 설치 확인 Quasar cli로 프로젝트 생성시 pinia 옵션을 추가했습니다. stores/counter-store.ts import { defineStore } from 'pinia' export const counterStore = defineStore('main', { state: () => ({ counter: 0, name: 'romeoh' }), getters: { doubleCount: state => { return state.counter * 2 } }, actions: { reset () { this.counter = 0 }, addOne () { this.counter++ } } }) store 파일을 생성합니다. pinia 사용하기 hello {{ na..

VUE.JS 목록 Style & Identity https://quasar.dev/style/typography hello shadow Layout https://quasar.dev/layout/grid/introduction-to-flexbox col col col Alignment 가로정렬 One of two cols One of two cols 세로정렬 One of three cols One of three cols VUE.JS 목록

VUE.JS 목록 부모, 자식 콤포넌트간 데이터 공유를 위하여 사용함 parentComponent.vue childComponent.vue {{ text }} VUE.JS 목록

VUE.JS 목록 quasar/cli 설치 $ sudo npm install -g @quasar/cli 프로젝트 생성 $ npm init quasar Need to install the following packages: create-quasar Ok to proceed? (y) .d88888b. d88P" "Y88b 888 888 888 888 888 888 8888b. .d8888b 8888b. 888d888 888 888 888 888 "88b 88K "88b 888P" 888 Y8b 888 888 888 .d888888 "Y8888b. .d888888 888 Y88b.Y8b88P Y88b 888 888 888 X88 888 888 888 "Y888888" "Y88888 "Y888888 88888P..

VUE.JS 목록 https://quasar.dev/ Quasar Framework - Build high-performance VueJS user interfaces in record time Developer-oriented, front-end framework with VueJS components for best-in-class high-performance, responsive websites, PWA, SSR, Mobile and Desktop apps, all from the same codebase. Sensible people choose Vue. Productive people choose Quasar. Be both. quasar.dev Quasar 설치 $ npm install qu..