본문 바로가기

Frontend Development

 (21)
[Vue.js] vue 용 Storyboard 설치하기 Vue로 화면 개발을 할때 현재 만든 컴포넌트의 기능과 모양을 테스트 하려면 전체 서버를 띄워야 한다. 그러니 Storyboard 툴을 사용하면 툴에서 Vue 컴포넌트를 인식해서 웹 브라우저에서 컴포넌트 단위로 동작 및 모양 확인을 할 수 있다. Storyboard를 설치하기 위해서는 vue cli를 통해 프로젝트 구조를 만들어야 한다. 다음과 같이 기본적인 Application틀을 만든다. npm install -f @vue/cli-init@3.0.1 vue init webpack kanban-app 그리고 새로 만들어진 kanban-app으로 들어가서 아래 명령으로 storybook을 설치한다. npx -p @storybook/cli sb init --type vue 설치가 완료후 storybook실..
[Vue.js] karma로 unit 테스트 시 Can't find variable: WeakMap 에러 해결 Vue.js의 UI 테스팅 메카니즘으로 karma, chai, PhantimJS 조합으로 npm run unit테스트를 많이 돌려왔다. 그러나 최신 es6 javascript에서는 위 조합이 실행이 되지 않는다. 아래와 같이 에러가 난다. $ npm run unit > kanban-app@1.0.0 unit > cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run (node:21772) Warning: Accessing non-existent property 'VERSION' of module exports inside circular dependency (Use `node --trace-warnings ...` to show..
[Vue.js] 사용자 정의 directive (custom directive) 사용자 정의 리렉티브란 Vue 에서는 v-if, v-for, v-on, v-model등 다양한 디렉티브를 사용한다. 디렉티브가 하는 일을 프로그램의 관점에서 생각해 보면, 내부적으로 주어진 데이터에 따라 DOM을 조작하는 역할을 한다. 예를 들어 v-show는 값이 참이냐 거짓이냐에 따라 DOM 요소의 스타일에 display 프로퍼티 값을 수정한다. 그러나 때에 따라서는 Vue.js 내장 디렉티브 만으로는 구현할 수 없는 깊숙한 곳에 있는 요소에 대한 DOM 조작을 공통화 하고 싶다던가 DOM API를 호출하는 라이브러리를 Vue.js 애플리케이션에서 재사용 가능한 형태로 포함시키고 싶은 경우가 있다. 사용자 정의 디렉티브는 DOM 요소에 대한 저수준(low-level) 접근을 제공한다. 바꿔 말하면 D..
[css] 단위 (px, pt, em, rem, vh, vw) 절대단위와 상대단위 ​ 절대단위 : in, cm, mm, pt, px가 있으며 출력장치(모니터)의 물리적 속성을 아는 경우 효율적 상대단위 : %, em, rem, vh, vw이 있으며 기종간, 플랫폼 간의 호환성을 유지하는데 유리 ​ ⇒ 모바일/태블릿/웹사이트 모두에 호환되는 반응형 어플리케이션을 만들고자 한다면, 상대단위를 사용하는 것이 유리하다. 절대단위 ​px 와 pt ​ px (pixel) 절대값으로 사용 되는 단위이다. 고정된 값이기 때문에 사용하기 편하고 이해하기도 쉽지만 반응형 웹사이트를 만들때에는 적절하지 않은것 같다. ​ pt (point) 1 px = 0.75 pt ​ ​ 상대단위 ​% ​ 부모 엘리먼트의 size를 기준으로 한 상대적인 size ​ %를 기준으로 max-width, ..
HTML5 data 속성으로 추가 정보 저장 HTML5에서는 각 Element들에 대해서 data-* 형식으로 추가 정보를 저장할 수 있다. 특정 요소와 연관되어 있지 않지만 데이터에 대한 확장 가능성을 두고 의미론적으로 HTML 요소에 추가 정보를 저장한다. JQuery로 해당 data 속성의 값을 가져올 수 있다. .attr : HTML5의 attrbutuer 속성으로 가져옴 .data : dom 객체 속성 (Property)로 가져옴 //attr로 가져오면 String 속성이다. console.log($("#menu").attr("data-role")); //String "menu" console.log($("#menu").attr("data-last-value")); //String "99" console.log($("#menu").attr..

티스토리툴바