코딩고블린 개발블로그 코딩고블린 개발블로그

TDD (Test Driven Development) TDD란, 테스트 코드 작성 - 테스트 - 구현(리팩토링) 단계로 이루어지는 사이클을 반복하는 개발 프로세스 중 하나이다. TDD의 장점 구현 단계 이전에 기능 시나리오에 대한 검토가 이루어지면서, 양질의 코드품질 토대가 될 수 있음 자연스럽게 기능 단위의 최적화가 이루어 지며, 자연스러운 모듈화가 이루어짐 디버깅, 리팩토링에 유리함 어떻게 Javascript / React 웹 개발 프로젝트에 TDD를 적용하는가 1. JEST 페이스북에서 만든 JavaScript 테스트 프레임워크로, 테스트 케이스를 만들거나, 결과값을 처리하는 api를 제공하여 쉽고 간결하게 유닛 테스트를 할 수 있다. test('덧셈 케이스', () => { //test() : 새..

WEBPACK 웹 프로젝트에 포함된 많은 종류의 파일(Html, Js, Css) 을 모듈화, 빌드하여 1개의 파일로 만들어주는 '번들러' 이다. * 여기서 모듈화란 재활용 혹은 편의를 위해 분리된 소프트웨어 덩어리 혹은 코드 파일을 말한다 웹팩과 표준 모듈화 시스템 등장 이전의 모듈화 파일단위로 JS, HTML 파일을 분리하여 태그를 통해 import 하였다. 여러 파일의 코드가 우선순위없이 중첩되거나 관리할 수 없이 꼬여 전역스코프가 오염되기 쉬웠다. Node js 에서 사용하는 Common js 방식 (export - require) , AMD (비동기) 방식등이 있다. ES5/ES6 (ECMA Script 2015, 2016) 이후 모듈화 ES5에서 본격적인 표준 모듈화 시스템이 도입되었다. exp..

THIS Javascript에서 This란, 어떤 공간에서 정의, 호출되느냐에 따라 다르게 추론한다. 컨텍스트가 생성 될 때, 그 환경에 따라 그 값이 다르게 정의된다. 전역 공간 window, global 함수 내부 window, global 호출된 메소드 메소드를 호출한 객체, 함수 Callback 함수 전역 객체 (제어권을 가진 함수를 통해 명시적으로 this 를 바인딩 할 수 있음 ex. call / apply / bind) 생성자 함수 인스턴스 Call / Apply / Bind 자바스크립트에서 함수가 가진 기본 메소드로, 현재 함수 실행환경의 this를 외부 함수의 this로 대체해 사용할 수 있도록 하는 프로퍼티다. 보통의 함수가 호출형태에 따라 this가 달라지는 반면, call,apply..

실행 컨텍스트 (Context) 실행 컨텍스트란, 코드의 흐름(문맥)이나 함수 동작에 필요한 환경 정보가 담긴 객체를 지칭한다. 자바스크립트에서는 다음과 같이 분류할 수 있다. 전역 컨텍스트 : 프로그램의 모든 코드, 동작 환경을 포함하는 전역 환경이다. 프로그램 (혹은 페이지)가 종료 될 때 까지 유지된다. 함수 컨텍스트 : 함수를 호출 할 때 지정되는 함수 동작 내부 환경 컨텍스트의 실행 과정 (생성 -> 실행) 전역 컨텍스트의 생성 과정 1. 전역 코드에 진입 및 전역 객체 생성 2. 전역 스코프체인 생성(초기화) 3. 변수 객체화 4. this value 지정됨 (초기값: 전역객체 혹은 window) 함수 컨텍스트의 생성 과정 1. 함수 선언 시 함수 스코프 체인 생성 2. 변수, 인자(argum..

이터러블 - 이터레이터 (Iterable - Iterator) 프로토콜이란 ? 반복 가능한 객체를, 이터레이터로 순회할 수 있도록 하는 규약이다. 이터러블 (Iterable)객체 란 반복 가능한 객체, 이터레이터를 가지고있는 객체이다. 자바스크립트에서는 array, typedArray, string, map, set 등이 대표적인 이터러블 객체이며, Object property 로 하나의 Symbol.interator()를 가지고 있다. For of 문, 전개 연산자등을 통해 순서대로 순회 할 수 있다. 이터레이터? next() 매서드를 통해 배열을 순회할 수 있는 객체이다. next()는 {done: boolean, value: any} 라는 값을 반환하며, done 이 true를 반환 할 때까지 객체..

프로미스(Promise) 란? 프로미스는 비동기 함수의 처리 결과, 그 자체 를 나타내는 자바스크립트의 내장객체이다. 비동기 메서드의 동기 매서드처럼 처럼 반환 하여 사용 할 수있다. 비동기 작업이 완료되었을때 호출하는 .then 이라는 API를 사용하여 콜백함수들을 체이닝하여 순차적으로 다룰 수 있다. 프로미스의 상태 pending : 처리가 완료되지 않은 상태 fulfill : 처리가 완료되어 프로미스가 결과값을 반환한 상태 .then() 를 통해 처리된 값을 순차적으로 다룰 수 있다. reject : 처리가 실패하거나 오류가 발생 콜백과 프로미스 차이 Callback 패턴 다른 함수에 콜백 함수의 제어권을 단순히 위임 후에 다른 task를 수행한다. 수행 소요 시간이 얼마나 걸릴 지 모르는 네트워크..

HTTP 프로토콜 ? HTTP 프로토콜이란, 브라우저가 서버(Sever)가 정보를 주고받기 위한 통신 규약이다. TCP/UDP 어플리케이션 계층 기반으로, 연결을 상시 유지하지 않는다. 요청-응답 두가지 타입 *패킷으로 텍스트(Plan Text, XML, Json 등...) 데이터를 주고받는다. *패킷 : 데이터의 묶음 단위로 한번에 전송할 데이터의 크기 HTTP 메세지(요청/응답) 구조 HTTP 요청, 응답은 다음과 같은 구조를 하고 있다. 요청 라인 헤더 blank line (빈 줄) 바디 HTTP 요청 메서드 데이터 요청의 종류에 따라서, 다음과 같은 메서드를 사용 한다. GET : 데이터 요청 및 조회 (헤더) POST : 신규 데이터 생성하거나 기존 데이터를 가공 (바디) PUT : 데이터 변경..

Typescript를 브라우저가 지원하지 않기 때문에, TypeScript 컴파일러로 .ts 파일을 .js 파일로 변환하는 과정을 거친다. tsc는 TypeScript 파일(.ts)을 .js 파일로 트랜스파일링(Transpiling)한다. config 파일을 작성하여, 컴파일 옵션을 설정할 수 있다. 타입스크립트 타입 및 컴파일 설정 .d.ts 기존에 정의 되지않은 모듈의 타입 정보를 별도로 선언할 수 있는 설정 문서이다. 타입스크립트 커뮤니티에서는 dom 관련 타입 등 자주 사용되는 타입들을 정의해 놓은 문서를 공유한다. (내가 정의하지 않은 타입에 대해서는 라이브러리 업데이트 시 명칭이 변경되거나 삭제 될 수 있기 때문에 사용 시 주의) tsconfig.json 타입스크립트 라이브러리 관련 설정을 하..