✔ 우아한 테크러닝 3기: React & TypeScript 1회차

🚀 우아한 테크러닝 3기 교육생

• 원래 오프라인으로 100명정도 뽑아서 한다고 하는데, 이번에는 코로나의 영향으로 온라인으로 진행되었습니다.
• 거기다가 이번에는 코로나 때문에 띄어 앉아야해서 약 30명 정도 뽑을 생각이시라고 하셨지만, 코로나가 심해져 온라인으로 진행되서 약 400여명의 교육생으로 뽑았다고 하셨습니다.
• 근데 이 교육을 듣고싶어서 지원한 사람만 1200여명.. 😤 열정적인 사람이 굉장히 많은 거 같다..
• 이번 교육은 zoom을 이용해서 온라인으로 진행되었고, 강사님은 우아한형제들의 김민태님(웹프론트엔드개발 그룹장)이 진행하셨습니다.
• 또한, 9월 한달동안 화, 목으로 진행되고 총 8회차로 진행될 예정이고 저도 계속 끝날때마다 블로깅을 할 예정입니다. ✌

🚀 우아한 테크러닝 3기 그 첫 시간 소개

• 첫 시간이라 그런지 교육적인 부분보다 굉장히 좋은 말씀을 많이 해주셨다.

🎈 우리들의 고민..

😥 내가 지금 하고 있는게 맞는 것인가? (내가 지금 잘하고 있나..?)

• 이 강의를 신청할 때 왜 이 테크러닝을 듣고싶은가에 대한 질문이 있었는데 거기의 대부분의 고민
  • 개발을 할때 동작은 되고 해결은 되는데 이게 잘하고 있는건지에 대한 의구심이 가장 크다. 때문에 이 테크러닝을 통해서 네트워킹을 하고싶고 시니어들한테 받는 피드백과 조언들을 원한다. (코드 품질에 대한 문제, 코드리뷰)
  • 아키텍처나 설계에 대한 고민.
  • 적정 기술에 대한 고민으로 react 상태관리를 해야할 때, Mobx를 써야하나, Redux를 사용해야하나에 대한 고민
  • 살재로 면접볼때 개발자들에게 이 기술을 왜 선택했어요? 물어봤을 때, 제대로 고민해서 기술을 선택한 사람들은 굉장히 드물었다.

그래서 그런 것들은 포괄해서 전달하고 싶은 것들은 ❓

• 도구의 발전
  • 20~30년 전에는 바닥(예를 들어 Node를 만든다.)부터 만들어 Hello World를 띄우기 이런것들의 고민이였다면, 지금은 도구의 발달로 생산성 향상에 도움을 주는 것들이 많이 생겨났다.
  • 이러한 이유로 고민의 관점이 달라졌다. (예를 들어, 어떤 라이브러리를 쓰지? 어떤 방식으로 만들어지는 알고리즘이 좋을까?, 성능은 어떨까 등..)
  • 그렇기 때문에 요즘 프로그래밍 학습 방법이 도구의 사용방법을 익히는 것이다.

🎈 4주간 진행하면서 자주 들을 키워드

• 상태의 관리와 어떻게 다룰 것인가?
• 환경: 런타임 환경뿐아니라 개발환경에 대한 큰 범주
• 제품: 실제 서비스에 나갈 제품에 대한 것
• 미션: 그래서 무엇보다 어떤 도구를 사용하더라도 그 도구가 원천적으로 해결하고자 했던 미션을 잘 이해나는 것이 그 도구를 가장 잘 사용하는 방법이다.
• 상대적: 이런것들이 모두 상대적인것들.. 이해하고 적용하는 것에 따라서 한마디로 정의하기는 에매

🎈 이 강의 목표

• 각각에 대한 기본기를 알려주고 디테일한 부분은 포인트를 집어주고 나머지는 그 부분에 대해서 계속 학습을 이어가면서 쌓아가고, 이 강의가 시작해서 끝났다고 끝이 아니고 네트워킹을 이어갈 수 있게 만들 수 있게 하고 싶다.

🎈 강의를 하면서 주로 다룰 도구

• TypeScript Playground : 4.0이후 굉장히 좋아짐
• 예제는 코드 샌드박스에서 만든다.
• react 공식 문서
• redux 공식 문서
• Mobx
• Redux-Saga 공식 문서
• UI 프레임워크로는 blueprintjs
• 테스팅관점에서 사용 Testing-library

🚀 TypeScript

• Type을 명시하는 것.
• 타입 추론을 할 수 있는 타입을 명시하지 않아도 TypeScript가 알아서 추론해서 타입을 세팅해준다.
• let foo = 10;
• 실제로 문제 일어날 때 다른 타입의 값을 넣을 때 오류가 발생

// 타입을 명시적으로 적는 방법으로 변수뒤에다 콜론을 하고 뒤에다 적는다. 
let foo : number = 10; foo = false;

🎈 명시적인 것과 암묵적인 것

• 추론은 안쪽에서 일어나기 때문에 암묵적이니까 명시적인 것보다는 읽는 사람한테 전달해주는 정보량이 적다.
• 몇 십년 전에는 코드가 복잡해도 잘 짜여저 보였지만, 요즘은 난해한 코드보단 명시적이고 읽기 쉬운 코드(코드가 길더라도)를 선호한다.
• 타입 스펙을 만드는 개발자들도 비슷한 생각을 하고 있고, 또 이것이 요즘의 트랜드.
• JavaScript 또한 예전 스펙에서 요즘 나오는 새로운 문법들이 명시적으로 표현을 확장 시키는 것이 보인다.
• 대표적으로 가변인자 같은 것.

// 밖에서 봤을 땐 좋지 않구나. 
// 함수 내부에 인자가 아무것도 없기 때문에 가변인자를 받는지 모른다. 암묵적.. 
function bar() { 
    arguments. 
    return 0; 
}
bar(10,20);

• 그래서 spread operator(스프레드 문법)이 나온것도 이런 이유.

function bar(...args) { 
  return 0; 
}
bar(10,20);

🎈 type alias

• 원시타입은 일반화되어있기 때문에 다양하게 사용가능하다.
• 하지만 타입에 의미를 부여하고 싶을 땐 단점이 된다.
• 그래서 표현력을 넣고 싶을때 type alias가 스펙을 제공한다.

// 대입처럼 보이지만 type alias 오른쪽에있는 타입의 별명을 붙여준다. 
type Age = number; 
let age: Age = 10;

• 객체 타입

// 객체 type alias 
type Foo = { 
  age: Age; // 세미콜론 
  name: string; 
}

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

• 결국 최종적인 타입은 Primitive type.

🎈 interface

• type alias와 비슷하지만 둘 중에 어떤 상황에서 어떤 것을 사용하는 것이 좋을까? 에 대한 얘기는 추후에 알려준다고 하신다.

type Age = number; 

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

const bar: Bar = { 
  age: 10, 
  name: "Kim", 
};

🎈 에러 검출

🔸 타입스크립트 문법 요소에는 크게 두가지가 존재

• 컴파일 타임에서 작동되는 요소 (type Alias, generic, interface)
• 런타임까지 가는 경우 에러를 잡는 요소 (JavaScript로 반환되는 요소)
  • JavaScript로 개발을 할 때는 에디터 상태에서 나는 오류로 나오는 것은 사실상 런타임에 나오는 에러와 거의 일치하다.
  • 때문에 타입스크립트가 제공하는 benefit은 거의 다 컴파일타임에 제공하는 장점이다.

🚀 TypeScript를 사용한 CRA(Create React App)

• CRA는 react app을 가장 빠르게 만드는 방법이다.

> yarn create-react-app woowahan --template typescript

• 이렇게 하면 tsconfig.json 파일과 tsx로 이루어진 cra가 생성된다.
• tsconfig.json 파일은 typescript 컴파일러 옵션을 설정할 수 있다.

import React from 'react'; 
import ReactDOM from 'react-dom'; 

// 인터페이스 
interface AppProps { 
  title: string; 
  color: string; 
} 

// 타입 정의 
// 상태 : 시간의 흐름에 따라서 변화하는 것 
// 현재 상태는 불변 
function App(props: AppProps){ 
  return ( 
    <h1>{props.title}</h1> 
  ) 
}

// 버추얼 돔의 랜더를 이용 
// 두개의 인자 
// render 최상위에서만 실행 
// 단일 버추얼 돔 
ReactDOM.render( 
  // 첫번째 인자 리액트 컴포넌트를 DOM으로 변경한 다음에 두번째 인자 HTML 컨테이너에 붙쳐넣는다. 
  // StrictMode => 경고해주는 안내해주는 개발툴에서 제공하는 툴 
  <React.StrictMode> 
      <App title="Tech Hello?" color="blue"/> 
  </React.StrictMode>, 
  // 돔으로 변경후 root 컴포넌트에 붙친다. 
  document.getElementById('root') 
);

🎈 Babel에서의 JSX transpiler

• Babel 안에 있는 JSX transpiler가 오른쪽처럼 변환해준다.
• 그렇기 때문에 안썻다고 생각해도 리액트 컴포넌트는 항상 리액트 패키지 import를 시켜야한다.
• 그 이유는 리액트 패키지는 변환된 다음에 쓰기 때문에 변환하기 전에 반드시 포함해준다.
• JSX는 결국 CreateElement라고 하는 리액트가 제공한 함수를 좀 더 편하게 만들어놓은 (마치 HTML 태깅하듯이) 구조일 뿐이다.

// 첫 번째 인자는 HTML 태그처럼 생긴 태크명, 두번째인자는 Property, 세번째 인자는 Child
function App() {
  return /*#__PURE__*/_react.default.createElement("h1", {
    id: "header"
  }, "hello ");
}

🎈 CRA의 장점과 문제점

• 장점: 간단하고, 왠만한 것들은 다 세팅되어있다.
• 단점
  • 장점 그 외의 모든 것은 단점
  • CRA가 제공하지 않는 세팅을 할 때 굉장히 까다롭다.
  • CRA의 유연하지 못한 몇가지들을 이렇게 바꿨으면 좋겠다라고 말을해도 CRA 기여자분들은 보수적이라서 잘 받아주지 않는다.
  • 가장 크리티컬한 문제는 다양한 환경에 대한 대응이 어렵다.(local, product 두가지만 지원)
  • eject를 사용해 설정 파일을 빼서 커스터마이징이 가능하지만, 매우 복잡하고 하지말라고 권고를 하고 있다.

🚀 상태관리

🎈 Flux

• 제일 먼저 나온 approach가 flux 아키텍처🎈

🎈 Redux

• redux는 flux를 조금 더 정형화하고 더 쓰기 편하고 simple하게 제공되는 라이브러리

🎈 Mobx

• Mobx는 redux의 대채품보다는 완전히 상태를 관리하는 페러다임을 바꿔버린 다른 방식이다.
• 상태도 다르고 상태를 바라보는 관점도다르다.
• 처음에 쓰면 굉장히 편하지만, 단순한 것은 단순한 형태를 취하는 이유가 있다.
• 단순한 형태를 가지면 그걸 만든 사람이 원하는 형태도 결과물을 가이드하기 쉽기 때문이다.

🚀 첫번째 시간 수강 후기

• 일단 강의하시는 김민태님께서 굉장히 친절하게 알려주셨고 그에 따라 배울점이 많다고 느꼈습니다.
• 중간에 쉬는 시간이 두번정도 있었지만 그 시간 마저도 질문에 답변을 해주는 QnA 시간을 가졌습니다.
• react를 공부를 하면서 뭔가 잘 못 공부하고 있다는 생각이 들었고 그에 따라서 자극을 많이 받았던 기회였습니다.
• 교육생들 또한 정말 열정적이고 배우고자하는 의지?가 많아서 벌써 슬랙방도 파졌고 이번 기회에 네트워킹이 잘되서 스터디를 할 수 있는 기회가 생겼으면 좋겠습니다.
• 앞으로 남은 교육기간도 기대가 되고 집중해서 들을려고 노력해야겠습니다.. 😤

🚀 주니어들한테 해주고 싶은 말(김민태 님께서..)

• 주니어들이 시니어와 비교했을 때 압도적으로 유리한 부분은 시간
• 이 시간이 있다는 benefit을 충분히 활용해서 초조하게 여러가지 공부를 하는 거 보다는 시간이 충분히 있으니 여유를 가지고 했으면 좋겠다.
• 이 시간으로 여러 정보를 습득할 수 있는데 이걸 방해하는 것이 초조한 생각이다.
• 이런 생각이 시간이 지날수록 자기 자신을 많이 힘들고 지치게 한다.
• 때문에 마라톤을 시작했다 생각하고 여유를 가져라!