fetch API ■ Fetch API는 HTTP 파이프라인을 구성한느 요청과 응답 등의 요소를 JavaScript에서 접근하고 조작할 수 있는 인터페이스를 제공합니다. ■ Fetch API가 제공하는 전역 fetch()메서드로 네트워크의 리소스를 쉽게 비동기적으로 취득할 수도 있습니다. ■ 서비스 워커에서도 쉽게 사용할 수 있는 프로미스 기반의 개선된 대체제입니다. ■ CORS를 포함한 고급 개념을 HTTP확장으로 정의합니다. fetch() ■ fetch()는 첫번째 인자로 URL을 받고, 두번째 인자로 옵션 객체를 받고, Promise 타입의 객체를 반환합니다. ■ Promise타입의 객체를 반환하기 때문에 API호출이 성공하면 응답객체(response)를 resolve하고, 실패했을 경우에는 예외(..
콜백함수란? callback = call(부르다) + back(되돌아오다) 즉, 정의된 함수의 참조를 통해 나중에 (back)호출(call)하는것을 의미합니다. 콜백 함수는 다른 코드의 인자로 넘겨주는 함수입니다. 인자로 넘겨준다는 얘기는 콜백함수를 넘겨받는 코드가 있다를 의미하고 인자를 넘겨줌으로써 제어권도 함께 위임한다고 할수 있습니다. 콜백 함수를 위임 받은 코드는 자체적으로 내부 로직에 의해 이 콜백함수를 적절한 시점에 실행하게 됩니다. var count = 0; var count = 0; var Func = function() { console.log(count); if(++count > 4) clearInterval(timer); }; var timer = setInterval(Func, 30..
프로퍼티에 null값이 들어있다고 뜹니다. // 자바스크립트 let container = document.querySelector("#container") // html html에서 id를 준다음 그 id를 가져와 초기화 해놓은 상태이지만 container에서는 계속 null인 상태로 인식하고 append메소드를 호출 하고 있기 때문에 발생 한것이였습니다.. 이 문제가 생기는것은 스크립트가 실행되는 시점에 HTML 문서가 아직 로드되지 않았기 때문에 발생하거나 해당 요소의 id가 존재하지 않아서 발생할수 있다고 합니다. 위 코드에선 id가 들어가는것은 문제 될 것이 없어보여 script를 문서가 다 읽히고 로딩되게 body태그 안쪽의 최 하단에 위치하게 하였더니 해당 id를 읽어 작업을 완료 하였습니다.
실행 컨텍스트 • 자바 스크립트가 실행 될 때 생성되는 하나의 실행 단위입니다. • 자바 스크립트는 자신만의 독특한 과정으로 신행 컨텍스트를 만들고 그 안에서 실행이 이루어 집니다. • 이 실행 컨텍스트는 자신만의 유효 범위(Scope - 스코프)를 갖는데 이 과정에서 클로저를 구현할 수 있습니다. • 실행할 코드에 제공할 환경 정보들을 모아놓은 객체입니다. 실행 컨텍스트의 개념 실행 컨텍스트를 이해하려면 콜 스택(call stack)이라는 개념이 필요합니다. 콜스택은 함수를 호출할 때 해당 함수의 호출 정보가 차곡차곡 쌓여있는 스택을 말합니다. 예를 들어서 빠저 나올수 없는 통로에 짐을 하나씩 넣습니다. 그렇게 되면 가장 나중에 들어간 짐이 가장빨리 나오게 되고 제일 먼저 들어간 짐이 가장 나중에 나오..
여러 값을 하나의 변수에 저장하는 자료 구조입니다. 동일한 변수명에 여러 개의 값을 담을 수 있으며 각 요소는 인덱스를 사용하여 접근할 수 있습니다. 배열의 생성은 배열[ ]안에 숫자, 문자를 넣어 배열을 생성할수 있습니다. let weekday = ["월요일","화요일","수요일","목요일","금요일"]; 배열의 값을 넣지 않고 크기만 지정하고 싶다면 배열을 생성한다는 new Array()안에 해당하는 크기만 넣어 생성할수 있습니다. 또한 빈 배열을 생성후 배열값을 입력할수도 있습니다. let weekday = new Array(5); let weekday = [,,,,]; weekday[0] = '월' weekday[1] = '화' weekday[2] = '수' weekday[3] = '목' week..
Java에서의 this, Python에서의 self는 명확하게 현재 인스턴스 자신을 나타냅니다. 객체 내에서 this를 씀으로써 자신의 인스턴스 변수나 함수에 접근을 할수가 있습니다. 하지만 JavaScript에서의 this는 실행 컨텍스트에 따라 다르게 동작합니다. 함수가 어떻게 호출되었느냐에 따라 this의 값이 동적으로 결정됩니다. 또한 일반적인 함수에서 this는 호출한 객체를 나타내며, 화살표 함수에서는 함수가 생성될 때 상위 스코프의 this를 유지합니다. this란?? 함수가 호출되는 시점의 실행 컨텍스트(Execution Context)입니다. JavaScript의 실행 컨텍스트는 실행할 코드에 제공할 환경 정보들을 모아놓은 객체 입니다. 즉, 함수를 실행하는 환경(호출하는 방법, 환경)이..
구조 분해 할당(Destructuring Assignment)이란? 배열 또는 객체의 구조를 분해하여, 그 값(분해된 속성)을 개별 변수에 담는 표현식을 의미합니다. 배열 구조 분해 초기화된 배열에서 값을 가져오려면 해당 값이 있는 인덱스에 접근해 가져와야 사용을 할수 있습니다. const arr = [1, 2, 3, 4, 5]; const firstvalue = arr[0]; const secondvalue = arr[1]; const thirdvalue = arr[2]; console.log(firstvalue, secondvalue, thirdvalue); // 1 2 3 위의 방법을 간단하게 해결할수 있는 방법이 있습니다. 배열에서 변수명을 선언해준뒤 arr의 값을 차례대로 할당받으면 됩니다. c..
화살표 함수란? 화살표 함수는 함수표현식보다 단순하고 간결한 문법으로 함수를 만드는 것입니다. 화살표 함수는 아래 함수처럼 문법의 생김새를 차용하여 지어졌습니다. let func = (arg1,arg2, ...argN) => expression 위 함수를 좀더 알아보기 쉽게 하자면 let add = (a, b) => a + b; 이렇게 할수가 있습니다. 말로 풀어 설명하면 add를 호출하면 a와 b의 인자 값을 받아와서 더한뒤 그값을 리턴한다입니다. 즉, 위 화살표 함수는 아래의 let add = function(a, b){ return a + b; } 이 함수의 축약형이라고 볼수가 있습니다. 훨씬 간단하고 알아보기 쉽게 함수를 만든 것입니다. 화살표 함수의 선언방법 1. 매개 변수가 한 개인 경우에는,..