2023.12.13 (수) TIL

Typescript

• 코드 안정성이 높아지는 것은 코드 품질의 높은 향상을 의미
• 테스트와 디버깅 시간 감소
• 원활한 협업환경을 제공

프로젝트가 커질 수록, 단단하고 보수유지를 쉽게 할 수 있다는 이점을 가진다.

typescript 만의 특수한 자료형

• tuple

const person:[string,number,boolean]= ['민용',30,true] // true
const person:[string,number,boolean]= [2,'민용',true] // false
parameter의 변수 유형의 순서에 맞게끔 argument를 넘겨줘야 한다.

• enum
  열거형 데이터 타입으로 , 다양한 상수를 보다 더 이해하기 쉬운 문자열 이름으로 접근하고 사용할 수 있게 만드는 타입
  초기값은 0 이다!

any,unkown,union

any :어떠한 타입의 값도 들어갈 수 있는 형태로 가장 지양해야할 타입
unknown : 재할당시 타입을 체크한다!

let unknownValue: unknown = '문자열'
typeof unknowValue === string //false
값이 들어갈 순 있지만 , 그 값이 들어갔을 때 정확히 타입을 지정해줘야한다
----------------------

typeof unknowValue as string // true

union : unknow 타입의 재할당이 일어나지 않을시 생기는 타입안정성이 보장되지 않는다는점을 개선하기 위해 union 을 사용

type hey = string | number ; 
typeof hey === string //true
typeof hey === number //true

typescript는 정말 더 민감하다

예)

return (
    <div>
      <Input content={content} />
    </div>
  );
};

보기와 같은 Input component에 props를 넘겨주려고 했는데
이상하게 계속 에러가 뜨는 것이다 .그래서 무슨 이유인지 모르겠어서 검색을 여기저기 해도 찾을 수 없었다. 찾고 찾다 보니 단지 Input 컴포넌트에서 해당 props를 받지 않고 있어서 이다. React때는 하위컴포넌트에서 현재 props를 받고 있지 않는 상태더라도, 저장이 되었을 때 문제가 없었다 라고 생각했는데,(물론 react도 똑같은 오류를 낼지 모르지만) 이게 문제였다니.....
당황스럽지만 더 예민하고 , 더 데이터를 잘 다뤄야 겠다는 생각이 든다.

내일 과제

1.props를 통해 todolist를 typescript로 만들기
2.RTK를 사용하여 todolist 만들기
3.RTK+json-server를 이용하여 todolist 만들기
4.RTK+redux thunk 이용하여 todolist 만들기
5.RTK+react-query 이용하여 todolist만들기

좋은기술이란?

좋은 기술, 높은 기술을 활용한 코드 등 그것들이 좋다고 말은 들어봤지만 아직 왜 좋은지 얼마나 좋은지에 대해서는 체감이 되지 않는다. 물론 코드를 짜면서 중복되는 코드 (보일러플레이트 코드)를 제거해 나아가는 것을 보며, 유지보수에는 확실히 좋은 영향을 준다고 생각하지만, 프로젝트 전반적인 것에 대해서는 아직 체감되지 않는다. 코드를 짤때 당장의 기술구현에 급급하지 말고 숲을 봐보자.