본문 바로가기

Frontend88

[quasar] quasar config란? Quasar는 Vue 프레임워크이다. 빠르게 spa, ssr, pwa 프로젝트를 만들 수 있고 구글의 material design으로 ui프레임워크를 사용하고 있기 때문에 반응형 지원이 매우 뛰어나다. 프레임워크는 몇 가지 룰과 체계를 갖고 있어서 편리한 코딩을 도와주는데 quasar의 환경설정과도 같은 부분을 quasar config에서 처리하고 있다. 마치 같은 Vue 프레임워크인 Nuxt의 nuxt.config 같다고 보면 된다. quasar.config의 구조 - Quasar 프레임워크가 제공하는 컴포넌트와 지시자, 플러그인을 불러올 수 있다 - 기본적인 Quasar 언어팩을 제공한다 - 아이콘 라이브러리를 불러올 수 있다 - 기본적인 Quasar 컴포넌트에 적용할 Quasar 아이콘세트를 설정 .. 2020. 6. 25.
[Quasar] Quasar Dev 명령어 실행이 안될 때 프로젝트를 진행하던 중 Quasar Dev 명령어로 로컬서버에서 프로젝트를 열었는데 모듈이 다 컴파일링 되고 에러도 없는데 페이지가 열리지 않았다. 대체 왜그럴까 하고 찾아보던 중 quasar 포럼에서 그럴때는 quasar build를 한번 해봐! 그러면 그때 오류나옴 ㅇㅇ 이라고 해서 해봤는데 단순히 quasar dev 명령어로는 보이지 않던 에러를 뱉어냈다. 몇번의 시도 끝에 결국 해결했는데 pug형식으로 vue 파일을 작성할 때는 들여쓰기와 공백주기에 엄청 신경써야함을.... 깨달음 2020. 6. 25.
Vuex란 무엇일까? 우리 회사에서는 Quasar라는 Vue 프레임워크를 사용한다. 기존에 Quasar로 제작된 소스를 보다가 상태관리하는 Vuex에 관한 코드들을 보게 되어 분석을 하면서 Vuex에 대해 찾아보았다. Vuex란? Vuex는 Vue.js 애플리케이션에 대한 상태 관리 패턴 + 라이브러리 입니다. 애플리케이션의 모든 컴포넌트에 대한 중앙 집중식 저장소 역할을 하며 예측 가능한 방식으로 상태를 변경할 수 있습니다. 또한 Vue의 공식 devtools 확장 프로그램과 통합되어 설정 시간이 필요 없는 디버깅 및 상태 스냅 샷 내보내기/가져오기와 같은 고급 기능을 제공합니다. 모든 Vuex 애플리케이션의 중심에는 store 가 있습니다. store는 기본적으로 애플리케이션 상태 를 보유하고있는 컨테이너입니다. Vuex.. 2020. 6. 18.
JS | callback과 promise callback과 promise callback이란? javascript에 대해 찾아보다보면 정말 callback이라는 말을 많이 접하게 된다. 이 callback 뜻을 기억하려고 해도 잘 와닿지가 않아서 한번 정리해보려고 한다. callback은 간단하게 말해서 다른 함수가 실행을 끝낸 뒤 실행되는 -callback되는 함수라는 뜻이다. javascript에서 callback함수는 다른 함수의 파라미터로 함수(javascript에서 함수도 객체이기 때문에 매개변수로 전달하는 것이 가능하다.)를 전달하고 특정 이벤트 실행 후 파라미터로 전달했던 함수가 다시 호출되는 것이다. 그렇기 때문에 callback과 나란히 나오는 개념으로 비동기가 있는 것이다. function delay(sec, callback).. 2020. 2. 11.
JS | 선택자! 요소를 선택하는 다양한 방법 요소를 제어하기 위해서 가장 먼저해야할 것은 그 요소를 선택하는 것이다. 그 요소를 어떻게 불러와서 제어를 하는걸까? 선택자를 통해서 요소를 불러온다. Javascript로 요소를 선택하는 방법 //ID 값으로 요소선택 var button = document.getElementById("button"); //name값으로 요소선택 (form요소 참고) var form = document.getElementsByName("form_name"); //Class 이름으로 요소선택 var button = document.getElementsByClassName("button"); //특정 태그명가진 요소선택 var z = document.getElementsByTagName("li"); 요즘 자주 쓰는 것처럼 .. 2020. 2. 11.
JS | 동적으로 추가된 HTML element 제어하기 동적으로 추가된 HTML 요소들은, 즉 jquery나 JS를 통해 추가된 요소들은 다른 요소들처럼 기존의 방식대로 이벤트가 등록되고 제어되지 않는다! 참고: https://uiandwe.tistory.com/1107 https://m.blog.naver.com/PostView.nhn?blogId=nemesis5198&logNo=221362855998&proxyReferer=https%3A%2F%2Fwww.google.com%2F 2020. 2. 11.