이제부터 제목에 며칠 째인지까지는 기록하지 않기로 했다.
매일매일 작성을 하는게 힘들다 판단했기 때문이다. 하지만 꾸준히 작성할 예정이다.
중첩객체
-객체의 프로퍼티 값으로 객체를 가질 수 있다.
-객체 안에 또 다른 객체를 저장할 수 있다.
-점 표기법을 연결하여 접근한다.
const student = {
name: {
first: "철수",
last: "김"
},
class: [ "자바스크립트", "파이썬"]
};
console.log(student.name.first); // 철수DOM은 웹 페이지에 대한 인터페이스로 페이지 내의 콘텐츠와 구조, 스타일을 읽고 조작할 수 있도록 한다.
문서 객체 모델(DOM)은 HTML, XML 문서의 프로그래밍 interface 이다. DOM은 문서의 구조화된 표현(structured representation)을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 그들이 문서구조, 스타일, 내용 등을 변경할 수 있게 돕는다.DOM은 nodes와 objects로 문서를 표현한다. 이들은 웹 페이지를 스크립트 또는 프로그래밍 언어들에서 사용될 수 있게 연결시켜주는 역할을 담당한다.
웹 페이지는 일종의 문서(document)다. 이 문서는 웹 브라우저를 통해 그 내용이 해석되어 웹 브라우저 화면에 나타나거나 HTML 소스 자체로 나타나기도 한다. 동일한 문서를 사용하여 이처럼 다른 형태로 나타날 수 있다는 점에 주목할 필요가 있다. DOM은 동일한 문서를 표현하고, 저장하고, 조작하는 방법을 제공한다. DOM은 웹 페이지의 객체 지향 표현이며, 자바스크립트 같은 스크립팅 언어를 이용해 DOM을 수정할 수 있다.
DOM은 프로그래밍 언어는 아니지만 DOM이 없다면 자바스크립트 언어는 웹 페이지 또는 XML 페이지 및 요소들과 관련된 모델이나 개념들에 대한 정보를 갖지 못하게 된다.
문서의 모든 element - 전체 문서, 헤드, 문서 안의 table, table header, table cell 안의 text - 는 문서를 위한 document object model의 한 부분이다. 때문에, 이러한 요소들을 DOM 과 자바스크립트와 같은 스크립팅 언어를 통해 접근하고 조작할 수 있는 것이다.
이벤트 핸들러 제거
btn.removeEventListener("click", bgChange);addEventListener를 통해 등록 된 이벤트에만 가능하다. 그래서 addEventListener를 쓰는게 좋다는 것.
이벤트 객체
이벤트 핸들러에 자동으로 전달되는 객체, 이벤트에 대한 추가적인 정보와 기능을 제공한다.
e.target 프로퍼티로 해당 이벤트가 어디서 발생했는지를 알 수 있다.
어떤 이름으로 사용해도 상관 없지만 e, evt, event가 일반적이다.
const divs = document.querySelectorAll("div");
for(let i = 0; i < div.length; i++) {
divs[i].onclick = function(e) {
e.target.style.backgroundColor = bgChange();
}
};스코프
//블록스코프 - 블록 밖에서 var 변수에만 접근이 가능, let과 const는 블록 스코프
{
var publicNmae = "elice";
let age = "20";
const gender = 'female";
};
//함수스코프 - var, let, const 어떤 변수도 함수 밖에서는 접근 불가
//var 변수도 밖에서 접근이 불가하므로 var 변수는 함수 스코프를 가지고 있다.
function test() {
var publicName = "elice";
let age = "20";
const gender = "female";
}
console.log(publicName);
console.log(age);
console.log(gender);모듈
코드를 구성하는 하나의 파일.
특정한 목적을 가진 여러 개의 함수로 구성 된 하나의 파일.
스크립트 크기가 커지고 기능이 복잡해지면서 코드를 모듈 단위로 구성하거나 다른 곳에서 필요한 모듈을 불러서 쓰는 등의 필요성이 생겨남.
모듈 내보내기 export
모듈 가져오기 import
모듈 사용법
<script type = "module" src="index.js"></script>
else
<script type "module">
import { doSomething } from './index.js';
doSomething();
</script>*모듈은 특수한 키워드나 기능과 함께 사용되기 때문에 사용하기 전 html 스크립트 태그의 type 속성을 통해 index.js라는 파일이 모듈이라는 것을 브라우저에 알려야한다.
모듈의 특징
자신만의 스코프가 존재: 모듈 내부에서 정의한 함수 또는 변수는 import 하지 않는 이상 다른 스크립트에서 접근 불가. 모듈은 변수를 공유하지 않기 때문에 Uncaught ReferenceError: user is not defind 에러가 콘솔에 출력된다. 외부에 공개하려는 모듈은 반드시 export 해야한다.
최초 호출 시 한번만 실행: 동일한 모듈이 여러 곳에서 사용되어도 모듈은 최초 호출 시 한번만 실행된다. 현업에선 최상위 레벨 모듈을 초기화 또는 내부에서 쓰이는 데이터 구조를 만들고 이를 내보내 재사용하고 싶을 때 사용한다.
즉 모듈은 단 한번만 실행되고 실행 된 모듈은 필요한 곳에 공유되므로 어느 한 모듈에서 객체를 수정하면 다른 모듈에서도 변경사항을 확인할 수 있다.
지연 실행: 브라우전 환경에서 모듈 스크립트를 사용할 때 html 문서가 완전히 로드 될 때까지 기다렸다가 이후 실행된다.
반드시 경로가 있어야 한다: import { 함수명 } from "../index.js"
웹팩 등의 빌드 툴 사용: 번들링이란 모듈을 한 데 묶는 작업. 브라우저 환경에서는 모듈을 단독으로 사용하지 않기 때문에 모듈을 한꺼번에 묶어서 프로덕션 서버 업로드.
Named export
함수, 변수명 앞에 export 명령어를 붙이는 방식
하나의 모듈에서 여러가지 함수, 변수, 객체를 내보낼 수 있다.
가져올 떄는 중괄호 안에 사용하려는 모듈에 정의 된 이름을 작성한다
import { 모듈명 } from '파일경로'
as 키워드를 이용해서 모듈을 다른 이름으로 내보내거나 가져올 수 있다.
import 모듈명 as 커스텀 모듈명 from '파일 경로' / export { 모듈명 as 커스텀 모듈명 };
Default export
해당 모듈엔 객체가 하나만 있다 라는 사실을 명확하게 나타내고자 할 때 사용
내보내고자 하는 객체 안에 export default를 붙여서 사용
import시 중괄호 없이 모듈을 가져올 수 있다.
