코르시카's Blog

■ Promise chaining > 효율적이기는 하나, 좀 난잡해질 수 있음 Promise 생성이후 return 하는 등의 일련의 과정이 typing이 많다 계속 중첩하면 사실상 callback hell이랑 생긴게 다른게 없어질 정도! > 간편한 api async / await을 통해 동기 형식으로 Promise 비동기를 쉽게 구현할 수 있게 함 ( synthatic sugar - like class in JS ) 내글 참조 : korshika.tistory.com/99?category=955367 JS (ES6 & above) - Promise ■ Promise를 사용할 때 개념 1) State : request 관련 heavy한 work를 수행중인지, 아니면 끝난지 여부 - pending → ful..

■ Promise를 사용할 때 개념 1) State : request 관련 heavy한 work를 수행중인지, 아니면 끝난지 여부 - pending → fulfilled or rejected 2) Promie Object 의 Producer & Consumer - producer : 원하는 데이터 생산 - consumer : 생산된 데이터 사용자 ■ Producer - new Promise class를 이용하여 생성 - resolve, reject callback을 인자로 받아서 사용 - executor 부분은 바로 run 하므로 network 통신은 event 등에 엮으려면, 주의해햐 함 // when Promise is created, the executer runs Automatically cons..

■ 왜 필요한가? - 비동기적 통신 with server - 어떤 작업의 완료 이후, 수행되어야 하는 작업을 stack에 예약하여 실행 ...등등 ■ 비동기 예시 - setTimeout > setTimeout은 browser API - stack에 function을 저장해놓고, 지정 시간(ms) 이후 실행 - callback으로 실행할 함수를 전달 console.log('1'); setTimeout(function(){ // setTimeout(() => { arraow도 가능 console.log('2'); }, 1000); // 1초 뒤 console.log('3'); >>> 1 3 2 ■ 콜백 함수의 종류 1) Synchronous callback - 동기적 실행 - 바로 함수를 실행한다는 의미 c..

■ HTTP / HTTPS 통신 기본 내글 참조 : korshika.tistory.com/49 HTTP 통신 기본 & Rest API 참조 : velog.io/@sdc337dc/%EC%9B%B9-%EA%B0%9C%EB%85%90-Http-%ED%86%B5%EC%8B%A0 velog.io/@doomchit_3/Internet-HTTP-%EA%B0%9C%EB%85%90%EC%B0%A8%EB%A0%B7-IMBETPY [Internet] HTTP? 개념잡기 통신과정-IMBE.. korshika.tistory.com > 다음과 같은 req / res의 기본 > hypertext는 markup 으로 작성된 text 포함하여, media등도 포함 ■ JS에서 서버와의 통신방법 > Form, AJAX, XHR, fet..

■ Join > 구분자 not essential > string으로 바꿔준 후 구분자를 사이에 넣어서 string을 return { const fruits = ['apple', 'bannana', 'orange']; const result = fruits.join(', '); console.log(result); } >>> apple, bannana, orange ■ Split > 구분자 essential (string OR RegEx) > limit(Optional)으로 몇개까지 나눌지 지정, limit 이후는 포함 안하고 return > 구분자로 string을 나누어서 return 해줌 { const fruits = '🍎,🥝,🍌,🍒'; const result = fruits.split(',', 2);..

■ Object - literal / constructor > Object 생성은 literal / constructor 방식이 있음 여러 데이터를 변수에 담는 것 보다 container로 Object를 사용하여 좀더 관련있고 효율적으로 관리 가능 - new 키워드 참조 : korshika.tistory.com/67 // 1. Literals and property function print(person) { console.log(person.name); console.log(person.age); } // Object로 save // 괄호 방식 : Object literal const hojune = {name : 'hojune', age: 4}; hojune.hasJob = true; // dynam..

■ 사용 경우 > Object constructor, Class 선언, 함수 새로 할당 ■ 사용 이유 > literal 방식과 다르게, 유사한 객체를 여러번 재사용 해야할 때 유용한 방식 ■ 사용 방식 > 생성자 방식의 new / this의 관계 추가 참조 : Link > new 키워드 사용시 동작 순서 new 키워드 사용 1) 빈 객체를 생성하여 this에 할당( Object literal ) 2) 함수 본문을 실행하고, 함수 내부 동작에 따라 this(함수 객체)에 프로퍼티를 추가해 this를 수정 (this binding) 3) (1)에서 만들어진 객체에 _proto_라는 property를 추가. Constructor 함수의 prototype 객체를 의미. 4) this를 반환 (때문에 new 키워..

■ Class 1) 정의 프로그램안에 객체로써 서로 관련이 있는 property(fields)와 method를 가지고 특정 기능을 수행할 수 있는 대상 ※ dataclass : method는 없이 data property 만 가지고 있는 class class persion{ ... name; age; speak(); ... } 2) 세부 내용 (a) incapsulation : 접근가능 / 접근 불가능한 datatype으로 구분 보통 객체 메써드만으로 접근 가능한 방식으로 구현하는게 맞음 (b) 상속 : 부모의 method, property를 상속 (c) 여러가지 class( meta class 등 )이 존재 > 기본적으로 template / blueprint 와 같은 역할 > 객체 생성시 메모리에 적재..

■ Js This의 범위 1) 영향을 주는 것 (a) 엄격 / 비엄격 엄격 / 비엄격은 global 또는 block 안에서 각각 선언할 수 있음 (b) 함수의 호출방식 (c) 화살표 함수 사용 여부 2) this의 정의 실행 컨텍스트( global, function, eval )에 따라 달라짐 또한 엄격 / 비엄격에 대해서 다음과 같음 비엄격 모드 엄격 모드 this 항상 객체 그 어떤 값도 가능 ※ 실행 컨텍스트이므로, runtime때 dynamic하게 바뀜! ■ 문맥 1) 기본 바인딩 - 전역 문맥 global execution context, this는 엄격 / 비엄격 모드 관계 없이 전역 객체 참조 // 웹 브라우저에서는 window 객체가 전역 객체 console.log(this === wind..

■ Lexical Scope 1) 정의: 함수가 함수 밖에서 참조하는 변수는 함수의 선언 영역에서 참조가능한 global 변수를 참조 === 함수의 선언 영역에 따라 상위 스코프가 결정(함수의 호출이 결정하지 않음) var number = 1; function a() { var number = 10; b(); } function b() { console.log(number); } a(); // 1 b(); // 1 ※ 함수의 호출에 따른 결정방식을 따르면 Dynamic Scoping이라고 함 > Java, C 등 요즘 언어는 lexical scope 2) 상위스코프의 범위 > 찾을 때 까지 상위 범위로 확장 ( 지역 scope에서 못찾으면 parent 상위 scope으로 확장 ) let name = "C..