[유데미x스나이퍼팩토리] 10주 완성 프로젝트 캠프 10일차 - JS

 🤔 DOM(Document Object Model)이란?

👉 넓은 의미로 웹 브라우저가 HTML 페이지를 인식하는 방식을 의미한다.

👉 정적으로 문서 객체를 생성: 웹 브라우저가 HTML 페이지에 적혀 있는 태그를 읽으면 생성하는 것

👉 동적으로 문서 객체를 생성: 원래 HTML 페이지에 없던 문서객체를 JavaScript를 이용해서 생성

 

 

1️⃣ 외부 자바스크립트 장점

👉 HTML과 코드를 분리

👉 HTML 및 JavaScript를 더 쉽게 읽고 유지 관리할 수 있다.

👉 캐시된 JavsScript 파일은 페이지 로드 속도를 높일 수 있다.

 

📚 캐시란?

👉 컴퓨터에서 데이터나 값을 빠르게 가져오기 위해 사용되는 임시 저장소를 일컫는데 웹페이지를 방문하면 그 웹페이지의 정보들이 컴퓨터의 하드 드라이브에 임시적으로 저장된다.

👉 네트워크 대역폭(주어진 시간 동안에 데이터가 얼마나 이동할 수 있나)을 줄이고 웹 페이지의 로딩 속도를 향상시키는 데 도움을 준다.

 

 

2️⃣ 변수와 상수

	키워드	재할당	재선언
변수(구 JS)	var	O	O
변수	let	O	X
상수	const	X	X

3️⃣ 자바스크립트 데이터 유형

// Numbers;
let length = 16;
let weight = 7.5;

// Strings;
let color = "Yellow";
let lastName = "Johnson";

// Booleans
let x = true;
let y = false;

// Object
const person = {firstName:"John", lastName: "Doe"};

// Array Object
const cars = ["Saab", "Volvo", "BMW"];

// Data Object
const date = new Date("2022-03-25");

 

4️⃣ this

const person = {
  firstName: "John",
  lastName: "Doe",
  id: 5566,
  fullName : function() {
     return this.furstName + " " + this.lastName;
  }

}

👉 this는 person 개체를 나타낸다

👉 this.firstName은 this의 firstName 속성을 의미한다

👉 this.firstName은 person의 firstName 속성을 의미한다.

 

5️⃣ HTML element 

함수	설명
getElementById(id)	특정 ID를 가진 요소 조회
getElementByName(name)	Name 속성을 가진 요소 조회
getElementByTagName(tagName)	Tag Name 기준으로 요소 조회
getElementByClassName(className)	특정 class를 가진 요소 조회
innerText	요소 안에 있는 글자를 가지고 올때 사용
HTMLElement.innerHTML	태그 내 새로운 요소 객체나 내용을 저장 및 조회할 때 사용
HTMLInputElement.value	input 태그의 value값을 저장 및 조회 할때 사용

 

6️⃣ switch-case 문

const device = "iphone";

switch(device) {
 case 'iphone':
 	console.log("아이폰");
    
 case 'ipad':
 	console.log("아이패드");

 default:
    console.log("갤럭시");
}

 

7️⃣ 화살표 함수 주의사항

//화살표 함수
const cat = {
   name : "meow";
   callName: () => console.log(this.name);

}

//undefined
cat.callName();


// 일반함수
const cat = {
  name: "meow",
  callname: function() { console.log(this.name); }
}
console.log(cat.name);  // "meow"
cat.callname(); // "meow"

👉 객체 안에서 화살표 함수를 쓰게 되면 this는 전역객체로 인식하게 돼서 undefined값이 출력된다. 

👉 따라서 객체 안에서는 화살표 함수 말고 일반함수를 써야 정상적으로 출력이 된다. 

 

❗️느낀점

👉 순수 자바스크립트를 활용해서 실습을 했을때 익숙하지 않아서 당황했었는데, 이번 강의를 통해서 바닐라 자바스크립트의 중요성에 대해서 다시 인식할 수 있는 시간이었다.

 

 

본 후기는 유데미-스나이퍼팩토리 10주 완성 프로젝트캠프 학습 일지 후기로 작성 되었습니다.