TypeScript 썸네일형 리스트형 [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년 정도 되었지만, 그동안 TypeScript에 대해 깊이 이해하지 않고 상황에 맞춰 타입을 지정하는 데 그쳤던 것 같습니다. 그런데 최근 제로초 강의를 보면서 TypeScript로 이렇게 많은 것을 할 수 있다는 것을 깨달았습니다.이제 저도 TypeScript를 잘 활용하고, 속성을 몰라서 쓰지 못하는 것이 아니라 알고 나서 그 이유를 설명할 수 있을 정도로 실력을 키우고자 합니다. 이를 위해 이 글을 작성하게 되었습니다. 다양하게 기록해보겠습니다. 더보기 이전 1 다음