TypeScript

[TypeScript] 가변성(슈퍼타입/서브타입 파악하기) & 할당성 & 타입 넓히기

1. 타입 간의 관계 1. 1 서브 타입과 슈퍼 타입 A가 필요한 곳에 B를 사용할 수 있다면 A는 슈퍼 타입, B는 서브 타입이다. 예를 들어, 객체를 사용해야 하는 곳에 배열도 사용할 수 있다. 따라서 이 경우 객체는 슈퍼 타입, 배열은 서브 타입이다. 모든 것은 any의 서브타입이고, never는 모든 것의 서브타입이다. 즉, 모든 타입을 any에 할당할 수 있고, never는 모든 타입에 할당할 수 있다. 1.2 가변성 단순 타입은 이 관계를 파악하기 쉽다. 예) number 는 number | string 유니온의 서브 타입이다. 하지만 객체나 함수와 같은 복합 타입의 경우 이 관계를 파악하기가 복잡할 수 있다. 복합 타입의 서브타입 규칙은 언어마다 다르다. type ExistingUsesr =..

Test

Vite, TypeScript, React Testing Library, Jest 설정하기 - (1) 각 파일 설정 이해하기

들어가며 기업 과제에서 필수 요구 사항이었던 테스트에 어려움을 겪고, 글또에서 진행하는 TDD 스터디에 참여하면서 프로젝트 환경에 따른 Jest 설정에 대해 공부하였습니다. 이 과정에서 그동안 대략적으로만 알고 사용했던 Vite, TypeSciprt, ESlint의 환경 설정과 새롭게 알게 된 Jest, React Testing Library(이하 RTL) 관련 설정을 전체적으로 살펴 보고 이해하는 시간을 가졌습니다. 이를 통해 ESM과 CJS의 차이를 이해하고, 설치하는 패키지 간 의존성과 버전 호환의 중요성을 깨닫게 되었습니다. 해당 포스팅에서는 [1편]에서 먼저 각 패키지를 설정할 때 알아두면 유용한 점들과 주의할 점들을 살펴 보고, [2편]에서 패키지 간 의존성과 패키지 버전 및 설정 파일 문제로..

TypeScript

[TypeScript] 상수 선언에 왜 enum 대신 as const를 사용했나요?

면접에서 과제에 대해 위와 같은 질문을 받았는데, TypeScript에서는 enum 사용을 자제해야한다는 것만 어렴풋이 알고 있어서 정확히 대답하지 못했다. 이에 대해 공부하고 코드에 적용해보는 시간을 가졌다. TypeScript에서 상수를 선언하는 방법에는 1. enum 2. const enum 3. as const가 있다. 세 가지 모두 값에 의미 있는 이름을 부여할 수 있다는 장점이 있다. 즉, 상수를 구체적으로 설명할 수 있는 값을 부여할 수 있다. enum 장점 [숫자형 enum] key-value 양방향 mapping이 가능하다. 연관된 값들의 집합을 하나로 묶어 접근 가능하다. [숫자형 enum이 아닌 경우] 값과 타입 모두 사용 가능해 Object.keys, Object.values를 사용..

Programmers

[알고리즘/프로그래머스/고득점 Kit] 프로세스(JS)

문제 https://github.com/tony9402/baekjoon GitHub - tony9402/baekjoon: 코딩테스트 대비 문제집(Baekjoon Online Judge) 코딩테스트 대비 문제집(Baekjoon Online Judge). Contribute to tony9402/baekjoon development by creating an account on GitHub. github.com 풀이 1. [순서, 우선순위] 큐를 만든다. 2. tasks를 앞에서부터 하나씩 꺼내서 확인한다. 우선순위가 가장 높은 경우 실행 순서인 order를 1 증가시킨다. 이때 만약 순서(idx)가 찾고자 하는 location이라면 order를 반환한다. 아니라면 다시 우선순위 최댓값을 남은 큐에서 찾는다..

JavaScript

[JavaScript] Vanilla JS 과제 테스트 풀이 방향

과제 테스트를 접하며, 2023 데브 매칭 상반기에 참여해 처음으로 과제 테스트를 풀어보았다. 예상치 못한 구조로 나오기도 했지만 자바스크립트에 대한 복습이 필요하다는 생각이 들어 과제 테스트 풀이 방향을 찾아보고 정리하는 시간을 가지게 되었다. 자바스크립트 과제 풀이계에서 정석과 같은 고양이 사진첩을 바탕으로 정리하였는데, 익숙한 내용도 있었지만 캐싱이나 뒤로 가기 등의 선택적으로 구현해야 하는 기능은 새로 배울 수 있어 유용했다. 커넥투 과정에서 페어 프로그래밍을 통해 구현했던 내용들을 복습하고 바닐라 자바스크립트로 구현하는 힘을 길러야겠다는 생각이 들었다. 이때까지는 구현 시에 주로 axios를 사용했는데 fetch도 사용해보면서 차이점을 알고 사용할 수 있게 되었다. 이전에는 리액트와 유사하게 구..

개발자 김비숑
김비숑과 프론트엔드