분류 전체보기
-
[JS] Redux Thunk 알아보기Dev/JS 2018. 4. 28. 20:01
Redux 미들웨어인 Redux Thunk에 대해서 알아봅시다. redux-thunk 도큐먼트를 번역하였습니다. Redux Thunk? Redux Thunk는 리덕스의 미들웨어로서, 액션 생성자를 작성하면 액션 대신에 함수가 반환되게끔 할 수 있습니다. 또한, 액션을 디스패치 할때 delay를 줄 수 도 있고, 아니면 특정한 조건이 만족되면 디스패치 할 수 있는 기능도 있습니다. 그리하여 내부 함수에서 dispatch, getState와 같은 메소드를 매개변수로 받을 수 있습니다. const INCREMENT_COUNTER = 'INCREMENT_COUNTER'; function increment() { return { type: INCREMENT_COUNTER };} function incrementA..
-
[JS] 테스트 프레임워크 Mocha.js 시작하기Dev/JS 2018. 4. 22. 00:50
Javascript에서 사용할 수 있는 테스트 프레임워크인 Mocha를 사용해보자 설치하기 먼저, npm을 사용해서 global로 설치해 주세요 $ npm install mocha --global 혹은 자신의 프로젝트에 dependency로 설치해 주세요 $ npm install mocha --save-dev > Mocha 3.0.0 혹은 이후의 버전을 npm으로 설치할 때, 자신의 npm 버전이 2.14.2 이상이여야 설치가 가능합니다.추가로, Mocha를 실행시키려면 Node.js 버전 4 이상일 때 실행 가능합니다. 시작하기 자신이 사용할 폴더를 만들고, 그 안에 test.js 라는 파일을 생성한 후, 에디터에서 실행시켜주세요. 에디터를 연후, 다음 코드를 넣어주세요 var assert = requ..
-
[CSS] CSS Preprocessor - Sass | Sass란?Dev/CSS 2018. 4. 21. 17:31
CSS 전처리기 Sass에 대해 알아보자 1. CSS Preprocessor(전처리기) CSS는 배우기 아주 쉽지만 CSS로 개발을 하다보면 금세 지저분해지는 경우를 볼 수 있습니다. 예를 들어 같은 스타일을 적용해야 하는 요소들이 있다면 코드를 복사해서 붙여야하고, 수정이 필요할 때에는 일일이 찾아서 수정해야 하는 번거로움이 있습니다. 이러한 문제점때문에 CSS 전처리기(Preprocessor)가 나오게 되었고, 이는 CSS가 동작하기 전에 미리 동작합니다. CSS 전처리기의 종류에는 대표적으로 Sass, Less, Stylus 가 있습니다. 이번 포스팅은 Sass에 대해 알아보고, 간단한 기능들을 설명하도록 하겠습니다. 2. Scss? Sass는 처음에 들여쓰기를 감지하여 그것을 중요한 핵심으로 여겨..
-
[방법론] TDD란?Dev 2018. 4. 20. 19:46
TDD 방법론에서 적용할 수 있는 Mocha 프레임워크 TDD란 ? TDD란 Test-Driven Development 의 약자로, "테스트 주도 개발" 이라고 한다. 현재 전 세계에서 가장 즐겨 사용하는 개발 방법론이라고 한다. 반복 테스트를 이용한 소프트웨어 방법론으로, 작은 단위의 테스트 케이스를 작성하고 이를 통과하는 코드를 추가하는 단계를 반복하여 소프트웨어를 구현한다고 한다. 위 사진과 같은 프로세스로 이루어져 있다. 1. 실패하는 테스트를 작성한다.- 애자일 개발론의 Robert C.Martin 은 다음의 TDD 원칙을 제시한다.1. 실패하는 테스트를 작성하기 전에는 절대로 제품 코드를 작성하지 않는다.2. 실패하는 실패하는 테스트 코드를 한번에 하나 이상 작성하지 않는다.3. 현재 실패하고..
-
[JS] async/awaitDev/JS 2018. 4. 4. 23:40
async/await 에 대하여 1. async Async 함수가 호출되면 이 함수는 Promise 를 반환한다. 그리하여 위와 같이 add1을 호출하였을 때 Promise가 반환되어 .then() 함수 호출이 가능한 것이다. 다른 비동기 처리방식 중 setTimeout과 다르게 async는 명확하게 앞에서 하던 일이 끝나면 다음일을 할 수 있게 명시해준다. 2. await await는 async 문 안에서만 사용될 수 있다.. 또한 await 문은 async 함수의 실행을 중단시키고, Promise가 fulfill(이행) 또는 reject(거절) 되기 전까지 기다린다. 그리고 나서 다시 async 함수를 실행시킵니다.
-
[JS] Webpack 4 setting 'mode' optionDev 2018. 3. 15. 19:36
Webpack 4 'mode' 옵션 세팅하기 Webpack4로 버전이 업데이트 되었고, 이번 웹팩4에서는 Production 모드와 Developement 모드를 소개했습니다. 웹팩4에서는 production 모드와 development 모드 둘 중 하나를 선택해야 합니다. (이것을 설정하지 않으면 저같은 경우는 초기 프로젝트 단계임에도 불구하고 번들링 시간이 무려 8초 씩이나 나왔었습니다) Production mode : webpack dev server 나 기타 등등 개발을 위한 구성파일을 정의합니다.Development mode : UglifyJSPlugin , 소스맵등의 생산을 위한 구성파일을 정의합니다. 모드를 선택하지 않고 실행을 하게 되면, Warning in ConfigurationThe ..
-
[Dev]점진적 향상법(Progressive enhancement), 우아한 성능 저하법(graceful degradation)Dev 2018. 2. 6. 14:52
점진적 향상법 (Progressive enhancement), 우아한 성능 저하법(graceful degradation ) 1. 점진적 향상법 (Progressive enhancement) -> 많은 테스트를 통해 말그대로 기능을 점진적으로 향상시키는 것. -> 기초부터 차곡차곡 쌓아서 발전해 나가는 방법 -> 노력과 시간이 필요하다. ex ) 웹 페이지를 구성할 때 1. HTML로 마크업을 구성한다. 2. CSS로 스타일을 입힌다. 3. JS로 사용자 경험을 향상 시킨다. 2. 우아한 성능 저하법 (graceful degradation) -> 최신 기술을 기반 또는 최신 기기에서 동작하는 기능을 만들고 나서, 오래된 기술 또는 오래된 기기에서 동작하게 하기 위해 유사한 기능을 만들어 동작하게 하는 것...
-
[WEB] CSS animation vs JS animationDev 2018. 2. 6. 12:23
CSS animation VS JS animation 1. 어떤 animation을 선택할까? - ui 요소 상태 전환 등, 간단한 원샷의 애니메이션을 적용하고 싶을 때는 CSS Animation - ui 요소가 작거나, 그 요소만의 자체적인 상태를 갖고 있을 때는 CSS Animation - 바운스 , 중지 , 일시정지, 되감기 등의 고급 효과를 원할 때는 Javascript Animation - 애니메이션에 대해 세밀한 작업을 해야하는 경우에는 Javascript Animation * 전체 장면에 대한 애니메이션을 하고 싶다면 requestAnimationFrame을 사용합니다. * -> javascript 의 고급의 접근방식이지만, 캔버스 위에 그리거나, 게임을 만들 때 유용합니다. 2. Anima..