티스토리

코딩의 세계
검색하기

블로그 홈

코딩의 세계

codingworld2002.tistory.com/m

Coding my imagination

구독자
1
방명록 방문하기
공지 상상을 현실로. (by.코딩) 모두보기

주요 글 목록

  • 타입스크립트에서 타입은 집합이다. 타입스크립트에서 타입은 여러 개의 값을 포함하는 집합이다.집합은 동일한 속성을 갖는 여러 개의 요소들을 하나의 그룹으로 묶은 단위를 뜻한다.예를 들어..위 값을 모아둔 집합을 타입스크립트에서는 number타입이라고 부르는 것이다.이에 반해 리터널 타입은 "아주 작은 집합"이라고 볼 수 있다.즉, 숫자형 리터널 타입은 "숫자 타입" 안으로 들어간다.위 숫자 타입이 슈퍼타입(부모타입)으로 부를 수 있고, 밑의 리터널 타입이 서브타입(자식타입)으로 부를 수 있다.타입 호환성 공감수 0 댓글수 1 2025. 4. 28.
  • 타입스크립트의 void와 never 타입 let a: void;a = undefined;이번에는 타입스크립트의 void와 never 타입을 다룰 것이다. 이번까지의 글로 기초적인 타입은 끝난다. (야호!)void 타입void이란 "공허" 즉, 아무것도 없다는 뜻이다. void는 아무것도 없음을 뜻한다. 예시 코드 >function func2(): void { console.log("hello");}물론 다음과 같이 변수의 타입으로도 void 타입을 지정할 수 있다. 그러나 void 타입의 변수에는 undefiend 이외의 다른 타입의 값은 담을 수 없다.let a: void;a = undefined;이때 tsconfig.json에 엄격한 null 검사 옵션을 해제하면 특별하게 void에도 null을 담을 수 있다.// "strictNullCh.. 공감수 0 댓글수 0 2025. 4. 25.
  • 타입스크립트의 Any타입 / Unknown타입 이번에는 "any타입"과 "unknown타입"에 대한 이야기를 해보겠다.any 타입단어에 힌트가 있다. 말 그대로 "모든 타입"을 자유롭게 사용할 수 있게 만드는 만능 타입이다.코드를 살펴보자.let anyVar: any = 10;anyVar = "hello";anyVar = true;anyVar = {};anyVar.toUpperCase();anyVar.toFixed();anyVar.a;만일 타입을 any로 선언하지 않고 number로 선언했다면 오류가 떴을 것이다. any로 선언하기에 문제가 생기지 않는다.any는 최대한 쓰지 말자.위 코드를 ts-node로 실행하면 런타임 오류가 발생한다.any 타입은 타입 검사를 받지 않는 타입이다. 문법과 규칙에서 자유롭지만 그만큼 위험하다.애초에 이런 식으로 .. 공감수 0 댓글수 0 2025. 4. 19.
  • 타입스크립트의 enum 타입 타입스크립트에서 enum타입은 "열거형 타입"이라고 불리는 타입이다.이 타입은 자바스크립트에서는 지원하지 않고, 타입스크립트에서만 지원한다.일단 코드 예시부터 보자.enum Role { ADMIN, USER, GUEST,}열거형은 위와 같이 여러 개의 값을 나열하는 용도로 사용한다.사용하고 싶다면 enum를 선언해 주면 된다.// enum 타입// 여러가지 값들에 각각 이름을 부여해 열거해두고 사용하는 타입enum Role { ADMIN = 0, USER = 1, GUEST = 2,}const user1 = { name: "이정환", role: Role.ADMIN, //관리자};const user2 = { name: "홍길동", role: Role.USER, // 회원};const us.. 공감수 1 댓글수 4 2025. 4. 17.
  • 타입스크립트의 타입 별칭과 인덱스 시그니처 이번에는 타입 별칭과 인덱스 시그니처에 대한 이야기를 해볼 것이다. 천천히 따라오자!타입 별칭타입 별칭이란, 여러 변수의 타입을 하나의 "타입"으로 모아서 선언한 이후 마치 변수처럼 쓸 수 있게 만드는 것이다. 예시코드를 살펴보자.// 타입 별칭type User = { id: number; name: string; nickname: string; birth: string; bio: string; location: string;};let user: User = { id: 1, name: '이정환', nickname: 'winterlood', birth: '1997.01.07', bio: '안녕하세요', location: '부천시',};User라는 타입을 따로 선언해 주고 이걸 user.. 공감수 0 댓글수 1 2025. 4. 15.
  • 타입스크립트의 객체를 다루는 방식 이번에는 타입스크립트에서 객체를 다루는 방식을 이야기해 보겠다.일단 코드는 다음과 같으니 참고하길 바란다.예시 코드 >let user: { id?: number; name: string;} = { id: 1, name: '이정환',};let config: { readonly apiKey: string;} = { apiKey: 'MY API KEY',};// config.apiKey = "hacked";먼저, 객체를 선언한다. 여기까지는 자바스크립트와 동일하다.이때, 내가 객체에 할당하고 싶은 변수에 대한 타입을 작성해 두면 된다.객체 리터럴 타입let user: { id: number; name: string;} = { id: 1, name: '이정환',};객체 리터럴 타입이란, 중괄호.. 공감수 1 댓글수 1 2025. 4. 10.
  • 타입스크립트의 배열과 튜플 이번에 배운 것은 "배열과 튜플"이다. 타입스크립트 뿐 아니라, 언어를 배우면 꼭 알아가는 것이 배열이다.일단 코드는 다음과 같다. 참고하자.// 배열let numArr: number[] = [1, 2, 3];let strArr: string[] = ["hello", "im", "winterlood"];let boolArr: Array = [true, false, true];// 배열에 들어가는 요소들의 타입이 다양할 경우let multiArr: (number | string)[] = [1, "hello"];// 다차원 배열의 타입을 정의하는 방법let doubleArr: number[][] = [ [1, 2, 3], [4, 5],];// 튜플// 길이와 타입이 고정된 배열let tup1: [numb.. 공감수 1 댓글수 1 2025. 4. 9.
  • 타입스크립트의 기본 타입 타입스크립트에는 기본으로 제공되는 타입이 존재하고, 그 안에 원시타입과 리터럴타입이 존재한다.일단 코드는 다음과 같다.// numberlet num1: number = 123;let num2: number = -123;let num3: number = 0.123;let num4: number = -0.123;let num5: number = Infinity;let num6: number = -Infinity;let num7: number = NaN;// stringlet str1: string = "hello";let str2: string = "hello";let str3: string = `hello`;let str4: string = `hello ${num1}`;// booleanlet bool1:.. 공감수 0 댓글수 0 2025. 4. 8.
  • 타입스크립트의 동작원리 여기까지는 이론. 다음부터는 실제의 코드를 이야기할 것이다.대다수의 프로그래밍 언어는 어떻게 동작하는가?"컴파일" 을 들어봤을 것이다.컴퓨터는 이진수만 이해할 수 있다. 인간은 이진수를 이해하기 "매우" 힘들고 우리만의 언어를 사용하기 때문에, 중간 과정을 해석해 주는 컴파일이 반드시 필요하다.그리고 컴파일을 해주는 도구가 컴파일러이다.자바스크립트의 컴파일를 거치면 바이트 코드가 된다.물론 그냥 바로 바뀌는 것은 아니고 AST(추상 문법 트리)를 통해서 변환 후에 AST를 바이트 코드로 바꾸게 된다.그렇다면 타입스크립트는 어떻게 실행이 될까?쉽게 말하면. 타입스크립트는 대다수의 프로그래밍 언어처럼 컴파일하는 것과 비슷하게 작동하지만, 중간에 타입을 검사하는 과정이 추가된다.(이때에는 바이트코드가 아니고 .. 공감수 0 댓글수 0 2025. 4. 3.
  • 타입스크립트는 무엇인가? 타입스크립트는 2012년에 마이크로소프트의 개발자이자 C#의 창시자로 알려진 아주 아주 유명한 덴마크 출신의 개발자 Anders Hejlsberg(앤더스 하일스버그)의 손에서 처음으로 탄생했다.또한, 타입스크립트는 오픈소스이다.현재 많은 사람들이 이 소스의 개발 및 유지에 참여하고 있다.또한, 타입스크립트는 피할 수 없는 대세 프론트엔드 언어이다. 사실상 프론트엔드로 회사에 들어가고 싶다면, 타입스크립트를 무조건 배워야 한다.타입스크립트는 자바스크립트의 확장판이다.자바스크립트는 유연하다. 그게 장점이지만 또 단점이다. 프로덕트의 규모가 커지고 협업자가 많아질수록 언어의 유연함은 미래 가능성에서 많은 오류를 가져올 수 있다. 이 부분을 해결하는 것이 타입스크립트다.쉽게 생각하면, 자바스크립트에 타입을 넣어.. 공감수 0 댓글수 0 2025. 4. 2.
  • 한 입으로 먹는 타입스크립트 아실 분은 아시겠지만, 인프런에서 4월 1일 만우절 기념으로 몇 개의 강의가 무려 "1천 원"으로 팔리게 되었다.나도 몇 가지 강의를 샀는데 그 중 하나가 타입스크립트 관련 강의였다.(비트코인도 사고, 자바스크립트도 사고, 노션 데이터베이스도 사고, 도커도 사고.. 아무튼 많이 샀다.)타입스크립트를 좀 더 깊게 배우고 싶었는데, 정말 좋은 기회가 온 거 같다. 배운 부분을 글로 작성하고자 한다. 추후에코드를 깃허브에 푸시할 수 있는데, 그건 따로 링크로 올리도록 하겠다.인프런 강의 링크https://inf.run/EvrS5 한 입 크기로 잘라먹는 타입스크립트(TypeScript) 강의 | 이정환 Winterlood - 인프런이정환 Winterlood | , 거짓말 같은 이벤트 2탄 🎁 아래의 강의들도 .. 공감수 4 댓글수 8 2025. 4. 1.
    문의안내
    • 티스토리
    • 로그인
    • 고객센터

    티스토리는 카카오에서 사랑을 담아 만듭니다.

    © Kakao Corp.