코딩 새 출발

모듈 패턴은 Closure를 사용하는 패턴이다 그래서 상태를 유지할 수 있다 하지만 모듈 패턴을 객체라고 오해하면 안 된다 객체와 동일한 구조와 동일한 기능을 가지고있지만 객체 자체라고 오해하면 안된다 그 이유는 사실 내부적으로는 함수이다 그래서 객체를 사용하는 것처럼 사용할 수 없다 그래서 무언가를 추가하거나 변경하려면 함수를 이용해야 한다

JavaScript Closure 정리 어떤 함수나 객체가 다른 곳에 있는 데이터나 변수를 사용해야 하는데 개발자가 직접 명시적으로 참조하지 않아도 자동으로 참조가 되는 현상을 **Closure라고 함 변숫값을 참조하는 것이 아닌 메모리 공간 를 참조하는것 Closure 사용하면 메모리를 많이 사용하게 된다는 단점이 있다 함수를 이용해서 상태를 유지하는 객체를 만들 때 많이 사용된다 내부 함수가 유효한 상태에서 외부 함수가 종료하여 외부함수의 실행 콘텍스트가 반환되어도, 외부함수 실행 컨텍스트 내의 활성 객체(Activation object)(변수, 함수 선언 등의 정보를 가지고 있다)는 내부 함수에 의해 참조되는 한 유효하여 내부 함수가 스코프 체인을 통해 참조할 수 있는 것을 의미한다. 즉 외부 함수..

⭐⭐호이스팅⭐⭐ 함수 안에 있는 선언들을 모두 끌어올려서 해당 함수 유효 범위의 최상단에 선언하는 것 var 변수 선언과 함수선언문에서만 호이스팅이 일어난다. var 변수/함수의 선언만 위로 끌어 올려지며, 할당은 끌어 올려지지 않는다. let/const 변수 선언과 함수표현식에서는 호이스팅이 발생하지 않는다.

JavaScript 프로토타입 ⭐원형 메모리를 공유하는 모양 메모리를 아껴서 쓸 수 있다는 장점이 있다 B가 A를 바꿔버리면 다른 B가 보는 A의 데이터도 변해버린다 객체 리터럴은 프로토 타입이 없다 Array.prototype.push() 배열 자체를 반환을 못해준다 카운트 값만 반환 push const arr = [1,2,3] console.log(arr.push(4)) console.log(arr.push([5,6])) console.log("--------------") console.log(arr) 결과 Array.prototype.concat() 기존 배열을 변경하지 않습니다. 추가된 새로운 배열을 반환합니다. concat 은 새로 만드는 방식이라 별도의 변수를 잡아줘야 한다 console.l..

이벤트 Sample AAA Sample2 AAA2 지금 사용하는 방법이 가장 많이 사용되는 패턴이다 ul : 원래 있었던 것 그래서 이벤트를 ul에 걸어준다 li : 동적으로 생성 화면 지금 이벤트는 ul 에 걸었는데 버블링 때문에 button에 이벤트가 걸린다 그래서 동적인 li태그가 아닌 고정된 ul에 걸어준다 ul 태그의 범위 현재 ul 태그의 범위가 이렇게 설정되어있어서 사실 button 아 아닌 다른 곳을 눌러도 이벤트가 발생한다 그래서 button 에만 이벤트를 발생시키는 코드를 만들어 보려 한다 코드 작성 Sample AAA Sample2 AAA2 화면 이 방법이면 밖에 있는 ul만 걸어주면 이벤트를 손쉽게 사용할 수 있다 click 한 button의 div 가 어디 있는지 찾아보고 싶다면?..

⭐ 너도? Outer Inner inner를 태그로 만들어 주었다 화면에서 보기 Inner을 클릭하면? aaa로 가려고 한다 ❗ 멈춰!!! event.preventDefault() Outer Inner event.preventDefault()를 사용하면 태그의 기능을 막는다 화면에서 보기 Inner을 눌러도 가 반응하지 않는다 ❗❗여기서 의문 아니 를 안 쓰면 되지 왜 이렇게 복잡한 방법을 쓰는 거야???? 😉그 이유는 바로 Bootstrap에서 Pagination 같은걸 사용하면 그 안에 가 있는데 그걸 빼면 스타일 같은 게 깨질 때가 있다 이럴 때 사용한다 ⭐너는 어디서 왔니? event 가 어디서 걸렸는지 확인하려면 어떻게 해야 할까? console.log(event.target) 화면 event...

Outer Inner 코드의 구조 클릭을 하면 어떤 게 먼저 작동할까?? inner → outer outer → inner 대부분의 브라우저는 1번으로 작동한다 1번처럼 안쪽에서 밖으로 가는 것을 버블링이라고 한다 반대로 2번 의 경우처름 밖에서 안쪽으로 가는 것을 캡쳐링 이라 한다 화면에서 보기 화면에서 Inner을 누르면 console에서는 버블링으로 작동한다 😉정리 버블링 : 먼저 이벤트가 발생한 곳이 동작하고 밖으로 올라간다 캡쳐링 : 밖에서부터 이벤트가 동작한다 😉,false 는 무엇일까? Outer Inner ,false 가 붙으면 캡쳐링을 안 하고 버블링 방식만 쓰겠다는 선언!!! 대부분의 브라우저는 버블링을 방식이지만 안전하게 코드를 짜기 위해 선언해준다 ⭐stopPropagation() ..

우선 JavaScript 에서는 → 객체(node , element)로 본다 ⭐객체의 하위를 검색하는 selector 문법 Java JavaScript ⭐⭐하위에서 상위를 찾고자 하는 경우 실제로 코딩을 할때 정말 많이 사용된다고 한다 1st 2nd 3rd querySelector 가 밖에서 안으로 찾아서 들어가는 문법이라면 closest는 안에서 밖으로 찾아가는 문법 ⭐자신과 동일한 위치의 이전&다음을 찾는 문법 1st 2nd 3rd

⭐식별 키의 id와 class 그리고 name id 보다는 class 를 사용하자 그 이유는? id class name id class name 하나만 있을 수 있다 똑같은게 여러번 나올수도있고 값을 여러개를 가질수있다 똑같은게 여러번 나올수도있고 값을 여러개를 가질수있다 CSS에서 식별자로 사용 #아이디로 사용 CSS에서 식별자로 사용 .클래스명 으로 사용 CSS에서 사용 불가 jQuery : $(”#아이디”) jQuery : $(”.클래스명”) jQuery : $(”input[name = 이름]”) ⭐CSS Selector Document.querySelector() Document.querySelector()는 제공한 선택자 또는 선택자 뭉치와 일치하는 문서 내 첫 번째 [Element]를 반환합니..

⭐JavaScript 기본적으로 Single thread 브라우저의 내부에는 총 3개의 엔진이 동작한다 hyml을 Docoment라고 부름 →Docoment를 처리하는 DOM엔진 브라우저 엔진 이라고도 함 style엔진 script엔진은 →DOM엔진이 처리불가 →자바스크립트 엔진이 처리 ✌자바스크립트는 2번 읽는다 1번 문자열을 읽어서 프로그램을 실행시킬수있는 구조를 만든다 2번 실행하는 과정 이게 실행되는 이유 실행하면 doA()실행 이기에 skip 하고 function을 만난다 그럼 메모리상에 doA를 만들고 그게 function을 가리키게 하고 2번째 읽는 과정에서는 doA가 있으니까 실행이 된다 이런 건 어떨까? 이건 읽을 수 있을까? 이건 읽지 못한다 그 이유는 자바 스클 비트는 script 단..