회사에서 공부해왔던 프론트엔드와는 무관한 ACS 시뮬레이션 업무를 해오며,본의 아니게 코드를 놓은지 거의 3개월째이다.경각심을 느껴, 제로초의 web-game 강의로 다시 리액트 감을 좀 끌어올리는 겸공부한 내용을 정리하려한다. 툴체인에 대한 이해가 많이 부족하다고 생각하는데,툴체인패키지 매니저 (package manager)번들러 (bundler)컴파일러 (compiler)포멧터 (formatter)린터 (linter)테스트 러너 (test runner)미니마이저 (minimizer)서버 (server)그중 첫번째로, 번들러중 하나인 Webpack에 대해 정리해보려 한다.1. Webpack이란?현대의 웹사이트는 수많은 HTML, CSS, JavaScript, 이미지들이 모여 구성되는데, 이 때, 수많은..
Quiz 1 다음 요구사항을 만족하도록 introduce 함수의 매개변수의 타입을 정의하세요 name 매개변수는 String 타입이며, "이정환" 이라는 기본값이 설정됩니다. tall 매개변수는 Number 타입이며, 선택적 매개변수 입니다. Answer 1 function introduce(name = "치현", tall?: number) { if (!tall) { console.log(`안녕하세요 ${name}입니다!`); } else { console.log(`안녕하세요 ${name}입니다. 키는 ${tall}입니다`); } } Quiz 2 함수 타입 표현식을 이용해 다음 요구사항을 만족하는 타입 Func를 정의하세요 2개의 매개변수 a와 b를 받습니다. 매개변수 a는 Number, b는 Strin..
Quiz 1. 타입 단언을 이용해 person 변수에 빈 객체를 할당하세요 (힌트. 초과 프로퍼티 검사 방지를 위한 타입 단언) type Person = { name: string; age: number; }; let person: Person = {};Answer let person = {} as Person; person.name = "치현"; person.age = 29;Quiz 2. 타입 단언을 이용해 함수 호출에서의 오류를 해결하세요 (힌트. const 단언) let value = 10; giveMe10(value); // error: 'number' 타입의 인수는 '10' 타입의 매개변수에 할당할 수 없다. function giveMe10(value: 10) { r..
Quiz 1. 아래 코드의 변수 a,b,c,d,e의 타입은 각각 어떻게 추론될까요? let a = 10; const b = 20; const c = [1, 2]; const d = [1, "hello", true]; const e = [1, 2, 3] as const; Answer type A = number; type B = 20; type C = number[]; type D = (number | string | boolean)[]; type E = [1, 2, 3]; Quiz 2. 다음 요구사항을 만족하는 Animal, DogCat(개냥이) 타입을 완성하세요 Animal 타입은 Dog 타입일 수도 Cat 타입일 수도 있습니다. DogCat 타입은 Dog이자 Cat입니다. type Dog = { na..
