늘 겸손하게

TypeScript 사용 이유 자바스크립트는 동적 언어입니다. 변수의 자료형을 실행 시(Runtime)의 결정하고 변수에 어떠한 타입의 데이터로 할당 가능하고 재할당 또한 가능합니다. 이러한 유연함이 자바스크립트의 장점으로 꼽히나 프로젝트의 크기가 거대해지고 복잡해지면서 이러한 유연함 때문에 변수값이 예측하기 어려워지고 에러처리 또한 어려워졌습니다. 그렇기 때문에 엄격한 타입 규칙을 적용하여 오류를 방지하고 에러를 사전에 차단하기 위해 TypeScript를 사용합니다.

자바스크립트 종류에는 표준 자바스크립트인 ES5, 흔히 ES6으로 알고 있는 ESNext, 그리고 ESNext에 타입(Type)을 추가한 TypeScript 총 세 가지가 있습니다. ES5, ESNext (ES6), TypeScript 순으로 포함관계에 있습니다. ES5는 ESNext의 소집합이므로 ESNext는 ES5의 모든 문법을 포함하고 마찬가지로 TypeScript는 ESNext의 모든 문법을 포함합니다. TypeScript 사용 이유 자바스크립트의 장점 중 하나는 유연성입니다. 대표적으로 여려번 재할당, 재선언이 가능한 var 변수, 암묵적 변환이 자주 일어나는 매개변수 전달 등이 있는데, 이러한 유연성이 프로젝트의 규모가 커짐에 따라서 단점이 되어 변수값이 예측불가능해지고 에러 처리가 어려워지..

컴포넌트 중에서 실행할 작업(로직)과 출력을 같이 포함하는 컴포넌트가 존재한다. React를 사용하는 중요한 이유 중 하나는 컴포넌트의 높은 재사용성인데 이러한 컴포넌트는 로직과 출력이 한 컴포넌트에 묶여있기 때문에 재사용성이 떨어진다. 그렇기 때문에 데이터에 종속되지 않고 순수하게 출력 역할을 담당하는 프레젠테이셔널(presentational) 컴포넌트와 데이터를 처리하고 사용자와 상호작용을 처리하는 컨테이너(container) 컴포넌트로 나누어 재사용성을 높이는것이 좋다. 이러한 분할과정을 디커플링(decoupling)이라고 한다.

fetch 자바스크립트로 서버나 다른 주소의 데이터를 가져오고 싶을 때 사용하는 메서드 fetch 메서드로 네트워크를 통해 요청을 보내고 응답을 받아올 수 있다. 기본 문법 1 let promise = fetch(url, [options]); cs url : 접근하고자 하는 URL options : 선택 매개변수, method나 header options에 아무것도 넣지 않으면 요청은 GET 메서드로 진행. fetch()를 호출하면 브라우저는 요청을 보내고 프라미스가 반환됩니다. 응답은 두 단계를 거쳐 진행됩니다. 1 단계 먼저, 서버에서 응답 헤더를 받자마자 반환된 promise가 내장 클래스 Response의 인스턴스와 함께 이행 상태가 됩니다. 이 단계는 아직 본문(body)가 도착하기 전이지만, ..

디스트럭처링은 배열, 객체에서 사용 가능한 자바스크립트 문법이다. 배열 혹은 객체 내부의 값을 변수에 쉽게 할당 가능하다. 1. 배열 1 2 3 4 5 6 const arr = [1, 2, 3]; const [one, two, three] = arr; console.log(one, two, three); // 1 2 3 Colored by Color Scripter cs 디스트럭처링 할당을 위한 변수에 디폴트값을 지정할 수도 있다. 1 2 3 4 5 6 const arr = [1, 2]; const [one, two, four = 4] = arr; console.log(one, two, four); // 1 2 4 Colored by Color Scripter cs 2. 객체 할당 기준은 '프로퍼티 키'..

둘 다 주어진 인자가 유한(finite)한지 판단하는 메소드이지만 빌트인 전역 함수 isFinite는 전달받은 인수를 숫자로 암묵적 타입 변환하여 검사를 수행하지만 Number.isFinite는 주어진 인수를 숫자로 암묵적 타입 변환하지 않는 차이가 있다. 1 2 3 console.log(Number.isFinite(null)); // false console.log(isFinite(null)); // true cs isFinite에서 null은 암묵적으로 0으로 변환되어 true가 반환되지만 Number.isFinite에서 null은 암묵적 변환이 일어나지 않아 false가 반환된다.

자바스크립트 배열의 요소 제거하는 법을 알아보자. 1. delete 연산자 자바스크립트 배열은 객체이기 때문에 배열의 특정 요소는 프로퍼티이다. 그러므로 delete 연산자를 이용해 배열의 특정 요소를 삭제할 수 있다. 1 2 3 4 5 6 7 const arr = [1, 2, 3]; delete arr[1]; console.log(arr); // [ 1, , 3 ] console.log(arr.length); // 3 cs 하지만 length에 변화를 주지는 못한다. 즉, 희소배열이 된다. 2. splice 희소배열을 만들지 않고 특정 요소만을 제거한 배열을 만들고 싶은 경우 활용하면 좋은 메소드 1 2 3 4 5 6 7 const arr = [1, 2, 3]; arr.splice(1, 1); cons..

자바스크립트 클래스의 매서드 작성법은 2가지가 있다. 첫 번째는 '프로토타입 메서드', 두 번째는 '정적 메서드' 이다. class Person { constructor(name) { this.name = name; // name 프로퍼티는 public하다 } // 프로토타입 메서드 sayHi() { console.log(`Hi! My name is ${this.name}`); } // 정적 메서드 static sayHello() { console.log("Hello!"); } } // 인스턴스 생성 const me = new Person('Lee'); // 인스턴스의 프로퍼티 참조 console.log(me.name); // Lee // 프로토타입 메서드 호출 me.sayHi(); // Hi! My n..