7/27 - 4주 프로젝트

Toy 38번 문제. telephoneWords 구현실패 . 

 

---

 front & back 모두 각각 Tslint & Eslint , babel 설정을 맞추고  프로젝트 repo 에 업로드에 성공!

 

이제 환경은 갖춰졌으니 다음 주부터 바로 코드작성에 들어갈 수 있다. 함께 스프린트 1에 백로그를 나눠가지고 시간을 분배했다.

 

이번 4주 프로젝트에서 굉장히 여러모로 무리한 선택을 많이 한 것 같다. 무지한 back 과 기본만 아는 front 풀스택으로 진행하는

 

욕심을 낸 결과는 처참하고 힘들겠지만 내 성장에는 큰 도움이 되지 않을까 싶다.

 

---

Typescript 란

타입스크립트는 자바스크립트를 확장한 언어로, JS 언어의 특성을 침범하지 않고 최신 ECMA 표준을 지원.

 

TypeScript의 가장 큰 특징은 type을 지정하는 것이다. 

TypeScript = JavaScript + 타입

자바스크립트의 var 와 같은 자료형 대신, string, number와 같은 자료형을 지정함으로써 안정성을 확보할 수 있다.

TypeScript를 설치할 때 같이 설치되는 tsc(TypeScript Compiler)는 컴파일 과정에서 타입 검사를 통해 에러 없이
안정성이 확보되면 타입들을 제거하고 최종적으로 자바스크립트 코드를 생성한다.

 

자바스크립트에 없는 type이 지원되면서 장점이 생기는데,
1.  변수에 type이 추가되어 안정성이 확보된다.
2. type에 대한 예외 처리를 하지 않아도 된다.

 

TypeScirpt 설치

 npm install -g typescript

Type 설정

변수 타입 설정

콜렉션 타입 설정

조건문에서 타입 설정

function에서 타입 설정

---

React - <fragment tag>

React의 일반적인 패턴은 컴포넌트가 여러개의 요소를 반환한다.
Fragments를 사용하면 DOM에 별도 노드를 추가하지 않고 자식 목록을 그룹화할 수 있다.

render() {
  return (
    <React.Fragment>
      <ChildA />
      <ChildB />
      <ChildC />
    </React.Fragment>
  );
}

key나 속성을 사용하지 않을 경우 짧은 구문으로 <></>  를 사용할 수 있다.

(많은 도구에서 아직 지원하지 않기 때문에 도구에서 지원하기 전에는 명시적으로 <React.Fragment> 를 작성)

class Columns extends React.Component {
  render() {
    return (
      <>
        <td>Hello</td>
        <td>World</td>
      </>
    );
  }
}