글

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 =...
댓글 쓰기
위치: 대한민국 서울특별시
자세한 내용 보기

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

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

비주얼 스튜디오 코드 VSCode 설치하기 - 마이크로소프트 공식 홈페이지

-
이미지
VSCode( 비주얼스튜디오코드, Visual Studio Code )는 마이크로소프트( Microsoft )에서 제공하는 있는 무료 코드 편집기 프로그램이다. 프로그래밍 언어의 소스 코드를 작성하고 수정하며, 확장 기능을 설치하여 개발 환경을 구성할 수 있다. 윈도우즈, 맥OS, 리눅스( Windows, macOS, Linux )에서 사용할 수 있으며, 공식 홈페이지를 통해 자신의 운영체제에 맞는 설치 파일을 다운로드받고 설치할 수 있다. 윈도우즈의 경우, 인스톨러 파일( Installer )를 이용하여 설치할 수 있다. 설치파일을 다운로드하고 실행한 다음 화면의 안내에 따라 VSCode 설치를 진행하면 된다. 설치가 완료되면 VSCode를 실행하여 자신이 원하는 코드를 작성할 수 있다. 비주얼 스튜디오 코드 설치하기 - 마이크로소프트 공식 홈페이지 VSCode 무료 소스 코드 편집기 VSCode(비주얼 스튜디오 코드, Visual Studio Code)는 Microsoft에서 개발한 무료 소스 코드 편집기이다. 소스 코드란 컴퓨터 프로그램을 만들기 위해 프로그래밍 언어로 작성한 명령문의 집합이며, VSCode에서 소스 코드를 작성하고 수정할 수 있다. VSCode의 특징을 보자. 무료 사용 VSCode 기본 프로그램을 무료로 다운로드하여 사용 다중 운영체제 Windows, macOS, Linux를 지원 코드 편집 여러 프로그래밍 언어의 소스 코드를 작성하고 수정 가능 확장 기능 Extensions를 이용하여 언어 지원과 개발 도구를 추가 디버깅 지원되는 언어와 개발 환경에서 프로그램 오류를 조사 Git 통합 Git을 이용한 소스 코드 변경 관리 기능을 제공 VSCode 자체는 코드 편집기이고 프로그래밍 언어에 따라 컴파일러, 실행 환경, 개발 도구 등을 별도로 설치해야 할 필요가 있다. 만약, Java 프로그램을 개발할 때는 VSCode 외에 JDK와 관련 확장 기능이 필요하다. VSCode 무료 소스 코드 편집기 VSCode 설치 전 확인 사항 VSCo...
댓글 쓰기
자세한 내용 보기