Jest는 대표적인 자바스크립트 테스트 프레임워크이다. 하고 있는 프로젝트에 테스트 코드를 작성하고 싶어서 Jest 공식 문서를 공부하고 정리해봤다. 환경 구축 설치npm install --save-dev jest @types/jest @types/jest는 주로 타입스크립트에서 jest api를 import하지 않고 바로 사용하기 위해 쓰는데나는 이걸 설치하니 jest api 메소드의 타입 힌트를 볼 수 있어서 설치했다. babel과 함께 사용한다면 babel-jest 설치npm install --save-dev babel-jest babel.config.jsmodule.exports = { presets: [['@babel/preset-env', {targets: {node: 'current..
localStorage 문법 1. 데이터 추가, 읽기, 삭제 localStorage.setItem('데이터이름', '데이터'); localStorage.getItem('데이터이름'); localStorage.removeItem('데이터이름') 2. array/object 자료 저장 localstorage는 문자만 저장할 수 있는 공간이라 array/object를 바로 저장할 수 없다. array/object -> JSON 이렇게 변환해서 저장해야 한다. (JSON -> 문자취급) 데이터 저장 (array/object -> JSON) localStorage.setItem('obj', JSON.stringify({name:'jane'}) ); 데이터 읽기 (JSON -> array/object) var a ..
구조 분해 할당 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 자바스크립트 표현식이다. 배열 및 객체 리터럴 표현식을 사용하면 즉석에서 쉽게 데이터 뭉치를 만들 수 있다. 구조 분해 할당 구문은 이와 비슷하지만, 대신 할당문의 좌변에서 사용하여, 원래 변수에서 어떤 값을 분해해 할당할지 정의한다. 배열 구조 분해 var [a, b, c] = [1, 2, 3]; var d, e; [d, e] = [4, 5]; // 선언이 분리되어도 구조 분해 할당 가능 var [a, b, c] = [2, 3]; // c = undefined var [a, b, c = 5] = [2, 3]; // default 값 설정 가능, 분해한 값이 undefined일 때 대신 사용 var [a, b..
?.(optional chaining) 자바스크립트에서 객체 내부의 속성에 접근할 때, 존재하지 않는 객체에 대해 접근하면 에러가 발생한다. var obj = { one: 1, two: { name: '222'} } console.log(obj.onee); >> undefined console.log(obj.onee.name); >> Uncaught TypeError: Cannot read properties of undefined (reading 'name') at :1:10 존재하는 객체의 존재하지 않는 속성에 접근하면 undefined를 반환하지만, 존재하지 않는 객체의 속성에 접근하면 에러가 발생한다. 중첩되지 않은 간단한 오브젝트의 경우, 오브젝트에서 원하는 데이터를 찾을 수 없으면 자바스크립트..
Spread Operator와 비슷해 보이는, 그렇지만 완전히 다른 Rest Parameter에 대해 정리해보고자 한다. Rest Parameter는 Spread Operator와 함께 ES6에 새롭게 도입되었다. Rest Parameter(나머지 매개변수) Rest 파라미터는 이름처럼 Rest 역할을 하는 매개 변수이다. 매개 변수의 이름 앞에 Spread Operator를 붙인 형태로, 함수에 전달된 인자(argument)들을 배열로 받아 준다. function restParam(...rest){ console.log(rest); } restParam(1, 2, 3); >> [1, 2, 3] Rest 파라미터는 일반 파라미터와 함께 사용할 수 있으나 반드시 가장 마지막 파라미터로 있어야 한다. fun..
Spread Operator (...) 스프레드 연산자(Spread Operator)는 자바스크립트 객체 중에 반복 가능한 Array, Object, String, Map, Set 등을 펼치는(spread out) 연산자이다. ES6에서 새롭게 도입된 문법이다. Array에 스프레드 연산자를 붙이면 다음과 같이 대괄호가 제거되어 원소만 가져올 수 있다. var arr = [1,2,3]; console.log(...arr); > 1 2 3 또한 배열 합치기, 복사(deep copy)를 할 때 유용하게 사용된다. var arr1 = [1, 2, 3]; var arr2 = [4, 5]; var arr3 = [...arr1, ...arr2]; console.log(arr3); >> [1, 2, 3, 4, 5] ..
이번 글에서는 정규 표현식에 대해 정리해 보려고 한다. 정규 표현식(Regular Expression)은 특정한 규칙을 가진 문자열의 집합을 표현하기 위해 사용하는 형식언어로 줄여서 정규식이라고도 부른다. 영어로는 흔히 regex 또는 regexp라고 한다. 정규표현식 기본 문법 메타 문자 메타 문자 의미 메타 문자 의미 * 0번 이상 \ 이스케이프(escape) 문자 + 1번 이상 | OR ? 0번 또는 1번 ( ) 그룹 ^ 문자열 시작 {} 수량자 $ 문자열 끝 [] 클래스 (괄호 안 문자 중 하나) . 단일 문자 [^] NOT 수량자 수량자 의미 {m} 앞에 나온 패턴이 m회 반복되는 경우 {m, } 앞에 나온 패턴이 m회 이상 반복되는 경우 {m, n} 앞에 나온 패턴이 m회 이상 n회 이하 반복..
