javascript

javascript

    테스팅 라이브러리 (Testing Library) 란?

    현업에서 개발을 하면서 테스트 코드를 짤 때 여러가지 도구들을 리서치 하다가 테스팅 라이브러리에 대해서 알게 되었고, 개인적으로 공부도 필요하고 정리할 겸 포스팅을 하게 되었습니다. 기본적인 내용은 모두 공식 문서에 있으므로 더 자세한 내용을 알기 원하시면 참고해 주시면 감사하겠습니다. 시작하며 @testing-library는 UI 컴포넌트를 사용자 친화적으로 테스트할 수 있게 도와주는 패키지 묶음이다. 우리는 테스트의 목적 중 하나로 구현의 세부사항들을 포함시키지 않는 것을 가지고 있다. 그래서 리팩터링 시에 테스트를 깨트리지 않아야 하고 팀의 속도를 항상 유지시켜야 한다. 코어 라이브러리인 DOM Testing Library는 웹 페이지를 테스트 할 수 있는 경량 솔루션으로 쿼리와 (JSDOM/Jes..

    [테스트] How To Test #1. Unit Test (feat. jest)

    이번 포스팅에서는 테스트에 대한 이야기를 해보려고 한다. 첫 번째 주제는 단위 테스트이다. Jest 설치하기 유닛 테스트를 할 수 있는 라이브러리는 여러 가지가 있지만, 나는 jest가 지금 시점에서는 가장 좋은 옵션이라고 생각을 한다. 자바스크립트를 사용하는 프론트엔드, 백엔드 모두 활발하게 쓰이고 있으며, test runner와 test matcher, test mock 등을 별도의 여러 개의 라이브러리를 설치해 주지 않고 이 jest 프레임워크 안에서 한꺼번에 할 수 있기 때문이다. 그러면 jest 를 프로젝트에 설치하는 과정부터 하나씩 살펴보도록 하자. 먼저 jest 라이브러리를 설치한다. yarn add --dev jest 설치 후에는 package.json 파일에 다음과 같이 스크립트를 추가해..

    JS #17. 클로저(Closure) <The Final>

    이번 포스팅에서는 자바스크립트의 클로저에 대해서 정리를 해 보려고 한다. 그리고 이 포스팅을 마지막으로 카일 심슨 저

    JS #16. 함수, 블록 스코프와 호이스팅(Hoisting)

    이번 포스팅에서는 함수 vs 블록 스코프에 대한 비교와 호이스팅의 개념까지 정리를 해 보려고 한다. 함수 기반 스코프 스코프는 컨테이너나 바구니와 같은 구실을 하는 일련의 '버블'이고 변수나 함수 같은 확인자가 그 안에서 선언된다. 자바스크립트는 함수 기반 스코프를 사용하기 때문에 함수는 이러한 버블을 만든다. 많은 개발자들은 각각의 선언된 함수는 버블을 생성하지만, 다른 자료구조는 자체적인 스코프를 생성하지 않는다고 알고 있다. 위 예제 코드에서 foo()의 스코프 버블은 a,b,c와 bar를 포함한다. 따라서 foo() 바깥에서는 이들에게 접근할 수 없다.(접근 시 ReferenceError 발생) 하지만 foo() 안에서는 이 모든 확인자(a, b, c, foo, bar 등)에 접근이 가능하고, b..

    JS #15. 이벤트 루프 (Event Loop)

    자바스크립트의 이벤트 루프에 대해서 정리해 보고자 한다. 단일 스레드 언어 자바스크립트 자바스크립트는 '단일 스레드' 언어이다. 하지만 실제로 우리는 자바스크립트로 여러가지 작업을 동시에 처리할 수 있다. 예를 들면 Node.js 웹서버에서 동시에 여러 개의 HTTP 요청을 처리하는 식으로 말이다. 스레드가 하나인데 자바스크립트는 과연 어떻게 동시성을 지원하는 것일까? 정답은 이벤트 루프이다. 자바스크립트는 이벤트 루프를 이용해 비동기적으로 동시성을 지원한다. 정확하게 말하면 자바스크립트 엔진(V8)에서는 이벤트 루프가 존재하지 않으며 단일 콜 스택(Call Stack)을 사용하며, 브라우저나 Node.js 환경에서 비동기 처리를 담당한다. 예를 들면 브라우저에서 비동기 호출을 위해 사용하는 setTim..

    JS #14. 스코프(Scope)

    이번 포스팅에서는 자바스크립트의 스코프에 대해서 기본적인 개념을 알아 보려고 한다. 변수의 값은 어디에 저장되는지, 그리고 필요할 때 변수를 어떻게 찾아서 써야 하는지는 프로그래밍에서 중요한 요소이다. 따라서 특정 장소에 변수를 저장하고 나중에 그 변수를 찾는 데는 규칙이 필요하다. 이러한 규칙을 스코프(scope)라고 한다. 자바스크립트를 일반적으로 '동적' 또는 '인터프리터' 언어로 분류하지만 자바스크립트는 사실 '컴파일러' 언어이다. 물론 자바스크립트가 전통적인 많은 컴파일러 언어처럼 코드를 미리 컴파일하거나 컴파일한 결과를 분산 시스템에서 이용할 수 있는 것은 아니다. 하지만 자바스크립트 엔진은 전통적인 컴파일러 언어에서 컴파일러가 하는 일의 상당 부분을 우리가 아는 것보다 더 멋있게(?) 처리한..

    JS #12. 타입과 값(Type and Value)

    이번 포스팅에서는 자바스크립트의 타입과 값에 대한 내용을 정리해 보려고 한다. 기본적인 내용이라 대부분의 자바스크립트 개발자라면 어느 정도 알고 있을만한 내용이지만, 어렴풋이 알고 있는 개념들을 확실하게 정리하고 넘어가기 위해 이 글을 작성했다. 자바스크립트에는 7가지 내장 타입이 있다. null undefined boolean number string object symbol(ES6) 값 타입은 typeof로 알 수 있는데 다른 타입들은 정확하게 매치가 되고 null만 type이 object로 매칭된다. 그리고 자바스크립트 내장 타입에는 없지만 typeof가 반환하는 문자열 중에는 "function"도 있다. function은 object의 하위 타입이다. typeof true === "boolean"..

    JS #11. 자바스크립트 제너레이터(Generator)

    이전 포스팅 - 자바스크립트 프로미스(Promise) 이전 포스팅에서 콜백을 통해 비동기 흐름을 어떻게 제어할 수 있을지에 대한 방법들을 이야기 했고, 프로미스를 통해 믿음성/조합성을 살피면서 제어의 역전을 되역전하는 방법을 살펴보았다. 그리고 이번 포스팅에서는 비동기 흐름 제어를 순차적/동기적으로 어떻게 나타낼 수 있을지에 대한 방법을 고민해 본다. 기존 ES5까지는 자바스크립트에서 함수가 실행되기 시작하면 완료될 때 까지 계속 실행되며 도중에 다른 코드가 끼어들어 실행되는 법은 없다고 개발자들은 생각했었다. 하지만 ES6부터 이러한 완전-실행 법칙을 따르지 않는 새로운 종류의 함수, 제너레이터가 등장하였다. 여기서 bar()는 x++와 console.log() 사이에서 실행된다. 하지만 만약 bar(..