FE개발 공부 시작: 23년 4월 10일

동기(synchronous) 현재 실행중인 코드가 끝나야 다음 코드를 실행하는 방식을 말해요! CPU의 계산에 의해 즉시 처리가 가능한 대부분의 코드는 동기적 코드구요. 계산이 복잡해서 CPU가 계산하는 데에 오래 걸리는 코드 역시도 동기적 코드에요 비동기(a + synchronous ⇒ async) 실행 중인 코드의 `완료 여부와 무관하게` 즉시 다음 코드로 넘어가는 방식 setTimeout, addEventListner 등 별도의 요청, 실행 대기, 보류 등과 관련된 코드는 모두 비동기적 코드 1. Promise 비동기 처리에 대해, 처리가 끝나면 알려달라는 ‘약속’ new 연산자로 호출한 Promise의 인자로 넘어가는 콜백은 바로 실행돼요. 그 내부의 resolve(또는 reject) 함수를 호출..

콜백 함수 다른 코드의 인자로 넘겨주는 함수. 그 제어권도 함께 위임함. 콜백 함수를 위임받은 코드는 자체적으로 내부 로직에 의해 이 콜백 함수를 적절한 시점에 실행 콜백함수를 넘겨받는 코드: forEach, setTimeout, map.. 콜백 함수의 this 콜백 함수도 함수이기 때문에 기본적으로는 this가 전역객체를 참조한다. 예외로 제어권을 넘겨받을 코드에서 콜백 함수에 별도로 this가 될 대상을 지정한 경우에는 그 대상을 참조한다. this binding: call, apply, bind 콜백 함수로 어떤 객체의 메서드를 전달하더라도, 그 메서드는 메서드가 아닌 함수로 호출해요. (그 메서드가 가리키는 함수만 전달한 것이기 때문에 메서드의 기존 객체와는 연관이 없음) addEventListe..

실행 컨텍스트 : 실행할 코드에 제공할 환경 정보들을 모아놓은 객체 실행 컨텍스트의 구성요소 : VariableEnvironment, LexicalEnvironment, ThisBindings this는 실행 컨텍스트가 생성될 때 결정돼서 즉, this를 bind한다(=묶는다) 라고 표현. 그렇기 때문에 this는 함수를 호출할 때 결정된다. 전역 공간에서의 this 전역 공간에서 this는 전역 객체(런타임 환경에 따라 브라우저 환경에서는 window, node 환경에서는 global)를 가리킴 함수, 메서드로서 호출할 때 내부에서의 this 어떤 함수를 함수로서 호출할 경우, this는 지정되지 않는다(호출 주체가 알 수 없음) 실행컨텍스트를 활성화할 당시 this가 지정되지 않은 경우, this는 ..

실행 컨텍스트란? 실행할 코드에 제공할 환경 정보들을 모아놓은 객체 자바스크립트가 어떤 실행 컨텍스트가 활성화되는 시점에 하는 일 선언된 변수를 위로 끌어올리구요 = 호이스팅(hoisting) 외부 환경 정보를 구성하구요. this 값을 설정해요. 콜 스택(call stack) 실행 컨텍스트 즉, 동일 환경에 있는 코드를 실행할 때 필요한 환경 정보들을 모아 컨텍스트를 구성하고 이것을 ‘스택’의 한 종류인 콜스택에 쌓아올립니다. 가장 위에 쌓여있는 컨텍스트와 관련된 코드를 실행하는 방법으로 코드의 환경 및 순서를 보장할 수 있어요. 실행 컨텍스트의 구성방법 전역공간 eval()함수 함수(우리가 흔히 실행컨텍스트를 구성하는 방법) // ---- 1번 var a = 1; function outer() { f..

중첩된 객체의 내부의 모든 값들을 하나하나 다 찾아서 모두 복사하는 방법 객체의 프로퍼티 중, 기본형 데이터는 그대로 복사 참조형 데이터는 다시 그 내부의 프로퍼티를 복사(재귀적 수행: 함수나 알고리즘이 자기 자신을 호출하여 반복적으로 실행) var copyObjectDeep = function (target) { var result = {}; if (typeof target === 'object' && target !== null) { for (var prop in target) { result[prop] = copyObjectDeep(target[prop]); } } else { result = target; } return result; };

Map, Set은 두 가지 다른 유형의 자료 구조. Map은 키-값 쌍을 저장하는 객체와 비슷 Set은 고유한 값을 저장하는 자료 구조 Map, Set은 모두 값 추가, 검색, 삭제 및 모든 값 제거를 수행할 수 있으며, 데이터의 구성, 검색 및 사용을 객체나 배열보다 효율적으로 처리할 수 있음 Map 각 쌍의 키와 값을 저장 객체와 달리 키로 사용할 수 있는 모든 유형을 사용할 수 있음 (?) 키가 정렬된 순서로 저장되기 때문에, 추가한 순서대로 반복할 필요가 없다 (?) // Map() 생성자를 사용하여 새로운 Map을 만듦 const myMap = new Map(); // set() 메소드를 사용하여 Map에 값을 추가 myMap.set('key', 'value'); myMap.set('one', ..

let, const let : 재할당O, 재선언X const : 재할당X, 재선언X, 초기값 필요O 화살표 함수(Arrow Function) function이나 return 키워드 없이 함수를 만드는 방법 const func = () => true; const func = (param) => { return true; }; ⭐function은 호출을 할 때 this가 정해지지만, 화살표 함수는 선언할 때 this가 정해진다. 삼항 연산자 condition ? expr1 : expr2 구조 분해 할당(Destructuring) 배열[]이나 객체{}의 속성을 분해해서 그 값을 변수에 담을 수 있게 해줌 배열 let [value1, value2] = [1, "new"]; let arr = ["value1", ..

param [compareFunction] 배열의 element 두 개를 파라미터로 입력 받음. 리턴 값 > 0이면, el1이 el2보다 앞에 오도록 정렬 리턴 값 == 0이면, el1, el2 순서를 변경하지 않음 리턴 값 a - b); 내림차순 arr.sort((a, b) => b - a); 문자열 정렬 오름차순 arr.sort(); 내림차순 arr.sort((a, b) => a == b ? 0 : a > b ? -1 : 1; ..

에러 발생 uncaught typeerror: cannot read properties of null (reading '~') 내 에러는 아니구 친구 에러 같이 본거 기록. 존재하지 않는 객체가 있을때 생기는 에러라구 함 해결 방법 shown.bs.modal(부트스트랩 모달)을 띄우면서 안에 있는 input에 focus하는 코드였는데, GetElementID로 가져오는 element가 존재하지 않아서 그런거였음. 똑바로 된 ID값을 넣어주거나, 해당코드 굳이 없어도 상관은 없을것같아 삭제하는 방식으로 해결

구문 오류(syntax error) : 코드가 실행조차 되지 않는 오류로 프로그램 실행 전에 발생 => SyntaxError 예외(exception), 런타임 오류(runtime error) : 코드 실행 중간에 발생하는 오류로 프로그램 실행 중에 발생 => TypeError, ReferenceError, RangeError 예외 처리(exception handling) : 예외가 발생했을 때 프로그램이 중단되지 않게 하는 처리 기본 예외 처리 조건문을 사용하여 예외가 발생하지 않게 만듦 고급 예외 처리 어떤 예외가 발생할지 예측하기 힘든 경우 사용 exception은 예외 객체(exception object)로 예외와 관련된 정보를 담은 객체를 의미 예외 객체의 속성 name : 예외 이름 messag..