본문 바로가기
리액트로 프론트엔드 테스팅 시작하기 (1) 개요 사실 개발을 해오면서 TDD, 테스팅, E2E, Unit-Test 라는 키워드를 많이 접해왔다. 하지만 이게 실제로 어떤 개념인지 자세히 알지는 못했다. 그래서 이번 기회에 프론트엔드 테스팅을 알아보고 경험해보고 직접 프로젝트에 적용해보려고 한다.사전 지식 테스트를 경험하기 전에 먼저 알아둬야 할 사전 지식들이 있다. 테스트는 소프트웨어 공학에 있는 개념이기 때문에 전문적인 단어들이 꽤 많이 존재한다. 1. TDD vs BDDTDD TDD(Test-Driven-Development)는 테스트 주도 개발, BDD(Behavior-Driven-Development)는 행동 주도 개발을 의미한다. 사실 단어의 의미만 들어서는 TDD와 BDD가 무엇인지 감이 잘 오지 않는다. TDD는 말 그대로 테스트가 ..
typeof 연산자 기본 타입 이전에 JS의 타입에 대해 다룬 포스트에서 알아봤듯이 JS에서는 7개의 타입(null, undefined, boolean, number, string, symbol, object)이 있었다. typeof 연산자 JS의 데이터는 typeof 연산자를 통해서 해당 데이터의 타입을 확인할 수 있다. 하지만 typeof 연산자를 통해서 모든 데이터를 해당 타입을 알아낼 수 는 없다. 다른 타입들은 모두 자기 자신의 타입이 반환되지만 null 타입의 typeof 연산 결과는 "null"이 아닌 "object"이다. 사실 이 결과는 버그이다. ("null"을 반환해야 정상이다.) 이 버그는 오랫동안 고쳐지지 않았고 이 버그를 고치려고 하니 이전에 작성된 코드들에서 문제가 발생하게 되었다. 그래서 데이터의..
실행 컨텍스트(1) 실행 컨텍스트 실행 컨텍스트는 자바스크립트가 실행될 때 생성되는 하나의 실행 단위이다. 자바스크립트에서 실행 컨택스트는 매우 중요한 개념이기 때문에 이 개념을 잘 이해하는 것이 중요하다. 콜스택와 실행 컨텍스트 개념 콜스택은 실행할 프로그램의 코드 정보를 담는 자료구조를 말한다. 함수가 호출 될 때마다 이 콜스택에 함수의 실행 정보가 하나씩 쌓이게 된다.실행 컨텍스트는 이렇게 콜스택과 비슷하게 컨텍스트 스택 구조에 쌓이게 된다. 실행 컨텍스트는 실행 가능한 코드가 실행되기 위해 필요한 환경(실행에 필요한 기본적인 구성이 담긴 데이터)이라고 할 수 있다.코드의 실행에 필요한 정보에는 다음과 같은 정보들이 있다. 변수: 전역 변수, 지역 변수, 매개 변수, 객체의 프로퍼티 함수 선언 변수의 유효 범위(sco..
프로토타입 체이닝(2) 래퍼 객체(Wrapper Object) 자바스크립트에서 문자열이나 숫자에서 메서드를 사용할 수 있는 이유는 기본 타입(number, string, boolean, null, undefined, symbol)에서 숫자와 문자열, 불린, 심볼 타입에 대응하는 래퍼 객체(Number, String, Boolean, Symbol)가 지원되기 때문이다.(래퍼 객체는 보통 표준 내장 객체(standard buit-in object)라고 불린다.) 만약 자바스크립트에서 string 타입 데이터에서 메서드나 프로퍼티를 참조하려고 할 때, 자바스크립트는 string 타입 데이터를 String 래퍼 객체로 임시로 변환해서 메서드나 프로퍼티를 참조할 수 있게 한다. 따라서 문자열에서 String.prototype 객체의 프..
프로토타입 체이닝(1) 프로토타입 자바스크립트는 프로토타입 기반의 언어이다. 일반적인 객체지향 프로그래밍에서는 클래스를 정의하고 이 클래스를 통해서 새로운 객체를 생성한다. 하지만 자바스크립트에서는 이와 다르게 생성자 함수를 통해서 객체를 생성한다. 자바스크립트에서는 이렇게 생성된 객체의 부모가 되는 객체를 프로토타입이라고 말한다.모든 객체는 자신의 부모 객체를 가리키는 참조 링크 형태의 프로퍼티인 [[Prototype]] 프로퍼티를 가진다. ECMAscript에서는 이 링크를 암묵적 프로토타입 링크라고 부른다.자바스크립트에서는 생성자 함수로 객체를 생성하면 생성자 함수의 prototype 프로퍼티가 가리키는 프로토타입 객체를 새로 생성되는 객체가 [[Prototype]] 링크로 연결하게 된다.(생성자의 prototype 프로..
JS의 데이터 타입 5 (함수) 함수의 호출 arguments 객체 자바스크립트에서는 함수를 호출할 때 원래 정의된 함수의 형식에 맞춰 인자를 넣지 않더라도 에러가 발생하지 않는다. 앞 예시를 보면 average 함수에서는 매개 변수로 3개를 정의했지만 1개를 넣든 2개를 넣든 에러는 발생하지 않았습니다. 인자를 1개나 2개를 넣었을 때, NaN이 발생하는 이유는 넘겨지지 않은 나머지 인자들이 undefined 값으로 할당되어서 undefined 값으로 + 연산을 하게 되기 때문이다.따라서 인자의 개수에 따라 함수의 동작을 다르게 하고 싶을 때에는 arguments 객체를 사용한다. arguments 객체는 함수가 호출될 때 넘겨진 인자들을 유사 배열 형태로 저장한다. 실제 배열이 아니기 때문에 표준 배열 메서드를 사용할 수 없다.ar..
JS의 데이터 타입 4 (함수) 함수의 정의 함수를 정의하는 방식에는 3가지가 있다. 각각의 방식으로 생성된 함수들은 조금씩 다르게 작동한다. 함수 선언문(statement) 사용 함수 표현식(expression) 사용 Function() 생성자 사용 함수 리터럴 전에도 말했듯이 자바스크립트에서 함수는 일반 객체처럼 값으로 취급된다. 함수 선언문과 함수 표현식 모두 이 함수 리터럴을 사용해서 함수를 생성한다. function add(a, b) { return a + b; } 함수 리터럴은 function 키워드, 함수 이름, 매개 변수, 함수 본문으로 이루어져 있다. 함수 리터럴을 사용할 때 함수 이름을 쓰는 것은 선택 사항이다. 만약 함수 이름을 쓰지 않는다면 그 함수는 익명함수가 된다. 함수 선언문 함수 선언문 형식은 함수 리터럴의..
JS의 데이터 타입 3 (프로토타입) 프로토타입 자바스크립트는 프로토타입 기반 언어이다. 자바스크립트에서는 새로운 객체를 만들어낼 때 부모가 되는 객체를 복사해서 객체를 만든다. 객체의 원형이 되는 부모 객체(프로토타입)를 이용해서 자식 객체(새로운 객체)를 만들어내기 때문에 프로토타입 기반 언어라고 할 수 있다. 이렇게 우리는 프로토타입을 통해서 객체지향적 프로그래밍을 할 수 있다. 그렇다면 이제 프로토타입을 알아보자. 객체와 프로토타입 우선 예시를 통해서 객체와 프로토타입간의 관계를 알아보자. 위의 코드를 실행해보면 cat객체에 toString메서드가 없지만 에러는 나지 않는다. 크롬 콘솔창에서 위의 코드를 작성해보면 밑의 그림처럼 콘솔에 찍힐 것이다. 그리고 Object 옵션을 클릭하고 proto 옵션을 클릭하면 toString 메서드..

티스토리툴바