MapleStory Finger Point
[TypeScript] Any와 Unknown 타입
·
🟣 TypeScript
Any와 Unknown 타입타입스크립트는 모든 변수의 타입을 엄격하게 관리하지만,개발 과정에서 불가피하게 타입을 알 수 없거나 유연한 처리가 필요한 상황이 발생한다.이때 사용하는 것이 any와 unknown이다.Any 타입any는 타입스크립트의 모든 타입 검사를 무력화하는 치트키(Cheat Key) 같은 타입이다. 특정 변수의 타입을 우리가 확실히 모를때 사용한다. (any: 어떤 타입이든지 가능!) 특징모든 값 허용: 숫자, 문자열, 불리언 등 어떤 타입의 값이라도 할당할 수 있다.모든 연산 허용: 타입 검사를 받지 않으므로, 메서드 호출이나 연산 등 모든 동작이 허용된다.모든 곳에 할당 가능: any 타입의 값은 다른 어떤 타입의 변수에도 할당할 수 있다.let anyVar: any = 10;anyV..
[TypeScript] 타입 별칭 (Type Alias)과 인덱스 시그니쳐 (Index Signature)
·
🟣 TypeScript
타입 별칭 (Type Alias)타입 별칭은 변수를 선언하듯 타입에 이름을 붙여 별도로 정의하는 문법이다.복잡한 타입을 매번 작성할 필요 없이, 이름을 통해 쉽게 재사용할 수 있어 코드의 가독성과 유지보수성이 높아진다. 👍🏻정의 및 사용법type 키워드를 사용해 정의한다.// 타입 별칭 정의type User = { id: number; name: string; nickname: string; birth: string; bio: string; location: string;};// 타입 별칭 사용let user1: User = { id: 1, name: "이정환", nickname: "winterlood", birth: "1997.01.07", bio: "안녕하세요", locati..
[TypeScript] 객체(Object)
·
🟣 TypeScript
object 타입의 한계object는 단순히 해당 변수가 "객체임"을 명시하는 타입이다.let user: object = { id: 1, name: "이정환",};// ❌ Error: 'object' 형식에 'id' 속성이 없습니다.// user.id;위 코드에서 user는 객체로 잘 정의되었지만, user.id에 접근하려 하면 에러가 발생한다. → object 타입이 객체의 내부 구조(프로퍼티 정보)에 대한 정보는 전혀 가지고 있지 않기 때문이다.따라서 실무에서는 거의 사용되지 않는다. 객체 리터럴 타입 (Object Literal Type)객체의 구조를 정확히 반영하기 위해서는 객체 리터럴 타입을 사용해야 한다. 중괄호 {}를 열고 객체가 가진 프로퍼티와 그 타입을 직접 나열하는 방식이다.let ..
[TypeScript] 배열(Array)과 튜플(Tuple)
·
🟣 TypeScript
배열 (Array)타입스크립트에서 배열을 정의하는 방법은 두 가지가 있다.방법1: 기본 정의 방법 (type[]) →가장 일반적으로 사용하는 방식이다. 자료형 뒤에 대괄호([])를 붙여 선언한다.// 숫자 배열let numArr: number[] = [1, 2, 3];// 문자열 배열let strArr: string[] = ["hello", "im", "winterlood"]; 방법2: 제네릭 문법 사용 (Array)Array 형태의 제네릭 문법을 사용할 수도 있다. 기능은 위와 완전히 동일하다.let boolArr: Array = [true, false, true]; 유니온 타입 배열 (다양한 타입 혼합)배열에 여러 타입의 요소를 함께 저장하고 싶다면 유니온 타입(|)을 사용한다.// number 또는..
[TypeScript] 원시타입과 리터럴 타입
·
🟣 TypeScript
원시 타입(Primitive Type)동시에 하나의 값만 저장할 수 있는 가장 기본적인 타입배열이나 객체 같은 비원시 타입과 달리, number, string처럼 구체적인 데이터 하나만을 다룬다. 변수명 뒤에 : 타입을 명시하여 변수의 타입을 지정하는 문법을 타입 주석(Type Annotation)이라고 한다. 주요 원시 타입number (숫자)자바스크립트의 모든 숫자값을 포함한다. 정수뿐만 아니라 소수, 음수, 무한대(Infinity), 숫자가 아님(NaN)도 포함된다.let num1: number = 123;let num2: number = -123;let num3: number = 0.123;let num4: number = -Infinity;let num5: number = NaN;// ❌ Err..
[TypeScript] 기본 타입(Basic Types)과 실습 환경 설정
·
🟣 TypeScript
기본 타입(Basic Types)이란?기본 타입은 타입스크립트가 자체적으로 제공하는 내장 타입(Built-in Types)을 말한다.number, string처럼 자바스크립트와 공유하는 타입뿐만 아니라, any, void, never, unknown 등 타입스크립트만의 고유한 특수 타입도 포함된다.타입 계층도 (Type Hierarchy) 타입스크립트의 모든 기본 타입은 서로 부모-자식 관계를 이루며 하나의 거대한 계층 구조를 형성한다.원시 타입 (Primitive Types): number, string, boolean 등비원시 타입 (Non-primitive Types): object, Array 등특수 타입: any, unknown, void, never 등이후 학습 과정에서는 [원시 타입 → 비원..
[TypeScript] 타입스크립트 컴파일러 옵션 설정 (tsconfig.json)
·
🟣 TypeScript
타입스크립트 컴파일러는 소스 코드를 분석하여 타입 오류를 검사하고 자바스크립트 코드로 변환한다.이 과정에서 얼마나 엄격하게 검사할지, 어떤 버전의 자바스크립트로 변환할지 등 세부적인 동작을 설정할 수 있다.이러한 설정은 프로젝트 루트 경로에 있는 tsconfig.json 파일에 정의하며, 프로젝트의 성격에 맞춰 최적화된 환경을 구성하는 데 사용된다.설정 파일 생성터미널에서 tsc --init 명령어를 입력하면 기본 설정이 담긴 tsconfig.json이 자동 생성된다.하지만 학습을 위해 기본 내용을 모두 지우고 빈 객체({}) 상태에서 필요한 옵션을 하나씩 추가하며 익혀본다.{} 컴파일 대상 설정: includeinclude 옵션은 컴파일러에게 어떤 파일들을 컴파일할지 알려주는 경로 설정이다.이 옵션을 ..
[TypeScript] 타입스크립트 실습 환경 설정 및 Hello World
·
🟣 TypeScript
프로젝트 폴더 생성 및 초기화실습 코드를 관리할 폴더를 생성하고 Node.js 프로젝트를 초기화한다.폴더 생성: 원하는 위치에 onebite-typescript 폴더를 생성하고, 그 하위에 section01 폴더를 만든다.프로젝트 초기화: 터미널에서 section01 폴더로 이동한 뒤 아래 명령어를 입력한다.npm init-y 옵션을 사용하면 기본 설정값으로 빠르게 초기화된다. 완료 시 package.json 파일이 생성된다.npm init필수 패키지 설치: @types/node타입스크립트 프로젝트를 시작할 때 가장 먼저 @types/node를 설치해야 한다. npm i @types/node 설치 이유타입스크립트는 기본적으로 자바스크립트 내장 기능(Node.js의 console, process 등)에 대..
[TypeScript] 타입스크립트의 동작 원리
·
🟣 TypeScript
일반적인 프로그래밍 언어의 컴파일 과정우리가 작성하는 프로그래밍 언어(Java, JavaScript 등)는 인간이 이해하기 쉬운 형태다. 하지만 컴퓨터는 이를 바로 이해하지 못하고, 기계어(0과 1)나 바이트코드 같은 단순한 형태만 인식할 수 있다.따라서 사람이 작성한 코드를 컴퓨터가 이해할 수 있는 형태로 변환하는 과정이 필요하며, 이를 컴파일(Compile)이라 하고, 변환해 주는 도구를 컴파일러(Compiler)라고 한다. 일반적인 컴파일 단계소스 코드 작성: 개발자가 코드를 작성한다.AST(추상 문법 트리) 변환: 컴파일러가 코드를 파싱하여 공백이나 주석을 제거하고, 코드의 구조를 트리 형태의 자료구조인 AST(Abstract Syntax Tree)로 변환한다.바이트코드 생성: 생성된 AST를 컴..