JavaScript
-
Redux | Redux 개요 및 주요 개념JavaScript/JavaScript 2020. 5. 14. 17:11
Redux 리덕스는 자바스크립트를 위한 상태 관리 프레임워크 리덕스 사용 이점 컴포넌트 코드로부터 상태 관리 코드 분리 가능 서버 렌더링 시 데이터 전달 간편 로컬 스토리지에 데이터를 저장하고 불러오는 코드를 쉽게 작성 가능 같은 상탯값을 다수의 컴포넌트에서 필요로 할 때 좋음 부모 컴포넌트에서 깊은 곳에 있는 자식 컴포넌트에 상탯값을 전달할 때 좋음 알림창과 같은 전역 컴포넌트의 상탯값을 관리할 때 좋음 페이지가 전환되어도 데이터는 살아 있어야 할 때 좋음 리덕스 3 원칙 리덕스 공식 문서에서 제시하는 리덕스 사용 세 가지 원칙 전체 상탯값을 하나의 객체에 저장 상탯값은 불변 객체 상탯값은 순수 함수에 의해서만 변경되어야 함 ① 전체 상탯값을 하나의 객체에 저장 전체 상탯값이 하나의 객체로 관리되므로 ..
-
ES6+ | Generator 제너레이터JavaScript/ES6+ 2020. 5. 13. 16:38
Generator 제너레이터(generator)는 함수의 실행을 중간에 멈추고 재개할 수 있는 ES6의 독특한 기능 특징 실행을 멈출 때 값을 전달할 수 있기 때문에 반복문에서 제너레이터가 전달하는 값을 하나씩 꺼내서 사용할 수 있음 제너레이터는 보통의 컬렉션과 달리 값을 미리 만들어 놓지 않음 → 필요한 순간에 값을 계산해서 전달 가능하기에 메모리 측면에서 효율적 다른 함수와 협업 멀티태스킹(cooperative multitasking) 가능 제너레이터가 실행을 멈추고 재개할 수 있기 때문에 멀티태스킹이 가능해짐 협업이라고 부르는 이유는 제너레이터가 실행을 멈추는 시점을 자발적(non-preemptive)으로 선택하기 때문 제너레이터 구조 별표와 함께 정의된 함수와 그 함수가 반환하는 제너레이터 객체로..
-
TypeScript | 타입 호환성JavaScript/TypeScript 2020. 5. 7. 12:46
타입 호환성 타입 호환성이란 어떤 타입을 다른 타입으로 취급해도 되는지 판단하는 것 타입 A를 타입 B로 취급해도 되는 것을 할당 가능하다고 하며 타입 A가 타입 B의 서브타입(subtype)이라고 표현하기도 함 정적 타입 언어의 가장 중요한 역할은 타입 호환성을 통해 컴파일 타임에 호환되지 않는 타입을 찾아내는 것 숫자와 문자열의 타입 호환성 숫자와 문자열 타입은 서로 포함 관계에 있지 않기 때문에 서로 할당 가능하지 않음 반면 숫자의 집합은 number | string 값의 집합에 포함되기 때문에 숫자는 number | string 타입에 할당 가능 function func1(a: number, b: number | string){ const v1: number | string = a; const v..
-
TypeScript | Interface 인터페이스JavaScript/TypeScript 2020. 5. 7. 12:34
Interface 인터페이스 타입스크립트에서 인터페이스는 여러 가지 자료형의 타입을 정의하는 용도로 사용 인터페이스로 객체 타입 정의하기 interface 키워드를 사용해서 인터페이스로 타입 정의 interface Person { name: string; age: number; } const p1: Person = { name: 'mike', age: 23 }; const p2: Person = { name: 'mike', age: 'ten' }; // 타입 에러 Person 인터페이스로 객체 내부에 존재하는 각 속성의 타입 정의 하나 이상의 속성 타입을 만족하지 못하면 타입 에러 발생 선택 속성 선택 속성은 객체에 없어도 되는 속성을 말함 인터페이스에서 선택 속성은 ?(물음표) 기호 사용 interfa..
-
TypeScript | 함수형 타입JavaScript/TypeScript 2020. 5. 6. 15:43
함수 타입 함수의 타입을 정의하기 위해서는 매개변수 타입과 반환 타입이 필요 :(콜론)을 이용해서 매개변수 타입 및 반환 타입 정의 함수 타입 정의 function getInfoText(name: string, age: number): string { const nameText = name.substr(0, 10); const ageText = age >= 35 ? 'senior' : 'junior'; return `name: ${nameText}, age: ${ageText}`; } const v1: string = getInfoText('mike', 23); const v2: string = getInfoText('mike', '23'); // 타입 에러 const v3: number = getInf..
-
TypeScript | Enum 열거형 타입JavaScript/TypeScript 2020. 5. 6. 15:13
Enum 열거형 타입 열거형 타입은 enum 키워드를 사용해서 정의 열거형 타입의 각 원소는 값 또는 타입으로 사용 가능 // 열거형 타입으로 과일 정의 enum Fruit { Apple, Banana, Orange } // 열거형 타입의 원소인 Apple을 값으로 사용 const v1: Fruit = Fruit.Apple; // 열거형 타입의 원소인 Apple, Banana를 타입으로 사용 const v2: Fruit.Apple | Fruit.Banana = Fruit.Banana; enum 원소의 값 enum Fruit { Apple, Banana = 5, Orange } console.log(Fruit.Apple, Fruit.Banana, Fruit.Orange); // 0 5 6 열거형 타입의 첫..
-
TypeScript | 개요 & 변수 타입JavaScript/TypeScript 2020. 5. 6. 14:51
TypeScript 자바스크립트의 모든 기능을 포함하면서 정적 타입을 지원하는 언어 동적 타입 언어 VS 정적 타입 언어 동적 타입 언어 정적 타입 언어 타입에 대한 고민을 하지 않아도 되므로 배우기 쉬움 변수를 선언할 때마다 타입을 고민해야 하므로 진입 장벽이 높을 코드의 양이 적을 때 생산성이 높음 코드의 양이 많을 때 동적 타입 언어에 비해 생산성이 높음 타입 오류가 런타임 시 발견 타입 오류가 컴파일 시 발견 ※ 작은 규모의 프로젝트에서는 동적 타입 언어, 큰 큐모의 프로텍트에서는 정적 타입 언어 추천 정적 타입 언어가 생산성이 높은 이유 코드가 타입으로 서로 연결됨 연관된 코드 간의 이동이 쉽고, 변수명이나 함수명을 변경하는 등의 리팩터링도 쉬움 동적 타입 언어에 비해 IDE가 제공하는 기능이 ..
-
JavaScript | Webpack 기초 정리JavaScript/JavaScript 2020. 4. 23. 14:46
Webpack 웹팩은 모듈 번들러로, 각각의 리소스 파일을 합쳐서 사용자에게 전달하기 좋은 형태로 만들어주는 역할을 함 모듈(module): 각 리소스 파일 번들(bundle): 웹팩 실행 후 나오는 결과 파일 웹팩이 필요한 이유 SPA(단일 페이지 애플리케이션) 등장 이후 하나의 HTML이 수많은 자바스크립트 파일을 포함하기 때문에 기존의 방식으로 자바스크립트 리소스를 관리하기가 어려워짐 HTML에서 모든 자바스크립트 리소스를 관리하면 계속 늘어나는 파일을 관리하기도 어렵고, 실행 순서도 신셩써야 하며, 기존에 생성된 전역 변수를 덮어쓸 수도 있는 위험이 발생 script 태그로 외부 모듈을 불러오는 경우 주소에 오타가 있거나, 해당 사이트에 문제가 있는 경우 모듈 요청 실패 외부 모듈이 필요없어지면 ..