Day 1

해당 강의 목표

3년 미만 혹은 외부강의가 고픈 사람들
성장에 대한 고민
네트워킹
코드 품질 아키텍처 적정 기술

강의에서 다룰 라이브러리

TypeScript

타입 선언

타입을 명시하지 않았을 경우 타입 추론할 수 있는 변수는 명시하지 않아도 타입스크립트가 알아서 추정한다.

let foo = 10;

foo = false;  // 타입에러

타입 명시

let foo:number = 10;

foo = false;

Type alias

코드를 잘 읽게 하고 싶거나 의미를 부여하고 싶을 때 사용한다. 컴파일링할 때 사용되는 문법요소이며 javascript로 트랜스파일링 됐을 경우 보이지 않는다.

type Age = number; 

Arguments

function bar() {
    return 0;
}

bar(10, 20);

javascript 서는 가변인자가 유연하게 허용되기 때문에 아무런 에러가 안 나지만

typescript에서는 가변인자 허용을 안 한다.

interface

인터페이스랑 객체 타입이랑 사용하는 모양은 같다.

type Age = number;
type Foo = {
    age: Age;
    name: string;
} // 객체 타입 선언

interface Bar{
    age: Age;
    name: string;
} 

const foo: Foo = {
    age: 10,
    name: 'park'
}

const bar:Bar = {
     age: 10,
    name: 'park'
}

Q. 인터페이스랑 객체 타입은 언제 사용하는지?

A. 차차 강의 내용에서 다룰 예정.

React

npm create react-app tech-hello --template typescript

—template 옵션은 보일러플레이트 올라온 템플릿을 받아 쓰는것.

`import React from 'react';` 반드시 명시해줘야 하는 이유

import React from 'react';

function App() {
  return (
    <h1 id="header">Tech Hello!</h1>
  )
}

위 코드를 Babel PlayGround를 통해 트랜스 파일링 된 결과이다.

"use strict";

var _react = _interopRequireDefault(require("react"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function App() {
  return /*#__PURE__*/_react.default.createElement("h1", {
    id: "header"
  }, "Tech Hello!");
}

React코드에서 react모듈을 사용하지 않아도 컴파일 이후 React컴포넌트는 react모듈을 통해 객체를 생성한다.

반드시 포함시켜줘야지 컴파일 이후 정상 동작한다.

해당 포스팅은 우아한 테크러닝3기 React&TypeScript 강의를 정리한 내용입니다.