React + TypeScript 환경에서 Styled-components를 사용하여 다양한 스타일의 버튼을 만들어봤다. import React from 'react' import styled, { css, keyframes } from 'styled-components' // ButtonProps 타입 정의 type ButtonProps = { children: string, sm?: boolean, // sm: boolean | undefined 로도 사용 가능 me?: boolean, lg?: boolean, xlg?: boolean, } // Button 컴포넌트 정의 export const Button = ({ children, ...props }:ButtonProps) => { return {..

타입 스크립트에는 기본타입은 크게 12가지 있다. Boolean Number String Object Array Tuple Enum Any Void Null Undefined Never String // 문자열 타입 선언 let name: string = "jihun"; Number // 숫자 타입 선언 let age: number = 23; Boolean // 불리언 타입 선언 let man: boolean = true; Array // 배열값이 전부 문자열일 경우 let member: string[] = ["kim", "lee"] // 배열값이 전부 숫자일 경우 (재너릭) let arr: Array = [1,2,3]; Object let member : {member1 : string, member2..

타입스크립트란? 자바스크립트에 타입을 부여한 언어이며 정적타입 언어이다. 자바스크립트의 확장된 언어라고 할 수 있다. 타입스크립트는 브라우저에서 실행하려면 트랜스컴파일링을 통해서 자바스크립트로 변환해야지만 브라우저에서 실행이 가능해진다. 이 변환 과정을 컴파일 이라고 부른다 타입스크립트를 왜 사용하느지 오류를 잡아내기 쉬워진다. 자바스크립트 (동적언어) : 실행되는 시점(런타임)에 타입 결정 / 오류 발견 타입스크립트 (정적언어) : 컴파일 타입에 타입 결정 / 오류 발견 코드 자동 완성 타입스크립트는 변수와 함수의 타입 정보를 활용하여 개발 도구에서 자동 완성 기능을 제공한다. 이를 통해 개발자가 올바른 타입의 메소드를 사용할 수 있게 도움을 준다 협업 타입스크립트는 코드에 타입을 추가하므로, 코드의 ..