하수도키의 성장일기

개발일기/Vue.js

[Vue.js] Vue 테스트 코드 작성하기(Jest)

Vue에서 Unit Test(단위테스트)를 해보자. 개요 vue를 통해 unit test를 살펴보자. vue-test-utils,jest를 사용할 예정이다. 테스트를 하는 이유는 자신감 증가, 퀄리티있는 코드, 잘 정리된 문서를 꼽을 수 있다. 테스트를 위한 세팅 터미널에서 아래 명령어를 입력 후 사진과 같이 설정한다. vue create unit-testing-vue 설치가 되고 package.json파일을 열면 아래 코드가 있는데 이걸로 테스트를 한다. "scripts": { ... "test:unit": "vue-cli-service test:unit" }, npm run test:unit tests/unit 폴더에 테스트할 파일을 넣는다. 첫번째 유닛 테스트(Data 업데이트 될때 UI 변경) 로..

개발일기/자바스크립트 코딩의기술 정리

자바스크립트 코딩의 기술(시리즈 8 - 클래스로 인터페이스를 간결하게 유지하라#2)

자바스크립트 코딩의 기술(시리즈 8 - 클래스로 인터페이스를 간결하게 유지하라#2) 자바스크립트 코딩의 기술 책을 읽고 복습 겸 정리하는 포스팅이다. 시리즈 1이 시작이며 시리즈 몇까지는 대지는 진행하면서 가늠잡아 보겠다. 개요 프로토타입이 조합된 자바스크립트 클래스를 살펴볼 예정이다. get과 set으로 인터페이스를 단순하게 만들어라. 제너레이터로 이터러블 속성을 생성하라 bind()로 문맥 문제를 해결하라 get과 set으로 인터페이스를 단순하게 만들어라. 이전 tip에서 클래스에 기본을 알아 보았다. 인스턴스 생성 속성과 메서드 호출 부모 클래스 확장(쌍속) 이번 tip에서는 get, set를 통해 비공개 속성처럼 사용해보기 클래스는 아래 코드처럼 속성에 접근하여 변경도 가능하다. 같이 협업하는 개..

개발일기/자바스크립트 코딩의기술 정리

자바스크립트 코딩의 기술(시리즈 8 - 클래스로 인터페이스를 간결하게 유지하라#1)

자바스크립트 코딩의 기술(시리즈 8 - 클래스로 인터페이스를 간결하게 유지하라#1) 자바스크립트 코딩의 기술 책을 읽고 복습 겸 정리하는 포스팅이다. 시리즈 1이 시작이며 시리즈 몇까지는 대지는 진행하면서 가늠잡아 보겠다. 개요 프로토타입이 조합된 자바스크립트 클래스를 살펴볼 예정이다. 읽기 쉬운 클래스를 만들어라 상속으로 메서드를 공유하라 클래스로 기존의 프로토타입을 확장하라 읽기 쉬운 클래스를 만들어라(TIP37) 자바스크립트에서 클래스를 작성하는 방법을 살펴보자. class Coupon { constructor(price, expiration) { this.price = price; this.expiration = expiration || "2주"; } } const coupon = new Coup..

개발일기/자바스크립트 코딩의기술 정리

자바스크립트 코딩의 기술(시리즈 7 - 유연한 함수를 만들어라)

자바스크립트 코딩의 기술(시리즈 7 - 유연한 함수를 만들어라) 자바스크립트 코딩의 기술 책을 읽고 복습 겸 정리하는 포스팅이다. 시리즈 1이 시작이며 시리즈 몇까지는 대지는 진행하면서 가늠잡아 보겠다. 개요 이 장에서는 함수의 사용법을 다룰 예정이며, 기본기는 다루지 않을 예정이다. 테스트 가능한 코드 작성법 화살표 함수의 매개변수에 대한 개념 함수를 반환하는 고차함수와 재사용 가능한 함수 화살표 함수의 문맥 개념 테스트하기 쉬운 함수를 작성하라(TIP32) 테스트를 작성하면 코드를 쉽게 리팩토링 가능 오래된 코드를 쉽게 이해 가능 마지막으로 명확하고 버그가 적은 코드를 작성 가능 위와 같은 장점들이 있지만 현실을 테스트를 작성하는것 쉽지 않다.(테스트 작성의 어려움, 코드가 외부 의존성이 강하게 결합..

개발일기/SCSS(SASS)

[SCSS(SASS)] 반응형 breakpoints 추가하는 방법

개요 이번에는 반응형 웹사이트 작업 시 꼭 필요한 mediaquery를 공부해봅시다! scss 사용해서 살펴보겠습니다 : ) 코드 우선 완성된 코드를 보여주고 설명해드릴게요 : ) $breakpoints: ( 'mobile-extra-small': (min-width: 21.25rem), // 340 'mobile-portrait-only': (max-width: 29.9375rem), // 479 'mobile-landscape': (max-width: 51rem), // 816 'tablet-portrait': (min-width: 48rem), // 768 'desktop-template': (min-width: 48.0625rem), // 769 'tablet-portrait-only': (max..