[우아한테크러닝 3기] React&TypeScript #1일차

sk97kang·2020년 9월 1일
0

1일차

📅 2020-09-01 19:30 ~ 22:00

처음으로 진행하는 온라인 강의로 오프라인 교육 시 30명이지만 온라인으로 전환되면서 400~450명정 정도로 엄청 많았다.

고민

  • 나는 잘 하고 있나?
  • 네트워킹
  • 코드 품질
  • 아키텍처
  • 적정기술

전달하고자 하는 것

  • 도구
    많은 도구들이 발달을 했고, 생산성 향상에 큰 기여를 했다.
    • TypeScript, React, Etc...

강의 키워드

  • 상태 (State) : 어플리케이션은 즉 상태를 관리하는 것이 주 목표
  • 환경 (Env) : 많은 환경에 대한 대응 및 개발 환경에 대한 관심
  • 제품 (Product) : 개발을 하는 것뿐만 아니라 제품적인 측면으로 생각
  • 목표 (Mission) : 많은 도구를 조합해 만드는 제품이 해결할 미션
  • 코드 (Quality) : 코드의 퀄리티를 높일 수 있는 방법
  • 상대적 (E=mc^2) : 위에 있는 모든 것은 사람마다 상대적

도구

Q&A

Q. ContextAPI 를 다루나요?
A. 상태관리 Lib들이 ContextAPI 기반으로 되어있기때문에 다룬다.

Q. Fullstack 개발자에 대해서 어떻게 생각하시나요?
A. 자연스럽게 되는것이지 목표한다고 되는것이 아니다고 생각한다.

Q. React를 선택한 이유
A. 우아한형제들이 React가 표준

Q. 공부할게 많아서 초조해요..
A. 초조한 생각을 훈련을 통해 여유를 가지고 공부를 했으면 좋겠다.

...


강의

TypeScript

JavaScript의 SuperSet

  • 강타입 언어로 개발자의 실수를 사전에 방지할 수 있다.

Common

Compile Time에 작동하는 문법 요소

  • type alias, Generic ...

Run Time에 작동하는 문법 요소

Type 선언

  • 암묵적 타입 선언

변수 선언 시 초기화를 하면 타입 추론이 일어나서 오류가 나지 않는다.

let foo = 10; // foo는 number로 타입 추론이 된다.
  • 명시적 타입 선언
let foo: number = 10;

Type Alias

  • Primitive Type
type Age = number; // Age Type을 선언

let age : Age = 10;
  • Object Type
type Foo = {
  age: number;
  name: string;
}

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

interface

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

const boo: Bar = {
  age: 10,
  name: 'kim'
}

Type Alias vs Interface

비슷한 기능을 하지만 미세한 차이가 있다.

JavaScript

  • Spread operator - ES6 문법
function foo(...args) {
  return 0;
}

foo(10, 20)

React

CRA

  • react app을 빠르게 구성할 수 있다.
  • 다양한 환경의 대응에 어려움이 있다.
  • 프로덕션용으로는 CRA 사용안하기를 권고

Typescript&React 프로젝트 생성하기

  • yarn
yarn create-react-app <app_name> --template typescript
  • npm
npm create-react-app <app_name> --template typescript
  • npx
npx create-react-app <app_name> --template typescript

Babel

  • 최신 문법의 Javascript를 사용하면 이전 문법으로 변환하여 실행시켜주는 도구

  • React JSX -> JS 변환

  • react를 변환 후에 사용하므로 import React from 'react'는 필수로 필요하다.

전역적인 상태관리

전역적으로 상태를 관리하는 대표적인 아키텍쳐로는 Flux 아키텍쳐가 존재한다.
전역적으로 상태를 관리하는 목적으로 redux라는 패키지가 대표적으로 사용된다.
redux와 비슷하게 전역적으로 상태를 관리하는 패키지는 MobX가 존재한다.
redux와 다르게 MobX는 기능이 많으며 다양한 방법으로 사용할 수 있다.
기능이 많다는 뜻은 유연하게 기능들을 사용할 수 있다는 의미를 가지고 있다.
반면에 유연하게 기능을 사용할 수 있는 만큼 개발자가 실수를 할 수 있는 여지가 많다.
따라서 실수를 줄이기 위해서 기술을 사용하기 전 아키텍쳐 설계 또한 굉장히 중요하다.


코드

1일차 코드


다음 시간에...

차근 차근 Sample을 만들어보면서 강의 진행

profile
주니어 개발자 Kan

0개의 댓글