Programing Language/JS & TS 4

RxJS 파이프라인 연산자

pipe RxJS의 pipe 함수는 여러 개의 연산자를 함께 사용하여 복잡한 데이터 흐름을 쉽게 관리할 수 있도록 도와줍니다. pipe 함수는 Observable에 메서드 체인으로 연산자를 적용하고, 최종적으로 새로운 Observable을 반환합니다. 이 방법을 통해, 입력 Observable로부터 출력 Observable까지 데이터가 어떻게 변형되고 처리되는지 명확하게 볼 수 있습니다. import { interval } from 'rxjs'; import { filter, map, take } from 'rxjs/operators'; const observable = interval(1000).pipe( filter(value => value % 2 === 0), // 짝수만 통과 map(value ..

RxJS 설명과 Observable 예제

RxJS RxJS는 특히 비동기 이벤트를 처리할 때 강력하며, 복잡한 데이터 스트림을 다루어야 하는 상황에서 꼭 필요하다고 할 수 있습니다. 이러한 상황은 주로 실시간 데이터 처리, 사용자 입력 처리, HTTP 요청 처리 등에 해당됩니다. RxJS를 사용하면 이벤트 스트림을 쉽게 생성, 변환, 조합 및 구독할 수 있으며, 이는 복잡한 비동기 코드를 보다 선언적이고 관리하기 쉬운 형태로 만들어줍니다. 예제: 실시간 검색어 기능 구현 다음은 사용자가 입력 필드에 텍스트를 입력할 때마다 검색어를 실시간으로 서버에 쿼리하고 결과를 받아 표시하는 기능을 구현한 예제입니다. 이 예제는 사용자 입력 처리와 HTTP 요청을 동시에 다루는 방법을 보여줍니다. RxJS를 사용하면 이런 유형의 상호작용을 효과적으로 구현할 ..

타입스크립트 스프레드 연산자, 나머지 매개변수(...), 언더스코어(_)

TypeScript에서 .., ..., _ 같은 기호들은 각각 다른 용도로 사용됩니다. 여기서 ..는 TypeScript 문법에 직접적으로 해당하는 기호가 아니지만, ... (스프레드 연산자 또는 나머지 매개변수)와 _ (일반적으로 무시되는 변수 또는 속성을 나타내는 데 사용)는 TypeScript 및 JavaScript에서 중요한 역할을 합니다. ... (스프레드 연산자 또는 나머지 매개변수) 스프레드 연산자 (Spread Operator): 배열이나 객체의 모든 요소를 개별 요소로 확장하거나, 함수 호출 시 인자 리스트로 전개하는 데 사용됩니다. 배열 또는 객체 리터럴 내부에서 사용할 수 있습니다. let numbers = [1, 2, 3]; let moreNumbers = [...numbers, 4..

TypeScript 자료형

1. Primitive type : string, number, boolean 숫자는 모두 number으로 사용 정수, 소수 간 연산 시에도 같은 자료형이기 때문에 형변환 필요 없음 primitive type도 객체로 취급하나 number는 string으로 자동 형변환 되지 않음 boolean은 스트링과 결합시 자동형 변환됨 number + string 불가 number + boolean 불가 string + boolean 가능 const t = { a1 : "1", a2 : 1, a3 : 0.1, a4 : true } console.log(t.a2+t.a3) // 1.1 console.log(t.a1+t.a2.toString()) // "11" console.log(t.a1+t.a3.toString()..