Study/JavaScript (23) 썸네일형 리스트형 Jest configuration | official docs $ npm install --g jest $ npm install --D @types/jest $ npm install --D jest $ jest --init 터미널에서 jest를 global 옵션으로 설치하면, npm 명령어 jest를 실행할 수 있다. 타입스크립트 코드를 테스트하는 것이 아니더라도 @types/jest를 설치하면 코드에디터에서 자동완성, 메서드 설명 확인 등의 기능을 이용할 수 있다. jest --init 명령어를 사용하면, jest 설정과 관련된 파일(jest.config.js)을 간편하게 작성할 수 있다. script에 test - jest 자동 연결 typescript 코드의 테스트 설정 clearMocks: true | 테.. Testing, TDD what is testing? testing이란, 어플리케이션의 함수, 기능, ui 등이 예상한 대로 동작하거나/렌더링 되는지 미리 확인하는 것을 말한다. 예를 들어 어플리케이션에서 사용되는 utility 함수를 작성했다고 하자. 함수를 작성한 개발자는 input x가 전달 되었을 때 output y가 반환될 것으로 예상한다(expectations, requirements). 이 때 이 함수에 대한 test code를 작성하고, 실행하면 그 결과를 통해 x가 전달되었을 때 y가 반환되는지 등을 확인할 수 있다. +) 테스트 코드를 작성하기 이전에는, 제품 개발이 완료 되면 QA(quaility assurance) 팀이 사용자의 입장에서 소프트웨어를 테스트하는 것이 보편적이었다. 개발이 모두 완료된 시점에.. shallow vs. deep copy const test = [{ id: 1 }, { id: 2 }, { id: 3 }]; const copiedTest = test.slice(); // shallow copy const copiedTest2 = JSON.parse(JSON.stringify(test)); // deep copy test === copiedTest // flase test === copiedTest2 // flase test[1] === copiedTest[1] // true(shallow copy) => same pointer! test[1] === copiedTest2[1] // false(deep copy) shallow copy | test.slice() test 배열의 모든 (객체) 아이템을 얕게 복사하고 그 아이템.. Modern Syntax | Params, Spread, De-structuring 1. Params default params default params는 사용자가 함수에 인자를 전달하지 않았을 때, 기본으로 적용할 값을 설정하기 위해 만들어진 문법이다. 이전에는 아래와 같이 함수 내부에서 조건문을 이용했다. function rollDice(numsSide) { return Math.floor(Math.random() * numsSide) + 1; } rollDice(); // numsSide===undefined => it prints out NaN // use condition checking function rollDice(numsSide) { if(!numsSide) { numsSide = 6; }; return Math.floor(Math.random() * numsSide).. Hoisting +) scope, execution context 챕터와 함께✍️ Hoisting hoist란 "끌어올리다"의 의미를 갖는 단어이다. JS에서 hoist 역시 무언가를 끌어올리는 것과 관련이 있다. JS엔진의 interpreter는 우리가 작성한 프로그램이 실행되면, 소스 코드를 컴퓨터가 이해할 수 있는 언어로 한줄 씩 번역하는 역할을 하는데, 이 작업을 시작하기 전에 hoisting이 일어난다. hoisting이란, 함수, 변수, 클래스의 선언(declaration, not initialization)이 어디에 작성되어 있든지 간에, 해당 선언문을 이들이 작성된 scope의 최상단에 있는 것처럼 끌어올리는 것을 말한다. 이제 함수와 변수, 클래스의 경우를 나누어 hoisting에 대해 살펴보자. 1. .. Var Var var는 JS에서 변수를 선언할 때 사용되던 오래된 버전의 키워드로 modern javascript에서는 사용하지 않는다. 왜 var를 사용하지 않는 걸까? var로 선언된 변수들은 block scope를 구분 하지 못한다. 블럭 안에 변수를 선언했더라도, 이 변수를 global 변수로 취급한다. 즉 블럭 안에서 선언된 변수를 코드 전역에서 업데이트 할 수 있다는 의미이다. 함수 scope 내부에서 선언된 var는 외부에서 접근할 수 없다. var를 이용해서 이미 선언한 변수를 또 한번 선언할 수 있다. 어떤 값을 재할당 하는 것처럼 동작하기 때문에 이미 선언된 변수라는 에러를 던지지 않는다. var를 작성하지 않고도 변수를 선언할 수 있다. 키워드 없이 변수를 선언하면, 코드를 읽는 사람의 입장.. Request & Response | API, JSON, fetch... what is Request? | API 사용자가 웹 페이지에 처음 접속하는 과정을 정리해 보자. client가 주소창을 이용해서 HTTP request로 URL을 요청한다. URL에 해당하는 server가 html, css, js 파일을 Client에게 전달한다. client의 브라우저가 해당 파일들을 rendering해서 client에게 보여준다. 웹 페이지에 접속한 뒤에도 사용자는 다양한 요청을 할 수 있다. 무언가를 검색할 수도 있고, 마음에 드는 검색 결과가 나올 때 까지 스크롤을 내릴 수도 있다. 이 때 사용자는 주소창에 새로운 url을 입력하지 않는다. 즉, 사용자가 직접 어떤 요청을 하지않더라도 새로운 데이터를 볼 수 있다. 내가 검색한 키워드에 맞는 추천 검색어 목록, 스크롤을 끝까지 내.. This Before Start JS에서 this 키워드가 가리키는 것은 현재 실행되고 있는 컨텍스트, 즉 execution context(global or function)의 프로퍼티 중 하나이다. this 키워드가 어디에서 작성되었는지와 strict 모드인지, 아닌지에 따라 이 프로퍼티는 달라진다. 이것은 다른 프로그래밍 언어에서는 보기 드문 자바스크립트 언어만의 특징이다. +) execution context에는 lexical environment, variable environment가 있다. 다시 lexical environment에는 enviornment record, outer, this binding이 저장되어 있다. This keyword 1. Global context global 실행 컨텍스트.. 이전 1 2 3 다음
