하루 하나씩 작성하는 TIL #64
type
과 interface
의 차이점은 무엇인가요?🐱 의도: 타입스크립트 환경에서 본인의 습관을 파악하려는 질문
🐱 팁: 비교를 통해 간결하게 전달하면 좋습니다.
둘 다 커스텀 타입을 정의하는 데에 사용되지만, 대표적인 차이로는 interface는 객체의 타입 정의에만 쓴다는 점입니다. 그 외 차이점으로는 잠재적인 오류를 피할 수 있다는 점이 있습니다.
interface 는 같은 이름의 interface를 여러 번 선언하면 자동으로 합쳐져 오류를 피할 수 있지만, type의 경우에는 이런 병합이 불가능해 오류가 나게 됩니다. 그래서 보통 interface를 기본 값으로서 쓰는 편입니다.
다만 type을 활용할 때는 따로 있는데 바로 타입 앨리어싱이나 복잡한 타입을 만들 때 사용하곤 합니다.
🐱 의도: 제네릭에 대한 지식을 가지고 있는지 확인하는 질문
🐱 팁: 쉬운 예시를 들어도 좋습니다.
🐱 모범 답안: 네,
제네릭을 사용하여 여러 코드에 걸쳐 일관성을 높여 재사용성과 유지 보수성, 안정성을 향상시킨 경험이 있습니다. 제네릭을 사용한다면 함수 내부의 타입들이 마치 톱니바퀴가 움직이듯 척척 맞물리게 되어, 비록 작성이 어려울지언정 결과물에 대해서는 꽤나 뿌듯했습니다.
그리고 제네릭이란 게 사실 리액트의 useState
에서 객체의 상태를 다룰 때 필요했던 거라 생각보다 쉽게 마주할 수 있어 그렇게 낯선 개념도 아니었습니다. 개인적으로는 C나 Java에서 봤던 개념이라 사용에 익숙했을지도 모른다고 생각합니다.
useState
에서 객체의 상태를 다룰 때 필요.🐱 의도: 타입스크립트를 사용해보았는지 확인하는 질문입니다.
🐱 팁: 자바스크립트를 사용하면서 느꼈던 단점을 타입스크립트가 해소시켜주었다라는 표현을 사용해도 좋습니다.
🐱 모범 답안:
자바스크립트를 사용하면서 느꼈던 가장 큰 단점은 바로 동적 타이핑을 지원하는 언어라는 점입니다. 이러한 특징 때문에 버그를 찾기도 힘들고 자동 완성도 부족하여 견고한 애플리케이션을 만드는 데에 어려움이 많았습니다.
허나 타입스크립트의 정적 타이핑 기능을 통해 이러한 어려움이 말끔하게 해소되었습니다. 모든 변수와 객체에 타이핑을 하게 되어 굳이 직접 실행하지 않고도 컴파일 시점에 오류를 체크할 수가 있었고, 제가 좋아하는 자동 완성을 십분 활용하여 오타로 인한 실수도 현저히 줄일 수 있었습니다. 덕분에 견고하고 든든한 애플리케이션을 작성할 수 있었고, 저는 타입스크립트를 사용한 뒤로는 자바스크립트를 사용해 프로젝트를 진행한 적이 한 번도 없을 정도입니다.
다만 타입스크립트의 큰 단점도 빼놓을 수 없는데요. 바로 러닝 커브가 가파르다는 것입니다. 실제로 저도 항상 타입스크립트의 업데이트 내역을 확인하고, 여러 유틸리티 타입이나 동적으로 타입을 연결하는 방법을 꾸분히 공부하고 있기에 가장 크게 느끼는 단점입니다.
🐱 의도: 지원자가 JavaScript의 한계점과 TypeScript의 등장 배경을 이해하고 있는지 평가.
🐱 팁:
JavaScript의 동적 타입 특성으로 인한 문제점을 설명하세요.
TypeScript가 어떤 문제를 해결하기 위해 등장했는지 설명하세요.
TypeScript의 주요 특징을 언급하세요.
🐱 모범답안:
JavaScript는 동적 타입 언어로, 타입 검사가 런타임에 이루어져서 개발 중에 타입 관련 오류를 잡기 어렵습니다.
TypeScript는 정적 타입을 제공하여 컴파일 타임에 타입 오류를 잡을 수 있게 합니다.
TypeScript는 코드의 가독성과 유지보수성을 높이고, 대규모 애플리케이션 개발에 유리합니다.
🐱 의도: 지원자가 TypeScript 개발을 위해 필요한 환경 설정을 이해하고 있는지 평가.
🐱 팁:
TypeScript 컴파일러 설치 방법을 설명하세요.
tsconfig.json 파일의 역할과 기본 설정을 설명하세요.
프로젝트에 TypeScript를 설정하는 방법을 설명하세요.
🐱 모범답안:
TypeScript 컴파일러는 npm을 사용하여 설치할 수 있습니다: npm install -g typescript
.
tsconfig.json 파일은 TypeScript 컴파일러 옵션을 설정하는 파일로, 프로젝트 루트에 위치시킵니다.
기본 설정으로 컴파일러 옵션을 지정하여 프로젝트에 TypeScript를 설정할 수 있습니다.
🐱 의도: 지원자가 TypeScript 컴파일러와 tsc 명령어의 개념을 이해하고 있는지 평가.
🐱 팁:
TypeScript 컴파일러가 무엇인지 설명하세요.
tsc 명령어의 역할을 설명하세요.
tsc를 사용하여 TypeScript 코드를 컴파일하는 방법을 설명하세요.
🐱 모범답안:
TypeScript 컴파일러는 TypeScript 코드를 JavaScript 코드로 변환해주는 도구입니다.
tsc는 TypeScript 컴파일러를 실행하는 명령어로, TypeScript 파일을 컴파일하여 JavaScript 파일로 변환합니다.
tsc <파일명>
명령어를 사용하여 TypeScript 파일을 컴파일할 수 있습니다.
🐱 의도: 지원자가 .d.ts 파일의 역할과 사용 방법을 이해하고 있는지 평가.
🐱 팁:
.d.ts 파일의 정의와 역할을 설명하세요.
.d.ts 파일을 사용하는 상황을 설명하세요.
.d.ts 파일을 작성하고 사용하는 방법을 설명하세요.
🐱 모범답안:
.d.ts 파일은 TypeScript에서 타입 선언을 저장하는 파일로, 주로 외부 라이브러리의 타입 정보를 제공합니다.
.d.ts 파일은 코드에 타입 정보를 추가하여 IDE에서 코드 자동 완성 및 타입 검사를 지원합니다.
.d.ts 파일을 직접 작성하거나 @types 패키지를 통해 설치할 수 있습니다.
🐱 의도: 지원자가 TypeScript의 기본 타입을 이해하고 이를 활용할 수 있는지 평가.
🐱 팁:
TypeScript의 기본 타입들을 설명하세요.
각 타입의 사용 예를 떠올려 보세요.
기본 타입을 사용하여 간단한 예제를 설명하세요.
🐱 모범답안:
TypeScript는 boolean, number, string, 배열, 튜플, enum 등의 기본 타입을 지원합니다.
boolean 타입은 true 또는 false 값을 가집니다.
number 타입은 모든 숫자를 포함합니다.
string 타입은 텍스트 데이터를 포함합니다.
배열은 동일한 타입의 요소들을 포함하는 리스트입니다.
튜플은 고정된 요소 수와 각 요소의 타입을 가지는 배열입니다.
enum은 열거형 타입으로, 관련된 값들의 집합을 정의합니다.
🐱 의도: 지원자가 타입 안정성이 코드 품질에 어떻게 기여하는지 이해하고 있는지 평가.
🐱 팁:
타입 안정성의 개념을 설명하세요.
타입 안정성이 코드 품질에 미치는 긍정적인 영향을 설명하세요.
타입 안정성을 통해 얻을 수 있는 이점을 설명하세요.
🐱 모범답안:
타입 안정성은 코드에서 변수와 함수의 타입을 명확히 정의하여, 타입 오류를 컴파일 타임에 잡아주는 것을 의미합니다.
타입 안정성은 코드의 가독성과 유지보수성을 높이고, 예기치 않은 오류를 줄입니다.
타입 안정성을 통해 개발자는 코드를 더 안전하고 신뢰성 있게 작성할 수 있습니다.
🐱 의도: 지원자가 TypeScript에서 any, unknown, union 타입을 이해하고 이를 활용할 수 있는지 평가.
🐱 팁:
any, unknown, union 타입의 개념을 설명하세요.
각 타입의 사용 예를 떠올려 보세요.
any, unknown, union 타입을 사용하여 가변적 데이터 타입을 정의하는 방법을 설명하세요.
🐱 모범답안:
any 타입은 모든 타입의 값을 허용하지만, 타입 검사를 하지 않기 때문에 타입 안정성을 보장하지 않습니다.
unknown 타입은 모든 타입의 값을 허용하지만, 사용하기 전에 타입 검사를 해야 하므로 any보다 안전합니다.
union 타입은 여러 타입을 조합하여 정의할 수 있으며, 지정된 타입 중 하나를 허용합니다.
🐱 의도: 지원자가 가변적 데이터 타입의 남용이 발생할 수 있는 문제를 이해하고 있는지 평가.
🐱 팁:
가변적 데이터 타입의 남용이 발생할 수 있는 문제점을 설명하세요.
코드의 안정성과 유지보수성에 미치는 영향을 설명하세요.
이를 방지하기 위한 방법을 설명하세요.
🐱 모범답안:
가변적 데이터 타입을 남용하면 타입 안정성을 잃게 되어, 런타임 오류가 발생할 가능성이 높아
집니다.
코드의 가독성과 유지보수성이 떨어지며, 타입 오류를 잡기 어렵게 됩니다.
타입을 명확히 정의하고, 가변적 데이터 타입을 최소화하여 사용해야 합니다.
🐱 의도: 지원자가 enum과 object literal의 차이점을 이해하고 있는지 평가.
🐱 팁:
enum과 object literal의 개념을 설명하세요.
두 방법의 차이점을 설명하세요.
enum과 object literal의 사용 예를 떠올려 보세요.
🐱 모범답안:
enum은 열거형 타입으로, 관련된 값들의 집합을 정의하며, 각 값은 자동으로 인덱스를 가집니
다.
object literal은 객체 리터럴로, 키-값 쌍으로 구성된 객체를 정의합니다.
enum은 컴파일 타임에 타입 검사를 할 수 있지만, object literal은 런타임에 검사를 해야 합니다.
🐱 의도: 지원자가 TypeScript의 유틸리티 타입을 이해하고 이를 활용할 수 있는지 평가.
🐱 팁:
주요 유틸리티 타입(Partial, Required, Readonly, Pick, Omit 등)을 설명하세요.
각 유틸리티 타입의 사용 예를 떠올려 보세요.
유틸리티 타입을 사용하여 타입을 조작하는 방법을 설명하세요.
🐱 모범답안:
Partial는 T 타입의 모든 속성을 선택 사항으로 만듭니다.
Required는 T 타입의 모든 속성을 필수로 만듭니다.
Readonly는 T 타입의 모든 속성을 읽기 전용으로 만듭니다.
Pick<T, K>는 T 타입에서 K 속성만 선택하여 새로운 타입을 만듭니다.
Omit<T, K>는 T 타입에서 K 속성을 제외한 새로운 타입을 만듭니다.
🐱 의도: 지원자가 객체지향 설계 원칙인 SOLID를 이해하고 있는지 평가.
🐱 팁:
🐱 의도: 지원자가 타입 단언의 개념을 이해하고 이를 적절히 사용할 수 있는지 평가.
🐱 팁:
🐱 모범답안:
as
키워드를 사용하여 적용합니다.🐱 의도: 지원자가 useState, useQuery 등의 훅에 제네릭 타입을 명시적으로 지정하는 방법을 이해하고 있는지 평가.
🐱 팁:
🐱 모범답안:
const [state, setState] = useState<string>('');
와 같이 사용합니다.🐱 의도: 지원자가 이벤트 핸들러와 이벤트 객체에 타입을 지정하는 방법을 이해하고 있는지 평가.
🐱 팁:
🐱 모범답안:
const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => { ... }
와 같이 사용합니다.