Just Do IT!

Jest란? 페이스북에서 만들어서 React와 더불어 많은 자바스크립트 개발자들로 부터 좋은 반응을 얻고 있는 테스팅 라이브러리다. Jest는 라이브러리 하나만 설치하면, Test Runner와 Test Mathcher 그리고 Test Mock 프레임워크까지 제공해주기 때문에 현재 대세라고 말할 수 있다. ☞ all-in-one 테스팅 라이브러리 아래 링크에서 더 자세한 설명과 설치법을 볼 수 있다. https://jestjs.io/docs/getting-started Getting Started · Jest Install Jest using your favorite package manager: jestjs.io 설치 npm install -D jest //개발 의존성으로 설치 test 스크립트 수정하..

Intl API란? Intl 개체는 ECMAScript 국제화 API의 네임스페이스로, 언어 구분 문자열 비교, 숫자 형식, 날짜 및 시간 형식을 제공한다. Intl API를 사용하면 각 나라의 언어와 표현에 맞게 날짜 혹은 시간 등을 표시해줄 수 있다. 참고: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl Intl - JavaScript | MDN The Intl namespace object contains several constructors as well as functionality common to the internationalization constructors and other la..

순수함수 (pure function) 입력값에 대해 항상 동일한 출력값을 반환하며, 함수 외부에 영향을 끼치는 부작용(side effect)이 없는 함수 함수의 실행 결과는 오직 입력 값에만 의존하며, 외부의 상태(state)를 변경하지 않는다 불변성(immutability)을 보장한다 불변성 : 데이터나 상태가 변경되지 않는 것을 의미하며, 함수형 프로그래밍에서는 데이터를 변경하는 대신 새로운 데이터를 생성하는 방식을 취한다 순수 함수를 사용하면 상태 변경이 없기 때문에 프로그램의 안정성이 높아지고, 디버깅이 쉬워진다 반면 순수 함수가 아닌 함수는 부작용이 발생할 수 있다 side effect 함수의 실행 결과가 입력값 이외의 외부 상태를 변경하는 것 부작용은 예측하기 어렵기 때문에 코드를 이해하고 디..

this this의 값은 this가 사용된 함수가 어떤 방식으로 "실행"되었는지에 따라 달리진다. 선언된 부분만으로는 무엇을 가리키는 지 알 수 없다. 1. 일반 함수 실행 방식 strict mode가 아니면 무조건 global object를 가리킨다. (브라우저에서는 window) var age = 1; // global object function foo() { console.log(this.age); //this === global object : 브라우저에서는 window를 가리킨다. } foo(); // 1 (글로벌 객체 실행) new foo(); // undefined strict mode (엄격모드) strict mode란? : https://developer.mozilla.org/ko/do..

Hoisting (호이스팅) 코드가 실행하기 전 변수선언/함수선언이 해당 스코프의 최상단으로 끌어 올려진 것 같은 현상 함수 안에 있는 선언들을 모두 끌어올려서 해당 함수 유효 범위의 최상단에 선언하는 것 자바스크립트 함수는 실행되기 전에 함수 안에 필요한 변수값들을 모두 모아 유효 범위의 최상단에 선언한다 자바스크립트의 모든 선언에는 호이스팅이 일어난다. let, const, class를 이용한 선언문을 호이스팅이 발생하지 않는 것처럼 동작한다 var 선언 단계와 초기화 단계가 한번에 이루어진다 변수 선언문 이전에 변수에 접근하여도 스코프에 변수가 존재하기 때문에 에러가 발생하지 않는다. (undefined 반환) console.log(text); // ReferenceError text = 'Hell..

function Sum(num1, num2) { return num1+num2; } // num1, num2는 parameter Sum(5, 10); // 5, 10 은 argument Parameter = 매개변수 (변수) 함수를 정의할 때 사용하는 변수 메소드 선언의 변수 목록 인자를 받기 위한 매개채로써 선언된 변수라는 의미 함수 내부에 있는 인자로써 특정한 값이 정해져 있는 것이 아니라 함수가 호출하면서 건내준 argument 값이 변수(variable)에 담기게 된다 실제 매개 변수 (actual parameter) : 인자가 특정 변수의 값으로 넘겨지는 경우 이 특정 변수를 실제 매개 변수라 부른다 형식 매개 변수 (formal parameter) : 인자값을 변수로 넘겨줄 때 이를 형식 매개..

복학하면서 오랜만에 동아리에 들어갔다. 멋쟁이사자처럼 11기인데, 매주 팀별 스터디도 있고, 단체 스터디도 있다. 나는 프론트엔드 스터디에 참여하면서 오랜만에 html, css, javascript를 이용해서 계산기 만드는 걸 했다. 지금까지 내배캠하면서 react, typescript 위주로 공부하다 보니 바닐라 자바스크립트를 만져본 게 오래전 같았는데 덕분에 간만에 자바스크립트를 해서 나름 재밌었다. 확실히 공부를 안 하면 까먹게 되는 것 같다. (이제 면접 준비도 해야 하니까 간단하게 복습 겸 회고 겸...블로그 올리기...ㅋㅋ) HTML 너무 오랜만에 index.html 파일 안에서 작ㅇ버해서 그런지 태그를 까먹었다. ㅋㅋㅋㅋ 스터디 팀장이 올려준 예제대로 작업해야 해서 그대로 작업했는데, 진짜 ..

lodash란? JavaScript의 라이브러리 중 하나이며, 전세계적으로 많이 사용되는 라이브러리 중 하나이다. 주로 array, collection, date 같은 데이터의 구조를 간편하게 함수형으로 다룰 수 있게 하기 위해서 탄생했다. 특히 frontend 환경에서 서버(DB)에서 받은 데이터를 정렬하고 사용할 때 많이 쓰인다. 밑줄 (_) 기호를 선언하여 사용된다. _.변수 이런 식으로 작성할 경우 lodash wrapper로 변수로 감싸게 되면서 해당 변수에 대한 chaining을 시작한다. 공식문서: https://lodash.com/ Lodash _.defaults({ 'a': 1 }, { 'a': 3, 'b': 2 });_.partition([1, 2, 3, 4], n => n % 2);D..

정규 표현식 문자열에서 특정 문자 조합을 찾기 위한 패턴 JavaScript에서의 정규 표현식은 객체이다 RegExp의 exec()와 test() 메서드를 사용할 수 있다 String의 match(), matchAll(), replace(), replaceAll(), search(), split() 메서드와도 함께 사용할 수 있다 정규 표현식 만들기 정규 표현식 리터럴 슬래시(/)로 패턴을 감싸서 작성 바뀔일이 없는 패턴의 경우 리터럴을 사용하면 성능이 향상될 수 있다 const re = /ab+c/ RegExp 객체의 생성자 호출 const re = new RegExp('ab+c') 정규 표현식 패턴 작성하기 단순한 문자로 구성되거나 단순한 문자와 특수 문자의 조합으로 구성할 수 있다 (\d+)\.\d..

1. 실행 컨텍스트란? 스택(stack) : Last in, first out 실행 컨텍스트 : 실행할 코드에 제공할 환경 정보들을 모아놓은 객체 콜 스택(call stack) 안에 실행 컨텍스트가 모아져 있다. 가장 위에 쌓여있는 컨텍스트와 관련된 코드를 실행하는 방법으로 코드의 환경 및 순서를 보장 (LIFO) 컨텍스트의 구성 방법 전역 공간 eval() 함수 함수 ☞ 우리가 흔히 실행 컨텍스트를 구성하는 방법 실행컨텍스트 구성 예시 실행 컨텍스트 객체 생성(활성화) 시점 : 한 '실행 컨텍스트'가 콜 스택의 맨 위에 쌓이는 순간이 곧 현재 실행한 코드에 관여하게 되는 시점 생성 시점에 JS 엔진은 해당 컨텍스트에 관련된 코드를 실행하는데 필요한 환경 정보들을 수집해서 실행 컨테스트 객체에 저장 실행..