🔍 프로그래머스 FE 데브코스 5기 TIL 231109

💻 Intro

이번 주 금요일까지 CSS로 원하는 웹페이지 클론코딩하는 과제를 제출해야 해서 목~금 동안의 타입스크립트 강의를 잠시 미뤄뒀었다.
CSS 과제를 어렵게 마무리하고 주말을 통해서 타입스크립트 강의를 다시 듣고 새로 알게 된 내용을 정리하려고 한다.
마침 더기팀과 우리팀의 석주님, 예진님과 함께 타입스크립트 스터디도 다음 주 월요일부터 진행할 예정이니 본격적으로 타입스크립트 공부에 나서려고 한다.

---

🧐 오늘 새롭게 배운 것

타입스크립트 설치

• 설치 명령어
  npm init -y : package.json 만들기
  npm i -D typescript : 타입스크립트 의존성 설치

• 엄격한 문법을 적용하기 위해서는 tsconfig.json 파일에 다음과 같이 설정을 추가한다.
  "strict": true : use strict와 동일
  "include": ["src/**/*.ts"] : src 폴더 내 모든 하위 경로에 .ts 파일들에 적용하겠다는 범위 설정이다.
  

• TS 파일을 JS파일로 변환하기 위한 설정 추가
  package.json에 다음과 같이 파일 유형과 변환한 파일을 설정한다.
  
  
  

eslint와 prettier

JS 문법을 확인해주는 eslint와 코드 가독성을 향상시켜주는 prettier로 프로젝트를 진행할 때 도움이 많이 되기 때문에 사용을 권장한다.
다만 prettier가 eslint의 문법 체크에 가끔씩 충돌이 일어나는 경우가 있기 때문에 설치 시 이에 대한 설정을 추가해주는 것이 좋다.

명령어는 다음과 같이 입력하면 된다.
npm i -D eslint prettier eslint-plugin-prettier eslint-config-prettier

또한 typescript에 대한 eslint parser 및 plugin 설정도 추가해주자!
npm i -D @typescript-eslint/parser @typescript-eslint/eslint-plugin

타입스크립트의 타입 지정 방식

기본적으로 변수명: 타입 형태로 지정이 가능하고 배열, 객체에서도 각각의 인자와 반환값 옆에 똑같은 방식으로 타입을 지정하면 된다.
7주차 과제에서 진행했던 정합성 체크를 타입스크립트가 해주는 느낌이었다.

새롭게 배운 타입은 Enum 타입이었다.
이넘 타입은 타입 + 값(데이터)의 집합으로 역방향 매핑이 가능하다. 단, 숫자로 값을 지정했을 경우만 역방향 매핑이 가능하다. 문자는 불가능하다.

보통은 인덱스를 통해 값을 얻는데 역방향 매핑으로 값을 통해 인덱스를 얻는 것을 따로 메서드를 사용하지 않고 구할 수 있다.

아래와 같이 TS에서 작성한 Enum은 Js에서 키가 인덱스, value가 값으로 매핑된 객체로 변환된다.

enum NumberList { One, Two, Three }
console.log(NumberList[0]) // 'One'
console.log(NumberList.One) // 0

const NumberList = {
  0: 'One', 1: 'Two', 2: 'Three'
}

Enum 요소 중간에서 index를 따로 설정할 수도 있다.
주의할 점은 지정한 index 뒤에 있는 요소는 자동으로 지정 인덱스 다음부터 지정이 된다.

enum NumberList { Zero, Two = 2, Three }
console.log(NumberList[0]) // 'Zero'
console.log(NumberList.Zero) // 0
console.log(NumberList.Two) // 2
console.log(NumberList.Three) // 3
console.log(NumberList[2]) //  'Two'

Void 타입

값을 반환하지 않는 함수의 반환 타입이다.
예를 들어 값을 반환하지 않고 console.log만 찍는 함수가 Void 타입이다.

const hello: (msg: string) => void = msg => {
  console.log(`Hello ${msg}`)
}

위 방법은 암시적으로 void를 지정하는 것이고 명시적으로 지정하고 싶으면 다음과 같이 만들 수도 있다.

const hello: (msg: string) => undefined = msg => {
  console.log(`Hello ${msg}`)
  return undefined
}

Tuple(튜플) 타입

고정된 길이(length)를 가지는 배열 타입이다.
인덱스를 벗어나게 값을 지정하면 에러가 발생한다.
한정된 데이터를 다룰 때 유용할 거 같다. ex. 유저 정보

const userA: [number, string, boolean] = [1, "Ikjun", true]
const userB: [number, string, boolean] = [2, "Ikjun2", false, 'Hi']
// '[number, string, false, string]' 형식은 '[number, string, boolean]' 형식에 할당할 수 없습니다.

튜플에서 주의할 점은 배열 길이를 변화시킬 수 있는 push나 splice 메서드를 사용하게 되면 튜플의 길이가 변하게 된다.
따라서 데이터가 튜플 타입일 때는 배열 관련 메서드를 사용하는데 있어서 주의해야 에러가 발생하지 않는다.

Never 타입

어떤 것도 할당할 수 없는 타입으로써 새로운 값을 할당하려고 하면 에러가 발생한다.
Never 타입은 정상적으로 종료되지 않는 함수의 반환값 타입으로 지정할 수 있다.
예를 들어 다음과 같은 에러를 throw하는 함수에 사용할 수 있다고 한다.

const errorFunc: (m: string) => never = (msg) => {
  throw `에러 발생 = ${msg}`
}

try {
  errorFunc('Never 에러 발생 함수') // '에러 발생 = Never 에러 발생 함수'
} catch (e) {
  console.err(e)
}

Any 타입

Never 타입과 정반대이다. 어떤 것도 할당할 수 있는 타입이다.
처음 타입스크립트를 접했을 때 온갖 데이터에 any를 사용했던 기억이 있다. 그럴꺼면 타입스크립트 왜 사용하냐고 친구에게 놀림을 받았었다...

타입스크립트는 엄격한 문법을 적용하는 것이 목적이기 때문에 최대한 any 타입을 사용하는 것을 지양해야 한다.

Unknown 타입

Any 타입과 비슷하지만 조금 다르다.
어떤 것도 할당 할 수 있지만! 정확히 무엇인지 알 수 없는 타입이다. 말 그대로 Unknown이다.
타입이 뭔지 모르기 때문에 다른 타입에서는 할당이 불가능하다.
Unknown 타입은 이후 타입 가드를 통해 타입에 따라 데이터를 지정하는데 사용된다.

Union(유니온) 타입

2개 이상의 타입이 허용되는 타입이다. |을 사용해서 타입을 구분해서 지정하다.
타입이 변할 수 있는 변수를 설정할 때 유용할 수 있을 거 같다.

Intersection 타입

2개 이상의 타입을 병합된 타입니다. Union하고는 좀 다르다.
Union은 해당 타입에 여러 타입(| or)이 들어갈 수 있는 개념이고
Inersection은 각기 다른 타입 뭉치가 &(and)로 연결된 개념이다.
기존에 존재하는 타입의 재사용성을 높여준다.

타입스크립트의 타입 추론

타입스크립트에서는 타입을 꼭 명시적으로 지정하지 않아도 3가지 근거를 기반으로 타입을 추론하는 로직이 포함되어 있다.

1. 초기화된 변수
2. 기본값이 지정된 매개변수
3. 반환이 있는 함수

위의 3가지 경우에는 초기화된 값이나 기본값 및 반환값의 형태를 바탕으로 타입을 추론하기 때문에 일일이 타입을 지정하지 않아도 된다.

하지만 일일히 타입을 지정하는 것이 뭔가 맘이 편할 거 같다. 나중에 익숙해지면 타입 추론을 활용해서 타입 지정을 생략해야겠다.

타입스크립트의 타입 단언

추론이 있다면 단언도 있다. 단언컨대라는 말처럼 딱 잘라서 이거야! 하는 개념이다.
as와 ! (Non-null 단언 연산자)를 통해 단언할 수 있다.

특히 노션 프로젝트를 진행하면서 쿼리셀렉터로 HTML를 찾아올 때 JS는 그 요소가 없을 때는 이후 클래스명 지정이나 추가할 때 if문으로 추가를 해줘야 한다. 에러는 나지 않지만 예외 케이스를 추가해야 하는 것이다.

하지만 ts는 에러를 표시하기 때문에 요소를 찾아오지 못했을 때 (null일 때)를 배제하고 as로 HTMLElement임을 단언해주면 문제가 해결된다.
이후 타입 가드를 지정해줘야 완전히 에러를 방지할 수 있지만 1차적으로 타입 지정에서의 에러를 막을 수 있다.

• 할당 단언
  아래와 같이 변수를 선언만 하고 할당하지 않고 사용하거나 불러와야 할 때 !로 할당 단언을 해주지 않으면 ts는 에러를 발생시킨다.

let num!:number
console.log(num)

타입 가드

타입 추론이 가능한 범위 안에서 타입을 보장하도록 하여 런타임에러 에러가 발생하지 않도록 하는 코드가 타입 가드이다.

이것은 TS에서만이 아니라 JS에서도 유효한 코드이다.
typeof, instanceof, in 등을 사용해서 구현할 수 있다.
기존 JS 과제나 프로젝트 진행 시에도 타입 가드를 활용했었다.

타입 가드를 함수 형태로 만들 때에는 함수의 반환값에 확인하고 싶은 데이터의 타입을 명시해줘야 한다.
아래 isUserA 함수는 user 데이터가 UserA 타입인지를 확인하는 함수이다.
함수의 반환값에 is 키워드를 통해 함수가 참일 경우 user 데이터의 타입을 명시해준 것이다.

타입 별칭 (Alias)

원하는 타입을 커스텀하여 새로운 타입 조합을 만들 수 있다.

type MyTypeName = string | number
type MyArray = MyTypeName[]
type UserA = {
  name: string
  age: number
}
type UserB = {
  isValid: boolean
}
type UserX = UserA & UserB

실질적으로 타입 별칭을 사용해서 내가 원하는 타입의 조건을 마음대로 지정할 수 있으니 복잡한 타입 조건도 구현 가능하며 재사용이 가능하다.

---

👀 느낀점

👍 Keep

7주차 과제에서 state 정합성 및 효율적 렌더링을 위한 state 변화에 대한 체크를 하는 코드를 구현했었는데 이것이 곧 typescript의 기능과 동일했다. 과제를 열심히 하니 연결되는 부분이 많아 좋다.

😱 Problem

CSS 과제를 진행하다보니 아직 flex와 grid의 활용 및 scss 사용이 익숙하지 않았다. 강의를 들었다고 아는 것이 아니라는 것을 다시금 깨달았다.

😜 Try

CSS의 flex 및 grid를 통한 반응형 레이아웃과 SCSS의 mixin을 사용해서 CSS 과제를 리팩토링해야겠다. 타입스크립트도 주말에 걸쳐 인터페이스까지 공부를 완료할 예정이다.

---

😅 해당 내용은 공부하면서 정리한 글입니다. 틀린 부분이나 오해하고 있는 부분이 있다면 피드백 부탁드립니다.