가희의자기개발블로그

Scope란? 자바스크립트에서 스코프란 어떤 변수들에 접근할 수 있는지를 정의한다. 스코프에는 두 가지 종류가 있는데 바로 전역 스코프와 지역 스코프이다. 전역 스코프 전역 스코프는 변수가 함수 바깥이나 {} 바깥에서 선언되었다면, 전역 스코프에 해당한다. const hello = 'Hello Marcus' function marcusHello () { console.log(hello) } console.log(hello) // 'Hello Marcus!' sayHello() // 'Hello Marcus!' 비록 위와같이 전역 스코프를 이용하여 변수를 선언할 수 있지만 그렇지 않는게 좋습니다. 왜냐하면, 두 개 이상의 변수의 이름이 충돌하는 경우가 생길 수도 있기 때문이죠 실제로 초기 프로그래밍 언어는..

01_Hoisting의 개념 모든 변수 선언은 호이스트 된다. 호이스트란, 변수의 정의가 그 범위에 따라 선언(declaration)/초기화(initialization)/할당 분리 되는것을 의미한다. 즉, 변수가 함수내에 정의 되면 선언이 함수의 최상위로, 함수 바깥에서 정의 되었을 경우 전역 컨텍스트의 최상위로 변경된다. 호이스팅이란 자바스크립트 함수는 실행되기 전에 함수 안에 필요한 변수값들을 모두 모아서 유효 범위의 최상단에 선언한다. - 자바스크립트 Parser가 함수 실행 전 해당 함수를 한 번 훑는다. - 함수 안에 존재하는 변수/함수선언에 대한 정보를 기억하고 있다가 실행시킨다. - 유효 범위: 함수 블록{}안에서 유효하다. 즉, 함수 내에서 아래쪽에 존재하는 내용 중 필요한 값들을 끌어올리..

JavaScript에서 변수를 선언하는 방식은 var과 let 그리고 const가 있다. 이 세개를 비교하기 위해서는 몇가지 고려해야할 사항이 있다. 바로 변수 값의 변환 변수의 유효범위 호이스팅 1_변수 값의 변환 JavaScript를 사용할 때 흔히 말하는 큰 문제점은 변수 선언의 방식이다. var을 이용할 경우 할당되는 값이 유동적으로 변경될 수 있다. 예를 들어 var name = "Gahui"; var name ="Minho"; console.log(name) // Minho name이라는 변수를 두번 선언 했음에도 불구하고 에러가 뜨지 않고 2번째 변수가 첫번째 변수 값을 덮어 씌워 버린다. 이런 문제점들로 인해 let과 const는 var와 같은 선언 방식을 막고 있다. let name = ..

01_스타일 값 구하기 $대상.css("스타일 속성이름") $대상.css("스타일 속성이름","스타일 속성이름", ...) 02_스타일 값 설정하기 $대상.css("속성이름","값") $대상.css({ 속성이름:값 속성이름:값 }) css()메서드는 스타일 속성값을 설정할 때도 사용된다. 03_클래스 추가 $대상.addClass("클래스 이름1[클래스 이름2 ...]") addClass() 메서드를 이용하면 노드에 하나 이상의 클래스를 추가할 수 있다. 04_클래스 삭제 $대상.removeClass() $대상.removeClass("클래스 이름1[클래스 이름2 ...]") ※toggleClass() 이 메서드는 클릭시 해당 클래스가 있으면 제거해주고 없으면 생성해준다.

01_스타일을 다루는 방법 스타일을 다루는 방법은 두 가지가 있다. 정적인 방법 작성한 스타일을 직접 변경하는 방법을 말하며 스타일 변경 후 문서를 재실행해야 한다. 동적인 방법 웹 문서를 실행한 상태에서 자바스크립트와 jQuery를 이용해 스타일을 다루는 방법을 말한다. 문서를 재실행할 필요가 없다. 02_jQuery를 활용한 스타일 다루는 방법의 특징 스타일 역시 jQuery에서는 스타일을 좀더 쉽게 다룰 수 있는 다양한 기능을 제공한다. 02_1_스타일 위치와 관계 없이 스타일 속성 접근 가능 자바스크립트를 이용하는 경우 자바스크립트의 경우 인라인 스타일이냐 아니냐에 따라 스타일 속성 접근 방법이 다르다. 우선 style속성으로 접근할 수 있는 스타일 속성은 인라인 속성만을 접근할 수 있다. 내부,..

on("click") 과 click()의 차이점은 동적으로 이벤트를 바인딩할 수 있는지의 차이다. on("click")은 동적으로 가능하고 click()은 최초에 선언된 element에만 동작한다. 1_click()이벤트 MENU1 MENU2 MENU3 위 코드에서 아무 li 태그에 click()이벤트를 발생시키면 $("#myTask").children().click(function(){ $(this).remove(); }); 해당 li태그가 remove()된다. 여기서 아래 소스처럼 동적으로 새로운 li태그를 추가한 뒤 click()메소드를 실행하면 동작하지 않는다. 왜냐하면 click()이벤트는 최초에 페이지를 로딩할 때 선언되어 있던 element에 이벤트를 바인딩하고 나서는 더이상 동적으로 바인딩..

노드를 대량으로 추가하거나 삭제해야 하는 경우는 노드 내용을 직접 변경하는 방법을 사용한다. 01_소개 노드 내용이란? 노드 내부에 들어 있는 마크업 노드와 텍스트 노드 정보를 문자열로 표현하는 것을 의미한다. 노드 내용은 서버에 보내거나 노드를 다루기 위한 용도로 많이 사용한다. 02_노드 내용을 문자열로 읽기 $대상.html() $대상.text() 노드 내용을 알아내는 방법은 html() 메소드와 text()메서드 두 가지가 있다. 이 둘은 차이점이 있다. html() 메서드를 이용하면 특정 노드의 내부 내용을 마크업까지 확인 할 수 있다. 주의해야 할 사항이 있는데 html()메서드 결과는 자바스크립트 DOM객체가 아닌 단순한 문자열이라는 점이다. 또, 노드 내용에는 자신의 태그 저보는 포함하지 않..

01_소개 노드 삭제 방법 역시 노드 이동과 동일하게 가장 먼저 할 일은 제거할 노드를 찾는 것이다. 그 다음 노드를 제거해야 한다. 02_특정 노드 삭제 $대상.remove() 특정 노드를 삭제하고 싶은 경우 remove()메서드를 이용한다. 02_모든 자식 노드 삭제 $대상.children().remove() 자식 노드를 모두 삭제할 때에도 remove()메서드를 사용한다. 덧붙여 설명하자면 사실 remove()는 특정 노드를 삭제하는 용도이지 내부를 비우는데 사용하기에는 적합하지 않다 이 경우 실무에서는 html()을 이용한다. $("ul").html("");