전체 글
TIL | Array, readonly, Tuple
Array, readonly, Tuple, Array const fruits: string[] = ["1", "2"]; const fruits: number[] = [1, 2]; const fruits: Array = ["1", "2"]; // 제네릭 챕터에서 다시 다룰 예정 const fruits: Array = [1, 2]; 배열의 element 타입을 위와 같이 지정할 수 있다. readonly const numbers: number[] = [1, 2]; const printArray1 = function (scores: readonly number[]) { numbers.push(); // Property 'push' does not exist on type 'readonly number[] };..
TIL | 함수 타입 이용(type, spread, default, rest)
일반 함수에서의 사용 In javascript function jsAdd(a, b) { return a + b; } In typescript function jsAdd(a: number, b: number): number { return a + b; // number값만 인자로 전달 가능 } // function jsAdd(a: string, b: string): string { return a + b; // string값만 인자로 전달 가능 } JS의 경우, 타입이 결정되지 않았기 때문에 string, number 등의 인자 타입에 제한을 받지 않고 해당 로직을 처리할 수 있다. (type으로 따지면, any에 속한다.) TS의 경우, 지정된 타입으로만 인자 전달 및 로직 처리가 가능하다. return..
TIL | Data 기본 타입
Data Type Javascript와 타입 종류는 비슷하지만 동적 타입이 아닌 정적이며, 타입이 결정된 후 다른 타입의 데이터가 해당 변수에 할당될 수 없다. (좀더 엄격한 기준을 갖고 있다.) JavaScript Data Type Primitive: number, string, boolean, bigint, symbol, null, undefined Object: function, object, array ... Number const num1: number = 1; const num2: number = 0.01; const num2: number = -12; const num: number = "string"; //Type 'string' is not assignable to type 'number..
TIL | TypeScript이란?
TypeScript 드디어 학수고대하던, 타입스크립트 공부를 시작하게 되었다. 자바스크립트와 더불어 자주는 아니더라도, 진행하는 프로젝트와 별개로 당일 공부한 내용을 꾸준히 포스팅하고자 한다. TypeScript란? 오픈 소스 언어 동적인 자바스크립트 기반으로 만들어진, 정적 언어(자바스크립트 runtime 환경이 존재하는 어떤 곳에서도 대체하여 사용할 수 있다.) 타입스크립트 자체 tool, babel와 같이 자바스크립트 파일로 변환하기 위해 컴파일러가 필요하다. 자바스크립트와 달리, 데이터 타입을 구체적으로 명시해주므로 좀더 안정적인 프로그래밍이 가능하다. 프로젝트 진행시, JS와 TS 혼용이 가능하다. 실시간 에러 확인이 가능하다. 객체 지향 프로그래밍이 가능하다.(유지 보수 good) 실습 Set..
TIL | 웹팩 로더(Style, CSS)
로더-1(style, css) 로더는 자바스크립트 파일 뿐만이 아닌 style, image 등의 파일들을 모듈로 변환하여 처리할 수 있게 하는 수단이다. css-loader, style-loader loader 설치 npm install -D css-loader style-loader 로 로더를 설치 후 웹팩 설정파일에 추가한다. css-loader: css 코드를 모듈로 변환하는 역할을 한다. style-loader: JS 코드로 변경된 style을 동적으로 DOM에 추가하는 역할을 한다. (설치하지 않을시, 스타일이 DOM에 반영되지 않는다.) webpack.config.js 파일 설정 const path = require("path"); // module.exports = { mode: "devel..
TIL | 웹팩 번들 파일 생성하기
웹팩의 등장 웹 애플리케이션의 크기가 커지면서, JS 파일의 크기 또한 커졌다. 때문에 JS코드 또한 나눠서 관리했으나 이는 script의 많은 사용으로 HTTP 병목 현상이 발생하게 된다. 위와 같은 계기로 인해 모듈로 나누어 관리하는 방법들이 있으며, 대표적으로 웹팩이 존재한다. 웹팩은 다수의 파일(module)을 하나의 파일로 합쳐주는 번들러(bundler). 이때 합쳐진 파일을 번들(bundle)이라고 한다. 웹팩 설치 npm init npm install -D webpack webpack-cli npm init을 통해 npm으로 관리할 프로젝트의 json 파일을 생성한다. 터미널에서 위와 같은 커맨드를 통해 webpack와 터미널 도구인 webpack-cli을 설치한다. -D는, devDepen..