모른다고 말할 수 있는 용기

JavaScript ES Modules 모듈이란 여러 기능(함수/변수 등)이 모여있는 하나의 파일이다. 모듈화를 통해 유지 보수와 재사용성을 높일 수 있다. ES 모듈은 기본적으로 strict 모드가 적용되며 번들링 시 파일 용량이 커지지 않는다. CJS(CommonJS) 모듈은 직접 strict 모드를 걸어주어야 하고 번들링 시 파일이 커지는 단점이 있다. 번들링 자바스크립트를 공부하다 보면서 번들링이라는 단어를 자주 접하게 되었다. 번들이란 단어의 의미는 묶음이다. 번들링의 프로그래밍적 해석은 각 모듈들의 의존성 관계를 파악해 그룹화 시키는 작업이다. 모듈과 스크립트 구분 - import / export가 있으면 모듈 없으면 스크립트 // 스크립트 // 모듈 exprt "" import "" from..

TypeScript 타입 가드 컴파일러가 타입을 예측할 수 있도록 타입을 좁혀나가는 방법 is 키워드를 사용한다. is 함수명은 컨벤션이다. typeof - typeof 메서드를 사용해 분기 처리를 하면 타입스크립트는 해당 데이터의 타입을 좁혀진 범위로 이해한다. - 조건문 안에서 매개변수 str 타입이 문자열(string)이므로 문자열 메서드를 사용할 수 있다. - 조건문 안에서 매개변수 arr 타입이 배열(object)이므로 배열 메서드를 사용할 수 있다. 리터럴 타입 가드 - === / !== 연산자를 사용하여 타입을 구분할 수 있다. - 유니온 타입을 사용하여 타입을 구분할 수 있다. type Checker = "실버" | "골드" | "플래티넘"; const checker = (choice: C..

TypeScript 제네릭 단일 타입이 아닌 다양한 타입에서 작동하는 재사용이 가능한 컴포넌트를 만들 수 있는 방법이다. 제네릭 타입을 함수의 파라미터로 사용하는 걸 의미 함수 호출 시 타입을 정의할 수 있다. 선언은 여유롭게 짝만 맞춰놓고 실제 사용 시 확실하게 타입을 정의한다. 함수의 파라미터와 리턴값의 타입 정보를 알 수 있다. 는 Convention이다. 선언 제네릭 사용은 함수 타입 인수를 포함한 모든 인수를 전달하는 방법과 타입 인수 추론을 사용하는 방법 2가지가 있다. // 인수에 타입을 붙인다. function print(word: T): T { return word; } const result = print("제네릭"); 제네릭 배열 - 배열의 원소 중 어떠한 타입도 올 수 있다. fun..

TypeScript 인터페이스 재사용이 가능한 구조(같은 모양)의 타입들의 이름을 작명할 수 있다. 속성과 값의 타입을 지정할 수 있다. 값을 지정할 수 있지만 보통 넒은 범위의 타입을 지정한다. 클래스와 마찬가지로 인터페이스도 상속이 가능하다. 동일한 이름의 인터페이스를 여러 개 생성할 수 있다. 선언 interface Post { postId: number; title: string; content: string; writer: string; } const write: Post = { postId: 1, title: "1번 게시물 타이틀", CONTENT: "2번 게시물 내용", writer: "관리자", }; 읽기 전용(readonly) - 처음 객체 생성 시에 할당하여 그 이후로는 속성값을 바꿀 ..

TypeScript 함수 자바스크립트와 마찬가지로 기명과 익명 함수를 만들 수 있다. 타입스크립트의 함수는 모든 매개변수가 필요하다고 가정한다. 함수 호출 시 컴파일러는 각 매개변수에 대해 사용자가 값을 제공했는지 검사한다. 컴파일러는 매개변수들이 함수로 전달될 유일한 매개변수라고 가정한다. 함수에 주어진 인자의 수는 함수가 기대하는 매개변수의 수와 일치해야한다. 함수 타입 - 매개변수의 타입과 반환 타입이 있다. function testing(x: number, y: number): number { return x + y; } const result = testing(94, 1103); function testing(): void { return console.log("here") } testing()..

TypeScript 자바스크립트 변수 / 매개변수 / 리턴 값에 타입을 부여한 확장된 언어이다. - 타입스크립트 >= 자바스크립트 타스는 자스의 Superset이다. - 에러의 사전 방지와 IDE의 자동 완성 기능을 적극 활용하여 생산성이 높아진다. - 자바스크립트와는 다르게 브라우저에서 실행하기 위해 컴파일 과정을 거쳐야 한다. 기본 타입 string - 문자일 경우 사용한다. const city: string = "Seoul"; number - 수일 경우 사용한다. const age: number = 29; boolean - true / false const flag: boolean = false; null - null일 경우 사용한다. const n: null = null; undefined - u..

html a tag value 설정 기본적으로 a tag 속성 중 value는 없음. html5에 추가된 data-value 속성 추가 후 getAttribute("data-value") 함수로 값 가져옴 - html a tag - js const aValue = document.querySelector("a").getAttribute("data-value"); // 값

JavaScript concat 인자로 주어진 배열이나 값을 기존 배열과 합쳐 새 배열 return 기존 배열 변경하지 않음(얕은 복사) - concat() const array = ["로니콜먼", "브렌치워렌", "리치피아나", "숀클로리다"] const copyArray = array.concat(array); console.log(copyArray); // ['로니콜먼', '브렌치워렌', '리치피아나', '숀클로리다'] - 12가지 색 랜덤 셔플 const array = ["red", "orange", "yellow", "green", "pink", "black"]; const copyArray = array.concat(array); let shuffle = []; for (let i = 0; c..

JavaScript splice slice splice 기존 배열 요소를 교체 삭제 추가하여 배열 변경 - splice() - 인덱스 0에 요소 0을 추가 const array = [1, 2, 3, 4, 5]; array.splice(0, 0, 0); console.log(array); // [0, 1, 2, 3, 4, 5] - 인덱스 0부터 요소 1개 삭제 const array = ["이재명", "윤석열", "심상정", "안철수"]; array.splice(0, 1); console.log(array); slice 다른 배열 얕은 복사 원본 배열은 수정되지 않음 - slice() - 인덱스 0부터 5까지 복사(end는 미포함 4까지) const array = ["red", "orange", "yello..

JavaScript 삼항 조건 연산자 조건이 true/false에 따라 다르게 실행 - 조건문 ? 실행문(true) : 실행문(false) - 삼항연산자 - O/X를 번갈아 가며 콘솔 출력 let turn = "O"; setInterval(() => { console.log(turn); turn = turn === "O" ? "X" : "O"; }, 1000); - if문 if (turn === "O") { turn = "X"; } else if (turn === "X") { turn = "O"; } - 삼항연산자 - 20이상이면 성인 const age = 19; let result; (age >= 20) ? result = "성인" : result = "미성년자"; console.log(result);..