Hello_coding

들어가기에 앞서 , Event Flow 란 ? 이벤트가 발생되면 누가 먼저 이벤트를 실행시켜야 하나? 에대한 답이라 할 수 있다. 이벤트를 실행시키기 위한 흐름을 말한다. 여기서 propagate라는 단어가 등장한다. 뜻을 살펴보면 전파하다 라는 뜻이다 . 즉 여기선 이벤트가 발생되었을때 이벤트가 전파되는 과정을 알아보겠다. 한가지 더 알아두어야 할 단어는 event.target 그리고 event.currentTarget이다. event.target : 이벤트가 발생한 그 지점 ! 즉 곧 보여드릴 예제에선 div를 가리킨다. event.currentTarget : 이벤트 리스너가 연결된 요소 , 즉 예제에선 흐름에 따라 html,body가 된다. 🚀 Capture phase = propagate up 가..

자기참조변수인 this 에 대해 알아보자 this ? - 자신이 속한 객체 OR 자신이 생성할 인스턴스를 가리키는 자기 참조 변수 - this 바인딩은 함수 호출 방식에 의해 동적으로 결정 - this는 코드 어디에서도 참조 가능 Q. this를 왜 사용할까요 ? 생성자 함수를 예로 들자 . 생성자 함수 내부에 프로퍼티 , 또는 메서드를 추가하기 위해 자신이 생성할 인스턴스를 참조할 수 있어야한다. 하지만 아직 생성이 되지 않았기 때문에 자신이 생성할 인스턴스를 가리키는 식별자를 알 수 없다. 이때 this를 이용하는것이다! Q. this 바인딩은 뭐죠 ? 바인딩이란 식별자와 값을 연결하는 과정을 의미한다. 따라서 this 바인딩이란 this(키워드지만 식별자 역할)가 가리킬 객체를 바인딩 하는것이다. ..

들어가기에 앞서, MDN에서 클로저의 정의를 보자 . " 클로저 함수는 함수와 그 함수가 선언된 렉시컬 환경과의 조합이다. " 클로저를 알기 전 '렉시컬 스코프' 에 대해 알아보자. 🚀 렉시컬 스코프 (정적 스코프) - 자바스크립트 엔진은 함수를 어디서 호출했는지가 아니라 함수를 어디에 정의했는지에 따라 상위 스코프를 결정한다. - 함수가 호출된 위치는 상위 스코프 결정에 어떤 영향도 주지 않는다. - 함수의 상위 스코프는 언제나 자신이 정의된 스코프다. ( 함수가 호출될 때마다 함수의 상위 스코프를 참조할 필요가 있기 때문) 🚀 클로저 - 폐쇄된 공간 안에 데이터에 접근하기 위한 테크닉 - 내부함수의 외부 함수 접근(권한) 테크닉 - 변수 은닉과 메모리 효율, 코드효율을 극대화 하기위해 사용 const..

🚀구조 분해 할당이란 ? - 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JS 표현식이다. - 디스트럭처링 할당이라고도 부른다. - 구조 분해 할당 구문이 없던 ES5에선 다음과 같이 할당 하였다. var categories = ['IT', 'life', 'TIL']; // 할당을 해주고자 하는 배열 var category1 = categories[0]; var category2 = categories[1]; var category3 = categories[2]; console.log(category1, category2, category3); // IT life TIL 위 코드와 같이 배열의 인덱스를 활용하여 요소에 접근하는 방법을 사용했다. 하지만 n개를 할당해줄시 n줄의..

🚀 in ? in 연산자는 객체 내 특정 프로퍼티가 존재하는지 여부를 확인한다. const person ={ name:'delina', age:24 }; console.log('name' in person); //true console.log('address' in person); //false name 프로퍼티는 person객체에 있으므로 true, address 프로퍼티는 person객체에 없으므로 false 🚀 for in ? 객체의 모든 프로퍼티를 순회하며 열거하기 위해 사용한다. const person ={ name:'delina', age:24 }; for (const key in person){ console.log(key +':'+person[key]); } - 이때 기본적으로 key값이 ..

🚀 배열생성 [방법1] 객체와 마찬가지로 가장 일반적이고 간편한 방식은 배열 리터럴을 사용하여 생성하는 것이다. //방법1 const arr1 = [1,2,3]; console.log (arr1.length); //3 //방법2 const arr2 = []; console.log(arr2.length) //0 //방법3 const arr3 = [1, , 3]; //희소배열 console.log(arr3.length) //3 - 배열 리터럴은 0개이상 요소를 쉼표로 구별하며 , [] 로 묶는다. - 방법3에서의 arr3을 희소배열 (length가 실제요소개수보다 큰 배열)이라 한다. (하지만 희소배열은 사용하지 않는것이 좋다. 배열과 개념에 맞지 않으며 성능에도 안좋은 영향이 있기 때문) [방법2] Arr..

🚀 splice() - 배열 내에 새로운 요소의 추가 가능하다. - 배열 내 특정 요소를 제거 할 수 있다. - 원본 배열이 변경된다. [사용법] 배열.splice(요소를 위치시키고자 하는 인덱스, 제거할 요소의 개수, 배열에 추가할 요소) 만약 배열 내 새로운 요소를 추가만 하고싶다면 2번째 인덱스에 0을 사용하면 된다. const cafe = ['coffee', 'cake', 'tea', 'cookie'] cafe.splice(1, 0, 'bread') cafe //1번째 인덱스에 bread를 추가한 cafe 배열 //expected output: ['coffee', 'bread', 'cake', 'tea', 'cookie'] 특정요소를 삭제하고 싶다면, 다음과 같이 사용하면 된다. 배열.splice..

🚀 String - 문자열타입 - 0개이상 16비트 유니코드 문자의 집합 표현가능 - 작은따옴표 , 큰따옴표 , 백틱으로 감싸서 표현 string = 'hi' ; //작은따옴표 string = "hi" ; //큰따옴표 string = `hi` ; //백틱 Q . 만약 따옴표로 감싸지 않는다면 ? - 식별자로 인식한다. 🚀 표현식 삽입 - 표현식을 삽입하려면 ${ } 으로 표현식을 감싼다. var food = "apple"; var drink = "juice"; console.log(`food = ${food} drink = ${drink}`); [결과] 🚀 불리언 타입 - 불리언 타입값은 참, 거짓을 나타내는 true,false가 있다. - 조건문에서 자주 사용한다. 🚀 undefined 타입 - var..

🚀 원시자료형? - 변경 불가능한 값 , 즉 한번 생성된 원시값은 읽기 전용값으로서 변경할 수 없다. (주의 ! : 원시값 자체를 변경할 수 없다는 것이지 변수 값을 변경 할 수 없다는 뜻이 아님) - 불변성을 갖는 원시 값을 할당한 변수는 재할당 이외에 변수 값을 변경할 수 있는 방법이 없다. - 값의 의한 전달 [ 원시자료형 종류 (7가지) ] typeof 'hello world' // String typeof 100 // Number typeof NaN // Number typeof true // Boolean typeof undefined // undefined typeof null // Object string, number (en-US), bigint (en-US), boolean, undef..

🚀 IR(Image Replacement) 기법이란? - 디자인적으로는 보이지 않지만 스크린리더나 브라우저를 위해 정보를 전달하는 텍스트를 숨기는 방법 1. 카카오(다음)에서 사용하는 방식 - pc용 | 사용된 이미지내 의미있는 텍스트의 대체텍스트를 제공할때 사용 | 스크린리더가 읽음 (background-img에서 alt값을 줄 수 없으니 class 사용!) .ir_pm{ display:block; overflow:hidden; Font-size:1px; line-height:0; text-indent:-9999px; } - Mobile용 | 사용된 이미지내 의미있는 대체텍스트를 제공할때 사용 | 스크린리더가 읽음 .ir_pm{ display:block; overflow:hidden; font-size..