TypeScript 썸네일형 리스트형 [TypeScript] Props를 선언할 때 type과 interface 중에 어떤 것을 사용할까? TypeScript에서 Props를 정의할 때 interface와 type 사이의 선택은 프로젝트를 시작하기 전 규칙을 잡아나아가는 과정에서 흔히 고민되는 주제입니다. 저는 확장성 있게 사용하려고 하면 interface를 사용하고 type은 변경사항이 없는 상황에서 사용했습니다. 이 두 방식 모두 타입을 정의하는 데 사용될 수 있지만, 그 미묘한 차이점과 각각의 장단점을 명확히 이해하는 것은 코드의 유연성과 확장성을 높이는 데 중요합니다. 이 글에서는 interface와 type의 근본적인 차이점을 깊이 있게 탐구하고, 실무에서 어떤 상황에 각각을 사용하는 것이 적절한지 비교해보겠습니다.Interface vs Type: 기본적인 차이점Interface객체 형태의 타입을 정의하는 데 주로 사용됩니다.선언 .. 더보기 [react-beautiful-dnd] Could not find a declaration file for module 'react-beautiful-dnd'. 1. 에러가 발생한 이유이 에러는 타입스크립트 프로젝트에서 react-beautiful-dnd를 사용할 때 발생하는 문제로, 해당 라이브러리에 타입 정의 파일(.d.ts)이 포함되어 있지 않거나, 타입 패키지가 프로젝트에 설치되지 않은 경우에 나타납니다. 타입스크립트는 모든 모듈의 타입을 확인하려고 시도하지만, 타입 정의가 없으면 implicitly has an 'any' type 경고를 출력합니다. 2. 해결 방법1) 타입 정의 파일 설치react-beautiful-dnd는 커뮤니티가 관리하는 타입 정의 파일이 별도로 제공됩니다. 이를 설치하면 문제를 해결할 수 있습니다.npm install --save-dev @types/react-beautiful-dnd 혹은 yarn을 사용하는 경우:yarn ad.. 더보기 [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 리액트] 타입스크립트의 등장 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 다음