2주차(월) - 프리 온보딩 코스 프론트엔드 - TypeScript

minbr0ther·2022년 2월 9일

pre-onboarding-fe

목록 보기

8/15

💫 2주차(월) 과제 리뷰

코드가 지저분해도 구현은 해야 한다
라이브러리를 써서라도 구현은 해야 한다

form 태그를 굳이 써야 할까?

결론부터 말하자면 “안 쓸 이유가 없다.”
브라우저에서 default로 여러 기능을 제공한다 required, enter 누르면 submit
의미있는 페이지를 만들기 위해서 시맨틱하게 하는 것도 이유가 된다.

상수관리

오로지 유지보수를 위함 (당연히 들여야 하는 습관)
한번 이상 사용된다
한번만 쓰이면 같은 폴더 내에 관리

const Routes = () => {
  return (
    <Router>
      <Route exact path={ROUTES.HOME}>
        <Home />
      </Route>
      <Route exact path={`${ROUTES.PRODUCT}/:id`}>
        <Product />
      </Route>
      <Route exact path={ROUTES.RECENT_LIST}>
        <RecentList />
      </Route>
    </Router>
  );
}

// src/utils/constants/routesPath.js
const ROUTES = {
  HOME: '/',
  RECENT_LIST: '/recentList',
  PRODUCT: '/product',
};

export default ROUTES;

대소문자 조심!

git은 대소문자 인지를 못해서, vscode 같은 editor에서 대소문자 변경하면 안 됩니다! (Components, components)

custom hook

컨벤션: src/hooks/ 일반적으로 custom hook 이라는 것을 알 수 있도록 “use”로 시작
validation 같이 재사용 많은 함수는 custom hook으로 만들면 좋다 ✨
- 여태껏 커스텀 훅을 작성해보지 않았으면 도전해보기 💪🏻

event handler는 JSX에 로직 구현하지 말고 꼭 따로 빼기

규모가 커질 것을 대비해서 무조건 로직은 분리하는게 좋음

🏅 타입스크립트

💡 TypeScript는 타입 하나하나 이론으로 학습하는 것은 권장하지 않습니다!
기존 리액트 코드를 → TypeScript 버전으로 처음부터 만들면서 기본 타입들을 익혀보세요.

타입스크립트 관련 면접 질문

타입스크립트를 적용하면 장점과 단점 (경험)
- 프로젝트가 장기적일때 빛을 발한다
타입 자체 질문은 하지 않는다, 주로 지원자의 github을 보고 관련 질문을 한다
우대사항에서 99% 선정되는 기술스택 ✨

🏋🏻‍♂️ 타입스크립트를 시작하기 전에

✔️ 타입스크립트 사용에 대해 고민해보기

자바스크립트에 특정 문법이 추가된 언어
과거에는 TS가 불편하다고 말이 많았다 ⇒ 도입이 오래걸린다
- 현재는 너무 많은 회사에서 도입하고 있다.
개발 단계에서 런타임 전에 에러를 잡고 문법 오류를 찾아낼 수 있어서 개발 속도가 빨라진다.
- 런타임? 컴파일 타임?
협업과 유지보수에서도 코드만 보고도 오해 없이 정확한 개발이 가능하다.

✔️ 런타임과 컴파일 타임

컴파일 타임: TS → JS 변환하는 컴파일을 과정
런타임: 변환된 자바스크립트가 브라우저에 돌아갈때

✔️ 리액트와 웹팩(Webpack), 바벨(Babel)

웹팩을 알고있으면 좋다 (언제 어떤 회사에서 사용할지 모름)
웹팩 ⇒ 모듈 번들러
- 모듈은 하나의 파일
- 번들러는 여러 파일을 합쳐서 하나의 파일로 만들어준다
바벨 ⇒ 컴파일러
- 기계어(고수준 언어) 를 인간의 언어(저수준 언어)로 바꿔준다
- 최신의 자바스크립트 언어 → 과거의 언어 변환

🧳 함수

매개변수의 우측에 콜론(:)과 매개변수의 타입을 정의합니다.
return 값의 타입은 소괄호()우측에 : 이후에 타입을 정의합니다.
기존 js와 마찬가지로 default parameter을 사용할 수 있다.

lang = "ko" // ts가 타입 추론을 통해 'string'으로 생각함

🧳 자바스크립트에 없는 타입 - 기본

우리 인생에 any는 없어

any를 쓸거면 TS 쓸 이유가 없다 👻

void

보통 함수에서 반환값이 없는 경우 사용합니다.
console.log, alert

Enum

상수로된 세트 값이 필요할 때

export enum status {
	happy,
	sad,
	bored,
}
    
console.log(status.happy) // 0 : 기존의 값은 index를 가진다

Union

여러 타입을 받을때 사용한다
util 함수에서 유연하게 매개변수를 받을 때 사용
- 잘하는 주니어 개발자 ⇒ 남이 쓸 수 있는 커스텀 훅 만든다, Util 만든다

function formatDate(date: string | number | Date): string {}

Tuple

배열과 마찬가지로 데이터를 순차적으로 저장할 수 있다.
두개 이상의 타입을 사용할때 사용한다.

let option: [string, number] = ['1번', 1];

let optionArr: [string, number][] = [['1번', 1], ['2번', 2], ['3번', 3]];

Tuple과 Union의 사용

union은 사용하고자 하는 타입 중에 하나만 있어도 가능합니다.
튜플을 사용하면 배열의 요소에 정의한 타입이 모두 존재해야 합니다.

// union
let starNumberArr: (number | string)[] = [1, 2];
starNumberArr.push("3점");

// tuple
let starArr: [number, string] = [1, "1점"];

Type 별칭 (Type Alias)

타입을 재사용하거나, 객체를 위한 타입을 정의할 때 많이 사용

type ID = number | string;
type Info = {
	id: ID;
	pw: string;
};

function checkInfo(info: Info) {

}

let id: ID = "1010";
checkInfo({ id, pw: "password" });

🧳 인터페이스 (Interface)

타입스크립트에서의 인터페이스는 리액트 프로젝트에서 가장 많이 쓰이는 타입 중 하나일 것입니다.

state와 props의 타입을 정의하는데 주로 사용합니다 👀

// before
function getInfo(restaurant: {name:string, star:5}) {
  console.log(restaurant.name);
}

//after
interface Restaurant {
	name: string;
	star: 5;
}

function getInfo(restaurant: Restaurant) {
	console.log(restaurant.name);
}

객체 타입을 정의할때 사용한다
프로퍼티 두개 이상부터는 인라인 보다는 interfacef로 빼서 정의한다

인터페이스 확장

extends 키워드를 사용하여 기존에 정의된 인터페이스를 확장해서 사용할 수도 있다

interface BasicInfo {
	name: string;
	star: number;
}

interface DetailInfo extends BasicInfo {
	address: string;
	phone: string;
	position: number[];
}

교차 타입(Intersection Types) 활용

//  BasicInfo과 DetailInfo에 있는 모든 타입이 필요해진다!
type Info = BasicInfo & DetailInfo;

합쳐서 새로운 인터페이스를 만드는 것은 아니다
- 인터페이스는 불가 ❌
& 기호를 사용하여 기존에 정의했던 인터페이스를 합쳐서 새로운 타입을 만드는 것이다 🚨

🧳 타입호환성 (Type Compatibility)

타입 호환성이란 어떤 타입을 다른 타입으로 취급해도 되는지 판단하는 것
타입 A를 타입 B로 취급해도 되는 것을 할당 가능하다고 하며
타입 A가 타입 B의 서브타입(subtype)이라고 표현하기도 함
정적 타입 언어의 가장 중요한 역할은 타입 호환성을 통해 컴파일 타임에 호환되지 않는 타입을 찾아내는 것 - 🔗출처

어떤 타입의 이름(e.g. 클래스명, 인터페이스명)이나 그 것의 위치(e.g. 패키지, 모듈)와 상관 없이 내부적으로 같은 구조를 가지고 있다면 두 개의 타입은 같다고 보는 것이다. 🔗출처

interface Restaurant {
	name: string;
	star: number;
}

let chroad3: Restaurant;  // chroad3 변수 선언

let chroad3withAddress = {   // chroad3withAddress 변수 선언하고 초기화
	name: "십분의일",
	star: 5,
	address: "을지로3가", //새로 추가됨
};

chroad3 = chroad3withAddress; // 타입 추론으로 에러가나지 않음

{
	name: string;
	star: number;
	address: string;
}

🧳 제네릭 (Generic)

타입을 정의할 때 특정 타입으로 고정된 것이 아니라, 내가 원하는 타입을 자유롭게 지정해서 계속 사용하고 싶을 때 제네릭을 사용한다
선언 시점이 아니라 생성 시점에 타입을 명시하여 하나의 타입만이 아닌 다양한 타입을 사용할 수 있도록 하는 기법

const identify = <T>(arg:T) => arg;
// <T>(arg: T):T 여기서 <T>는 Type의 약자로 제네릭을 선언할 때 T를 관용적으로 사용한다. 
// 여기에서 다이아몬드 연산자 안에 있는 T는 타입변수라고 한다.

🧳 리액트를 위한 타입스크립트

type이냐 interface이냐!

리액트의 객체 타입 방법은 object, interface, type, alias 등 총 4가지 입니다.
결론을 말하자면 type보다 interface를 사용하라고 되어있다 (타입스크립트 공식 문서)
- VS Code에서 코딩을할때 미리 작성해둔 interface를 빠르게 확인하고 싶을 때가 있다.
- interface는 위에 마우스를 가져갔을때(hover) overview가 나오지 않는다
- 반대로 type은 overview를 볼 수 있다.

함수형 컴포넌트

FC 타입을 쓰는게 좋다
- 굳이 return type을 써주지 않아도 된다
- children을 그냥 받을 수 있다 (다른 방법에서는 다시 정의해줘야 함)

Hooks

useState
- 초기 값을 넣으면 특별하게 타입을 명시하지 않더라도 타입추론을 통하여 지정된다.
- 객체가 포함된 경우에는 자세한 프로퍼티 타입을 알 수 있도록 합니다
```
const [comments, setComments] = useState<Comment[]>([]);
```
useRef
- useRef 또한 useState처럼 타입을 명시하지 않아도 됩니다.

Event Handler

- 정확히 어떤 종류의 이벤트이고, 어느 태그에서 발생하는 것인지 써주는 것이 좋습니다.

기타

JSX.Element

const WarningText: JSX.Element = <p>다시 확인해주세요.</p>

라이브러리 사용
- ts 적용 안되어 있는 라이브러리는 declare 키워드를 통해 정의를 해줘야 한다
- src/config 같은 디렉토리에 넣어준다

후기 🤔

이번 수업은 미리 공지를 해주셔서 설 연휴를 이용해서 예습을 해볼 수 있었다.

그럼에도 불구하고 아직은 타입스크립트를 겉핥기 식으로 알아봤다고 생각한다.

수업에서 여러번 말씀해주신 것 처럼 문법을 하나하나 공부하기 보다는 실제 프로젝트를 하면서 얻는 부분이 큰거 같다. (삽질과 구글링을 통해 뼈에 각인되는 그런 느낌 ☠️)

회고를 작성하면서 좋은 점은 복습인 것 같다 좋지 않은 점은 너무 지루하다..ㅋㅋㅋ

성장을 위해서는 쉬운일이 없다.

minbr0ther

느리지만 꾸준하게 💪🏻

이전 포스트

2주차(월) - 프리 온보딩 코스 프론트엔드 - 기업 과제 회고

다음 포스트