WEB/javascript10 Chrome 개발자 도구 Chrome 개발자 도구란? - 웹사이트를 전반적으로 분석하고 시험해 볼 수 있도록 도와주는 도구 *주의: 콘솔 데이터는 저장되지 않음. 새로고침/새 탭 열기를 하면 내용이 날아감 요소 (Elements) - HTML을 분석하고 수정해볼 수 있는 도구 콘솔 (Console) - 현재 로딩된 페이지에서 자바스크립트를 시험하거나 로그/오류 메세지 등을 확인할 수 있는 도구 소스(Source) - 현재 로딩된 페이지에서 사용된 리소스를 열람할 수 있는 도구 네트워크(Network) - 서버와의 통신 내역을 보여주는 도구 성능(Audits) - 웹 어플리케이션의 성능을 향상시킬 방법을 컨설팅해주는 도구 2023. 4. 26. 프로퍼티 어트리뷰트 const person = { name: 'Lee' } // 프로퍼티 동적 생성 person.age = 20; // 모든 프로퍼티의 프로퍼티 어트리뷰트 정보를 제공(프로퍼티 디스크립터 객체) console.log(Object.getOwnPropertyDescriptors(person)); 내부 슬롯과 내부 메서드 내부 슬롯과 내부 메서드는 ECMAScript 사양에 정의된 대로 구현되어 자바스크립트 엔진에서 실제로 동작 하지만 개발자가 직접 접근할 수 있도록 외부로 공개된 객체의 프로퍼티는 아니다. => 즉, 내부 슬롯과 내부 메서드는 자바스크립트 엔진의 내부 로직이므로 원칙적으로 자바스크립트는 내부 슬롯과 내부 메서드에 직접 적으로 접근하거나 호출 할 수 있는 방법을 제공하지 않는다. const p =.. 2023. 3. 14. 변수 호이스팅 호이스팅이란? - 호이스팅은 코드가 실행하기 전 변수선언/함수선언을 해당 스코프의 최상단으로 끌어올리는 것이 아니다. - 호이스팅은 코드가 실행하기 전 변수선언/함수선언이 해당 스코프의 최상단으로 끌어 올려진 것 같은 현상을 말한다. - 자바스크립튼 엔진은 코드를 실행하기 전 실행 가능한 코드를 형상화하고 구분하는 과정을 거친다. - 자바스크립트 엔진은 코드를 실행하기 전 실행 컨텍스트를 위한과정에서 모든 선언(var, let, const, function, class)을 스코프에 등록한다. - 코드 실행 전 이미 변수선언/함수선언이 저장되어 있기 때문에 선언문보다 참조/호출이 먼저 나와도 오류 없이 동작한다. - 실행 컨텍스트는 실행 가능한 코드가 실행되기 위해 필요한 환경을 의미하고 실행되기전 이러한.. 2023. 3. 13. let, const 자바스크립트 에서 var 키워드로 선언된 변수의 특징 var 키워드로 선언한 변수의 문제점 1. 변수 중복 선언 허용 var x = 1; var z = 1; // var 키워드 선언된 변수는 같은 스코프 내에서 중복 선언을 허용함 // 초기화문이 있는 변수 선언문은 자바스크립트 엔진에 의해 var 키워드가 없는 것처럼 동작함 var x = 100; // 초기화문이 없는 변수 선언문은 무시된다. var z; console.log(x); // 100 console.log(y); // 1 2. 함수 레벨 스코프 var x = 1; if (true) { // x는 전역 변수다. 이미 선언된 전역 변수 x가 있으므로 x 변수는 중복 선언된다. // 이는 의도치 않게 변수값이 변경되는 부작용을 발생시킨다. var .. 2023. 3. 13. 스코프 스코프(scope)란? 자바스크크립트를 포함한 모든 프로그래밍 언어의 기본이며 중요한 개념이다. 스코프의 이해가 부족하면 다른 개념을 이해하기 어렵다. 자바스크립트의 스코프는 다른 언어의 스코프와 구별되는 특징이 있다. var 키워드로 선언한 변수와 let 또는 const키워드로 선언한 변수의 스코프도 다르게 동작한다. 스코프는 변수 그리고 함수와 깊은 관련이 있다. function add(x, y){ // 매개변수는 함수 몸체 내부에서만 참조할 수 있다. // 즉, 매개변수의 스코프(유효범휘)는 함수 몸체 내부다. console.log(x, y); return x + y; } add(2, 5) //매개변수는 함수 몸체 내부에서만 참조 할 수 있다. console.log(x, y); //Reference.. 2023. 3. 13. 콜백 함수 콜백 함수(callback function)란? 함수의 매개변수를 통해 다른 함수의 내부로 전달되는 함수를 콜백 함수(callback function)라고 하며, 매개변수를 통해 함수의 외부에서 콜백 함수를 전달받은 함수를 고차 함수Higher-Order Function, HOF //고차 함수 function repeat(n, f){ for(var i = 0 ; i 고차 함수는 콜백 함수를 자신의 일 부분으로 합성한다. -> 고차 함수는 매개변수를 통해 전달받은 콜백 함수의 호출 시점을 결정해서 호출한.. 2023. 3. 12. 타입 변환과 단축 평가 타입 변환이란? 명시적 타입 변환(explicit coercion) - 개발자가 의도적으로 값의 타입을 변환하는 것 - 타입 캐스팅(type casting)이라 한다. var x = 10; // 명시적 타입 변환 // 숫자를 문자열로 타입 캐스팅한다. var str = x.toString(); console.log(typeof str, str); // string 10 // x 변수의 값이 변경된 것은 아니다. console.log(typeof x, x): // number 10 암묵적 타입 변환(implicit coercion) - 개발자의 의도와는 상관없이 표현식을 평가하는 도중에 자바스크립트 엔진에 의해 암묵적으로 타입이 자동 변환되기도 한다. - 타입 강제 변환(type coercion)이라 한다.. 2023. 3. 10. 객체 객체란? 자바스크립트는 객체(object) 기반의 프로그래밍 언어이며, 자바스크립트를 구성하는 거의 "모든 것"이 객체이다. 원시 값을 제외한 나머지 값(함수, 배열, 정규 표현식 등)은 모두 객체이다. 원시 타입은 단 하나의 값만 나타내지만 객체 타입(object/reference type)은 다양한 타입의 값(원시 값 또는 다른 객체)을 하나의 단위로 구성한 복합적인 자료구조data structure이다. 원시 타입의 값 - 변경 불가능한 값(immutable value) 객체 타입의 값 - 변경 가능한 값(mutable value) 객체는 프로퍼티의 집합 객체이 프로퍼티와 메서드 } 프로퍼티: 객체의 상태를 나타내는 값(data) 메서드: 프로퍼티(상태 데이터)를 참조하고 조작할 수 있는 동작(be.. 2023. 3. 10. DOM DOM(Document Object Model)이란? 문서 객체 모델, 즉 DOM은 웹 페이지(HTML이나 XML문서)의 콘텐츠 및 구조, 그리고 스타일 요소를 구조화 시켜 표현하여 프로그래밍 언어가 해당 문서에 접근하여 읽고 조작할 수 있도록 API를 제공하는 일종의 인터페이스이다. 즉 자바스크립트 같은 스크립팅 언어가 쉽게 웹 페이지에 접근하여 조작 할 수 있게끔 연결시켜주는 역할을 담당한다. DOM(문서 객체 모델)은 어떻게 생성되고 어떻게 보여질까? DOM은 웹 페이지, 즉 HTML 문서를 계층적 구조와 정보로 표현하며, 이를 제어할 수 있는 프로퍼티와 메서드를 제공하는 트리 자료구조이다. 따라서 HTML DOM, 혹은 HTML DOM Tree로 부르기도 한다. 트리 자료구조는 노드들의 계층 구조.. 2023. 3. 8. 자바스크립트 자바스크립트(JavaScript)란? - 웹페이지에 생동감을 불어넣기 위해 만들어진 프로그래밍 언어이다. - 자바스크립트로 작성한 프로그램을 스크립트(script)라고 부른다. - 스크립트는 웹페이지의 HTML 안에 작성할 수 있는데, 웹페이지를 불러올 때 스크립트가 자동으로 실행된다. - 스크립트는 특별한 준비나 컴파일 없이 보통의 문자 형태로 작성 할 수 있고, 실행 할 수있다. 왜 자바스크립트인가? - 처음 자바스크립트가 만들어졌을 대는 'LiveScript'라는 이름으로 불렸다. - 처음 만들어질 당시에 자바의 인기가 아주 높은 상황이었다. - 관련인들이 자바스크립트를 자바의'동생' 격인 언어로 홍보하면 도움이 될 것이라는 사결정을 내리고 이름을 교체했다. - 이름은 자바에서 차용해 왔지만, 자바.. 2023. 3. 2. 이전 1 다음
