글

6월, 2026의 게시물 표시

타입스크립트 리터럴 타입 예제

-
- 타입스크립트에서 리터럴( Literal ) 타입은 `success`, 200, true 와 같은 값을 타입으로 사용하는 방식이다. 문자열, 숫자, 불리언 리터럴 타입을 통해 값의 범위를 구체적으로 지정하여 사용한다. 타입스크립트 리터럴 타입은 상태 코드를 사용하는 것과 같은 효과를 볼 수 있다. - let status: string; status = "loading"; status = "success"; status = "anything"; - let status: "loading"; status = "loading"; // 가능 status = "success"; // 오류 - function showMessage(type: string) { console.log(type); } showMessage("success"); showMessage("sucess"); // 오타지만 string이므로 통과 - type MessageType = "success" | "error" | "warning"; function showMessage(type: MessageType) { console.log(type); } showMessage("success"); // 가능 showMessage("sucess"); // 오류 - type ButtonSize = "small" | "medium" | "large"; function createButton(size: ButtonSize) { return `버튼 크기: ${size}`; } createButton("small"); // 가능 createButton("large...
댓글 쓰기
위치: 대한민국 서울특별시
자세한 내용 보기

타입스크립트 유니언 타입 예제

-
- 타입스크립트에서 타입을 string, number, boolean처럼 하나씩 별도로 지정하는 방식은 어렵지 않다. 실제 개발에서는 어떤 값이 문자열일 수도 있고, 숫자일 수도 있으며, API의 응답이 성공일 수도 실패일 수도 있다. 이럴 때 사용할 수 있는 타입이 유니언 타입( Union Type )이다. 타입스크립트의 유니언 타입( Union Type )은 두 개 이상의 OR 조합된 타입 중에 값이 그 중 하나임을 표현한다. - let value: string | number; value = "hello"; value = 123; // 오류 value = true; - let id = 1; id = "user_1"; - let id: number | string; id = 1; id = "user_1"; - type UserId = string | number; let userId: UserId; userId = "abc123"; userId = 1001; - function printId(id: string | number) { console.log("ID:", id); } printId("user_01"); printId(100); - function printId(id: string | number) { console.log(id.toUpperCase()); } - function printId(id: string | number) { if (typeof id === "string") { console.log(id.toUpperCase()); } else { console.log(id.toFixed(2)); } } printId("user_01"); printId(100); -
댓글 쓰기
위치: 대한민국 서울특별시
자세한 내용 보기

타입스크립트 나머지 매개변수 예제

-
타입스크립트에서 함수를 만들다 보면 인수를 몇 개 받을지 미리 정하기 어려운 경우가 있다. 예를 들어, 숫자 여러 개를 더하거나, 여러 개의 문자열을 하나로 합치거나, 공통 값 하나와 나머지 값을 함께 처리해야 할 때가 그렇다. 이럴 때 사용하는 문법이 나머지 매개변수 Rest Parameter 이다. 나머지 매개변수는 다른 매개변수 뒤에 위치하며 ... 문법을 사용한다. - function 함수이름(...매개변수이름: 타입[]) { // 처리 로직 } - function sum(...numbers: number[]) { return numbers.reduce((total, num) => total + num, 0); } console.log(sum(1, 2, 3)); // 6 console.log(sum(10, 20, 30, 40)); // 100 -
댓글 쓰기
위치: 대한민국 서울특별시
자세한 내용 보기

타입스크립트 기본값 매개변수 예제

-
- function 함수이름(매개변수: 타입 = 기본값) { // 실행 코드 } - function greet(name: string = "Guest") { return `Hello, ${name}`; } console.log(greet("Alice")); // Hello, Alice console.log(greet()); // Hello, Guest - function getPosts(page: number = 1) { return `현재 페이지: ${page}`; } console.log(getPosts()); // 현재 페이지: 1 console.log(getPosts(3)); // 현재 페이지: 3 - function greet(name?: string) { return `Hello, ${name}`; } - function greet(name: string = "Guest") { return `Hello, ${name}`; } - function sayHello(name: string = "Guest") { return `안녕하세요, ${name}님`; } console.log(sayHello("민수")); // 안녕하세요, 민수님 console.log(sayHello()); // 안녕하세요, Guest님 - function calculatePrice(price: number, discountRate: number = 0) { return price - price * discountRate; } console.log(calculatePrice(10000, 0.1)); // 9000 console.log(calculatePrice(10000)); // 10000 - function createUser(name: string, isAdmin: boolean = false) { ...
댓글 쓰기
위치: 대한민국 서울특별시
자세한 내용 보기

타입스크립트 선택적 매개변수 예제

-
- function 함수이름(필수값: 타입, 선택값?: 타입) { // 실행 코드 } - function greet(name: string, age?: number): string { if (age === undefined) { return `${name}님, 안녕하세요.`; } return `${name}님은 ${age}살입니다.`; } console.log(greet("민수")); console.log(greet("지영", 25)); - function searchProducts(keyword: string, category?: string): string { if (category) { return `${category} 카테고리에서 ${keyword}를 검색합니다.`; } return `전체 상품에서 ${keyword}를 검색합니다.`; } console.log(searchProducts("노트북")); console.log(searchProducts("노트북", "전자제품")); - function printMessage(message?: string): void { console.log(message); } printMessage("안녕하세요"); printMessage(); - function printMessage(message?: string): void { if (message === undefined) { console.log("기본 메시지입니다."); return; } console.log(message); } - function createPost(title: string, content?: string) { return { title, content: content ?? "내용 없음...
댓글 쓰기
위치: 대한민국 서울특별시
자세한 내용 보기

타입스크립트 함수 반환값 타입 예제

-
- function 함수이름(매개변수: 타입): 반환타입 { return 반환값; } - function add(a: number, b: number): number { return a + b; } - function multiply(a: number, b: number) { return a * b; } - function multiply(a: number, b: number): number { return a * b; } - function getPrice(): number { return 15000; } - function getUserName(): string { return "민수"; } - function isLoggedIn(): boolean { return true; } - function getNumbers(): number[] { return [1, 2, 3]; } - function getNames(): Array<string> { return ["철수", "영희", "민수"]; } - function getUser(): { id: number; name: string } { return { id: 1, name: "지영", }; } - type User = { id: number; name: string; email: string; }; function getUser(): User { return { id: 1, name: "지영", email: "jiyoung@example.com", }; } - function printMessage(message: string): void { console.log(message); } - async function getUse...
댓글 쓰기
위치: 대한민국 서울특별시
자세한 내용 보기

타입스크립트 함수 매개변수 타입 예제

-
- function introduce(name: string, age: number) { return `${name}은 ${age}살입니다.`; } introduce("민수", 25); - function add(a: number, b: number) { return a + b; } add(10, 20); // add("10", 20); // 오류 - function greet(name: string) { return `안녕하세요, ${name}님`; } greet("지연"); - greet("철수"); // greet(123); // 오류 - function getTotalPrice(price: number, quantity: number) { return price * quantity; } getTotalPrice(10000, 3); - function setUserStatus(isActive: boolean) { if (isActive) { return "활성 사용자입니다."; } return "비활성 사용자입니다."; } setUserStatus(true); - function getScores(scores: number[]) { return scores.reduce((total, score) => total + score, 0); } getScores([80, 90, 100]); - function printNames(names: string[]) { names.forEach((name) => { console.log(name); }); } printNames(["민수", "지연", "철수"]); - function printUser(user: { name: string; age: num...
댓글 쓰기
위치: 대한민국 서울특별시
자세한 내용 보기

타입스크립트 함수 타입 사용 방법

-
- function add(a, b) { return a + b; } - function add(a: number, b: number): number { return a + b; } - a: number // a는 숫자 b: number // b는 숫자 : number // 함수의 반환값도 숫자 - (매개변수: 타입) => 반환타입 - (name: string) => void - (a: number, b: number) => number - function greet(name: string): string { return `안녕하세요, ${name}님`; } const message = greet("철수"); console.log(message); - name: string - : string - greet(123); - function printLog(message: string): void { console.log(message); } - printLog("로그를 출력합니다."); - const add = (a: number, b: number): number => { return a + b; }; - const add = (a: number, b: number): number => a + b; - const add: (a: number, b: number) => number = (a, b) => { return a + b; }; - type AddFunction = (a: number, b: number) => number; const add: AddFunction = (a, b) => { return a + b; }; - const multiply: AddFunction = (a, b) => { return a * b; }; - function...
댓글 쓰기
위치: 대한민국 서울특별시
자세한 내용 보기

타입스크립트 객체 타입 선언 예제

-
- const user = { name: "Kim", age: 30, }; - const user: { name: string; age: number } = { name: "Kim", age: 30, }; - const product: { id: number; name: string; price: number } = { id: 1, name: "Keyboard", price: 50000, }; - type User = { id: number; name: string; email: string; }; const user: User = { id: 1, name: "Kim", email: "kim@example.com", }; - interface User { id: number; name: string; email: string; } const user: User = { id: 1, name: "Lee", email: "lee@example.com", }; - type User = { id: number; name: string; phone?: string; }; const user1: User = { id: 1, name: "Kim", }; const user2: User = { id: 2, name: "Park", phone: "010-1234-5678", }; - type User = { readonly id: number; name: string; }; const user: User = { id: 1, name: "Kim", }; user.name = "Lee"; // 오류 발생 // user.id =...
댓글 쓰기
위치: 대한민국 서울특별시
자세한 내용 보기

타입스크립트 배열 타입 선언 방법

-
- const scores: number[] = [90, 80, 70]; - scores.push(100); // 가능 scores.push("A"); // 오류 - const numbers: number[] = [1, 2, 3]; - const numbers: Array<number> = [1, 2, 3]; - const names: string[] = ["민수", "지영", "현우"]; - const names: Array<string> = ["민수", "지영", "현우"]; - const checkedList: boolean[] = [true, false, true]; - const users: { id: number; name: string }[] = [ { id: 1, name: "민수" }, { id: 2, name: "지영" }, ]; - type User = { id: number; name: string; isActive: boolean; }; const users: User[] = [ { id: 1, name: "민수", isActive: true }, { id: 2, name: "지영", isActive: false }, ]; - const users: Array<User> = [ { id: 1, name: "민수", isActive: true }, ]; - const values: (string | number)[] = ["A", 1, "B", 2]; - const values: string | number[] = [1, 2, 3]; - const numbers: number[] = [1...
댓글 쓰기
위치: 대한민국 서울특별시
자세한 내용 보기

타입스크립트 불리언 타입 사용 방법

-
- let isLoggedIn: boolean = true; let isAdmin: boolean = false; - let isOpen: boolean = true; isOpen = false; // 가능 // isOpen = "yes"; // 오류 // isOpen = 1; // 오류 - const isLoggedIn: boolean = true; if (isLoggedIn) { console.log("로그인한 사용자입니다."); } else { console.log("로그인이 필요합니다."); } - function isAdult(age: number): boolean { return age >= 20; } console.log(isAdult(25)); // true console.log(isAdult(17)); // false - type User = { name: string; isActive: boolean; isAdmin: boolean; }; const user: User = { name: "민수", isActive: true, isAdmin: false, }; - const checkedList: boolean[] = [true, false, true]; checkedList.forEach((checked) => { console.log(checked ? "선택됨" : "선택 안 됨"); }); - - - - -
댓글 쓰기
위치: 대한민국 서울특별시
자세한 내용 보기

타입스크립트 숫자 타입 사용 방법

-
- let age: number = 30; let price: number = 19900; let discountRate: number = 0.15; - let count: number = 10; let temperature: number = 36.5; let totalPrice: number = 25000; console.log(count); console.log(temperature); console.log(totalPrice); - let quantity: number = 5; // 오류 예시 // quantity = "5"; - let decimal: number = 10; let hex: number = 0xff; let binary: number = 0b1010; let octal: number = 0o744; console.log(decimal); // 10 console.log(hex); // 255 console.log(binary); // 10 console.log(octal); // 484 - function add(a: number, b: number): number { return a + b; } const result = add(10, 20); console.log(result); // 30 - function calculateTotalPrice(price: number, quantity: number): number { return price * quantity; } const total = calculateTotalPrice(15000, 3); console.log(total); // 45000 - type Product = { id: number; name: string; price: number; stock: number; }; const product: Product = { id: 1, name: "무선 마우스",...
댓글 쓰기
위치: 대한민국 서울특별시
자세한 내용 보기

타입스크립트 문자열 타입 사용 코드 예제

-
- let name: string = "홍길동"; let message: string = "안녕하세요"; - let name: string = "홍길동"; name = "김철수"; // 가능 name = 123; // 오류 - let title: string = "타입스크립트"; - let userName: string = "민수"; let email: string = "test@example.com"; let address: string = "서울시 강남구"; - userName = "지영"; // 가능 userName = true; // 오류 - function greet(name: string): string { return `안녕하세요, ${name}님`; } const result = greet("민수"); console.log(result); - greet("철수"); // 가능 greet(100); // 오류 - type User = { id: string; name: string; email: string; }; const user: User = { id: "user-001", name: "홍길동", email: "hong@example.com", }; - const tags: string[] = ["typescript", "javascript", "frontend"]; - const tags: Array<string> = ["typescript", "react", "node"]; - type UserR...
댓글 쓰기
위치: 대한민국 서울특별시
자세한 내용 보기

자주 사용하는 스프링부트 어노테이션 종류와 목적

-
스프링부트( Springboot )로 코딩을 하다보면 자주보이는 것들이 있다. 어노테이션( Annotation )이다. 어노테이션은 스프링부트에서 클래스, 메서드, 필드 위에 지정하여, 역할을 지정한다. 스프링부트는 어노테이션을 읽고 클래스, 메서드, 필드가 어떤 역할을 하는지 파악하고 그에 맞게 실행된다. 지금의 스프링부트 어노테이션의 경우 편의성이 높아졌으며, 단순하고 반복적인 코드를 어노테이션으로 처리할 수 있다. 스프링부트의 중요한 개념 중 하나가 의존성 주입인데, 어노테이션과 관련이 있다. 즉, 스프링부투의 어노테이션은 객체를 생성, 등록( 의존성 주입 ), 데이터의 흐름과 연결을 자동으로 처리해주는 역할을 해 준다. ▣ 어노테이션 ( Annotation ) 스프링부트를 시작하면 처음부터 보게 되는 것이 어노테이션( Annotation )이다. 어노테이션은 `@`기호와 함께 사용하며, 자바 코드 위에 작성하여, 스프링부트에 코드의 역할을 알려준다. 대표적으로 많이 보는 어노테이션은 @Controller, @GetMapping, @Service 일 것이다. 스프링부트에서 언급하는 객체는 보통 클래스라 생각하면 머리 속이 편해진다. 즉,  스프링부트에서 얘기하는 어노테이션은 객체( 클래스 )에 지정하고, 작성하여, 스프링부트에게 객체의 역할을 알려주고, 자동으로 객체를 생성하고 연결하고 실행하는 연결을 한다. 구구절절 어렵게 얘기했지만, 쉽게 얘기하면 클래스를 자동으로 생성해 주고 연결해 준다고 생각하자. 이 부분은 의존성 주입과 관련 있으며, 가끔 어노테이션이 지정되어 있지 않거나 잘못 기재되어 있다면, 의존성 주입과 관련된 오류를 볼 수 있다. ▣ 어노테이션 ( Annotation ) 종류 이제 스프링부트에서 객체의 역할을 정하는 어노테이션에 대한 종류를 살펴보자. 어노테이션의 종류는 많지만, 자주 사용하는 것부터 살펴보자. 물론, 코드를 만들고 자신만의 서비스를 만들고, 유지보수를 하다보면 다 알게 되는 것들이다. 더욱이 지금은 굳이 찾지 않...
댓글 쓰기
위치: 대한민국 서울특별시
자세한 내용 보기

타입스크립트 기본 타입 종류 | 변수 함수 객체 등에 지정하는 자료형

-
이미지
타입스크립트( Typescript )의 특징은 변수, 함수, 객체 등에 데이터 타입을 지정하여 오류를 줄이는 역할을 한다. 관대한 자바스크립트( Javascript )의 변수 지정에 데이터 타입을 지정하는 것이 타입스크립트이다. 자바스크립트에서는 변수에 어떤 값이든 자유롭게 넣을 수 있지만, 타입스크립트는 변수, 함수, 객체에 들어갈 값의 종류를 미리 지정할 수 있다. 자바 또는 C# 과 같은 언어들에 데이터 타입을 지정하는 것과 같다고 볼 수 있다. 타입스크립트의 타입에는 여러 종류가 있다. 굳이 나열하면 string, number, boolean, array, object, null, undefined, any, unknown, union, void 가 있다. 타입스크립트 기본 타입 종류 | 변수 함수 객체 등에 지정하는 자료형 ⊙ 타입스크립트 기본 타입 종류 타입스크립트는 자바스크립트에 자료형을 지정한 것이라 볼 수 있으며, 이것을 타입( type )이라 칭한다. 자바스크립트가 자료형에 관대한 특징이 있기 때문에, 의도하지 않은 코드 동작의 오류가 발생할 수 있다. 예를 들어, 자바스크립트의 + 연산자가 대표적인데, + 연산자는 숫자간 덧셈 연산도 하지만, 문자열에 + 가 들어간 경우 문자열 연결 동작을 하기 때문이다. 이 외에도 여러가지 경우들이 있다. 구구절절 말은 많았지만, 자바 또는 C# 처럼 자료형( 데이터 타입, data-type )을 지정한다고 보면 이해가 쉽다. 타입스크립트의 타입 자료형에는 여러가지가 존재하는데 그 중 일부는 다음과 같다. string : 문자열 number : 숫자 boolean : 참/거짓 array : 배열 string[] : 문자열 배열 number[] : 숫자 배열 type : 타입 별칭 interface : 객체 구조 string | number : 문자열 또는 숫자 object : 객체 타입 null : 값이 비어 있음 undefined : 값이 할당되어 있지 않음 any : 아무 타입이나 가능 unknown ...
댓글 쓰기
자세한 내용 보기