221107_TIL

휜·2022년 11월 7일
DOMJavaScript

출처 : 유튜브 댓글 https://www.youtube.com/watch?v=mFawNZz_Uu0

1) BOM

  • 모든 서비스는 웹 브라우저를 바탕으로 실행되기 때문에, 웹 서비스 개발은 브라우저와 밀접한 관련이 있다.

  • 이 브라우저와 관련된 객체 집합이 브라우저 객체 모델(BOM)

    • 이 BOM을 이용해 브라우저와 관련된 기능을 구성한다.

    • DOM은 BOM 중 하나

    • BOM의 최상위 객체는 window객체

      • window.location
      • window.navigator
      • window.screen
      • window.history
      • …

    • DOM은 window 객체의 하위 객체

      • window.document 객체를 DOM이라고 분류한다.

2) DOM

  • Document Object Model의 약자. 문서객체 모델

  • 우리가 웹 사이트에 접속하면, 웹 브라우저는 HTML 문서를 읽어들이고 해석한다. 이 브라우저가 HTML코드를 해석하는 과정을 ‘파싱’이라 부른다.

  • 파싱 결과물을, 화면을 통해 해석된 결과를 보여준다. 해석한 HTML 코드를 화면에 보여주는 과정이 렌더링이며, 결과물로 DOM이 만들어진다.

  • 브라우저는 HTML 코드를 해석하여, HTML 요소들을 트리 형태로 구조화하여 표현하는 웹 문서를 생성한다. 이 트리 전체를 DOM이라 하며, 브라우저는 DOM을 통해 화면에 웹 콘텐츠들을 렌더링한다.

    • 트리를 구성하는 요소 하나하나를 Node라고 한다.
    • 자바스크립트로 웹 페이지 요소를 제어할 수 있는 것은 이것들 하나하나가 모두 API이기 때문
      • API(PRI아님. 잘못알면 난닝구할아버지 찾아옴) : API는 소프트웨어 개발에서 호환성을 위해 지켜야 하는 추상적인 원칙.
      • 애플리케이션을 서로 연결해서 서로 통신할 수 있도록 하는 인터페이스 원칙이라고 생각하자!

  • DOM은 XML이나 HTML문서에 접근하기 위한 일종의 인터페이스로, 문서 내의 모든 요소를 정의하고 각 요소에 접근하는 방법을 제공한다.

3) 웹 페이지가 만들어지는 방법 : CRP

  • CRP(Critical Rendering Path) : 웹 브라우저가 원본 HTML문서를 읽어들인 후, 스타일을 입히고 대화형 페이지로 만들어 뷰 포트에 표시하기까지의 과정

    • DOM트리 구축
    • CSSOM 트리구축
    • JS 실행
    • 렌더 트리 구축
    • 레이아웃 생성
    • 페인팅

  • CRP 과정을 렌더트리 구축 기점으로 간소화하면 2단계로 나누어짐

    • 1단계 : 브라우저는 읽어들인 문서를 파싱하여 최종적으로 어떤 내용을 페이지에 렌더링할 지 결정한다. (렌더트리 생성됨)
    • 2단계 : 브라우저는 해당 렌더링을 수행한다.

  • 렌더 트리 : 웹 페이지에 표시될 HTML, 스타일 요소로 구성된다. 브라우저는 렌더트리를 생성하기 위해 두 모델을 필요로 한다.

    • DOM(Document Object Model) : HTML 요소들의 구조화된 표현
    • CSSOM(Cascading Style Sheets Object Model) : 요소들과 연관된 스타일 정보의 구조화된 표현

4) DOM의 목적

  • DOM은 자바스크립트를 활용해 문서에 대한 스크립트를 작성하는 것에 목적이 있다. 즉, 문서 내의 각 요소들에 대해 자바스크립트를 활용해 여러 작업을 시도할 수 있다는 뜻이다.

    • 뷰 포트에 무엇을 렌더링할지 결정하기 위해 사용된다.
    • 자바스크립트는 새로운 HTML 요소나 속성을 추가할 수 있다.
    • 자바스크립트는 존재하는 HTML 요소나 속성을 제거할 수 있다.
    • 자바스크립트는 HTML 문서의 모든 HTML 요소를 변경할 수 있다.
    • 자바스크립트는 HTML 문서의 모든 HTML 속성을 변경할 수 있다.
    • 자바스크립트는 HTML 문서의 모든 CSS 스타일을 변경할 수 있다.
    • 자바스크립트는 HTML 문서에 새로운 HTML 이벤트를 추가할 수 있다.
    • 자바스크립트는 HTML 문서의 모든 HTML 이벤트에 반응할 수 있다

  • HTML코드는 정적인 텍스트이므로, 웹 화면이 사용자와 동적 상호작용을 하기 위해서는, DOM의 존재가 중요해진다.

Object, Computed

Computed n.계산

Computed property (계산된 프로퍼티)
*computed == n. 계산 이라는 뜻을 가지고 있음.

a = 'age';
const user = {
name : 'Hwuiinn',
// age : 25, [a]는 변수 a에 할당된 값이 들어감.
[a] : 25,
}
console.log(a, user);

const user1 = { // Computed Property는 이렇게 식 자체를 넣는 것도 가능함.
[1+4] : 5,
['안녕'+'하세요'] : 'Hello',
}
console.log(user1);

Some Object method

  1. Object.assing() - 객체복제 / 동일하게 객체를 복제하려면 Object.assing()을 사용해야한다.

const student = {
name : 'Hwuiinn',
age : 25,
}

- const newUser = Object.assign({초기값},student) 두 번째 프로퍼티 값이 초기값과 함께 병합된다.

  • const newUser = Object.assign({},student) student의 데이터를 똑같이 복사.

  • const newUser = Object.assign({gender : 'male'} , student) // student의 데이터를 {gender : 'male'}데이터를 병합한 newUser 객체를 생성.

  • const newUser1 = Object.assign({name : 'Mike'} , user)
    같은 name key를 가지고 데이터를 덮어 씌우려 해보았음.

  • 하지만 기존의 key:value값 위에 새로운 데이터로 덮어버리진 못 함.
    console.log(newUser,newUser1);

  • newUser.name = 'Park'; // 복제된 객체의 name값을 변경

  • console.log(newUser.name); // Park

  • console.log(student.name); // 복제의 기준이 된 기존 데이터의 name값은 여전히 Hwuiinn
    - 이로써 객체를 복제한 것은 서로 다른 데이터 주소를 가진다는 것을 알 수 있음.

여러 객체 데이터 병합 가능.

let b = {
    local : 'Busan',
}
let c = {
    favorite : 'chiken',
}
const myInfo = Object.assign(user,b,c); // user 객체에 b와 c 변수 안에 객체데이터들이 병합되어 myInfo라는 새로운 객체를 생성.
console.log(myInfo);
object.keys() - 키 *배열[] 반환
const key = {
    name : 'Joe',
    age : 12,
    gender : 'female',
}
let d = Object.keys(key);
console.log(d); // ['name', 'age', 'gender'] 반환.

3. object.values() - 값 *배열[] 반환
let e = Object.values(key);
console.log(e); // ['Joe', 12, 'female'] 반환

4. object.entries() - 키/값 *배열[] 반환
let f = Object.entries(key);
console.log(f);

5. object.formEntries() - 키/값 배열[]을 객체{}로 변환. 즉, 배열로 되어있던 데이터들이 객체로 변환되면서 Key:value로 변환됨.
const arr = [
    ['name','Mike'],
    ['age',30],
    ['gender','Male'],
]
let g = Object.fromEntries(arr);
console.log(g); // 배열[]로 데이터를 가진 변수 arr가, key:value 값을 가진 객체 형태로 출력된다.
// 객체 만들기
function makeObj(key, val) {
    return {
        [key] : val // key값은 []를 이용하여 property나 변수를 가져와 사용할 수 있음. 어떤게 key가 될 지 모르는 객체를 만들 때 사용하면 Best다.
    };
}
const obj = makeObj("이름", "박대성");
console.log(obj)

//하면 안되는 객체 복사
const man = {
    name : 'Dan',
    age : 57,
};

const man2 = man;
man2.age = 23; // man2의 나이를 변경

console.log(man2); // man2의 나이가 23으로 변경됨
console.log(man);// 기존에 선언한 man의 나이도 23으로 변경됨. 이렇게 되면 매우 위험하다. 때문에 object.assign({},man)을 이용하여 객체를 복사하자.

생성자 함수는 비슷한 객체를 여러개 만들 때 유용하게 사용가능하다.

function User(name, age) {
    this.name = name;
    this.age = age;

    this.sayName = function(){
        console.log(this.name); // << 여기서의 this는 sayName()을 호출한 변수의 name값을 지칭한다.
    }
}


let user1 = new User('hwuiinn', 25);
let user2 = new User('Soyoung', 25);
let user3 = new User('Minsu', 15);
// console.log(user1,user2,user3);
// console.log(user1.name,user2,user3.age);
user3.sayName(); // Minsu



- 생성자 함수 : 목표 - 상품 객체를 생성해보자.


function Item(name, price) {
    // this = {}
    this.name = name;
    this.price = price;
    this.showPrice = function(){
        console.log(`가격은 ${price}원 입니다.`); // **백틱을 써줘야 ${변수} 값이 제대로 불러와진다.
    }
    // return this;
}

let Coat = new Item('Zara', 150000);
let Coat2 = Item('Zara', 150000); // new를 안 붙히면, 그냥 Item이라는 일반 함수를 호출한 것으로 컴퓨터가 인식한다. 현재 Item함수는 undefined 반환.
let Jeans = new Item('Plac', 250000);
let Top = new Item('Gucci', 1200000);
console.log(Coat,Coat2,Jeans,Top);
Coat.showPrice();

- Number, Math 관련 메소드

//1. .toString() - 숫자를 문자열로 반환해줌
let num = 10;
let num2 = 255;
// console.log(num.toString(2),num2.toString(2)); 2진수 변환
// console.log(num.toString(16),num2.toString(16)); 16진수 변환
console.log(num.toString(),num2.toString());//"10","255"

//2. .PI - 파이 값을 출력
num = Math.PI;
console.log(num)

//3. .ceil() - 소수 첫번째 자리부터 올림
num = 5.1;
num2 = 5.7;
console.log(Math.ceil(num),Math.ceil(num2));//6,6

//4. .floor() - 소수 첫번째 자리부터 내림
console.log(Math.floor(num),Math.floor(num2));//5,5

//5. .round() - 소수 첫번째 자리부터 반올림
console.log(Math.round(num),Math.round(num2)); // 5,6

//소숫점 자릿수
//요구사항 : 소수점 둘째자리까지 표현 == 셋째자리에서 반올림  (**중요함)
//과정 요약 : 1. userRate*100 / 2. Math.round(userRate*100) / 3. Mate.round(userRate*100)/100
// ㄴ 1. 100을 곱하고 2. 반올림해주고 3. 다시 100으로 나눔

// 1. 100을 곱하고
let userRate = 30.1234;
console.log(userRate*100);

//2. 반올림해주고
console.log(Math.round(userRate*100));

//3. 다시 100으로 나눔
console.log(Math.round(userRate*100)/100);

//.toFixed(); >> 통계나 자료 작업할 때 굉장히 많이 쓰인다. "문자열"을 반환하므로 Number()를 이용해 숫자형으로 변환하고 작업시작한다.
console.log(userRate.toFixed(5)); // .toFixed(x); >> x만큼의 소수점자리를 표현해줌. 소숫점 표현 자리를 넘으면 0으로 자리를 채워줌.


// isNaN(); >> **NaN을 검사하는 방법은 isNaN()이 유일하다.
let x = Number('x');
console.log(x == NaN); 
console.log(x === NaN); 
console.log(NaN == NaN); //일반 NaN을 비교하면 자기자신도 똑같지 않다고 판단했다.
console.log(x);

console.log(isNaN(x)); //true
console.log(isNaN(3)); //false

//parseInt() >> "문자열"을 숫자로 바꿔준다. 처음부터 문자열을 읽으면 바로 NaN을 반환한다. Number()와 다른점은 문자가 혼용되어 있어도 동작을 한다. (Number()는 문자가 섞여있으면 NaN을 바로 반환)
//2진수, 16진수로 바꿔서 표현 가능.
let margin = '10px';
let redColor = 'f3'
console.log(parseInt(margin)); //10
console.log(Number(margin)); //NaN

console.log(parseInt(redColor)); // NaN
console.log(parseInt(redColor, 16)); // 243
console.log(parseInt('11', 2)); // 3

//parseFloat(); >> parseInt() + 부동 소수점 반환
let padding = '18.5%'; 
console.log(parseInt(padding)); // 18_정수만 반환
console.log(parseFloat(padding));  // 18.5_부동 소숫점까지 반환

//Math.random(); >> 0~1 사이 무작위 숫자 생성
let randomNum = Math.random();
console.log(randomNum);

// Math.random() 메소드는 0~1사이 숫자만 출력이 가능한데, 1부터 100까지 출력하는 방법은?
//요구사항 : 1~100사이의 임의의 숫자를 출력하기
//1. 랜덤 숫자 생성 2. 100을 곱해준다 3. 소숫점 이하 전부 버림 4. 0이나오는 것을 방지하기 위해 최소값 1 더하기
randomNum = Math.floor(Math.random()*100)+1;
console.log(randomNum);

//Math.max(); Math.min(); >> 괄호 안에있는 숫자들 중, 최대∙최소값을 반환한다.
console.log(Math.max(1,4,5,123,4.55));
console.log(Math.min(1,4,5,123,4.55));

//Math.abs(); >> 절대값을 반환한다.
console.log(Math.abs(-40)); // 40

// Math.pow(n,m); >> 제곱된 값을 반환.
console.log(Math.pow(2,10)); // 1024

// Math.sqrt(); >> 제곱근
console.log(Math.sqrt(16)); // 4

- Symbol

// Symbol 
//객체 프로퍼티 키는 문자형과 Symbol만 가능하다.

//기존 property key : 문자형
const obj = {
    1 : '1입니다.',
    false : '거짓입니다.',
}
let result = Object.keys(obj)
console.log(result); //key값이 문자형으로 자동으로 반환되어 나온다.

//실제로 접근할 때도 문자형으로 접근가능하다.
console.log(obj['1']); // 1입니다
console.log(obj['false']); //거짓입니다


//About Symbol
const a = Symbol(); // 생성자 함수처럼 new를 붙히지 않는다.
const b = Symbol();

console.log(a); // Symbol()
console.log(b); // Symbol()

result = a == b;
// result = a === b; << false

console.log(result);// false
//* Symbol()로 눈으로 보기엔 똑같아 보이지만, 아에 다른 데이터다.

//property key : 심볼형
const id = Symbol('id'); // 예시 - 다른 개발자가 만들어 놓은 객체
const user = {
    name : 'Mike',
    age : 30,
    [id] : 'myID',
}

//내가 작업
// user.showName = function(){}
const showName = Symbol('Show name');
user[showName] = function() {
    console.log(this.name);
}
user[showName]();
// let result1 = Reflect.ownKeys(user);
// console.log(result1);

//사용자가 접속하면 보는 메세지 ( for(let _ in _ ){}반복문 )
for (let key in user) {
    console.log(`His ${key} is ${user[key]}.`);
}

let key = Object.keys(user)
// key = Object.values(user)
// key = Object.entries(user) >> 이런 함수 메소드들은 key가 심볼형인 프로퍼티는 건너뜀. for ..in.. 도 마찮가지. [ for(let a in user) {} ]

console.log(user);
console.log(user[id]); // myID
console.log(key); // Symbol의 key값은 반환되지 않음
profile
휜
- 배움에는 끝이 없다.
이전 포스트

221106_WIL

다음 포스트

221108_TIL

1개의 댓글

comment-user-thumbnail
김태인
2022년 11월 8일

정리 잘하셨습니다!
공부하시면서 느꼇던 감정도 함께 기록하시면 추후에 돌아볼때 재밌으실꺼에요

답글 달기