๊ณ์ ์ถ๊ฐํ ์์ ์ ๋๋ค.
์๋ฐ์คํฌ๋ฆฝํธ๊ฐ ๋์๋๊ฒ ํ๋ ค๋ฉด ๋ธ๋ผ์ฐ์ ์์ฒด์์ ๋ด์ฅ๋์ด์๋ JS ์์ง์ด ํ์ํ๋ค. ์ด๊ฒ์ด ๋์ํ๋ ์๊ฐ์ ๋ฐํ์์ด๋ผ๊ณ ํ๋๋ฐ ๋ฐํ์ ํ๋ ๊ณผ์ ์์ ์ฝ๋๋ฅผ ํ ์ค ํ ์ค ์ฝ๊ณ ๋ฒ์ญํด์ ์คํ์ ํด์ฃผ๋ ๊ฒ์ด ์ธํฐํ๋ฆฌํฐ ๋ผ๊ณ ํ๋ค.
{ }
์์์๋ง ์ ํจํ๋ค.๐ฅ ์ฅ์
1. ์ด๋ฆ ์ถฉ๋์ด ๋ฐฉ์ง๋๋ค.
2. ๋ฉ๋ชจ๋ฆฌ๋ฅผ ์ ์ฝํ ์ ์๋ค.
๐ฅ ๊ฒฐ๋ก
๐ฅ ์ฝ๋ ๋ธ๋ก์ด ์ฐ์ด๋ ๊ณณ๋ค
{ }
if() {
}
for() {
}
function() {
}
function sum (a, b) {
console.log(a,b)
} // ์ด๋ฐ ๋งค๊ฐ๋ณ์๋ค๋ ๋ธ๋ก์์์๋ง ์ ๊ทผ์ด ๊ฐ๋ฅํ๋ค.
{
const x = 1;
{
const y = 2;
console.log(x);
}
console.log(x); // 1
console.log(y); // ๋ธ๋ก ์ธ๋ถ์์๋ ๋ด๋ถ๋ฅผ ์ฐธ์กฐํ ์ ์์ผ๋ฏ๋ก ์ฑ์ด ์ฃฝ๋๋ค.
}
const x = 1
์ ์ ์ฒด์ ์ธ ์ฝ๋ ๋ธ๋ก ๋ด๋ถ์์ ์ ํจํ๋ค. ๊ทธ๋์ ์์์ ์ธ๋ถ๋ฅผ ์ ๊ทผํ ์ ์๋ค.
// ๐ ์ ์ญ ๋ณ์, ์ ์ญ ์ค์ฝํ, ๊ธ๋ก๋ฒ ๋ณ์, ๊ธ๋ก๋ฒ ์ค์ฝํ ๋ผ๊ณ ํ๋ค.
const text ='global';
{
// ๐ ์ง์ญ ๋ณ์, ๋ก์ปฌ ๋ณ์, ์ง์ญ ์ค์ฝํ, ๋ก์ปฌ ์ค์ฝํ
const text = 'inside block1';
{
console.log(text)
}
}
let apple = {
name : 'apple',
}
let orange = apple;
orange = null;
apple = null;
์ค๋ธ์ ํธ๋ฅผ ๋ณ์์ ํ ๋นํ๋ฉด ์ค๋ธ์ ํธ๋ ๋ฉ๋ชจ๋ฆฌ ์ด๋๊ฐ์ heap์ด๋ผ๋ ๊ณณ์ ๋ง๋ค์ด์ง๋ค. ๋ณ์๋ ๋ฉ๋ชจ๋ฆฌ๊ฐ ๋ง๋ค์ด์ง ์ฃผ์๋ฅผ ๊ฐ๋ฆฌํค๊ฒ ๋๋ค. ๊ทธ๋ฐ๋ฐ ๋ฉ๋ชจ๋ฆฌ ์์ ์๋ฌด๊ฒ๋ ์์ ๊ฒฝ์ฐ์ (Null) ์ฐธ์กฐํ๋ ๊ฒ์ด ์๋ค๋ฉด, ์ฐ๋ ๊ธฐ๋ก ๊ฐ์ฃผํ๊ณ ๋ฉ๋ชจ๋ฆฌ์์ ๊น๋ํ๊ฒ ์ฒญ์๋ฅผ ํด์ค๋ค.
์๋ฐ์คํฌ๋ฆฝํธ์์ ๊ฐ๋น์ง ์ปฌ๋ ์ ์ด ๋ฐ์ํ๋ ์๋ฆฌ๋ ๊ฐ๋น์ง ์ปฌ๋ ํฐ๋ผ๋ ์ ๊ฐ ์๋๋ฐ ์๋ฐ์คํฌ๋ฆฝํธ ์์ง ์์ฒด์์ ์ ๊ณตํด์ฃผ๊ณ ๋ฐฑ๊ทธ๋ผ์ด๋ ํ๋ก์ธ์ค์์ ๋์ํด์ค๋ค. ๋์ ์ด๋ฐ ์ ์์ CPU๊ฐ ๋ฐ์ํ๊ฒ ๋๋ค. (์ฆ, ๋น์ฉ์ด ๋ฐ์ํ๋ค๋ ๊ฒ!!)
const global = 1;
{
const local = 1;
}
์ด์ฒ๋ผ ๊ธ๋ก๋ฒ ๋ณ์๋ ์ฑ์ด ์ข
๋ฃ๋ ๋๊น์ง ๊ณ์ ๋ฉ๋ชจ๋ฆฌ์ ์ ์ง๋๋ค. ๋ธ๋ก ์ค์ฝํ๋ ๋ธ๋ก ์ค์ฝํ์ ์ญํ ์ด ๋๋๋ฉด ์๋์ผ๋ก ์๋ฉธ๋๋ค. => ๊ฐ๋น์ง ์ปฌ๋ ํฐ๊ฐ ๋ฉ๋ชจ๋ฆฌ๋ฅผ ์ฒ๋ฆฌํด์ค.
๊ทธ๋์ ๊ฐ๊ธ์ ๊ธ๋ก๋ฒํ๊ฒ ์ ์ญ์ ์ผ๋ก ์ฐ๋ ๊ฒ์ ์ข์ง ์๋ค โ
๋ฉ๋ชจ๋ฆฌ ์ธก๋ฉด์์ ์ข์ง ์๊ธฐ ๋๋ฌธ์ ๊ฐ๊ธ์ ์ด๋ฉด ํ์ํ ๊ณณ์์๋ง ์ฌ์ฉํ๋ ๊ฒ์ด ์ข๋ค. ๐
๋ ์์ปฌ ํ๊ฒฝ์ ์์๋ณด๊ธฐ ์ ์ ์คํ ์ปจํ ์คํธ์ ๋ํด ์งง๊ฒ ์์๋ณด์.
const a = 1;
{
const a = 2;
{
const a = 3;
}
}
์ด๋ฌํ ์ฝ๋๊ฐ ์๋ค๊ณ ๊ฐ์ ํ์ ๋, ๊ทผ์ ํ ๋ถ๋ชจ์ ์ค์ฝํ๋ฅผ ์ด๋ป๊ฒ ์ฐพ๋๊ฑธ๊น ?
ํ๋ค๋ฉด ์ด์ ๋ ๊ฐ๊ฐ์ ๋ธ๋ก์์๋ ๋ ์์ปฌ ํ๊ฒฝ์ด๋ผ๋ ๋ด๋ถ ์ค๋ธ์ ํธ๋ฅผ ๊ฐ์ง๊ณ ์๋ค. ๊ทธ๋์ ๊ฐ ๋ธ๋ก๋ง๋ค ์ด๋ค ๋ณ์๊ฐ ๋ค์ด์๋์ง ๋ถ๋ชจ๋ ๋๊ตฌ์ธ์ง?
์ด๋ฐ ๊ฒ์ ์ถ์ ํ๋ ๊ฒ์ด ๋ ์์ปฌ ํ๊ฒฝ์ด๋ผ๊ณ ํ๋ค.
์๋ฐ์คํฌ๋ฆฝํธ ์์ง์ ์ด๋ฐ ์คํ ์์์ ๊ฐ๊ฐ์ ๋ธ๋ก์ ์ ๋ณด๋ค์ ํ ์ค๋ธ์ ํธ์ ๋ฐ์ดํฐ๋ฅผ ๋ด์๋๊ณ ์๋ค.
const a = 1; // ์ ์ญ ์ค์ฝํ
{
const a = 2; // ๋ธ๋ก ์ค์ฝํ 1
{
const a = 3; // ๋ธ๋ก ์ค์ฝํ 2
}
}
์ค์ฝํ๋ ์๋ณ์๊ฐ ์ ํจํ ๋ฒ์๋ฅผ ๋ํ๋ด๋๋ฐ, ์ค์ฝํ ๋ฐ์์๋ ์ค์ฝํ ๋ด๋ถ์ ์๋ ๊ฒ์ ์ ๊ทผํ ์ ์์ง๋ง ์ค์ฝํ ๋ด๋ถ์์๋ ์ค์ฝํ ์ธ๋ถ์ ์๋ ์ด๋ค ๋ถ๋ชจ์ ๋ฐ์ดํฐ๋ ์ ๊ทผํ ์ ์๋ค.
์ ๊ทผํ ์ ์๋ ์ด์ ๋? ๋ ์์ปฌ ํ๊ฒฝ ์ฐธ์กฐ์ ์ค์ฝํ ์ฒด์ธ์ ํตํด ๋ถ๋ชจ์ ์ ๊ทผํ ์ ์๋ ๊ฒ์ด๋ค!
๋ณดํต let๊ณผ const๋ฅผ ๋ง์ด ์ฌ์ฉํ๋ค.
์ ๋ณ์ ํค์๋๊ฐ ์๊ธฐ๊ธฐ ์ ๊น์ง๋ ๋ฌธ์ ๋ฉ์ด๋ฆฌ์ธ var
๋ฅผ ์ฌ์ฉํ๋ค.
๊ธฐ๋ณธ์ ์ผ๋ก ํจ์์ ํธ์ด์คํ
์ ํจ์์ ์ ์ธ๋ฌธ ์ ์ ํธ์ถ์ด ๊ฐ๋ฅํ๊ฒ ํด์ค๋ค.
ํจ์์ ์ ์ธ๋ฌธ์ ์ ์ธ ์ด์ ์๋ ํธ์ถ์ด ๊ฐ๋ฅํ๋ค๋ ๊ฒ์ด๋ค.
print();
function print() {
console.log('hello');
}
ํ์ง๋ง ! ๋ณ์๋ ๋ณ์ ์ ์ธํ๊ธฐ ์ด์ ์ ํธ์ถํ๋ฉด ์ฑ์ด ์ฃฝ์ด๋ฒ๋ฆฐ๋ค.
console.log(hi); // โ ๏ธ
let hi = 'hi';
ํจ์ ์ ์ธ๋ง ํธ์ด์คํ ์ด ๊ฐ๋ฅํด์ ํธ์ถ์ด ๊ฐ๋ฅํ๊ณ , ๋ณ์(let, const)์ ํด๋์ค๋ ์ ์ธ๋ ์ด๋ฆ๋ง ํธ์ด์คํ ์ด ๊ฐ๋ฅํ๊ณ ๊ฐ ์์ฒด๋ ์์๋๋ก ์ฝ๋ ์ฐจ๋ก๊ฐ ์์ ๋๋ง ๊ฐ๋ฅํ๋ค.
var๋ let๊ณผ const์ ๋ค๋ฅด๊ฒ๋ ํธ์ถ์ด ๊ฐ๋ฅํจ!
์ด๊ฒ ๋ฟ๋ง ์๋๋ผ var์ ๋ค๋ฅธ ํน์ง์ ๋ํด์๋ ์์ด๋ณธ๋ค๋ฉด
var hi = '1';
var hi = '2';
์ด๋ ๊ฒ ๊ฐ๋ฅ! ๊ทธ๋์ let์ ์ฌ์ฉํ๋ฉด ์ฌ์ ์ธ ํ ์ ์๋ค๊ณ ์น์ ํ๊ฒ ์ค๋ฅ ๋ฌธ๊ตฌ๋ก ์๋ด๊ฐ ๋์ง๋ง var๋ ๊ฐ๋ฅ
๋ฆฌ์กํธ์ ๊ฐ์ ํ๋ ์์ํฌ ์ฌ์ฉ์ ๊ธฐ๋ณธ์ ์ผ๋ก ์๊ฒฉ๋ชจ๋๊ฐ ํ์ฌ๋์ด์๋ค.
๊ทธ๋๋ ์๊ฒฉ๋ชจ๋๊ฐ ๋ญ์ง ์์๋ณด์.
for(i=1; i<5; i++) {
}
์ด๋ฐ์์ผ๋ก ์ ์ธํ๊ฒ ๋ ๊ฒฝ์ฐ, ๋ณ์ ์ ์ธ ํค์๋๋ฅผ ์ ๋๋ก ์ฌ์ฉํ์ง ์์์ ๋
์๊ฒฉ๋ชจ๋๋ฅผ ์ฌ์ฉํ๋ฉด ์๋ฐ์คํฌ๋ฆฝํธ์ ๋์ ๋ฒ๋ฆ๋ค์ ์ก์์ค๋ค.
function outer() {
const x = 0;
function inner() {
x; // ๊ฐ์ธ๊ณ ์๋ ํจ์์ ๋ณ์์ ์ ๊ทผ์ด ๊ฐ๋ฅํ๋ค. ์ด์ ๋ ํด๋ก์ ๋ฒํ ๋๋ฌธ
}
inner();
}
outer();
์ด๋ฐ ํจ์๊ฐ ์๋ค๊ณ ๋ณธ๋ค๋ฉด, ์คํ ์ปจํ ์คํธ ์คํ์ ์ ์ญ ์ค์ฝํ ๋ ์์ปฌ ํ๊ฒฝ์ด ๋จผ์ ๋ค์ด์ค๊ณ ๊ทธ ๋ค์์ outer๋ผ๋ ์ค์ฝํ ๋ ์์ปฌ ํ๊ฒฝ์ด ๋ค์ด์จ๋ค. ๊ทธ๋์ outer ๋ ์์ปฌ ํ๊ฒฝ ์์ inner ์ค์ฝํ๊ฐ ๋ค์ด์ค๊ฒ ๋๋ค.
๋ฌธ๋งฅ์ ๋ฐ๋ผ ์ด๊ฒ์ด ๊ฐ๋ฆฌํค๋ ๊ฒ์ด ๋ฌ๋ผ์ง๋ค.
this๋ ๋ด๊ฐ ์์ผ๋ก ๋ง๋ค์ด์ง ์ธ์คํด์ค๋, ๊ฐ์ฒด ์๊ธฐ ์์ ์ ๊ฐ๋ฆฌํค๋ ์ฉ๋๋ก ์ฌ์ฉ๋๋ค. ํน์ ํ ๊ฐ์ฒด์ this๋ฅผ ๋ฌถ์ด๋์ ๊ฒ์ this ๋ฐ์ธ๋ฉ์ด๋ผ๊ณ ์นญํ๋ค.
์๋ฐ์คํฌ๋ฆฝํธ์์ this๋ ๋ค๋ฅธ ์ธ์ด๋ค๊ณผ ๋ค๋ฅด๊ฒ ์ฌ์ฉ๋๋ค. ์๋ฐ๋ C, C++ ๊ฐ์ ๊ฒฝ์ฐ this๋ ํ๋์ ์ธ์คํด์ค์ ๊ณ ์ ๋์ง๋ง, ์๋ฐ์คํฌ๋ฆฝํธ ๋๋ ํ์ ์คํฌ๋ฆฝํธ๋ ๋ฐํ์ ์์์ this ๋ฐ์ธ๋ฉ์ด ๋์ ์ผ๋ก ๊ฒฐ์ ๋๋ค.
๊ธ๋ก๋ฒ ์ปจํ ์คํธ๋ ๊ธฐ๋ณธ์ ์ผ๋ก 2๊ฐ์ง๊ฐ ์๋ค. (1) ๋ธ๋ผ์ฐ์ (2) Node ๊ฐ ์๋๋ฐ
globalThis
๋ฅผ ์ถ๋ ฅํ๋ฉด ๋
ธ๋์์ ์ฌ์ฉ๋๋ ์ ์ญ ๊ฐ์ฒด๋ค์ด ์ถ๋ ฅ๋๋ค.(ex) setTimeout, setInterver ๊ฐ์ ๊ฒ๋ค
function hello() {
console.log(this)
}
hello();
this.myName = this.myName.bind(this)
this.myName = () => {
console.log(`ํ์ด ${this.name}`);
}
์ด๋ฐ์์ผ๋ก ์ฌ์ฉํ ์ ์๋ค.
์ด๋ฐ ์ด์ ๋ค๋ก ์ธํด ์ฝ๋์ ์์ ์ฑ๊ณผ ๋ ๋์ ๊ฐ๋ฐ ๋๋ฒ๊น ์ด ๊ฐ๋ฅํ๋ค. ๋ฐ์ดํฐ๊ฐ ์ด๋ค ํ์ ์ธ์ง ์ง๊ด์ ์ผ๋ก ์ ์ ์์! ๊ทธ๋์ ์ฝ๋ ํ๋ฆฌํฐ๋ฅผ ๋ํ์ค๋ค.
event.stopPropagation()
๋ ์๋ก ์ ๋ฌํ๋ ๊ฒ์ ์ค์ง ์์ผ์ค๋ค. ํ์ง๋ง ๊ฐ๋ฅํ๋ฉด ์ฌ์ฉํ์ง ์๋ ๊ฒ์ด ์ข๋ค.์๋ฐ์คํฌ๋ฆฝํธ๋ ์ฑ๊ธ ์ค๋ ๋ ๊ธฐ๋ฐ ์ธ์ด๋ก, ๋จ์ผ ์ฝ ์คํ์ ๊ฐ์ง๋ค. ์ด ๋ง์ ์์ฒญ์ด ๋๊ธฐ์ ์ผ๋ก ์ฒ๋ฆฌ๋๋ ๊ฒ์ ์๋ฏธํ๋ค.
๊ทธ๋ ๋ค๋ฉด ๋น๋๊ธฐ ์์ฒญ์ ์ด๋ป๊ฒ ์ฒ๋ฆฌ ๋ ์ ์์๊น ? ๐คท๐ปโโ๏ธ
๊ทธ๊ฒ์ ๋ฐ๋ก ์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ์คํํ๋ ํ๊ฒฝ์ธ ๋ธ๋ผ์ฐ์ ๋ Node.js๊ฐ ๋ด๋นํ๋ค. ์ฌ๊ธฐ์ ์๋ฐ์คํฌ๋ฆฝํธ ์์ง๊ณผ ๊ทธ ์คํํ๊ฒฝ์ ์ํธ ์ฐ๋ ์์ผ์ฃผ๋ ์ฅ์น๊ฐ ๋ฐ๋ก ์ด๋ฒคํธ ๋ฃจํ์ด๋ค.
์ด๋ฒคํธ ๋ฃจํ๋ 2๊ฐ์ ํ๋ฅผ ๊ฐ์ํ๊ณ ์๋ค๊ฐ ์ฝ ์คํ์ด ๋น๊ฒ ๋๋ฉด, ์ฝ๋ฐฑํจ์๋ฅผ ๊บผ๋ด์์ ์คํํ๋ค. ์ด ๋ ๋ง์ดํฌ๋ก ํ์คํฌ ํ์ ์ฝ๋ฐฑํจ์๊ฐ ์ฐ์ ์์๋ฅผ ๊ฐ์ง๊ณ ๋๋ฌธ์ ๋ง์ดํฌ๋กํ์คํฌ ํ์ ์ฝ๋ฐฑ ํจ์๋ฅผ ์ ๋ถ ์คํํ๊ณ ๋์ ๋งคํฌ๋กํ์คํฌ ํ์ ์ฝ๋ฐฑ ํจ์๋ค์ ์คํํ๋ค. (๋จ, UI ๋ ๋๋ง์ด ๋งคํฌ๋กํ์คํฌ ํ์ ์ํ๊ธฐ ๋๋ฌธ์ ๋ง์ดํฌ๋กํ์คํฌ ํ์ ํ์คํฌ๊ฐ ๋ง์ผ๋ฉด ๋ ๋๋ง์ด ์ง์ฐ๋ ์ ์๋ค.)
์๋ฐ์คํฌ๋ฆฝํธ์ ์คํ ํ๊ฒฝ์ 2๊ฐ์ง ํ๋ฅผ ๊ฐ์ง๊ณ ์์ผ๋ฉฐ ๊ฐ๊ฐ ์คํฌ๋ฆฝํธ ์คํ, ์ด๋ฒคํธ ํธ๋ค๋ฌ, ์ฝ๋ฐฑํจ์ ๋ฑ์ ํ์คํฌ๊ฐ ๋ด๊ธฐ๋ ๊ณต๊ฐ์ด๋ค. ํ์คํฌ๊ฐ ์ฝ๋ฐฑํจ์๋ผ๋ฉด ๊ทธ ์ข ๋ฅ์ ๋ฐ๋ผ ๋ค๋ฅธ ํ์ ๋ด๊ธฐ๋ฉฐ ๋ํ์ ์ผ๋ก๋ ์ด์ ๊ฐ์ ๊ฒ๋ค์ด ์๋ค.
๋งคํฌ๋กํ์คํฌ ํ
setTimeout()
, setInterval()
, UI ๋ ๋๋ง, requsetAnimationFrame()
, script
, mousemove
์ผ๋ฐ์ ์ธ ์ด๋ฒคํธ ํธ๋ค๋ฌ, ์ฝ๋ฐฑํจ์๋ผ๊ณ ๋ณด๋ฉด ๋๋ค.
๋ง์ดํฌ๋กํ์คํฌ ํ
Promise
(.then/catch/finally), MutationObserver
, await
console.log('์๋
');
setTimeout(() => console.log('ํ!'),0);
Promise.resolve().then(() => console.log('๋ง์ดํฌ๋ก ํ!'));
์์ ๊ฐ์ ์ฝ๋๊ฐ ์์ ๋, ๊ฒฐ๊ณผ๋ ์ด์ ๊ฐ๋ค.
์๋
๋ง์ดํฌ๋ก ํ!
ํ!
์ฒ์ ์คํฌ๋ฆฝํธ๊ฐ ๋ก๋๋ ๋, ์คํฌ๋ฆฝํธ ์คํ
์ด๋ผ๋ ํ์คํฌ๊ฐ ๋จผ์ ํ์คํฌ ํ์ ๋ค์ด๊ฐ๋ค. ๊ทธ๋ฆฌ๊ณ ๋์ ์ด๋ฒคํธ ๋ฃจํ๊ฐ ํ์คํฌ ํ์์ ํด๋น ํ์คํฌ๋ฅผ ๊ฐ์ ธ์ ์ฝ ์คํ์ ์คํํ๋ ๊ฒ์ด๋ค.
[[Prototype]]
์ด ์์ ์ ํ๋กํ ํ์
๊ฐ์ฒด๋ฅผ ์ฐธ์กฐํ๋ค. ์ด๋ฅผ __proto__
๋ผ๋ ์์ฑ์ผ๋ก ์ฐธ์กฐํ ์ ์์ผ๋ ์ด๋ ๋นํ์ค์ด๊ณ ๋ชจ๋ ๋ธ๋ผ์ฐ์ ์์ ๋์ํ๋ ๊ฒ์ ์๋๊ธฐ ๋๋ฌธ์ ์ค์ ๋ก ์ฌ์ฉํ๋ ๊ฒ์ ํผํด์ผ ํ๋ค.[[Prototype]]
: ์์ ์ ํ๋กํ ํ์
๊ฐ์ฒด๋ฅผ ์ฐธ์กฐํ๋ ์์ฑ.prototype
: new
์ฐ์ฐ์๋ก ์์ ์ ์์ฑ์ ํจ์๋ก ์ฌ์ฉํ ๊ฒฝ์ฐ, ๊ทธ๊ฑธ๋ก ๋ง๋ค์ด์ง ์๋ก์ด ๊ฐ์ฒด์ [[Prototype]]
์ด ์ฐธ์กฐํ๋ ๊ฐ์ด๋ค.function Func() {}
var a = new Func();
์ด๋ค ๊ฐ์ฒด์ ํ๋กํผํฐ๋ฅผ ์ฐธ์กฐํ๊ฑฐ๋ ๊ฐ์ ํ ๋นํ ๋ ํด๋น ๊ฐ์ฒด์ ํ๋กํผํฐ๊ฐ ์์ ๊ฒฝ์ฐ, ๊ทธ ๊ฐ์ฒด์ ํ๋กํ ํ์
๊ฐ์ฒด๋ฅผ ์ฐ์์ ์ผ๋ก ๋ณด๋ฉด์ ํ๋กํผํฐ๋ฅผ ์ฐพ๋ ๋ฐฉ์ ์ ํ๋กํ ํ์
์ฒด์ธ์ด๋ผ๊ณ ํ๋ค.
๋จ, ์ฐธ์กฐํ ๋์ ๊ฐ์ ํ ๋นํ ๋์ ๋ฉ์ปค๋์ฆ์ด ๋ค๋ฅด๋ ๊ธฐ์ตํ๊ธฐ! ๐
ํ๋กํผํฐ๋ฅผ ์ฐธ์กฐํ ๋
[[Prototype]]
๋งํฌ๋ฅผ ํ๊ณ ๋๊ฐ์ง ์ฌ๋ผ๊ฐ๋ฉด์ ํด๋น ํ๋กํผํฐ๋ฅผ ์ฐพ๋๋ค.undefined
๋ฅผ ๋ฐํํ๋ค.ํ๋กํผํฐ์ ๊ฐ์ ํ ๋นํ ๋
[[Prototype]]
๋งํฌ๋ฅผ ํ๊ณ ์ฌ๋ผ๊ฐ์ ํด๋น ํ๋กํผํฐ๋ฅผ ์ฐพ์์ ๊ฒฝ์ฐQ. ์น ๋ธ๋ผ์ฐ์ ์ www.naver.com
์ ์
๋ ฅํ๋ฉด ์ผ์ด๋๋ ์ผ์ ์ค๋ช
ํด๋ณด์๋ผ.
A. ์ฃผ์์ฐฝ์ URL ๊ฐ ๋๋ฉ์ธ ๋ค์(DNS)์ ์ ๋ ฅ์ ํ์ ๋, DNS ์๋ฒ๋ก ์ ์กํ์ฌ IP ์ฃผ์๋ฅผ ๋ฐ์์ต๋๋ค. ํด๋น IP ์ฃผ์๋ก HTML๊ณผ ๊ฐ์ ๋ฆฌ์์ค ํ์ผ(JS, HTML, CSS)์ ์์ฒญํ๊ณ ๋ฐ์์จ ๋ฆฌ์์ค ํ์ผ์ ๋ธ๋ผ์ฐ์ ๊ฐ ๋ ๋๋งํ์ฌ ์ฌ์ฉ์์๊ฒ ๋ณด์ฌ์ค๋๋ค.
๋ธ๋ผ์ฐ์ ๊ฐ ๋ฐ์์จ ๋ฆฌ์์ค๋ฅผ ์ด๋ป๊ฒ ๋ ๋๋ง ํ๋๋ฉด, HTML ํ์ผ์ ํ์ฑํ์ฌ DOM ํธ๋ฆฌ๋ฅผ ๊ตฌ์ฑ -> CSS ํ์ผ ๋ํ ํ์ฑํด์ CSSOM ํธ๋ฆฌ๋ฅผ ๊ตฌ์ฑํ๊ณ ์ด ๋ ํธ๋ฆฌ๋ฅผ ํฉ์ณ ๋ ๋ ํธ๋ฆฌ(render tree)๋ฅผ ๊ตฌ์ฑํฉ๋๋ค. ๊ทธ๋ผ ์ด ๋ ๋ ํธ๋ฆฌ ๊ธฐ๋ฐ์ผ๋ก ๋ ๋๋งํ๊ฒ ๋ฉ๋๋ค.
์๋๊ฑฐ์๋๋ฐ ๋ค ๊น๋จน์๋ค์ ๋์ค์ ๋ค์ํ๋ฒ ๊ณต๋ถํด์ผ ๊ฒ ์ต๋๋ค