본문 바로가기

IT 천국

 (128)
[Synology NAS] 도커 gitlab-ce 에서 ssh git clone 시 password 문의 해결책 시놀로지에서 도커로 gitlab-ce를 설치하고 ssh key까지 등록을 하였는데도 git clone을 하면 password를 계속 묻는 경우가 있다. $ git clone git@fakeid.fake.me:40002/web-reference/korearetail.git Cloning into 'korearetail'... git@fakeid.fake.me's password: gitlab-ce 서버의 ssh가 동작하는지 아래명령으로 테스트가 가능하다. 테스트 결과 ssh는 key인증이 성공적이다. $ ssh -Tv git@fakeid.fake.me -p 40002 OpenSSH_8.2p1, OpenSSL 1.1.1d 10 Sep 2019 debug1: Reading configuration data /..
[Vue.js] Storybook custom webpack, preview 추가 Storybook을 현재 개발중인 프로젝트에 적용하기 위해서는 현재 Project 에 적용되고 있는 Webpack config나 특정 entry 함수가 필요할 경우가 많다 이럴 경우 아래 설정들을 추가해 두면 현재 프로젝트 설정도 하고 Storybook도 이용할 수 있다. webpackFinal 함수 추가 아래와 같이 기본 실행되는 main.js파일에 webpackFinal 함수를 추가하고 webpack config를 확장한다. .storybook/main.js const path = require('path'); const resolve = (dir) => {return path.join(__dirname, '..', dir);}; const createCompiler = require('@storyb..
[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, ..

티스토리툴바