타입스크립트 클래스의 readonly와 static 알아보기

안녕하세요? 오늘은 타입스크립트 클래스에서 readonly와 static에 대해 알아보겠습니다. 먼저, readonly입니다. readonly class Player { public name: string = ""; public age: number = 0; constructor(name: string, age: number) { this.name = name; this.age = age; } } 위와 같은 Player 클래스가 있다고 합시다. Player는 name과 age가 있고 constructor 함수에서 this.name과 this.age로 각각 클래스 변수에 값을 지정해 주는 지극히 일반적인 클래스인데요. 타입스크립트에서는 위와 같은 방법 말고 아래와 같은 방법도 가능합니다. 컨스트럭터 안에서..

• format_list_bulleted 코딩/Typescript
• · 2022. 3. 1.
• textsms

Mapped Type - 타입스크립트 강좌 14편

안녕하세요? 오늘은 좀 어려운 주제인데요. 먼저, RPG 게임에서 player의 특성을 정의하는 타입을 만들려고 한다고 가정해 봅시다. 어떻게 해야 할까요? 먼저, name이 있어야겠죠? type MyFlexibleInfo = { name: string; } 그다음으로 race (종족)이나 age (나이)가 있어야겠죠? 만약, MyFlexibleInfo 가 두 가지의 타입만 있다고 하고 race나 age 중에 한 개만 자유롭게 넣게 하고 싶을 때는 어떻게 할까요? 바로 타입 머지 (type merge) 하면 되는데요. type MyFlexibleInfo = { name: string; } & Record Record 유틸리티 타입으로 key : value 타입을 추가할 수 있게 했습니다. type MyF..

• format_list_bulleted 코딩/Typescript
• · 2022. 3. 1.
• textsms

타입스크립트 Generics in Class - 타입스크립트 TypeScript 강좌 13편

안녕하세요? 오늘은 지난 시간에 배운 Class Visibility에 더해서 클래스에서 제네릭을 쓰는 방법에 대해 알아보겠습니다. 일단 지난 시간에 만들었던 Database 클래스를 를 이용한 제네릭 형태로 변경해 보겠습니다. interface Database { get(id: string): string; set(id: string, value: string): void; } class InMemoryDatabase implements Database { protected db: Record = {}; get(id: string): string { return this.db[id]; } set(id: string, value: string): void { this.db[id] = value; } } 위..

• format_list_bulleted 코딩/Typescript
• · 2022. 3. 1.
• textsms

Supabase와 NextJS로 블로그 만들기 - Post Create

안녕하세요? 지난 시간에 이어 Supabase와 NextJS로 블로그 만들기에 도전해 보겠습니다. 오늘은 Create A Post를 만들어 보겠는데요. 기존에 만들어 놨던 템플릿만 잘 활용하면 오늘 주제도 금방 만들 수 있을 거 같습니다. 먼저 /pages/post/create.tsx 파일을 만들 예정입니다. 이렇게 만들면 browser 상의 주소가 http://localhost:3000/post/create 가 됩니다. 일단 User-Authenticated Page 템플릿을 준비합니다. 이 템플릿은 앞에서 벌써 여러 번 써먹었으니 꼭 알아 두시기 바랍니다. /pages/post/create.tsx import React from "react"; import { GetServerSideProps } f..

• format_list_bulleted 코딩/React
• · 2022. 2. 20.
• textsms

Supabase로 로그인 구현하기 with NextJS 1편

안녕하세요? 최근 NextJS로 여러가지 로그인 구현 웹앱을 만들려고 노력하고 있는데요. 최근에는 NextAuth와 Prisma를 이용해서 카카오 로그인, 네이버 로그인, 구글 로그인 등 다방면으로 구현해 봤습니다. 근데 본격적인 웹앱 개발을 하려면 DB에 대한 서버 문제가 걸리는데요. 이에 대한 해결책으로는 Firebase 를 쓰는 방법이 있습니다. 웹 관련 애플리케이션 제작에 있어 모든 기능을 제공해 주는 Firebase인데요. 구글이 인수해서 키우고 있는 토탈 서비스인데요. 오늘은 Firebase 말고 이에 대항해서 새로 나온 서비스인 Supabase를 이용해서 로그인을 구현해 볼까 합니다. https://supabase.com/ The Open Source Firebase Alternative |..

• format_list_bulleted 코딩/React
• · 2022. 1. 5.
• textsms

타입스크립트(Typescript) 강좌 1편

안녕하세요? 오늘은 드디어 새로운 강의를 시작하게 되었습니다. 최근에 React, NextJS를 이용하면서 Typescript의 위력을 다시 한번 느꼈었는데요. 타입스크립트는 다들 아시다시피 자바스크립트의 Super-set 이란 느낌입니다. 타입스크립트의 최대 장점은 type을 지정할 수 있고 거기에 따라 일반 자바스크립트에서 발생하는 type 관련 에러를 방지해 준다는 점에서 큰 효과를 볼 수 있는데요. 이 점이 결과적으로 코드를 더 빨리 짤 수 있게 도와주는 효과를 보게 됩니다. 자, 지금까지 자바스크립트를 배워왔던 분들도 이제는 타입스크립트를 저랑 같이 배워 볼까요? mkdir typescript-tutorial cd typescript-tutorial code . 폴더를 만들고 그 폴더에 들어가서..

• format_list_bulleted 코딩/Typescript
• · 2021. 10. 23.
• textsms