[TS] 타입 시스템

01객체 타입 호환성 (Object Type Compatibility)객체 타입 호환성은 간단히 말해서, 두 객체가 비슷한 구조일 때 서로 바꿔 사용할 수 있다는 개념입니다.객체의 속성 이름과 타입이 같으면, 두 객체를 서로 호환된다고 보는 거죠. 예를 들어, name과 price 속성이 있는 객체가 있다면, 이 두 객체는 서로 호환된다고 판단합니다.객체의 구조가 맞다면 타입이 맞다고 간주되기 때문에, 쉽게 값을 교환할 수 있게 되죠.type Book { name: string; price: number;}let myBook: Book = { name: "Learning TypeScript", price: 30000, author: "John Doe" // Error: 타입에 정의되지 않은 속..

• format_list_bulleted DEVELOPMENT/Typescript
• · 2025. 2. 26.
• textsms

[TS] 타입 계층과 변환 개념 (업캐스팅, 다운캐스팅, unknown, never)

01타입스크립트에서 타입이란?타입스크립트에서 타입(Type)이란 값이 가질 수 있는 형태나 범위를 제한하는 것입니다.예를 들어, 숫자만 들어갈 수 있는 변수를 만들 수도 있고, 글자(문자열)만 들어갈 수 있는 변수를 만들 수도 있어요. 이를 통해 코드의 안정성을 높이고, 버그를 줄일 수 있습니다. 1. 타입의 기본 개념✅ 타입은 비슷한 성질을 가진 여러 개의 값(데이터)을 묶어둔 개념(집합)✅ 비슷한 속성을 가진 값들을 하나로 묶어 타입을 형성✅ 예를 들어, 숫자들은 number 타입, 글자들은 string 타입let num: number = 10; // 숫자 타입 (10, 20, -5 같은 숫자만 가능)let str: string = "hello"; // 문자열 타입 ("hello", "world..

• format_list_bulleted DEVELOPMENT/Typescript
• · 2025. 2. 25.
• textsms

[TS] 타입스크립트 모든 타입 한 번에 정리

타입스크립트에는 다양한 타입들이 존재합니다.이번 글에서는 타입스크립트에서 지원하는 주요 타입을 정리해 볼게요. 🙂01원시 타입 (Primitive Type)동시에 하나의 값만 저장하는 타입입니다.📌 타입 주석 (Type Annotation): 변수명 뒤에 :을 붙여 타입을 지정하는 문법입니다.1. 숫자 타입 (number)타입스크립트에서 숫자를 다루는 모든 값은 number 타입으로 정의됩니다.let 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 = ..

• format_list_bulleted DEVELOPMENT/Typescript
• · 2025. 2. 25.
• textsms

[TS] "Hello TypeScript World!"

01TypeScript 란 프로그래밍을 하다 보면, 변수에 어떤 타입이 들어가야 하는지 헷갈릴 때가 많지요? 예를 들어, 숫자를 넣어야 하는데 실수로 문자열을 넣으면 에러가 날 수도 있고, 함수가 예상치 못한 값을 반환하면 디버깅하느라 시간 낭비하게 되죠. 이런 문제를 미리 잡아주는 게 바로 타입스크립트(TypeScript)입니다!1. 타입스크립트는 무엇인가요?타입스크립트는 마이크로소프트에서 만든 자바스크립트의 상위 확장 언어입니다. 쉽게 말하면, 자바스크립트에 "타입" 개념을 추가해서 코드 작성할 때 더 안전하게 만들 수 있도록 도와주는 언어죠.  자바스크립트처럼 동작하지만, 변수나 함수에 타입을 미리 정해두면 잘못된 타입을 사용할 경우 컴파일 시점에서 오류를 잡아줍니다.그리고 타입스크립트 코드는 바로..

• format_list_bulleted DEVELOPMENT/Typescript
• · 2025. 2. 25.
• textsms

[React] Axios

01AxiosAxios는 HTTP 클라이언트 라이브러리로, JavaScript에서 API 호출을 쉽게 할 수 있도록 도와주는 라이브러리입니다. Promise 기반으로 작동하며, 브라우저와 Node.js에서 모두 사용할 수 있습니다. 특히, React에서 자주 사용됩니다. 📌 Axios 설치//npm을 사용하는 경우npm install axios//yarn을 사용하는 경우yarn add axios02기본 사용법Axios는 GET, POST, PUT, DELETE와 같은 HTTP 메서드를 사용하여 API 요청을 보낼 수 있습니다.다음은 가장 기본적인 예시입니다.✅ GET 요청 예시서버에서 데이터를 가져오는 예시입니다.import axios from "axios";axios.get("https://jsonp..

• format_list_bulleted DEVELOPMENT/React.js
• · 2025. 2. 21.
• textsms

[JS] fetch와 REST API

01fetch 란1. fetch의 배경fetch가 나오기 전에는 AJAX를 사용하여 자바스크립트에서 데이터를 서버로 요청하고 받는 것이 어려웠습니다.AJAX(Asynchronous JavaScript And XML) : 전체 페이지를 새로 고침 하지 않고 필요한 데이터만 서버에서 비동기적으로 가져오는 기법입니다.XMLHttpRequest : 데이터를 요청하고 받아오는 객체인데, 복잡하고 불편한 점이 있었습니다.예를 들어, 콜백 함수를 사용해야 하고 코드가 길어지는 단점이 있었습니다. 2. fetch란?fetch는 AJAX의 대체로, 네트워크 요청을 보내고 정보를 받아오는 더 간편하고 효율적인 방법입니다.fetch는 Promise 기반이기 때문에, AJAX보다 간편하고 효율적으로 사용할 수 있습니다. ✅ ..

• format_list_bulleted DEVELOPMENT/JavaScript
• · 2025. 2. 21.
• textsms

[JS] async와 await

01async와 await 이란?Promise를 더 쉽게 사용할 수 있게 해주는 자바스크립트의 기능입니다.async는 함수 앞에 붙여서 비동기 함수로 만들고, await는 Promise가 처리될 때까지 기다리게 만듭니다.1. 비동기란?왜 비동기가 필요한지 비동기(Asynchronous)는 동시에 여러 작업을 처리할 수 있는 방식입니다.예를 들어, 우리가 어떤 작업을 시작했을 때 그 작업이 끝날 때까지 기다리지 않고 다른 일을 할 수 있게 해주는 방식이죠.   ✅ 왜 비동기가 필요한가요?응답성 유지: 비동기를 사용하면, 네트워크 요청 중에도 웹 페이지나 앱을 계속 사용할 수 있습니다.리소스 효율성: 기다리는 동안 다른 일을 처리할 수 있어 자원을 더 잘 활용할 수 있습니다.시간 절약: 긴 작업을 기다리는 ..

• format_list_bulleted DEVELOPMENT/JavaScript
• · 2025. 2. 20.
• textsms

[JS] 프로미스 (Promise)

01Promise자바스크립트에서 비동기 작업이 끝날 때, 그 결과를 알려주는 "약속"과 같은 역할의 오브젝트입니다.예를 들어, 어떤 일이 잘 처리되면 결과를 알려주고, 문제가 생기면 에러를 알려주는 방식이죠. 1. Promise의 흐름: 생성, 사용, 결과 처리 ✅ Producing Code (프로듀서 코드): Promise를 생성하는 코드입니다.즉, 우리가 약속을 만들고 그 약속이 끝날 때까지 기다리는 코드라고 할 수 있습니다.이 코드는 어떤 일이 완료되기를 기다리고, 완료되면 결과를 알려줄 resolve 또는 에러를 알려줄 reject를 호출합니다.  ✅ Consuming Code (컨슘 코드) : Consuming Code는 Promise를 사용하는 코드입니다.즉, Promise가 완료될 때까지 기..

• format_list_bulleted DEVELOPMENT/JavaScript
• · 2025. 2. 20.
• textsms