본문 바로가기

전체 글

 (134)
[Vue.js] Karma로 Unit 테스트 시 특정 폴더 제외 하기 Vue 프로젝트에 storyboard 등의 외부 라이브러리를 연동 시 npm run unit테스트를 하면 전체 소스에서 테스팅을 돌리려다 파싱 에러가 나곤 한다. 이때는 테스트에 연관된 files를 명시적을 지정할 수 있다. karma.conf.js를 보면 files 항목에서 파일 필터를 설정할 수 있다. test/unit/karma.conf.js:5 module.exports = function karmaConfig (config) { config.set({ // to run in additional browsers: // 1. install corresponding karma launcher // http://karma-runner.github.io/0.13/config/browsers.html //..
[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..
[Spring boot] AOP (관점 지향 프로그래밍) 이해 및 활용 스프링 AOP ( Aspect Oriented Programming ) AOP는 Aspect Oriented Programming의 약자로 관점 지향 프로그래밍이라고 불린다. 관점 지향은 쉽게 말해 어떤 로직을 기준으로 핵심적인 관점, 부가적인 관점으로 나누어서 보고 그 관점을 기준으로 각각 모듈화하겠다는 것이다. 여기서 모듈화란 어떤 공통된 로직이나 기능을 하나의 단위로 묶는 것을 말한다. 예로들어 핵심적인 관점은 결국 우리가 적용하고자 하는 핵심 비즈니스 로직이 된다. 또한 부가적인 관점은 핵심 로직을 실행하기 위해서 행해지는 데이터베이스 연결, 로깅, 파일 입출력 등을 예로 들 수 있다. AOP에서 각 관점을 기준으로 로직을 모듈화한다는 것은 코드들을 부분적으로 나누어서 모듈화하겠다는 의미다. 이때..
[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, ..
[Javascript] jquery 비동기 처리 (promise, $.when.apply) UI 단을 jquery로 개발할때 여러 rest api를 사용해서 데이터를 조합하고 화면을 그리는 일을 많이 하게 된다. 그러나 ajax로 비동기 api 호출 시 api 종료 시점을 판단하고 그때 무언가 하고 싶을때는 어떨게 하면 될까? 아래와 같이 rest api를 호출하는 함수가 하나 있다고 하자 function testCall(url) { $.ajax({ type : "GET" ,url : url ,async : true ,dataType: null ,beforeSend: function (xhr) { } ,success : function(response) { console.log(response); } ,error : function(jqXHR, error) { } }); } function c..
[Kubernetes] 쿠버네티스 Service 개념 - ClusterIP, NodePort 서비스(Service) 가 필요한 이유 파드는 일회성이다. 노드에서 파드가 제거되면 새로운 파드가 생성되거나, 클러스터의 노드에 장애가 발생되면 다른 노드로 이동된다. 쿠버네티스의 파드는 노드에 스케쥴된 후 시작하기 전에 IP 주소를 할당하기 때문에 미리 파드의 IP 주소를 알기 어렵다. Scale-out(HPA) 는 여러 파드가 같은 서비스를 제공하는 것을 의미하는데 각 파드는 개별 IP 주소를 가지게 된다. 클라이언트는 서비스를 제공하는 파드의 수와 IP를 신경 쓸 필요가 없어야 한다. -> 서비스 (Service)를 사용하면 파드가 클러스터 안 어디에 있던 고정 IP 주소 (Endpoint IP Address)를 통해서 접근할 수 있다. CluserIP 기본 서비스 타입으로 클러스터 내부에서 사용이..

티스토리툴바