Per ardua ad astra.

환경 변수 타입 설정하기들어가며타입스크립트에서 환경 변수(Environment Variable)에 타입 오류가 발생하지 않도록 타입을 설정하는 방법을 정리해본다. 방법다음과 같은 환경 변수 파일이 있다고 해보자.이제 이 환경 변수를 프로젝트 내의 다른 파일에서 불러와서 사용해볼 것이다. (Next.js 프레임워크 사용).env.localNEXT_PUBLIC_API_KEY="="***********"NEXT_PUBLIC_SPACE_ID="**************************" (1) @!@(Non-Null Assertion) 연산자 사용하기@!@를 사용하여 값이 @undefined@가 아님을 타입스크립트에 명시한다.하지만 이 방법은 해당 환경 변수가 존재하지 않을 경우, 런타임 에러가 발생한다는..

테마 토글 기능 설정하기 (with shadcn/ui)들어가며Next.js를 이용하여 테마 토글 기능을 설정하는 방법을 정리해본다.이 게시글의 내용은 타입스크립트(TypeScript)와 shadcn UI 컴포넌트 라이브러리를 바탕으로 작성되었다. 방법① 색상 템플릿 코드를 전역 스타일시트 파일(@globals.css@)에 넣기아래의 사이트에서 자신에게 맞는 라이트/다크 모드 색상 템플릿을 선택한 후, 색상 코드를 복사한다. shadcn/uiBeautifully designed components that you can copy and paste into your apps. Accessible. Customizable. Open Source.ui.shadcn.com 그리고 전역 스타일시트 파일(@/app/..

PropsWithChildren들어가며리액트(React.ts)에서 사용할 수 있는 @PropsWithChildren@ 타입에 대해 정리해본다.이 타입은 리액트와 타입스크립트를 함께 사용할 때 사용할 수 있다. PropsWithChildren개념타입스크립트(TypeScript)에서 리액트 컴포넌트에 자식 요소(@children@)를 허용하고자 할 때 사용하는 유틸리티 타입보통 컴포넌트에 전달되는 기본 @props@ 외에도 자식 요소를 포함할 수 있을 때 유용하게 사용된다.@PropsWithChildren@ 타입은 컴포넌트가 자식 요소를 가질 수 있도록 명시하며, @children@을 명시적으로 정의하지 않고도 사용할 수 있도록 해준다. 사용 예제import { PropsWithChildren } from ..

클래스(Class)들어가며타입스크립트(TypeScript)에서 사용할 수 있는 클래스(Class)에 대해 정리해본다. 클래스(Class)개념객체(Object)를 생성하기 위한 설계도(Blueprint)데이터를 캡슐화하고, 그 데이터를 조작하는 메서드를 포함하여 객체 지향 프로그래밍(OOP, Object Oriented Programming) 패턴을 따른다.상속(Inheritance)를 지원하며, 복잡한 데이터 구조를 쉽게 생성할 수 있다. 클래스와 생성자(Contructor)클래스에서 생성자(Constructor)는 새 인스턴스를 생성할 때 호출되는 특별한 메서드이다.생성자는 보통 객체의 초기 상태를 설정하는 데 사용된다.class Book { // 클래스 속성 선언 title: string; au..

제네릭(Generic)들어가며타입스크립트(TypeScript)의 제네릭(Generic)에 대해 정리해본다. 제네릭(Generic)개념코드의 재사용성을 높이고 다양한 타입에 대해 동작할 수 있게 해주는 기능제네릭을 사용하면 타입을 우선 특정하지 않고, 나중에 사용할 때 그 타입을 지정할 수 있다.또한, 타입 추론이 더 강화되고, 반복적인 타입 코드를 줄일 수 있다.함수, 클래스, 인터페이스, 타입 등에 제네릭을 적용할 수 있다. 기본 문법제네릭을 사용할 때는 타입 매개변수(Type Parameter)를 정의한다.보통 @@와 같은 형식으로 사용하며, 원하는 이름을 지정하면 된다.@T@, @K@, @U@ 등이 관습적인 이름으로 쓰인다. 예제 코드 1 : 함수에서 제네릭 사용하기@identity@ 함수는 입력받..

인터페이스(Interface)들어가며타입스크립트(TypeScript)의 인터페이스(Interface) 타입에 대해 정리해본다. 인터페이스(Interface)개념객체의 구조를 정의하는 데 사용되는 타입객체가 가져야 할 속성, 그 속성의 타입, 그리고 메서드를 지정할 수 있다.자바스크립트에는 존재하지 않으며, 타입스크립트에서 사용 가능하다.코드의 가독성 및 유지보수를 쉽게 하고, 타입 안전성을 높여준다. 주요 기능객체가 특정 속성들을 반드시 가지고 있어야 하는 구조를 정의할 수 있다.특정 속성은 선택적으로 포함될 수 있도록 정의할 수 있다.예) @age?: number;@함수의 매개변수와 반환값의 타입도 인터페이스로 정의할 수 있다.클래스는 인터페이스를 @implements@ 키워드를 통해 구현할 수 있다...

Zod 라이브러리들어가며타입스크립트(TypeScript)에서 유효성 검사를 쉽게 해주는 Zod 라이브러리에 대해 정리해본다. Zod 라이브러리개념타입스크립트(TypeScript)에서 유효성 검사를 쉽게 해주는 스키마 선언 및 데이터 검증 라이브러리타입 안전성을 유지하면서 데이터의 유효성을 검사할 수 있도록 설계되어 있다.데이터 검증을 더욱 명확하고 직관적으로 수행할 수 있도록 도와준다. 설치$ npm install zod # yarn add zod 기본 사용법다음과 같이 간단한 문자열(String) 스키마를 만들 수 있다.import { z } from "zod";// creating a schema for stringsconst mySchema = z.string();// parsingmySchem..

타입 가드(Type Guard)들어가며타입스크립트(TypeScript)의 타입 가드(Type Guard)에 대해 정리해본다. 타입 가드(Type Guard)개념타입스크립트에서 변수의 타입을 좁히는 방법주로 조건문(Conditional Statement)을 사용하여 특정 타입임을 확인한 후, 해당 타입에 맞는 안전한 작업을 수행할 수 있도록 도와준다.타입 가드를 사용하면 컴파일 시점에 타입 오류를 방지하고, 코드의 가독성과 안정성을 높일 수 있다.타입 가드를 효과적으로 사용하면 런타임 오류를 줄이고, 개발 과정에서 타입 관련 버그를 미리 방지할 수 있으며, 코드의 의도를 명확하게 표현하여 협업 시 가독성을 높이는 데 큰 도움이 된다. 타입 가드는 런타임에서 변수의 타입을 확인하여 타입스크립트에게 해당 변수..

모듈 방식 사용하기들어가며타입스크립트(TypeScript)에서 모듈 방식을 사용하는 방법을 정리해본다. 방법타입스크립트 파일(@.ts@/@.tsx@)은 기본적으로 모듈(Module)로 간주되지 않고, 전역 범위의 스크립트로 처리된다.여러 파일에서 동일한 변수명을 생성할 경우, 오류가 발생한다.fileA.tslet name = 'stickman';const susan = 'susan'; fileB.tsconst susan = 'susan'; // 오류 발생 이때, 다음과 같이 2가지 방법으로 타입스크립트 파일을 모듈로 변환할 수 있다. 방법 ① : @import@, @export@ 문 사용하기타입스크립트 파일에 @import@ 또는 @export@ 문을 추가하여 ES6 모듈로 취급되게 하는 방법이다. ..

인터페이스(Interface)와 타입 별칭(Type Alias) 비교들어가며인터페이스(Interface)와 타입 별칭(Type Alias)은 타입스크립트에서 타입을 정의하는 방법이다.타입스크립트(TypeScript)에서 인터페이스(Interface)와 타입 별칭(Type Alias)의 차이에 대해 정리해본다. 인터페이스(Interface)개념인터페이스는 주로 객체(Object)의 구조를 정의하는 데 사용된다.주로 객체의 속성과 메서드를 정의하는 데 사용된다.인터페이스를 구현하는 객체는 해당 인터페이스에서 요구하는 속성이나 메서드를 반드시 포함해야 한다.코드에서 객체의 구조를 명확하게 정의하고, 다른 코드에서 해당 구조를 따르도록 강제할 때 유용하다.@interface@ 키워드를 이용하여 생성할 수 있다...

! 연산자(Non-null Assertion Operator)들어가며타입스크립트(TypeScript)에서 사용되는 @!@ 연산자(Non-null Assertion Operator)에 대해 정리해본다.이 연산자는 타입스크립트에서만 사용할 수 있다. ! 연산자(Non-null Assertion Operator)개념컴파일러에게 해당 표현식이 @null@ 또는 @undefined@가 아님을 보장한다고 알리는 역할을 하는 연산자 사용 예let value: string | null | undefined = "Hello";// 여기서 타입스크립트는 value가 null 또는 undefined일 수 있다고 경고할 수 있다.let length = value!.length; // ! 연산자를 사용하여 컴파일러 경고를..

MODULE_NOT_FOUND (Error: Cannot find module ~\react-scripts\bin\react-scripts.js) 오류 해결 방법들어가며아래와 같은 타입스크립트(TypeScript) 컴파일 시 발생하는 경로 관련 오류를 해결하는 방법을 정리해본다.> my-react-app@0.1.0 start > react-scripts start 'Learn\react\react-beginner\my-react-app\node_modules\.bin\' is not recognized as an internal or external command, operable program or batch file. node:internal/modules/cjs/loader:1080   throw ..

제네릭(Generic)들어가며타입스크립트(TypeScript)에서 사용되는 제네릭(Generic)에 대해 정리해본다. 제네릭(Generic)개념유연하면서도 타입 안전성을 제공하는 방법제네릭을 사용하면 함수나 클래스를 다양한 타입과 함께 사용할 수 있으며, 타입을 구체적으로 지정할 수 있다. 제네릭의 필요성아래의 @insertAtBeginning@ 함수를 보자.이 함수는 배열과 값을 매개변수로 받아, 값이 배열의 맨 앞에 추가된 새로운 배열을 반환한다.function insertAtBeginning(array: any[], value: any) { return [value, ...array];}const updatedArray = insertAtBeginning(demoArray, -1); // [-1,..

타입스크립트의 자료형(TypeScript)들어가며타입스크립트(TypeScript)에서 사용되는 자료형(DataType)을 간단하게 정리해본다. 타입스크립트의 자료형① 원시 자료형(Primitives)@number@ : 숫자형 (정수, 소수 등)@string@ : 문자열 @boolean@: @true@ 또는 @false@ 값@null@, @undefined@ : 기본적으로 모든 타입의 서브타입으로 취급된다.// (1) 숫자let age: number;age = 25;// => let age: number = 25;// (2) 문자열let name: string;name = "Peter";// => let name: string = "Peter";// (3) Booleanlet isActive: boolea..

타입스크립트 프로젝트 만들기들어가며타입스크립트(TypeScript) 프로젝트를 만들어보자. 타입스크립트 프로젝트타입스크립트 개발은 Node.js 프로젝트를 만든 다음, 개발 언어를 타입스크립트(TypeScript)로 설정하는 방식으로 진행한다.Node.js 프로젝트는 디렉터리를 하나 만들고 여기에 @package.json@이라는 이름의 파일을 만드는 것으로 시작한다.보통 @package.json@ 파일은 터미널에 @npm init@ 명령을 실행해 생성한다.> mkdir study> cd study> npm init --yWrote to C:\Users\devastra\Desktop\TypeScript_Study\ch02-01\package.json:{ "name": "study", "version":..

윈도우에서 스쿱(Scoop) 설치하기스쿱(Scoop)이란?명령어로 쉽게 프로그램을 설치하고 관리해주는 도구스쿱은 타입스크립트와 직접적인 관계는 없지만, 타입스크립트 개발 환경을 설정하는 데 유용한 도구이다. 스쿱 설치 방법우선 [관리자 모드]로 파워셸(PowerShell)을 실행한다.그리고 아래의 명령들을 차례대로 실행한다.> Set-ExecutionPolicy RemoteSigned -scope CurrentUser # 명령 실행 후 [A] 입력> $env:SCOOP='C:\Scoop' # 프로그램 설치 경로 지정> iex "& {$(irm get.scoop.sh)} -RunAsAdmin" # Scoop 설치 모든 것이 정상적으로 설치되었다면 @C:\Scoop@ 디렉터리가 만들어지고, 그..