Frontend 35

[TypeScript] 7. 타입 조작하기

인덱스드 엑세스 타입인덱스를 이용해 다른 타입내의 특정 프로퍼티의 타입을 추출하는 타입 인덱스드 엑세스 타입은 객체, 배열, 튜플에 사용할 수 있다. 1. 객체 프로퍼티의 타입 추출하기 사용 전interface Post { title: string; content: string; author: { id: number; name: string; };}const post: Post = { title: "게시글 제목", content: "게시글 본문", author: { id: 1, name: "이정환", },};function printAuthorInfo(author: { id: number; name: string }) { console.log(`${author.id}..

Frontend/TypeScript 2025.01.29

[TypeScript] 6-2. 제네릭 활용

제네릭 인터페이스인터페이스에 타입 변수를 선언해 사용 interface KeyPair { key: K; value: V;}키페어를 저장하는 객체의 타입을 제네릭 인터페이스로 정의다음과 같이 변수의 타입으로 정의하여 사용let keyPair: KeyPair = { key: "key", value: 0,};let keyPair2: KeyPair = { key: true, value: ["1"],};변수 keyPair의 타입으로 KeyPair를 정의그 결과 K에는 string, V에는 number 타입이 각각 할당되어 key 프로퍼티는 string 타입이고 value 프로퍼티는 number 타입인 객체 타입이 된다.따라서 값으로 해당 타입의 객체를 저장변수 keyPair2의 타입으로 KeyPair를..

Frontend/TypeScript 2025.01.28

[TypeScript] 6-1. 제네릭이란?

제네릭이란함수나 인터페이스, 타입 별칭, 클래스 등을 다양한 타입과 함께 동작하도록 만들어 주는 타입스크립트의 놀라운 기능 중 하나 1. 제네릭이 필요한 상황 1) 제네릭 사용 전다양한 타입의 매개변수를 받고 해당 매개변수를 그대로 반환하는 함수가 하나 필요하다고 가정다양한 타입의 매개변수를 제공받아야 하기 때문에 매개변수 value의 타입을 일단 any 타입으로 입력func 함수에 number 또는 string 타입을 인수로 전달해도 any타입으로 추론하는 문제점 발생// 제네릭 사용 전function func(value: any) { return value;}let num = func(10);// any 타입let str = func("string");// any 타입❗️원하는 것인수로 Number..

Frontend/TypeScript 2025.01.28

[JavaScript] 자바스크립트의 클래스

자바스크립트의 클래스클래스는 동일한 모양의 객체를 더 쉽게 생성하도록 도와주는 문법 // 사용 전 : 코드 중복let studentA = { name: "이정환", grade: "A+", age: 27, study() { console.log("열심히 공부 함"); }, introduce() { console.log("안녕하세요!"); },};let studentB = { name: "홍길동", grade: "A+", age: 27, study() { console.log("열심히 공부 함"); }, introduce() { console.log("안녕하세요!"); },}; 1. 클래스 선언하기 1-1) 클래스 선언class Student {} 1-2) 필드..

Frontend/JavaScript 2025.01.27

[TypeScript] 5. 클래스

자바스크립트의 클래스란?2025.01.27 - [Frontend/JavaScript] - [JavaScript] 클래스 [JavaScript] 클래스자바스크립트의 클래스클래스는 동일한 모양의 객체를 더 쉽게 생성하도록 도와주는 문법 // 사용 전 : 코드 중복let studentA = { name: "이정환", grade: "A+", age: 27, study() { console.log("열심히 공부 함");ayeongjin.tistory.com  타입스크립트의 클래스타입스크립트에서는 클래스의 필드를 선언할 때 타입 주석으로 타입을 함께 정의해주어야 한다.타입 주석으로 타입을 정의해주지 않으면 함수 매개변수와 동일하게 암시적 any 타입으로 추론 (엄격한 타입 검사 모드(strict 옵션이 true로 ..

Frontend/TypeScript 2025.01.27

[JavaScript] 자바스크립트의 변수 const, let, var

자바스크립트의 변수 자바스크립트의 변수 선언var, let, constvar는 함수 스코프와 호이스팅의 특성을 가지며, 글로벌 객체의 속성으로 추가된다.let과 const는 블록 스코프를 가진다.const는 재할당과 재선언이 불가능하다. 1. varES6 이전에 주로 사용되던 변수 선언 키워드로, 함수 스코프를 가진다.(이는 var로 선언된 변수가 함수 내에서만 지역 변수로 작동하고, 함수 외부에서는 전역 변수로 작동한다는 것을 의미)var로 선언된 변수는 글로벌 객체의 속성으로 추가된다.브라우저 환경에서는 window 객체가 글로벌 객체이며, var로 선언된 변수는 window 객체의 속성으로 추가된다.(이는 var로 선언된 변수가 전역 스코프에서 접근 가능하다는 것을 의미) 2 let & constE..

Frontend/JavaScript 2025.01.26

[TypeScript] 4. 인터페이스

인터페이스타입 별칭과 동일하게 타입에 이름을 지어주는 또 다른 문법interface Person { name: string; age: number;}이렇게 정의한 인터페이스를 타입 주석과 함께 사용해 변수의 타입을 정의할 수 있다.const person: Person = { name: "이정환", age : 27};이렇듯 인터페이스는 타입 별칭과 문법만 조금 다를 뿐 기본적인 기능은 거의 같다고 볼 수 있다. 1. 선택적 프로퍼티인터페이스에서도 동일한 방법으로 선택적 프로퍼티 설정이 가능하다.interface Person { name: string; age?: number;}const person: Person = { name: "이정환", // age: 27,}; 2. 읽기 전용 프로퍼티..

Frontend/TypeScript 2025.01.26

[JavaScript] 호이스팅과 콜백함수

호이스팅(hoisting)프로그램에서 변수나 함수를 호출하거나 접근하는 코드가 함수 선언 코드보다 위에 있음에도 불구하고, 마치 선언 코드가 위에 있는 것처럼 동작하는 자바스크립트만의 기능 이 코드에서 함수 선언문이 함수 호출보다 아래에 있지만 오류가 발생하지 않는다.func();function func() { console.log("hello"); // hello} 호이스팅이 발생하는 이유자바스크립트는 코드를 실행하기 전에 준비 단계를 거치는데 준비 단계에서 중첩 함수가 아닌 함수들은 모두 찾아 미리 생성해 둔다.자바스크립트 코드는 이런 준비 단계를 거친 다음에 실행되므로 함수 선언 코드를 호출보다 늦게 작성해도 자연스럽게 호출할 수 있다.자바스크립트의 독특한 특징의 하나인 호이스팅은 코드 내에서 ..

Frontend/JavaScript 2025.01.25

[TypeScript] 3. 함수와 타입

함수의 타입을 정의하는 방법자바스크립트 : 어떤 매개변수를 받고, 어떤 결과값을 반환하는지 설명 타입스크립트 : 어떤 타입의 매개변수를 받고, 어떤 타입의 값을 반환하는지 설명// 함수를 설명하는 가장 좋은 방법// 어떤 매개변수를 받고, 어떤 결과값을 반환하는지 설명function func(a: number, b: number): number { return a + b;}함수의 반환값 타입은 자동으로 추론되기 때문에 다음과 같이 생략 가능function func(a: number, b: number) { return a + b;}1. 화살표 함수 타입 정의하기화살표 함수의 타입 정의 방식은 함수 선언식과 동일const add = (a: number, b: number): number => a + b..

Frontend/TypeScript 2025.01.25

[PWA] PWA란?

PWA란?웹과 모바일 앱 기술의 장점을 결합한 웹 기술로, 모바일 웹에서 네이티브 앱과 유사한 사용자 경험을 제공하는 웹 애플리케이션 (일반 웹사이트와 같이 웹에서 실행되지만 앱처럼 사용이 가능) 1. 웹 앱과 네이티브 앱 1-1) 웹 앱웹은 URL을 통해 쉽게 접근할 수 있다. 별도의 설치가 필요업식 때문에 어떤 장치를 사용하던 쉽게 접근할 수 있다.웹 앱(Web Apps)은 HTML, CSS, Javascript 등을 사용해 만들어진 애플리케이션이다. 모바일 웹과 네이티브 앱을 결합하여, 모바일 웹의 특징과 함께 네이티브 앱의 장점을 갖는다. 설치 없이 URL을 통해 브라우저로 접근이 가능하고, 홈 화면에 바로가기 아이콘을 추가하여 네이티브 앱처럼 사용할 수 있다.하지만 네트워크가 연결되어 있지 않은..

Frontend/PWA 2025.01.25