개발 시 고려해야 할 것
- 코드품질, 아키텍처, 적정기술
( Tip ) 면접질문 준비 : 해당 기술을 선택한 이유는 무엇인가요? - 도구 사용법을 익히자
- 상태, 환경, 제품, 목표, 코드, 상대적
수업에서 사용할 사이트
타입스크립트 플레이그라운드 : https://www.typescriptlang.org/
코드 샌드박스 : https://codesandbox.io/index2
React 공식 사이트 : https://reactjs.org/
Redux 공식 사이트 : https://redux.js.org/
Mobx 공식 사이트 : https://mobx.js.org/README.html
Redux-saga 공식 사이트 : https://redux-saga.js.org/
블루프린팅 UI 프레임워크 : https://blueprintjs.com/
테스팅 라이브러리 : https://testing-library.com/
Babel : https://babeljs.io/
블루프린팅 선정 이유 ? 타입스크립트로 만들어짐, 컴포넌트 만들기 연습 가능
자바스크립트
가변인자 함수와 arguments
가변인자 함수 : 매개변수의 개수에 따라 서로 다른 동작을 하는 함수 ( 인자의 개수 정해져 있지 않을 때 사용 )
function bar() {
console.log(arguments);
return;
}
bar(10, 20); // [10, 20, callee: ƒ, Symbol(Symbol.iterator): ƒ]
bar(10, 20, 30); // [10, 20, 30, callee: ƒ, Symbol(Symbol.iterator): ƒ]ES6 문법에서는 Spread 연산자 사용
function bar(...args) {
console.log(args); // Spread의 결과는 배열
return;
}
bar(10, 20); // [10, 20]
bar(10, 20, 30) // [[10, 20, 30]]타입스크립트
Primitive Type
타입스크립트는 변수의 타입을 명시해준다.
물리적 값의 유형으로 다양하게 사용될 수 있으므로, 재활용성이 좋다.
let x: number = 10;
let y: string = 'hello world!';타입 종류: Boolean, Number, String, Array, Tuple, Object 등
이렇게 타입을 직접적으로 명시해주는 것을 primitive type 이라고 한다.
TypeAlias
TypeAlias는 타입에 특정 의미를 부여한다.
type Age = number;
let age: Age = 10;만약 변수명이 age가 아니라면, 해당 값은 이름인지? 나이인지? 알 수 없다.
이때, TypeAlias를 사용하면 값의 의미를 직관적으로 알 수 있다.
위의 코드를 자바스크립트로 바꿔보겠다.
let age = 10;type Age = number; 은 컴파일 타임에만 작동하는 문법 요소로, 컴파일이 끝나면 사라진다.
즉, 특정 문법은 컴파일까지는 타입스크립트에서만 작동하며 런타임까지 이어지지 않아 자바스크립트 변환이 안된다.
Type vs Interface
타입스크립트에는 Type을 기술하는 두 가지 방법이 있다.
Type과 Interface, 둘의 차이는 강의를 진행하면서 언급할 예정이다.
type Age = number;
type Foo = {
name: string;
age: Age;
}
const foo: Foo = {
name: 'miniddo',
age: 20
}첫 번째 방법인 Type을 객체 타입으로 작성해보았다.
Foo 안의 요소들은 Primitive type으로도 TypeAlias로도 선언 가능하다.
type Age = number;
interface Bar {
name: string;
age: Age;
}
const bar: Bar = {
name: 'miniddo',
age: 20
}위 코드는 두 번째 방법인 Interface이다.
지금으로써 알 수 있는 차이점은 = 가 있고 없고의 차이인 것 같다.
자바스크립트 vs 타입스크립트
- 자바스크립트 - 명시적 X, 암묵적 O
- 타입스크립트 - 명시적 O, 암묵적 X ( 읽기 쉬운 코드 )
- 프로젝트 구조가 복잡한 환경은 명시적, 간단한 환경은 암묵적으로 작성해도 좋다.
리액트 (React)
React와 TypeScript 프로젝트 설치
yarn create react-app tech-hello —template typescript
jsx : 자바스크립트의 확장된 문법으로 리액트가 제공하는 Transpiling
- 파일에서
jsx를 사용하기 위해서는 React를 import 해주어야 한다. - 타입스크립트에서는
tsx파일을 사용한다.
/src/index.tsx
import React from 'react';
import ReactDOM from 'react-dom';
interface AppProps {
title: string;
color: string;
}
function App(props: AppProps) {
return (
<h1 id="header">{ props.title }</h1>
)
}
ReactDOM.render(
<React.StrictMode>
<App title="Tech Hello?" color="red" />
</React.StrictMode>,
document.getElementById('root')
)props : 외부와 소통하기 위한 인터페이스이다. 타입스크립트 문법에 맞게 타입을 지정해준다.
{props.title} : { } 를 쓰지 않는다면 인자 값인지 h1 태그 안의 내용인지 알 수 없다.
ReactDOM : Virtual DOM(가상돔)이다. 최상위 1번만 선언하며 단일 트리 형태를 가진다.
function App() {
return (
<h1 id="header">hello miniddo</h1>
)
}function App() {
return /*#__PURE__*/_react.default.createElement("h1", {
id: "header"
}, "hello world");
}(위) 타입스크립트 / (아래) 자바스크립트
자바스크립트로 변환한 코드에서 createElement를 볼 수 있다. 가상돔을 만들 때 사용하는 함수이다.
인자 값으로 (태그, 태그 요소, 내부 내용)을 받는다.
Redux vs Mobx
리액트 상태관리의 대표적인 두 가지이다.
형태와 상태를 바라보는 관점이 모두 다름으로 상황에 맞게 사용하면 된다.
