TIL017_210408

keepcalmยท2021๋…„ 4์›” 8์ผ
0

TIL

๋ชฉ๋ก ๋ณด๊ธฐ
17/24
post-thumbnail

๐ŸŠ ๊ฐ์ƒ

๐Ÿ“™ ์—ดํ’ˆํƒ€ ์ฝ”๋”ฉ ์‹œ๊ฐ„ 9hour
๐Ÿ‘๐Ÿผ -
๐Ÿ‘Ž๐Ÿผ -

๐Ÿš€ ๋ชฉํ‘œ

  • Udemy์—์„œ Javascript ๊ฐ•์ขŒ ์ˆ˜๊ฐ•ํ•˜๊ธฐ (332/682)
  • ์ปค๋ฐ‹ ์—ฐ์† 30์ผ ๋‹ฌ์„ฑํ•˜๊ธฐ (2/30, 4.08 ์™„๋ฃŒ)

[๋งํฌ ๋ชฉ๋ก]
Web Developer Bootcamp 2021
๋ชจ๋˜ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ํŠœํ† ๋ฆฌ์–ผ

๐Ÿ“ฃ The Web Developer Bootcamp 2021: 26.3-26.7

26. DOM

26-3. Input & Change Events

input value๋ฅผ ์ž…๋ ฅํ•œ ๋Œ€๋กœ ์—…๋ฐ์ดํŠธํ•˜๊ธฐ

input.addEventListenr('input', function(e) {
	hi.innerText = input.value;
})

์ž…๋ ฅํ•˜๋Š” ๋Œ€๋กœ ์œ ์ €๋„ค์ž„ ๋ณด์—ฌ์ฃผ๊ธฐ

const heading = document.querySelector('h1');
const input = document.querySelector('input');
 
input.addEventListener('input', function (e) {
    if (!this.value) {
        heading.innerText = `Enter Your Username`;
    } else {
        heading.innerText = `Welcome, ${this.value}`;
    }
});

// Alternative Solution
let header = document.querySelector('h1');
let input = document.querySelector('input');
 
input.addEventListener('input', () => {
   header.innerHTML =`Welcome, ${input.value}`;
   if (input.value === ""){
       header.innerHTML = 'Enter Your Username';
    }
});

26-4. Event Building

Event Bubbling

event๊ฐ€ lower level ๋ถ€ํ„ฐ higher level๊นŒ์ง€ trigger๋˜๋Š” ๊ฒƒ
๋‹ค์Œ ์ฝ”๋“œ๋กœ bubbling์„ ๋ง‰์„ ์ˆ˜ ์žˆ๋‹ค

e.stopPropagation();

26-5. Event Delegation

์ž‘์„ฑํ•œ ํŠธ์œ— ์ง€์šฐ๊ธฐ

tweetsContainer.addEventListener('click',function(e) {
	e.target.nodeName === 'LI' && e.target.remove();
})

26-6. Score Keeper

๐Ÿ“ฃ Interview Question for Beginner

Part 1-1 Development common sense

๊ฐ์ฒด ์ง€ํ–ฅ ํ”„๋กœ๊ทธ๋ž˜๋ฐ(OOP)

์˜์ƒ ์„ค๋ช…
๋ฐ์ดํ„ฐ์™€ ๊ธฐ๋Šฅ์ด ํด๋ž˜์Šค๋กœ ์บก์Šํ™”๋œ ์ปดํ“จํ„ฐ ์ž์›์˜ ๋ฌถ์Œ์„ ๊ฐ์ฒด๋ผ ํ•œ๋‹ค
์€๋‹‰์„ฑ :private public
์ƒ์† :๋ถ€๋ชจ ํด๋ž˜์Šค- ์ž์‹ ํด๋ž˜์Šค
๋‹คํ˜•์„ฑ : override
์ธํ„ฐํŽ˜์ด์Šค
์ถ”์ƒ ํด๋ž˜์Šค
์ฝ”๋“œ์˜ ์žฌ์‚ฌ์šฉ์„ฑ - ์ž์ฃผ ์‚ฌ์šฉ๋˜๋Š” ๋กœ์ง์„ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋กœ ๋งŒ๋“ค์–ด ๋‘˜ ์ˆ˜ ์žˆ๋‹ค

๐Ÿ“ฃ ๊ธฐ๋ณธ ๊ฐœ๋ฐœ ์šฉ์–ด

๋งํฌ

ํ”„๋กœ์„ธ์Šค์™€ ์Šค๋ ˆ๋“œ

ํ”„๋กœ์„ธ์Šค

ํ”„๋กœ์„ธ์Šค: ์ปดํ“จํ„ฐ์—์„œ ํ”„๋กœ๊ทธ๋žจ์ด ์‹คํ–‰๋ผ์„œ ๋Œ์•„๊ฐ€๊ณ  ์žˆ๋Š” ์ƒํƒœ
๋ฉ€ํ‹ฐํƒœ์Šคํ‚น : ์—ฌ๋Ÿฌ ๊ฐœ์˜ ํ”„๋กœ์„ธ์Šค๋ฅผ ํ•จ๊ป˜ ๋Œ๋ฆฌ๊ณ  ์žˆ๋‹ค, ๋™์‹œ์ , ๋ณ‘๋ ฌ์ 
๋™์‹œ์„ฑ(concurrency) : ํ”„๋กœ์„ธ์Šค ํ•˜๋‚˜๊ฐ€ ์—ฌ๋Ÿฌ ์ž‘์—…๋“ค์„ ์ผ๋ถ€๋ถ„์”ฉ ์ง„ํ–‰ํ•˜๋Š” ๊ฒƒ - context switching
๋ณ‘๋ ฌ์ (parallelism) : ํ”„๋กœ์„ธ์Šค ํ•˜๋‚˜์— ์ฝ”์–ด ์—ฌ๋Ÿฌ ๊ฐœ๊ฐ€ ๋‹ฌ๋ ค์„œ ๊ฐ๊ฐ ๋™์‹œ์— ์ž‘์—…์„ ์ˆ˜ํ–‰ํ•˜๋Š” ๊ฒƒ, ๋“€์–ผ์ฝ”์–ด, ์ฟผ๋“œ์ฝ”์–ด ๋“ฑ,
์ปดํ“จํ„ฐ๋Š” ํ”„๋กœ์„ธ์Šค๋งˆ๋‹ค ์ž์›์„ ๋ถ„ํ• ํ•ด์„œ ํ• ๋‹นํ•œ๋‹ค

์Šค๋ ˆ๋“œ

ํ”„๋กœ์„ธ์Šค๋งˆ๋‹ค ์ฃผ์–ด์ง„ ์ž์›์„ ์‚ฌ์šฉ
ํ•œ ํ”„๋กœ์„ธ์Šค ์•ˆ์— ๋‘ ๊ฐœ์˜ ์Šค๋ ˆ๋“œ ์‹คํ–‰ -> ๊นŒ๋‹ค๋กญ๊ณ  ์˜ค๋ฅ˜ ๋งŽ์Œ

์ปดํŒŒ์ผ๋Ÿฌ์™€ ์ธํ„ฐํ”„๋ฆฌํ„ฐ

๋””๋ฒ„๊น…

์†Œํ”„ํŠธ์›จ์–ด ๋ฌธ์ œ์˜ ์›์ธ ์ฐพ์Œ, ๊ฐœ๋ฐœ ์ค‘์ธ ์ƒํƒœ๋กœ ์“ฐ์ด๊ธฐ๋„

์ปดํŒŒ์ผ๋Ÿฌ

์ฝ”๋”ฉ -> ์ปดํ“จํ„ฐ ์•Œ์•„๋ณผ ์ˆ˜ ์žˆ๋„๋ก ๋ฏธ๋ฆฌ ํ•ด๋†“์œผ๋ฉด ์ปดํŒŒ์ผ๋Ÿฌ
์ปดํŒŒ์ผ๋Ÿฌ(ํ”„๋กœ๊ทธ๋žจ)์ด ์ฝ”๋“œ์„ ๊ธฐ๊ณ„์–ด ๋˜๋Š” ์ค‘๊ฐ„์–ธ์–ด๋กœ ๋ฒˆ์—ญ -> ์ปดํŒŒ์ผ ์–ธ์–ด๋ผ๊ณ  ํ•œ๋‹ค(.class) -> jvm์ด๋ผ๋Š” ์ž๋ฐ” ๊ฐ€์ƒ ๋จธ์‹ ์ด ์„ค์น˜๋œ ๋ชจ๋“  ์ข…๋ฅ˜์˜ ๊ธฐ๊ณ„์—์„œ ํ†ต์šฉ๋œ๋‹ค - ์†Œํ”„ํŠธ์›จ์–ด ๋™์ž‘

์ธํ„ฐํ”„๋ฆฌํ„ฐ (์Šคํฌ๋ฆฝํŠธ ์–ธ์–ด)

์ฝ”๋”ฉ -> ์ปดํ“จํ„ฐ ์•Œ์•„๋ณผ ์ˆ˜ ์žˆ๋„๋ก ๊ทธ๋•Œ๊ทธ๋•Œ ํ•˜๋ฉด ์ธํ„ฐํ”„๋ฆฌํ„ฐ
์‹ค์‹œ๊ฐ„ ํ†ต์—ญ, ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ, ํŒŒ์ด์ฌ, ๋ฃจ๋น„
์ฝ”๋“œ ์ˆ˜์ •๊ณผ ์—…๋ฐ์ดํŠธ ์ˆ˜์›”, ์ปดํŒŒ์ผ๋Ÿฌ ์–ธ์–ด์— ๋น„ํ•ด ์‹คํ–‰ ์†๋„๋Š” ๋Š๋ฆฌ๋‹ค
ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์ฝ”๋“œ๊ฐ€ ์‰ฝ๊ฒŒ ๋ˆ„์ถœ๋˜๊ธฐ๋„ ํ•จ

๋นŒ๋“œ์™€ ๋ฐฐํฌ

๋นŒ๋“œ

์ฝ”๋“œ ํŒŒ์ผ + ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ + ์ด๋ฏธ์ง€ + ๊ธฐํƒ€ => ๋ณ€ํ˜• ๋ฐ ์••์ถ• : ๋นŒ๋“œ
์‚ฌ์šฉ์ž๊ฐ€ ๋ฐ”๋กœ ์‹คํ–‰ํ•  ์ˆ˜ ์žˆ๋„๋ก ํ•œ๋‹ค (.exe)
์ฝ”๋“œ ์••์ถ•์œผ๋กœ ์ „์ฒด ํฌ๊ธฐ ์ค„์ด๊ฑฐ๋‚˜ ๋‚œ๋…ํ™”
์ปดํŒŒ์ผ ์–ธ์–ด๋กœ ๋งŒ๋“ค์–ด์ง„ ์†Œํ”„ํŠธ์›จ์–ด๋Š” ๋นŒ๋“œ์— ์ปดํŒŒ์ผ ์ž‘์—…์ด ํฌํ•จ๋ผ ์žˆ๋Š” ๊ฒƒ

๋ฐฐํฌ

๋นŒ๋“œํ•œ ๊ฒฐ๊ณผ๋ฌผ์„ ์‚ฌ์šฉ์ž์—๊ฒŒ ์ „๋‹ฌํ•˜๋Š” ๊ณผ์ •

ํ™˜๊ฒฝ ๋ณ€์ˆ˜

  • ํ™˜๊ฒฝ: ์†Œํ”„ํŠธ์›จ์–ด๊ฐ€ ๋™์ž‘ํ•˜๋Š” ๊ณต๊ฐ„

  • ํ™˜๊ฒฝ ๋ณ€์ˆ˜ : ์ปดํ“จํ„ฐ๋งˆ๋‹ค ์ง€์ •๋œ ๊ฐ’
    ๊ฐœ๋ฐœ์šฉ(dev) ๋ฐฐํฌ์šฉ(prod) ๋ผ๋Š” ํ™˜๊ฒฝ ๋ณ€์ˆ˜ ๊ฐ’์„ ๋„ฃ๊ณ  ๊ทธ์— ๋”ฐ๋ผ ์กฐ๊ฑด์„ ์ฃผ์–ด์„œ ๊ฐœ๋ฐœ์šฉ ๋ฐฐํฌ์šฉ ๊ตฌ๋ถ„

๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์™€ ํ”„๋ ˆ์ž„ ์›Œํฌ

๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ: ๋ชจ๋“ˆํ™”๋œ ์ฝ”๋“œ, ๋˜๋Š” ๊ทธ ๋ฌถ์Œ (๋ฆฌ์•กํŠธ)
ํ”„๋ ˆ์ž„์›Œํฌ: ์†Œํ”„ํŠธ์›จ์–ด์˜ ๊ธฐ์ดˆ ์„ค๊ณ„๊ฐ€ ํ”„๋กœ๊ทธ๋ž˜๋ฐ๋ผ ์žˆ๋Š” ๊ฒƒ (์Šคํ”„๋ง, ์žฅ๊ณ , ๋ทฐ)

ํด๋ž˜์Šค์™€ ์˜ค๋ธŒ์ ํŠธ

๋งํฌ
class๋Š” ์—ฐ๊ด€ ์žˆ๋Š” data๋ฅผ ํ•œ ๋ฐ ๋ฌถ์–ด๋†“๋Š” container๊ฐ™์€ ๊ฒƒ

class person{ //class
	name; //property //์†์„ฑ(field)
    age; //property //์†์„ฑ(field)
    speak(); //function //ํ–‰๋™(method)
}

fields + methods -> class
method ์—†์ด fields๋งŒ ์žˆ๋Š” ๊ฒƒ์„ ๋ฐ์ดํ„ฐ ํด๋ž˜์Šค๋ผ๊ณ  ํ•œ๋‹ค
์บก์Šํ™” : ํด๋ž˜์Šค ๋‚ด์—์„œ ๋‚ด๋ถ€์ ์œผ๋กœ ๋ณด์—ฌ์ง€๋Š” ๋ณ€์ˆ˜์™€ ๋ฐ–์— ๋ณด์ด๋Š” ๋ณ€์ˆ˜๊ฐ€ ๋‚˜๋‰œ ๊ฒƒ (incapsulation)

class: ์ฒญ์‚ฌ์ง„, ํ‹€, ํ…œํ”Œ๋ฆฟ (teplate, declare once, no data in), ๋ถ•์–ด๋นต ํ‹€
์ •์˜๋งŒ ํ•œ ๊ฒƒ์ด๋ผ์„œ ๋ฉ”๋ชจ๋ฆฌ์— ์˜ฌ๋ผ๊ฐ€์ง€ ์•Š์Œ

object: ํด๋ž˜์Šค์— ์‹ค์ œ๋กœ ๋ฐ์ดํ„ฐ๋ฅผ ๋„ฃ์–ด์„œ ๋งŒ๋“œ๋Š” ๊ฒƒ, instance of a class, created many times, data in, ํŒฅ๋ถ•์–ด๋นต, ํฌ๋ฆผ๋ถ•์–ด๋นต, ํ”ผ์ž๋ถ•์–ด๋นต

  • jsํŒŒ์ผ์— 'use strict'; ๋„ฃ๊ธฐ -> declared๋˜์ง€ ์•Š์€ ๊ฒƒ์€ ์—๋Ÿฌ๊ฐ€ ๋ฐœ์ƒํ•จ
    ์ž˜๋ชป ์ž…๋ ฅํ•œ ๋ณ€์ˆ˜ ์ด๋ฆ„์ด global variable์ด ๋˜์ง€ ์•Š๋„๋ก ํ•ด์ค€๋‹ค
    ๋งํฌ

ํŒŒ๋ผ๋ฏธํ„ฐ

ํ•จ์ˆ˜ ํ•˜๋‚˜๋กœ ๋‹ค์–‘ํ•œ ๊ธฐ๋Šฅ์„ ์‹คํ–‰ํ•  ์ˆ˜ ์žˆ๋‹ค
๋งํฌ

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ํด๋ž˜์Šค ์„ ์–ธ

clss declaration

object ์ƒ์„ฑ -> const object = new class(constructor fields);

c์–ธ์–ด : procedure์–ธ์–ด - ํ•จ์ˆ˜ ํ˜ธ์ถœ ์‹คํ–‰ ์–ธ์–ด
java: object oriented programming ์–ธ์–ด
class: ์ปคํ”ผ ๋ฒค๋”ฉ ๋จธ์‹ 
property

  • integer: number of coffee (์‚ฌ์šฉ์ž๊ฐ€ -1์œผ๋กœ ์„ค์ •ํ•ด๋„ 0์œผ๋กœ ๋  ์ˆ˜ ์žˆ๋„๋ก getter์™€ setter์„ ์“ฐ๋Š” ๊ฒƒ) (๋‹ค๋ฅธ ์‚ฌ๋žŒ์ด integer ์ˆ˜์ •ํ•  ์ˆ˜ ์—†๋„๋ก private์œผ๋กœ ๋งŒ๋“œ๋Š” ๊ฒŒ incapsulation)
  • method: ๋™์ „ ๋„ฃ๊ธฐ / ์ปคํ”ผ ๋งŒ๋“ค๊ธฐ

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์ž๋ฃŒํ˜•

๋งํฌ

const name = "Mike"; //๋ฌธ์ž์—ด string
const name1 = "Mike"; //ํฐ๋”ฐ์˜ดํ‘œ
const name1 = 'Mike'; //์ž‘์€๋”ฐ์˜ดํ‘œ - ์—ญ์Šฌ๋Ÿฌ์‰ฌ๋กœ ํŠน์ˆ˜๋ฌธ์ž ์ธ์‹ ๊ฐ€๋Šฅ
const name1 = `Mike`; //๋ฐฑํ‹ฑ - ๋ฌธ์ž์—ด ๋‚ด๋ถ€ ๋ณ€์ˆ˜ ํ‘œํ˜„

const age = 30; //์ˆซ์žํ˜•

const a = true; // boolean

null //์กด์žฌํ•˜์ง€ ์•Š๋Š” ๊ฐ’
undefined //๊ฐ’์ด ํ• ๋‹น๋˜์ง€ ์•Š์•˜๋‹ค -> ๋ณ€์ˆ˜ ์„ ์–ธ๋งŒ ํ•˜๊ณ  ํ• ๋‹นํ•˜์ง€ ์•Š์œผ๋ฉด
let age; 
console.log(age) //undefined

//๊ฐ์ฒดํ˜•
//์‹ฌ๋ณผํ˜•

console.log(typeOf null); //object, ๊ฐ์ฒด์˜ ์ž๋ฃŒํ˜•์„ ์•Œ์•„๋‚ผ ์ˆ˜ ์žˆ๋‹ค, ๋‹ค๋ฅธ ํ”„๋กœ๊ทธ๋ž˜๋จธ์˜ ์ฝ”๋“œ๋ฅผ ๋ณด๊ฑฐ๋‚˜ api ์—์„œ ๋ฐ›์•„์˜จ ๋ฐ์ดํ„ฐ๋ฅผ ์ฒ˜๋ฆฌํ•ด์•ผ ํ•  ๋•Œ ์ž์ฃผ ์“ธ ์ˆ˜ ์žˆ๋‹ค
//์—ฌ๊ธฐ์„  null์ด ๊ฐ์ฒด๋ผ๊ณ  ๋‚˜์˜ค์ง€๋งŒ ๊ฐ์ฒด๊ฐ€ ์•„๋‹ˆ๋‹ค, ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์ดˆ๊ธฐ ๋ฒ„์ „์˜ ์˜ค๋ฅ˜์ž„

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—์„  ๋ฌธ์žํ˜• ์ˆซ์žํ˜• ์„ž์–ด์„œ ์“ธ ์ˆ˜ ์žˆ์œผ๋‚˜ ๋ฌธ์žํ˜•์œผ๋กœ ๋ณ€๊ฒฝ๋จ

getter & setter

get์ด๋ผ๋Š” ํ‚ค์›Œ๋“œ๋กœ ๊ฐ’ ๋ฆฌํ„ด
set์œผ๋กœ ๊ฐ’ ์„ค์ • - value ๋ฐ›์•„์™€์•ผ ํ•จ

๐Ÿ“ฃ ์ž๋ฐ”์˜ ์ •์„

์ž๋ฐ”๋ž€

์‹คํ–‰ํ™˜๊ฒฝ(JRE) + ๊ฐœ๋ฐœ๋„๊ตฌ(JDK) + ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ(API)

pc ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ - IJ, eclipse
์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ - ์Šคํ”„๋ง ํ”„๋ ˆ์ž„์›ค
๋ชจ๋ฐ”์ผ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜(์•ˆ๋“œ๋กœ์ด๋“œ)
๋น… ๋ฐ์ดํ„ฐ - hadoop(๊ธฐ๋ณธ ํ”Œ๋žซํผ)
๊ฒŒ์ž„(๋งˆ์ธ ํฌ๋ž˜ํ”„ํŠธ), ๊ณผํ•™, ์†Œํ˜•๊ธฐ๊ธฐ ๋“ฑ

๋ชจ๋˜ ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์–ธ์–ด(๊ฐ์ฒด์ง€ํ–ฅ+ํ•จ์ˆ˜ํ˜•)

๋ฐฐ์šฐ๊ธฐ ์‰ฌ์šด ๊ฐ์ฒด์ง€ํ–ฅ ์–ธ์–ด
์ž๋™ ๋ฉ”๋ชจ๋ฆฌ ๊ด€๋ฆฌ (๊ฐ€๋น„์ง€ ์ปฌ๋ ‰ํ„ฐ, GC)
๋ฉ€ํ‹ฐ ์“ฐ๋ ˆ๋“œ๋ฅผ ์ง€์›
ํ’๋ถ€ํ•œ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ
์šด์˜์ฒด์ œ์— ๋…๋ฆฝ์  (์—ฌ๋Ÿฌ ์šด์˜์ฒด์ œ์—์„œ ์‹คํ–‰ ๊ฐ€๋Šฅ)
-> JVM ์ž๋ฐ” ๊ฐ€์ƒ ๋จธ์‹  ๋•๋ถ„์— write once, run anywhere

  • ๊ฐ€๋น„์ง€ ์ปฌ๋ ‰ํ„ฐ: memory leak(๋ฉ”๋ชจ๋ฆฌ ๋ˆ„์ˆ˜)๋ฅผ ๋ฐฉ์ง€, ์ž๋ฐ”๋Š” managed language, ๋žจ
  1. mark and sweep - root์—์„œ ๋‹ฟ์ง€ ์•Š๋Š” ๋ณ€์ˆ˜๋“ค์„ ์น˜์šด๋‹ค
  2. reference counting(์ฐธ์กฐ ์นด์šดํŒ…) - ์ฐธ์กฐ 0์ด ๋˜๋ฉด ์น˜์šด๋‹ค
    ์ˆœํ™˜ ์ฐธ์กฐํ•˜์ง€ ๋ง ๊ฒƒ - ๋ ˆํผ๋Ÿฐ์Šค ์นด์šดํŒ…์ด 0์ด ์•ˆ ๋ผ์„œ ์•ˆ ์น˜์›Œ์ง

Java ์„ค์น˜ ๋ฐ ์‹คํ–‰

๋ฉ”์„œ๋“œ - ํด๋ž˜์Šค ๊ฒ€์ƒ‰ํ•  ์ˆ˜ ์žˆ์Œ

0๊ฐœ์˜ ๋Œ“๊ธ€