전체 글
-
[Vue.js를 활용한 퍼블리싱] vue-paper-dashboard (2) Sass 활용법오픈소스 분석 2020. 4. 16. 00:33
저번 포스팅에는 Creative Tim 팀에서 만든 'vue-paper-dashboard' free 버전 프로젝트의 구조를 살펴보았습니다. 이번 포스팅에서는 vue-paper-dashboard에서 SCSS의 어떤 문법을 활용했는지를 중점적으로 설명드리겠습니다. Popular CSS Preprocessor, SASS/SCSS! 요즘엔 CSS를 사용하기보다 CSS preprocessor를 많이 사용합니다. CSS Preprocessor란 CSS의 문법적 한계를 개선한 프로그램입니다. 그것들이 제공하는 문법을 통해서 웹 문서를 꾸밀 수 있습니다. 이름에서도 알 수 있듯이 컴파일을 하면 CSS가 되죠. SASS/SCSS, Stylus, Less 등 여러 CSS proprocessor가 있지만 그 중 가장 많이 ..
-
[자기계발] 퇴근 후 1시간 독서법독후감 2020. 2. 6. 19:17
나 역시 책은 읽는 양이 중요하다고 생각하는 사람이었다. 하지만 이 책을 읽고 생각이 바뀌었다. 보통 사람들이 착각하는 것 1. 책은 처음부터 끝까지 읽어야 한다. 2. 책은 많이 읽는 것이 중요하다 책은 처음부터 끝까지 순서대로 읽어야 완전히 이해할 수 있다는 1번 강박관념이 있어서 더 궁금한 목차가 있었는데도 불구하고 앞부분부터 꾸역꾸역 읽었었다. 이제는 그러지 않아도 찝찝한 마음이 안든다. 책을 많이 읽는 것보다 책 내용을 내것으로 만들고 내 의견을 생각하고 표현하는 법을 연습하는 것이 훨씬 중요하다는 것을 깨달았다. 작가가 강조했던 것 중 또 한가지는 발췌독인데 일을 하거나 필요한 지식을 습득할 때 그것을 위한 책 10권을 준비하고 필요한 부분만 집중적으로 습득해서 활용하는 방법이다. 앞으로 기술..
-
[Vue.js를 활용한 퍼블리싱] vue-paper-dashboard (1) 프로젝트 구조오픈소스 분석 2020. 1. 29. 23:03
Vue.js를 활용하여 컴포넌트를 구성하고 퍼블리싱 하는 노하우를 얻기 위해 오픈소스를 분석해봅니다. 첫번째 오픈소스는 Creative Tim 팀에서 만든 vue-paper-dashboard free 버전 소스입니다. https://www.creative-tim.com/product/vue-paper-dashboard Vue Paper Dashboard by Creative Tim www.creative-tim.com 숙련된 프론트엔드 엔지니어는 Vue.js를 활용하여 어떻게 퍼블리싱하는지 파악하는 것이 목표입니다. 프로젝트 코드를 다운받은 후 아래 설명과 함께 봐주세요 :) 포스팅에 Vue.js만을 다루지 않고 개인적인 학습 목적으로 html, css, Sass 등 프론트엔드와 관련된 여러 부분을 다룰..
-
[블록체인] 만화로 보는 블록체인독후감 2020. 1. 12. 19:08
처음에 블록체인에 대한 개념을 잡기 위해 두 번정도 읽었습니다. 블록체인이라는 기술이 사카시 나카모토에 의해 한번에 뚜둥~ 하고 나타난 것이 아니라 이 기술이 나타나게 된 배경 중 하나인 사이퍼 펑크 (cypherpunk) 운동, Nick Szabo가 이미 90년대에 고안했던 스마트 계약 등 기반이 되는 배경과 기술들을 순서대로 소개하고 있습니다. 더불어 암호화폐 시장에서 사용하는 떡상, 김치 프리미엄 등의 용어가 어떻게 생성된건지 소개하고 있습니다. 간단한 그림체의 만화책으로 블록체인 입문자에게 부담스럽지 않은 책입니다.
-
플러그인과 프리셋 (Plugins and Presets)Vue CLI 2020. 1. 5. 23:43
Plugins Vue CLI는 플러그인 기반 아키텍처를 사용합니다. 새로 생성된 프로젝트의 package.json 파일을 살펴보면, @vue/cli-plugin- 으로 시작하는 디펜던시를 찾을 수 있을 것입니다. 플러그인은 내부 웹팩 설정을 수정할 수 있고 vue-cli-service 에 명령을 추가할 수 있습니다. 플러그인 기반의 아키텍처는 Vue CLI를 더 유연하고 확장성 있게 해줍니다. 직접 플러그인을 개발할 수도 있으니 관심있는 분들은 Plugin Development Guide 참고하세요. 기존 프로젝트에 플러그인 설치하기 각각의 CLI 플러그인에는 generator와 runtime plugin으로 구성됩니다. generator는 파일을 생성하는 역할을 하고 runtime plugin은 코어 ..
-
*.vue 파일 하나만 즉시 프로토타이핑 하기 (Instant Prototyping)Vue CLI 2019. 12. 31. 00:06
이번에 소개할 기능은 Vue CLI를 통해서 전체 프로젝트 구조를 갖추지 않고 *.vue 파일 하나, 즉 하나의 싱글 파일 컴포넌트를 브라우저를 통해서 즉시 확인할 수 있는 기능입니다. 싱글 파일 컴포넌트를 만들어서 브라우저로 빠르게 확인해보는 등의 작업에 활용할 수 있습니다. vue serve, vue build 실행 환경 준비하기 vue serve, vue build는 @vue/cli-service-global 패키지가 제공하는 기능이므로 설치가 필요합니다. > npm install -g @vue/cli-service-global 참고로 vue serve는 전역에 설치되어 있는 디펜던시에 의존한다는 한계가 있어서 컴퓨터에 설치된 버전에 따라 다른 결과가 나올 수 있습니다. 따라서 이 기능은 빠른 프로..
-
Vue CLI란?Vue CLI 2019. 12. 18. 01:06
@vue/cli를 사용하면 커맨드 창을 통해서 별다른 설정 없이 빠르게 기본 골격을 갖춘 프로젝트를 생성할 수 있습니다. 따라서 복잡한 설정에 신경쓰지 않고 바로 앱 개발에 집중할 수 있는 환경이 만들어지죠. 별도의 설정을 할 때도 기존 설정을 제거 없이 변경이 가능합니다. Vue CLI 3.0 이상 버전은 @vue/cli 패키지명을 사용하고 있습니다. Vue CLI의 컴포넌트들 Vue.js의 vue-cli 깃헙 저장소(source code)를 살펴보면 여러 패키지들이 있습니다. 다 Vue CLI의 컴포넌트들입니다. 하나씩 자세히 살펴보겠습니다. CLI ( @vue/cli ) CLI는 전역으로 설치되는 npm 패키지로 터미널에서 vue 명령어를 사용할 수 있게 합니다. 'vue create' 명령어를 통..
-
Webpack 설정 어떻게 되어 있는지 확인하기 (inspect 명령어 살펴보기)Vue CLI 2019. 12. 16. 00:31
@vue/cli-service로 생성한 프로젝트는 웹팩 설정이 어떻게 되어 있는지 파일로 바로 확인할 수 없습니다. 따라서 변경하려고 할 때 어떻게 변경해야 할지 난감합니다. 따라서 vue-cli-service는 적용된 웹팩 설정을 면밀하게 보여주는 inspect 명령어를 제공합니다. global vue binary 또한 inspect 명령을 지원하기 때문에 여러분의 프로젝트 안에서 vue-cli-service inspect를 수행해 줄 수 있습니다. inspect 명령어는 적용되어 있는 웹팩 설정 내용을 콘솔에 출력해주고 체이닝을 통해서 규칙과 플러그인을 변경할 때 어떻게 해야 하는지 힌트를 줍니다. inpect 명령어를 사용해보기에 앞서 vue-cli로 프로젝트를 생성합니다. 이제 default로 생..