하얀 코딩

type 타입스크립트에서 type 키워드는 사용자가 새로운 타입을 만들 수 있게 해주는 기능입니다. type은 기존 타입을 별칭(alias)으로 사용하거나, 복잡한 타입을 좀 더 간결하게 표현하는 데 사용됩니다. 간단한 예시로, string 타입을 가지는 Name이라는 새로운 타입을 만들 수 있습니다. type Name = string; let myName: Name = 'Alice'; // OK type User = { name: string; age: number; }; let user: User = { name: 'Alice', age: 25 }; // Ok 밑과 같이 유니언 타입, 인터섹션 타입 등 복잡한 타입을 만드는데도 type을 사용할 수 있습니다 type StringOrNumber = st..

enum 타입스크립트의 enum은 특정 값들의 집합을 표현하는 데 사용되는 특별한 타입입니다. enum은 상수 값을 읽기 쉬운 이름으로 대체하여 코드를 더욱 명확하고 읽기 쉽게 만드는 데 도움이 됩니다. enum Color { Red, // Red === 0 Green, // Green === 1 Blue // Blue === 2 } let c: Color = Color.Green; enum에서 값을 지정하지 않으면, 첫 번째 값은 0으로 시작하고, 그 다음부터는 자동으로 1씩 증가합니다. 기본적으로 enum의 첫 번째 멤버는 0부터 시작하여 숫자 값을 가지지만, 이는 변경할 수 있습니다. enum의 멤버에 명시적으로 값을 할당할 수도 있습니다. enum Color { Red = 4, // Red ===..

object 타입스크립트에서 object 타입은 비원시적인 값(함수, 배열, 객체 등)을 나타냅니다. Primitive types (원시 타입) 아닌 나머지 값을 의미합니다. let obj: object; obj = { name: 'John Doe' }; // OK obj = [1, 2, 3]; // OK obj = () => console.log('Hello'); // OK obj = 42; // Error: Type '42' is not assignable to type 'object'. obj = 'Hello'; // Error: Type '"Hello"' is not assignable to type 'object'. obj = true; // Error: Type 'true' is not ass..

타입스크립트(TypeScript)에서는 기본적으로 JavaScript의 원시 타입(primitive types)을 모두 지원합니다. 원시 타입은 객체가 아닌 실제 값을 나타내는 타입을 의미합니다. 타입스크립트에서의 주요 원시 타입에는 다음이 포함됩니다. boolean 불리언 타입은 true 또는 false 값을 가질 수 있는 논리 타입입니다. let isDone: boolean = false; number JavaScript와 마찬가지로, 타입스크립트의 모든 숫자는 부동 소수점 값입니다. 타입스크립트는 16진수 및 10진수 리터럴 외에도, ECMAScript 2015에 도입된 2진수 및 8진수 리터럴도 지원합니다. let decimal: number = 6; let hex: number = 0xf00d;..

타입스크립트를 설치하기 위해서는 Node.js와 npm(Node Package Manager)이 설치되어 있어야 합니다. Node.js는 JavaScript 실행 환경이며, npm은 JavaScript 패키지 관리 도구입니다. 만약 아직 설치되어 있지 않다면, Node.js 공식 웹사이트에서 다운로드하여 설치하실 수 있습니다. Node.js를 설치하면 npm도 함께 설치됩니다. npm install -g typescript 이 명령어는 전역(-g 플래그)으로 타입스크립트를 설치합니다. 이렇게 설치하면 어느 디렉토리에서든 타입스크립트 컴파일러(tsc)를 사용할 수 있게 됩니다. 설치가 완료되었다면 다음 명령어를 통해 타입스크립트 버전을 확인할 수 있습니다. npm install -g typescript 구..

정적 타입 검사 JavaScript는 동적 타입 언어로서, 변수의 타입이 실행 시점에 결정됩니다. 반면에 TypeScript는 정적 타입 언어로서, 변수의 타입이 컴파일 시점에 결정되고 검사됩니다. 이로 인해 코드의 실수를 미리 잡아낼 수 있으며, 이것은 특히 큰 프로젝트에서 중요합니다. 코드 품질 향상 타입스크립트를 사용하면, 코드에 대한 더 깊은 이해를 얻을 수 있고, 이로 인해 코드의 품질이 향상됩니다. 또한, IDE에서 자동 완성, 리팩토링 도구, 타입 확인 등의 기능을 제공하여 개발 효율성을 높일 수 있습니다. 객체 지향 프로그래밍 지원 타입스크립트를 사용하면, 코드에 대한 더 깊은 이해를 얻을 수 있고, 이로 인해 코드의 품질이 향상됩니다. 또한, IDE에서 자동 완성, 리팩토링 도구, 타입 ..

&기호는 styled-components에서 사용되는 특별한 문법 중 하나입니다. &를 사용하여 현재 스타일링 중인 컴포넌트를 참조할 수 있습니다. 이를 통해 CSS 선택자와 유사한 방식으로 스타일을 적용할 수 있습니다. import styled from 'styled-components'; const Button = styled.button` padding: 10px 20px; border-radius: 4px; font-size: 16px; cursor: pointer; /* 기본 상태 스타일 */ background-color: #fca311; color: #ffffff; border: none; &:hover { /* 호버 상태 스타일 */ background-color: #ffba08; } &:..

ThemeProvider는 styled-components 패키지에서 제공하는 컴포넌트 중 하나로, 테마(theme)를 애플리케이션 전역에서 사용할 수 있도록 해줍니다. ThemeProvider를 사용하면 컴포넌트 계층 구조 어디에서나 일관된 테마를 사용할 수 있습니다. ThemeProvider를 사용하려면 다음과 같이 styled-components와 함께 ThemeProvider 컴포넌트를 임포트하고 사용할 컴포넌트 계층 구조 내에 포함시키면 됩니다. import React from 'react'; import { ThemeProvider } from 'styled-components'; const theme = { colors: { primary: '#fca311', secondary: '#ffba..