영벨롭 개발 일지

📌 타입스크립트 제네릭(Generics) 변수, 함수의 매개변수 등을 정의할 때, number, string 과 같이 항상 타입을 고정하여 사용하였습니다. 하지만 이는 프로그래밍을 함에 따라 유연성과 재사용성이 떨어지게 되는 단점이 있습니다. 물론, any 나 union 타입을 통해 좀 더 유연하게 타입을 사용할 수 있지만, 이는 오류를 쉽게 찾지 못하며 가독성 또한 떨어지게 됩니다. 따라서 타입을 고정하여 명시하지 않고, 언제든 변할 수 있는 유연한 타입으로 표현할 수 있는 장치가 필요합니다. 이를 우리는 제네릭(generic)이라고 부릅니다. 즉, 제네릭(generic)이란 타입을 변수화 한 것이라고 할 수 있습니다. 개발자는 제네릭을 통해 코드의 유연성과 재사용성을 높일 수 있습니다. ✅ 제네릭을 ..

📌 호출 시그니쳐(Call Signature) Call Signature란 함수의 매개변수와 반환 값의 타입을 type 또는 interface 로 미리 선언하는 것입니다. 즉, 함수의 구현이 아닌, 함수의 타입을 정의하는 것입니다. 일반적인 함수 선언 방법은 다음과 같습니다. function add(a: number, b: number): number { return a + b; } const sub = (a: number, b: number): number => { return a - b; }; 이를 호출 시그니쳐를 이용하여 표현하면 다음과 같습니다. type Operation = (a: number, b: number) => number; const add: Operation = (a, b) => a..

📌 Interface 타입스크립트의 인터페이스는 객체가 가질 수 있는 다양한 구조들을 직접 타입으로 만들 수 있는 방법입니다. 즉, 객체의 틀 또는 설계도라고 할 수 있습니다. interface 키워드를 통해 인터페이스를 정의할 수 있습니다. 구분자로는 세미콜론(;) 또는 콤마(,) 를 사용하며, 아예 구분자를 사용하지 않을 수도 있습니다. 인터페이스 내부는 속성과 메서드에 대한 타입만 정의할 뿐, 구현은 하지 않습니다. interface Person { name: string; age: number; greeting(): void; } let john: Person = { name: "John", age: 20, greeting: () => { console.log("Hello"); }, }; 또한 인..

📌 타입스크립트의 Type 타입스크립트는 자바스크립트의 타입(primitive, object types)을 그대로 제공하면서, 추가적으로 제공하는 타입들이 있습니다. Primitive types Object types boolean, number, string, null, undefined, symbol function, array, object, classes 추가 제공 타입 tuple, enum, any, void, never, union, unknown 📌 Type Annotation & Inference ✔️ Type Annotation Type annotation 은 개발자가 직접 타입을 지정하는 것을 의미합니다. 일반 변수, 함수의 매개 변수(parameter), 객체 속성 등에 :TYPE 을..

📌 TypeScript 탄생 배경 Javascript 는 약한 타입 언어입니다. 타입 시스템이 없는 동적 프로그래밍 언어로, js 의 변수는 여러 타입의 값을 가질 수 있게 됩니다. 이로 인해 비교적 쉽게 개발할 수 있는 환경을 제공하지만, type 검사 및 컴파일 시 오류 검사의 기능을 수용하지 못 한다는 단점을 갖고 있습니다. 때문에 javascript로 작성된 코드의 규모가 커질수록, 관리하고 재사용하기가 어려워지게 됩니다. 이를 보완하기 위해 TypeScript 가 제시되었습니다. 타입스크립트는 강한 타입 시스템을 가지고 있어, 대부분의 에러를 컴파일 환경에서 코드를 입력하는 동안 확인할 수 있습니다. 📌 TypeScript 란? Javscript의 확장된 언어로, js 에 Type System ..

📌 CSS Animation animation 은 사용자가 어떠한 액션을 취하지 않더라도 스스로 동작하도록 효과를 구현하고자 할 때 사용하는 css 속성입니다. javascript 없이도 여러 상태를 거치며 웹사이트에 다양한 스타일 전환 애니메이션을 적용할 수 있습니다. @keyframes 규칙을 사용하여 애니메이션 세트를 만들고, 이를 animation 에 적용시킬 수 있습니다. animation 에는 다음 8가지 속성을 가집니다. animation-name animation-delay animation-direction animation-fill-mode animation-iteration-count animation-play-state animation-timing-fucntion animation..