Dev/JS Family, HTML, CSS

[TypeScript] 타입스크립트 입문 (4) - 제네릭, 고급 타입 다루기

타입스크립트 심화 기능 제네릭 유니온 타입 등을 남발하다보면 결국 any와 다름없어지는 상황이 발생한다. C# 및 Java와 같은 언어에서 널리 사용되는 문법 대규모 소프트웨어를 구축할 수 있는 가장 유연한 기능을 제공 와 같은 꺽쇠 괄호를 사용한다. 다형성을 구현 가능하게 한다! /** * 제네릭 */ //이럴 바엔 any가 낫겠어... //function getInfo(msg: string | number | number[] | string[] ) { function getInfo(msg: any ) { return msg } console.log(getInfo('Word')) console.log(getInfo(123)) console.log(getInfo([1, 2])) console.log(ge..

[TypeScript] 타입스크립트 입문(3) - 인터페이스, 타입 가드, 열거형, 유니온 타입

타입스크립트의 고유 기능들 인터페이스 JavaScript에서는 존재하지 않는다. 객체의 타입을 정의하고 생김새를 가지도록 할 수 있다. TypeScript에서의 클래스 기능은 C#에서 유래된 것이 많다. 일부 기능은 TS에서만 존재하는 고유 문법으로 컴파일 후에 사라진다. extends가 아닌 implements 키워드로 구현한다. /** * 인터페이스 * * interface * - 정의 * - 설계 * * implements * - 구현 */ interface Person { name: string age: number } const jang: Person = { name: 'Jang', age: 99 } implements interface의 설계를 구현한다 /** * interface implem..

[TypeScript] 타입스크립트 입문 (2) - 기본 타입, 클래스

타입 기본 기본 타입 훑어보기 원시 타입 불변하는 타입 객체가 아닌 값들 원시 타입은 타입스크립트가 자동으로 타입 추론을 하기 때문에 생략해도 무방하다! const str: string = 'STRING' const num: number = 123 const bool: boolean = true 객체 타입 객체 전체의 타입을 지정 가능 객체 자체의 타입을 지정하면 any와 다를게 없다 /** * Object Type */ // object는 any와 다른게 없는 상황 const obj: object = { str: "str", num: 123, child: { str: "str", num: 123, }, }; // obj.num - object literal const obj2: { str: string..

[TypeScript] 타입스크립트 입문(1)

타입스크립트란? TypeScript는 Microsoft사에서 개발한 자바스크립트 기반 언어이다. 과거에는 JavaScript의 Superset(상위 개념)으로 여겨졌으나 최근에는 타입 구문이 있는 JavaScript로 정착하고 있다. 실제로 Microsoft는 ECMA에 자바스크립트에 타입스크립트의 병합을 정식으로 건의하였다. Why TypeScript? JavaScript는 너무 많은 것을 허용해준다(무분별한 undefined, 너무 관대한 타입 추론 등) -> 안전성 보장이 어려움 JavaScript에 추가 구문이 붙는 것이기 때문에 JavaScript를 이해하고 있다면 배우기가 쉽다. MS에서 개발한 Visual Studio Code와 완벽하게 통합되기 때문에 오류 통제가 용이하다. 컴파일러를 통해..

[React] 일주일만에 리액트 정복하기! (2)

React 폼 HTML 폼 엘리먼트는 폼 엘리먼트 자체가 내부 상태(state)를 가지기 때문에, React의 다른 DOM 엘리먼트와 다르게 동작합니다. -React Document 예를 들어 폼은 특정한 정보를 입력받은 뒤 폼을 제출하면 새로운 페이지로 이동한다. 그러나 대부분의 경우 JavaScript 함수로 제출을 처리하고 폼에 입력된 데이터에 접근하는 것이 편리하다. 이를 위한 표준 방식은 "제어 컴포넌트(Controlled components)"라고 불리는 기술을 이용하는 것이다. 제어 컴포넌트(Controlled Component) , , 와 같은 HTML 폼 엘리먼트는 일반적으로 사용자의 입력을 기반으로 자신의 state를 관리하고 업데이트한다. React에서는 state와 setState(..

[React] 일주일만에 리액트 정복하기! (1)

나에게는 아주 안 좋은 습관이 있다. 덧셈 뺄셈을 배우던 초등학생 시절부터 거의 병적으로 손으로 필기하기를 싫어했다. 필기가 필수인 대학 수업 때도 PPT 제공 없는 교수님의 수업까지도 필사적으로 필기 없이 공부하기 위해 노력했다. 정말 피치 못해 필기를 해야 할 때에도 단어 위주로, 심지어 단축말... 까지 만들어가며 적어야 하는 양을 최소한으로 줄였다. 십여 년간 쌓아온 나름의 공부 노하우와 이해 방법이 있었기에 공부의 목적이 시험뿐이었던 지금까지는 이 방법이 잘 먹혔으나, 취업 시장에 들어서고 난 후로는 내가 공부한 내용을 남에게 !!!보여줄!!! 방법이 필요함을 절실히 깨닫게 되었다. 특히나 개발 공부를 시작하고 난 뒤로 여기저기서 개발자에게는 블로그와 깃허브가 전부라는 말을 많이 들었기 때문에 ..