TypeScript (6) 썸네일형 리스트형 [TypeScript] Props를 선언할 때 type과 interface 중에 어떤 것을 사용할까? TypeScript에서 Props를 정의할 때 interface와 type 사이의 선택은 프로젝트를 시작하기 전 규칙을 잡아나아가는 과정에서 흔히 고민되는 주제입니다. 저는 확장성 있게 사용하려고 하면 interface를 사용하고 type은 변경사항이 없는 상황에서 사용했습니다. 이 두 방식 모두 타입을 정의하는 데 사용될 수 있지만, 그 미묘한 차이점과 각각의 장단점을 명확히 이해하는 것은 코드의 유연성과 확장성을 높이는 데 중요합니다. 이 글에서는 interface와 type의 근본적인 차이점을 깊이 있게 탐구하고, 실무에서 어떤 상황에 각각을 사용하는 것이 적절한지 비교해보겠습니다.Interface vs Type: 기본적인 차이점Interface객체 형태의 타입을 정의하는 데 주로 사용됩니다.선언 .. [TypeScript] TypeScript와 Zod를 활용한 효율적인 폼 관리: React Hook Form 도입기 TypeScript를 사용하면서 폼 관리를 더욱 효율적으로 하기 위해 고민하던 중, Zod와 함께 React Hook Form을 사용하는 방법을 알게 되었습니다. 이번 포스팅에서는 두 라이브러리를 도입하면서 제 코드가 어떻게 변화했는지, 그리고 이 과정에서 느낀 점들을 정리해 보겠습니다. 1. React-Hook-Form과 Zod를 사용하지 않은 예시import React, { useState } from 'react';const ContactForm = () => { const [formData, setFormData] = useState({ name: '', email: '', message: '', }); const [errors, setErrors] = useState({}).. [우아한 타입 스크립트 with 리액트] 타입이란 1. 자료형으로서의 타입모든 프로그래밍 언어는 변수를 선언하는 것부터 시작한다. 프로그래밍 언어에서 변수란 값을 저장할 수 있는 공간(메모리)이자 값을 가리키는 상징적인 이름이다. 개발자는 변수를 선언하고 그 변수에 특정한 값인 데이터를 할당한다.// 변수선언 과 데이터할당var name = "zig";var year = 2022;이 예시에서는 name과year라는 이름으로 선언한 변수에서 각각 zig와2022 라는 값을 할당하고 있다. 컴퓨터의 메모리 공간은 한정적이다. 따라서 특정 메모리에 값을 효율적으로 저장하기 위해서는 먼저 해당 메모리 공간을 차지할 값의 크기를 알아야 한다. 값의 크기를 명시한다면 컴퓨터가 값을 참조할 때 한 번에 읽을 메모리 크기를 알 수 있어 값을 훼손하지 않고 가져올 수 .. [우아한 타입 스크립트 with 리액트] 타입스크립트의 등장 4. 타입스크립트의 등장시간이 자나 마이크로소프트는 자바스크립트의 슈퍼셋(Superset) 언어인 타입스크립트(Typescript)를 공개했다. 다트와 달리 자바스크립트 코드를 그대로 사용할 수 있었고, 아래와 같은 단점을 극복할 수 있었기 때문에 많은 환영을 받았다. 💡 슈퍼셋( Superset ) 기존 언어에 새로운 기능과 문법을 추가해서 보완하거나 향상하는 것을 말한다. 슈퍼셋 언어는 기존 언어와 호환되며 일반적으로 컴파일러 등으로 기존 언어 코드로 변환되어 실행된다. ⭐️ 안정성 보장타입스크립트는 정적 타이핑을 제공한다. 컴파일 단계에서 타입 검사를 해주기 때문에 자바스크립트를 사용했을 때 빈번하게 발생하는 타입 에러를 줄일 수 있고, 런타임 에러를 사전에 방지할 수 있어서 안정성이 크게 높아진.. [우아한 타입 스크립트 with 리액트] 자바스크립트의 한계 1.2 자바스크립트의 한계1. 동적 타입 언어자바스크립트의 특징 중 하나가 동적 타입 언어라는 것이다. 이 말은 변수에 타입을 명시적으로 지정하지 않고 코드가 실행되는 런타임에 변숫값이 할당될 때 해당 값의 타입에 따라 변수 타입이 결정된다는 것을 의미한다. 예를 들어, 변수 a의 타입이 number 인지 string 인지는 실제 코드가 동작할 때 a 에 값이 할당되는 순간, 그 값이 숫자 1인지 문자 1 인지에 따라 결정된다.2. 동적 타이핑 시스템의 한계// 이 함수는 숫자 a, b의 합을 반환한다.const sumNumber=(a,b)=>{ return a + b;};sumNumber(1,2); // 3위 코드를 실행하면 어떤 에러도 발생하지 않고 정상적으로 동작한다. 즉, 정상적인 코드이다.// .. TypeScript에 대해 얼마나 알고 있는지 점검해봅니다 TypeScript를 사용한 지 어느덧 1년이 되었습니다.그동안 업무에서 꾸준히 사용하긴 했지만, 지금 돌아보면 타입을 단순히 "에러 방지용" 도구로만 활용했던 것 아닌가 하는 생각이 듭니다. 상황에 맞춰 any를 피하고, 적절한 타입을 지정하며 작성하는 습관은 어느 정도 들었지만,왜 그렇게 써야 하는지, 타입 시스템이 어떻게 작동하는지에 대한 깊은 이해는 부족했습니다. 그러던 중 최근 제로초님의 TypeScript 강의를 듣게 되면서, 제가 모르는 기능과 문법이 정말 많다는 걸 느꼈습니다.예를 들어, keyof, infer, typeof 같은 고급 타입 연산자나 유틸리티 타입의 쓰임새 등은 알고 나니 강력하지만,모를 땐 아예 "존재 자체를 모르는" 상태였습니다. 이제는 단순히 에러를 없애기 위해 타입을.. 이전 1 다음