본문 바로가기

공부

(171)
프로미스 프로미스는 자바스크립트에서 비동기 처리를 위한 패턴입니다. 최초 자바스크립트는 비동기 처리를 위해 콜백 패턴을 이용하였습니다. 문제점으로 가독성이 나쁘고, 비동기 처리 중 에러 처리가 어려우며 여러 개의 비동기 처리가 어려웠습니다. 콜백 헬이라는 문제도 발생하였지만, 가장 큰 문제점은 에러 처리의 한계가 있다는 점으로 느껴집니다. ES6에서 비동기 처리를 위한 프로미스 패턴이 도입되었습니다. // 프로미스 생성 const promise = new Promise((resolve, reject) => { // Promise 함수의 콜백 함수 내부에서 비동기 처리를 수행한다. if (/* 비동기 처리 성공 */) { resolve('result'); } else { /* 비동기 처리 실패 */ reject('..
[JS]프로토타입 자바스크립트는 명령형, 함수형, 프로토타입 기반의 객체지향 프로그래밍 언어입니다. 대표적인 차이인 클래스 기반의 객체지향 프로그래밍과 다르게 '프로토타입' 기반의 객체지향 프로그래밍이며 자바스크립트를 이루고 있는 모든 것은 거의 객체입니다. 객체지향 프로그래밍이란, 실세계의 실체를 속성을 통해 인식하거나 구별하는 철학적인 사고를 프로그래밍에 접목하였습니다. 특정한 속성을 추상화하여 필요한 속성만을 찾아냅니다. 객체는 상태 와 동작을 논리적인 단위로 묶는 자료구조입니다. 객체지향 프로그래밍의 장점이자 특징 중 하나인 상속은 프로퍼티, 또는 메서드를 다른 객체가 받아서 사용할 수 있는 것입니다. 프로토타입 객체를 통해 상속을 구현하며 프로토타입이란, 어떠한 객체의 '부모'(상위) 객체 역할을 하는 객체입니다..
배열안의 원소의 합을 반복문을 사용하지 않고 구하기 const array = [1,2,3,4,5,6,7,8,9,10] 1~10까지의 연속된 숫자가 존재한다고 가정합니다. array의 합은 몇일까요? const array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; function arraySum(array) { let sum = 0; for (let i = 0; i (su..
Cold observalbe Hot observable Cold observable 옵저버블은 구독하기 전까지는 동작하지 x -> 이런특성을 Cold observable RxJs 옵저버블은 기본적으로 Cold observable Cold observable을 옵저버가 구독하면 ,처음부터 동작하기 시작 -> 그후 방출하는 모든 데이터 스트림 받을 수 있음 옵저버블을 구독하는 옵저버는 하나 ↑ 시점상관 x 모든 데이터를 빠짐없이 받음 -모든 옵저버는 자신만을 위해 독립적으로 실행하는 옵저버블 갖음 (유니 캐스트) Hot observable 구독과 상관x 데이터 스트림 방출 시간경과해서 옵저버블 구독하면 앞부분 구독 x 중간부분부터 구독 Subject를 옵저버블이면서 옵저버, 모든 옵저버에게 부수 효과가 있다. - 멀티 캐스트 유니캐스트 vs 멀티캐스트 일대일 v..
다시 값 다루기 프로그래밍을 하면서 가장 많이하는일 = 값 다루기 = 리터럴 변수 변수, '하나의 값을 저장하는 메모리공간에 붙힌이름, 또는 메모리공간 그자체' 식별자 프로그래밍 언어에서 다른것과 구별하기위한 것? 변수명,함수명,클래스명 등 식별자 규칙에서 띄어쓰기가 안되는데 const obj ={ name: 'bs' age : '27' name hello : hi age-hi: hi } obj.name obj.age obj.['name hello'] 이렇게 읽기 위함 obj.['age-hi'] 식별자 명명규칙에 해당안되는 키값을 읽을때 필요하다 메소드 동적으로 (정적인 데이터를 바꾸고 싶을때?) 간단하게는 객체내에 함수, 또는 객체에서 내부 데이터를 동적으로 할떄 데이터에 관련된 동작을 갖고있는 함수 (객체..
생명주기 컴포넌트 , 디렉티브는 생명주기를 가짐. 생명주기란 컴포넌트와 디렉티브가 생성되고 소멸되는 여러 과정. angular는 생명주기를 기반, 생명주기 훅 메소드를 구현해야함 생명주기 메소드는 인터페이스 형태 (가장흔한게 OnInit) 단 OnInit은 추상메소드 생명주기는 동일한 이름의 인터페이스가 존재 ng 접두어를 붙혀 추상메소드를 구현 컴포넌트 ,디렉티브도 클래스 -> 컨스트럭터의 호출에 의해 생성 -> Angular는 특별한 시점에 구현된 생명주기 훅 메소드 호출 )ngOnChange -> 부모, 자식 입력프로퍼티로 바인딩한 값이 초기화 또는 변경되었을 때, 실행 컴포넌트에 입력프로퍼티가 없다 -> 호출필요 xx ngOnit 전에 입력프로퍼티 존재, 최소 1회호출, 원시타입값 재할당, 객체의 참조가 ..
scroll 복습 scroll 복습 중요한것 window의 객체다 window.pageYoffset console.log(window.pageYoffset)하면 계속 0이다. scroll이라는 이벤트는 윈도우가 발생시킨다 제일익숙한 버튼이벤트는 버튼이 발생시킨다 window.onscroll. = function () { 함수정의 } window.onscroll. = function () { } window.scrollTo() 인수 x좌표 y좌표 widnwo scroll차이 인수 = 객체 객체에 '세개'가 들어감 angular scroll은 '디렉티브'를 해보기 위함이였음 @HostListener()을 사용해야함 데코레이터(이벤트내용) 이벤트핸들러(){ }
반응형 프로그래밍 반응형 프로그래밍은, 비동기 데이터 스트림에 기반을 둔 프로그래밍 패러다임, 데이터 스트림이란 연속적인 데이터의 흐름. 리액티브 프로그래밍은 모든것을 데이터의 '흐름'으로 본다. 데이터 스트림을 생성하고 방출하는 객체 = 옵저버블, 옵저버블이 방출한 노티피케이션을 획득하여 사용하는 객체 옵저버 데이터 소비자인 옵저버는 데이터 생산자 옵저버블을 구독 옵저버 -> 옵저버블 (상태 관찰) Rxjs 자바스크립트 라이브러리 리액티브 프로그래밍 특징