(4/29 ~5/5) The Web Developer 부트캠프 2022 강의 내용 정리
범위 : DOM이란? ~ 터미널 완벽 정리(섹션 24 ~30)
웹 페이지를 구성하는 Javascript 객체들의 집합
Javascript로 HTML,CSS를 다룰 수 있게함.
클릭으로 목록을 확장하거나 접는 것
배경을 바꾼다거나 텍스트 입력, 버튼을 생기게 하는 것등이 그 예이다.
브라우저가 웹 페이지를 띄울 때 HTML,CSS 정보를 받아들인 다음 요소와 스타일을 기반으로 Javascript 객체를 생성한다. 이 때 생성되는 객체들은 트리 구조를 형성하며 유기적으로 연결 된 관계를 나타낸다. 이 트리 구조의 최상단에 있는 것이 document 객체이다. 또한 모든 특성과 메서드를 포함하고 있다.
이 트리 구조에 있는 객체들에 접근하여 html, css를 조작할 수 있다.
javascript에게 일치하는 id를 가진 요소를 페이지에서 찾아서 객체로 가져오라고 하는 메소드
문자열을 인수로 넣으면 일치하는 ID를 가진 요소를 찾아 나타낸다.
ID는 각 페이지마다 한 번만 나오게 되어 있어서 동일한 id가 있을 경우 먼저 검색된 element를 반환다.
/*
<div id="test">1</div>
<div id="test">2</div>
*/
document.getElementById('test');
//출력 <div id="test"></div>
// html에 <button id="saveBtn">저장</button>이 있다 가정하고 밑에 코드를 수행하면 해당 버튼 요소를 나타낸다.
document.getElementById('saveBtn'); // 없는 id를 넣을 경우엔 undefined가 출력된다.
일치하는 Tag명에 대해 관련히여 반환되는 객체인 element를 담은 HTMLCollection을 반환한다.
HTMLCollection은 배열이 아니지만 [],인덱스,for of 사용이 가능하다. 하지만 map은 사용할 수 없다.
document.getElementByTagName('img');
클래스명으로 element를 담은 HTMLCollection을 반환받는다.
document.getClassName('클래스명');
id, 클래스명, 요소 타입, 속성, CSS 스타일이든 원하는 선택자를 이용해서 첫 번째로 일치하는 element를 반환받는다.
document.querySelector('h1');
// tag를 선택자로할 경우
document.querySelector('.square');
// class를 선택자로할 경우 .을 붙인다.
document.querySelector('#banner');
// id를 선택자로할 경우 #을 붙인다.
document.querySelector('img:nth-of-type(2)'); // img태그에 해당하는 것 중 2번째 element 반환
//<a href="/wiki/Java" title="Java">
document.querySelector('a[title="Java"]');
//태그와 속성명을 선택자로할 경우
document.querySelector('[colors="blue"]');
//속성명을 선택자로할 경우
document.querySelector('p a');
//자식을 찾는 경우
사용법은 querySelector와 동일하지만 반환값이 NodeList이다.
HTMLCollection과 NodeList 차이
NodeList는 앞의 HTMLCollection과 다르게 노드가 변경되도 그 상태를 반영하지 않는다.
특정 요소의 포함된 마크업의 전체 내용을 출력
요소를 다른 요소 안에 추가,변경 할 때 사용
document.querySelector('h1').innerHTML = '<i>test</i>'; //변경
document.querySelector('h1').innerHTML += '<i>test</i>'; //추가
textContent 는 \
<p>
<strong>test </strong>
띄어쓰기
</p>
document.querySelector('p').textContent();
/* '\n test \n 띄어쓰기\n */
여는 태그와 닫는 태그 사이의 텍스트값을 반환한다.(개행 문자 포함)
innerText 는 "사람이 읽을 수 있는" 요소만 반환한다. 태그 무시 ,display=none인 요소는 처리하지 않는다.
<p>여기가 innerText 부분</p>
값 변경 시
document.querySelector('p').innerText = '변경 값';
<p>
<strong>test </strong>
띄어쓰기
</p>
document.querySelector('p').innerText; //'test 띄어쓰기'
HTML 자체에서 해당 속성 값을 직접 가져옴
직접 액세스 하는 경우엔 javascript를 거치게 됨
<a href="www.naver.com">네이버</a>
const firstLink = document.querySelector('a');
//직접 액세스 하는 경우엔 javascript를 거치게 됨
firstLink.href; //'http://127.0.0.1:5500/www.naver.com'
firstLink.getAttribute('href'); //'www.naver.com'
//css와 관련된 속성은 style을 붙여야함
firstLink.style.color;
속성 값을 변경함
const firstLink = document.querySelector('a');
firstLink.setAttribute('href', 'http://www.google.com');
//직접 액세스하는 경우
firstLink.href = 'http://www.google.com';
//css와 관련된 속성은 style을 붙여야함
firstLink.style.color = 'black';
속성(attribute)과 특성(property) 차이
속성은 html문서 상에서 element의 추가적인 정보를 넣을 때 사용되는 요소
특성은 html DOM tree안에서 존재하는 element의 추가적인 정보
속성과 특성을 구분하는 이유는 속성은 html상에서 정적인 값으로 변하지 않지만 특성은 DOM tree안에서 동적으로 변하기 때문
예를 들어 체크박스 태그가 있을 때 유저가 체크박스에 체크를 하면 속성의 상태는 변하지 않지만 특성의 상태는 checked로 변하게 된다.
const h1 = document.querySelector("h1");
h1.style.color="blue":
//<h1 style="color:blue;">테스트</h1>
클래스를 정의하여 요소에 해당 클래스를 추가하여 스타일 적용
.title {
color: blue;
}
<h1 class="title">타이틀</h1>
document.querySelector('h1').className = 'title';
document.querySelector('h1').classList.add('title');
CSSStyleDeclaration을 반환한다. css 정보를 갖고 있다.
window.getComputedStyle(h1).color;
부모, 자식 형제 요소 등에 액세스
요소를 제거,변경, 삽입하는 작업에 사용
부모 요소에 액세스
<html>
<body>
<p></p>
</body>
</html>
const p = document.querySelector('p');
p.parentElement; // <body></body>
p.parentElement.parentElement; // <html> ... <html>
자식 요소에 액세스
const p = document.querySelect('p').parentElement;
p.children; // HTMLCollection(2)[head,body]
다음 형제
다음 형제 (공백과 텍스트 노드 무시)
이전 형제
이전 형제 (공백과 텍스트 노드 무시)
페이지에 새로운 DOM 요소를 추가하는데 사용
document.createElement();
새로운 DOM 요소를 만드는데 사용
뒤에 추가,텍스트 추가 가능, 한 개 이상 삽입 가능
//텍스트 추가 가능
document.body.append('텍스트 추가');
//한 개 이상 삽입 가능
document.body.append(newImg1, newImg2);
//<b>hi</b> 추가 예제
const newB = document.createElement('b');
newB.append('hi'); // <b>hi</b>
document.body.append(newB);
마지막 자식으로 추가
const newImg = document.createElement('img');
newImg.src = '이미지 경로';
document.body.appendChild(newImg);
//body에 img 추가
요소의 맨 앞 자식으로 추가
const newB = document.createElement('b');
newB.append('hi'); // <b>hi</b>
document.body.perpend(newB);
요소를 삽입하려는 위치를 지정해서 사용
element.insertAdjacentHTML(position, text);
position : beforebegin, afterbegin, beforeend, afterend
text : 해당 위치에 삽입될 HTML 요소의 text값
beforebegin 요소 이전. 요소가 DOM 트리에 있고 부모 요소가 있는 경우에만 유효
afterbegin 요소 바로 내부, 첫 번째 자식 앞
beforeend 요소 바로 내부, 마지막 자식 뒤.
afterend 요소 후. 요소가 DOM 트리에 있고 부모 요소가 있는 경우에만 유효
<!--beforebegin-->
<body>
<!--afterbegin-->
<div class="box">box1</div>
<div class="box">box2</div>
<div class="box">box3</div>
<div class="box">box4</div>
<!--beforeend-->
</body>
<!--afterend-->
요소를 다른 요소 다음에 삽입
const h3 = document.createElement('h3');
h3.innerText = 'I am h3';
const h2 = document.querySelector('h2');
h2.after(h3);
부모 요소를 찾고 해당 요소에서 제거하려는 요소를 인수로하여 제거해야한다
<ul>
<li>a</li>
</ul>
const li = document.querySelector('li');
const ul = li.parentElement;
ul.removeChild(li);
부모요소 없이 제거하려는 요소에서 실행하여 제거한다.
const li = document.querySelector('li');
li.remove();
사용자들이 하는 해동에 반응하는 작업
클릭, 드래그, 드롭, 마우스 올리기, 스크롤 움직이, 폼 제출 등
이벤트를 태그 속성으로 지정하는 것
<button onclick="alert('you clicked me!')"></button>
태그 속성이 아닌 객체 속성값에 이벤트를 지정할 수 있다.
//id가 v2인 버튼이 있다 가정하고
const btn = document.querySelector('#v2');
btn.onclick = function () {
console.log('YOU CLICKED ME!');
};
감지하고 싶은 어떤 이벤트든 전달할 수 있다.
첫 번째 인수로는 이벤트 종류
두 번째 인수로는 이벤트의 동작을 콜백으로 넣는다.
const btn = document.querySelector('#v2');
btn.addEventListener('click', function () {
console.log('You clicked me!');
});
기존에 이벤트가 지정되어 있다면 이벤트를 덮어씌우는 것이 아닌 추가하는 것이므로 기존 이벤트는 유지된다.
addEventListener를 사용하는 이유
- 동일한 이벤트 종류라할지라도 다른 동작을 하게 할 수 있다.
<body>
<button id="btn" onclick="console.log('clicked')">Click Me</button>
</body>
const btn = document.querySelector('#btn');
btn.addEventListener('click', function () {
console.log('You clicked me!');
});
//버튼 클릭시 clicked , You clicked me! 출력
addEventListener를 사용하는 이유
- 한번만 이벤트가 발동되게 하는등 추가적인 설정을 할 수 있다.
const btn = document.querySelector('#btn');
btn.addEventListener(
'click',
function () {
console.log('You clicked me!');
},
{ once: true }
); // 한번만 이벤트 발동
이벤트를 작업할 때 this는 해당 요소를 가리킨다.
(==this는 이벤트를 수신하는 특정 객체를 참조한다.)
const h1 = document.querySelector('h1');
h1.addEventListener('click', colorize());
//이 때 colorize에서 this는 h1을 가리킴
function colorize() {
this.style.backgroundColor = 'blue';
}
입력 또는 특정 키에 대한 이벤트
<input type="text" />
const input = document.querySelector('input');
input.addEventListener('keydown', () => {
console.log('keydown');
});
콜백 함수에 첫 번 째 인자는 이벤트 객체를 의미한다.
이 객체는 해당 타입의 이벤트에 대한 상세 정보를 갖고 있다.
key,code 속성
const input = document.querySelector('input');
input.addEventListener('keydown', (e) => {
console.log(e.key); //입력한 문자 ex)shift
console.log(e.code); //code는 키보드에서의 실제 위치를 표시 ex)shiftLeft , shiftRight
});
<form id="tweetForm" action="/dogs">
<input type="text" name="username" />
<input type="text" name="comment" />
<button>Post tweet</button>
</form>
const tweetForm = document.querySelector('#tweetForm');
tweetForm.addEventListener('submit', () => {
alert('submit!');
});
form 태그의 submit 이벤트 수행 시 페이지가 새로고침 되는데 이를 막는 데에 PreventDefault를 사용한다.
const tweetForm = document.querySelector('#tweetForm');
tweetForm.addEventListener('submit', (e) => {
e.preventDefault();
});
form객체의 elements 속성값으로 내부 요소에 좀 더 편리하게 접근할 수 있다.
const tweetForm = document.querySelector('#tweetForm');
tweetForm.addEventListener('submit', (e) => {
e.preventDefault();
console.log(tweetForm.elements.username.val);
console.log(tweetForm.elements.comment.val);
)
});
다른 곳에 포커싱하지 않아도 값을 변경할 때마다 발동
입력 시 이벤트 발동
const input = document.querySelector('input');
input.addEventListener('input', function (e) {
console.log('input value changed');
});
기존에 있던 값을 변경하고 다른 곳으로 포커싱(blur out)이되면 변경으로 간주한다. 즉 값을 변경하고 입력을 떠날 때 변경으로 간주한다. (복사 붙여넣기를 한 시점은 변경으로 간주x blur out할 때 변경으로 간주)
변경 시 이벤트 발동
const input = document.querySelector('input');
input.addEventListener('change', function (e) {
console.log('input value changed');
});
부모와 자식에 이벤트가 종류가 동일한 상황에서 자식의 이벤트를 발동하면 부모의 이벤트도 발동되는 것을 말한다.
이처럼 이벤트는 위로 올라가며 이를 이벤트 버블링이라 한다.
<!--
자식 요소인 button을 클릭하면 button의 클릭 이벤트가 발동되고 부모 요소인 p 클릭 이벤트가 발동된다. -->
<p onclick="alert('paragraph clicked')">
I am a paragraph
<button onclick="alert('button clicked')">clicked</button>
</p>
이벤트 버블링을 막는 방법은 이벤트 객체의 stopPropagation메소드를 호출하면 된다.
<!--
자식 요소인 button을 클릭하면 button의 클릭 이벤트만 발동된다. -->
<p onclick="alert('paragraph clicked')">
I am a paragraph
<button onclick="event.stopPropagation(); alert('button clicked')">clicked</button>
</p>
하위 요소마다 이벤트를 붙이지 않고 상위 요소에서 하위 요소의 이벤트들을 제어하는 방식
부모 요소에 이벤트 수신기를 달아 자식 요소를 다룬다.
부모 요소에 이벤트 수신기를 추가한 시점에 페이지에 없던 요소를 다룰 때 사용한다.
<ul>
<li>1</li>
<li>2</li>
</ul>
const ul = querySelector('ul');
ul.addEventListener('click', function (e) {
//이벤트 객체의 target은 클릭한 요소를 가리킨다.
console.log(e.target);
e.target.remove();
});
자바스크립트 엔진이 구동되면서 실행 중인 코드를 추적하는 공간이 콜스택이다.
함수(function)의 호출(call)을 기록하는 스택(stack)자료구조
콜스택을 통해 isRightTriangle함수를 호출하여
square -> multiply를 호출하고 해당 함수에서의 연산된 값이 multiply-> square -> isRightTriangle로 넘어올 수 있는 것이다.
const multiply = (x,y)=>x*y;
const square =(x)=>multiply(x,x);
const isRightTriangle = (a,b,c)=>{
return square(a)+square(b) ===square(c)
};
isRightTriangle(3,4,5)
한 번에 하나의 작업을 할 수 있는 것
자바스크립트는 단일 스레드 언어이다.
브라우저에 내장된 API이다.
API는 응용프로그램 인터페이스로 컴퓨터나 컴퓨터 프로그램 사이의 상호작용을 도와주는 매개체이다.
브라우저에게 작업을 넘기고 자바스크립트는 다른 작업을 하게 해준다.
/*setTimeout함수는 WebAPI 함수로서 호출하면 해당 작업을 브라우저에 3초 타이머 작업으로 넘기고 그 시간동안
자바스크립트는 다른 작업을 하다가 3초가 지나면 브라우저에 있던 작업이 콜 스택에 추가되고 이를 자바스크립트가 넘겨 받아 실행하게 된다.
*/
setTimeout(function () {
console.log('timer');
}, 3000);
JavaScript를 이용한 비동기 프로그래밍시 발생하는 문제로서, 함수의 매개 변수로 넘겨지는 콜백 함수가 반복되어 코드의 들여쓰기 수준이 감당하기 힘들 정도로 깊어지는 현상
어떤 일이 일어나야 하는 종속적인 행동이 있을 때
첫 번째 것이 끝나야 두 번째 것이 발생할 수 있죠
이런 경우 우리가 콜백을 사용한다.
const delayedColorChange = (newColor, delay, doNext) => {
setTimeout(() => {
document.body.style.backgroundColor = newColor;
doNext && doNext;
}, delay);
};
delayedColorChange('orange', 1000, () => {
delayedColorChange('orange', 1000, () => {
delayedColorChange('orange', 1000, () => {});
});
});
function fakeRequestCallback(url, success, failure) {
setTimeout(() => {
if (delay > 4000) {
failure('Connection Timeout :(');
} else {
success(`Here is your fake data from ${url}`);
}
}, delay);
}
fakeRequestCallback(
'www.fake.com',
function (response) {
console.log('IT WORKED!!');
console.log(response);
fakeRequestCallback(
'www.fake.com/pag2',
function (response) {
console.log('IT WORKED!!');
console.log(response);
},
function (err) {
console.log('Error!');
console.log(err);
}
);
},
function (err) {
console.log('Error!');
console.log(err);
}
);
3가지의 상태 resolve(성공) reject(실패) pending(대기)를 가지며
호출할 때마다 Promise 객체를 반환한다.
promise 인스턴스 생성시 resolve,reject 콜백 함수를 인수로 받는다.
success,failure 대한 콜백 함수를 넣지 않으니 이에 대한 중첩이 제거됐다.
const fakeRequestPromise = (url) => {
return new Promise((resolve, reject) => {
const delay = Math.floor(Math.random() * 4500) + 500;
setTimeout(() => {
if (delay > 4000) {
if (delay > 4000) {
reject('Connection Timeout :(');
} else {
resolve(`Here is your fake data from ${url}`);
}
}
}, delay);
});
};
const request = fakeRequestPromise('www.test.com'); //pending 상태
request //then 또는 catch를 해야 resolve, reject에 따라 처리된다.
.then(() => {
//resolve시 수행
console.log('IT WORKED!!');
fakeRequestPromise('www.test.com/page2')
.then(() => {
console.log('IT WORKED!!');
})
.catch(() => {
console.log('ERROR!');
});
})
.catch(() => {
//reject시 수행
console.log('ERROR!');
});
return을 활용하여 then catch문에 대한 중첩을 줄일 수 있다.
const request = fakeRequestPromise('www.test.com');
request
.then((data) => {
console.log('IT WORKED!!');
console.log(data);
return fakeRequestPromise('www.test.com/page1');
})
.then((data) => {
console.log('IT WORKED!!');
console.log(data);
return fakeRequestPromise('www.test.com/page2');
})
.then((data) => {
console.log('IT WORKED!!');
console.log(data);
return fakeRequestPromise('www.test.com/page3');
})
//세 개의 then의 reject는 다 여기서 처리된다.
.catch(() => {
console.log('ERROR!');
});
콜백사용한 코드
const delayedColorChange = (newColor, delay, doNext) => {
setTimeout(() => {
document.body.style.backgroundColor = newColor;
doNext && doNext(); //doNext가 전달되지 않았을 경우를 처리하기 위해 이런식으로 코드 작성한 것
}, delay);
};
delayedColorChange('orange', 1000, () => {
delayedColorChange('orange', 1000, () => {
delayedColorChange('orange', 1000, () => {});
});
});
Promise사용 코드
const delayedColorChange = (newColor, delay) => {
return new Promise((resolve, reject) => {
setTimeout(() => {
document.body.style.backgroundColor = newColor;
resolve();
}, delay);
});
};
delayedColorChange('orange', 1000)
.then(() => {
delayedColorChange('blue', 1000);
})
.then(() => {
delayedColorChange('blue', 1000);
});
함수 선언시 앞에 async를 붙이면 promise 객체를 반환하게 된다.
const f = async (isTrue) => {
if (!isTrue) throw 'error'; //reject상태로 반환됨
return 'async'; //resolve상태로 반환됨
};
f(false)
.then((result) => {
console.log(result);
})
.catch((err) => {
console.log(err);
});
const login = async (username, password) => {
if (!username || !password) throw 'Missing Credentials';
if (password === 'test') return 'WELCOME!';
throw 'Invalid Password!';
};
login('test', 'test')
.then((msg) => {
console.log('LOGGED IN!');
console.log(msg);
})
.catch((err) => {
console.log('Error!');
console.og(err);
});
함수 호출 앞에 await을 붙이면 promise를 반환할 때까지 기다리게 된다. await 키워드를 사용하기 위해서 해당 함수 앞에 async를 붙여야한다.
콜백을 전달하거나 반환된 값을 연결할 필요가 없어지게 된다.
async-await 적용 전
const delayedColorChange = (newColor, delay) => {
return new Promise((resolve, reject) => {
setTimeout(() => {
document.body.style.backgroundColor = newColor;
resolve();
}, delay);
});
};
delayedColorChange('orange', 1000)
.then(() => {
delayedColorChange('blue', 1000);
})
.then(() => {
delayedColorChange('blue', 1000);
});
async-await 적용 후
const delayedColorChange = async (newColor, delay) => {
return setTimeout(() => {
document.body.style.backgroundColor = newColor;
}, delay);
};
await delayedColorChange('orange', 1000);
await delayedColorChange('blue', 1000);
await delayedColorChange('blue', 1000);
//async함수를 호출하는 함수의 경우에도 async를 선언시 붙여줘야한다.
rainbow();
async rainbow(){
await delayedColorChange('orange', 1000);
await delayedColorChange('blue', 1000);
await delayedColorChange('blue', 1000);
}
try-catch구문 사용
async function fakeRequest() {
const randomValue = Math.floor(Math.random() * 2);
if (randomValue < 1) throw 'error';
return 'data';
}
async function makeTwoRequest() {
try {
let data = await fakeRequest();
console.log(data);
} catch (e) {
console.log('ITS OK!', e);
}
}
makeTwoRequest();
자바스크립트를 통해서 서버에 데이터를 비동기 방식으로 요청하는 것
페이지 전체를 다시 로드하지 않고 응답 결과만을 다시 로드한다.
애플리케이션 프로그래밍 인터페이스의 약자로 API는 컴퓨터가 여러 소프트웨어와 상호 작용하거나 소통하는 모든 인터페이스를 의미
웹 개발자들이 API란 용어를 사용할 때는 대부분 WebAPI를 뜻함
WebAPI는 웹, HTTP를 기반으로 하는 인터페이스이다.
특정 엔드포인트(특정url)를 제공하고 제공되는 엔드포인트는 사용되는 코드에 정보로 응답하거나 다른 소프트웨어에 정보로 응답한다.
API 예시
비트코인 시세 같은 정보를 띄우는 API
reddit처럼 최신 글을 띄우거나 사용자의 최근 글을 찾는 API
메세지를 보내는 API
글을 자동으로 올릴 수 있는 API
API가 주로 데이터를 전송할 때 쓰는 포맷으로
키:값으로 이루어져있다.
모든 키는 ""를 갖는다
유효한 값: 객체, 배열, 문자열,숫자 참 거짓,null
유효하지 않은 값 : undefined (모두 null로 바뀜)
{
data:{
"id":"test",
"password":"test",
}
}
객체를 json으로 변환
const dog = {
breed: 'lab',
};
console.log(typeof(JSON.stringify(dog)); // string
json 문자열 값을 유효한 javascript 객체로 바꾸는 것
const dog = {
breed: 'lab',
};
data = JSON.stringify(dog);
console.log(typeof JSON.parse(data));
//object
비동기적으로 데이터 주고받는데 사용
사용하는데 복잡해서 주로 사용하는 방법이 아님
const req = new XMLHttpRequest();
req.onload = function () {
console.log('ALL DONE WITH REQUEST!!!');
const data = JSON.parse(this.responseText);
};
req.onerror = function () {
console.log('Error!');
console.log(this);
};
req.open('GET', 'https://api.cryptonator.com/api/ticker/btc-usd');
req.send();
비동기 요청 방식 promise를 사용
우선 Promise를 반환하는 fetch 호출을 만들어야 한다.
Promise는 불완전한 응답 객체로 resolve되고
데이터는 계속 들어오고 파싱은 되지 않는다.
다른 Promise를 반환하는 res.json을 호출해야한다.
완료될 때까지 기다린다.
promise 버전
fetch('https://api.cryptonator.com/api/ticker/btc-usd')
.then((res) => {
console.log('Response', res);
// data를 받으려면 resolve상태의 promise를 반환해줘야 한다.
return res.json(); // promise반환
})
.then((data) => {
console.log(data);
})
.catch((e) => {
console.log('Error!', e);
});
비동기 함수 버전
const fetchBitcoinPrice = async () => {
try {
const res = await fetch('https://api.cryptonator.com/api/ticker/btc-usd');
const data = await res.json();
} catch (e) {
console.log('SOMETHING WENT WRONG!');
}
};
Fetch로만 작업할 때 처리해야 하는 것은
반환되거나 resolve된 첫 번째 Promise이다.
모두 완료될 때 모든 body가 파싱될 때
res.json을 호출하고 Promise를 반환하는데
이는 두 개의 별개의 단계가 된다.
Axios는 이걸 하나의 단계로 만들어준다.
axios.get('https://api.cryptonator.com/api/ticker/btc-usd').then((res) => {
console.log(res.data.ticker.price);
});
const getDadJoke = async () => {
const config = {
headers: {
Accept: 'application/json',
}, //응답 형식을 json으로 설정
};
try {
const res = await async('https://icanhazdadjoke.com', config);
return res.data.joke;
} catch (e) {
return 'NO JOKES AVAILABLE! SORRY ;(';
}
};
프로토타입은 JavaScript 객체가 서로 기능을 상속하는 방식의 메커니즘이다.
하나의 프로토타입이 있고 각각의 배열이 proto라는
특별한 특성으로 그 프로토타입을 참조한다.
예를 들면 배열을 만들고 그 배열에서 배열 메소드를 사용할 수 있는 건 해당 배열이 Array.proto타입을 참조하기에 가능한 것이다.
프로토 타입에 새로운 메서드와 특성을 추가할 수도 있다.
Array.prototype.pop = function () {
return 'SORRY I WANT THAT ELEMENT, I WILL NEVER POP IT OFF!';
};
[3, 4, 5].pop(); // SORRY I WANT THAT ELEMENT, I WILL NEVER POP IT OFF!
메서드와 특성을 가지는 객체간 상호작용을 통해 로직을 구성하는 것
특성과 메서드를 정의하는 클래스를 만들고 클래스로 객체를 생성한다.
패턴이나 레시피를 기반으로 한 객체를 만드는 하나의 방법
비어 있는 상태로 시작하지만 주어진 인수를 기반으로 속성을 추가한다. 몇 가지 메서드를 추가하고 객체를 반환한다.
function makeColor(r, g, b) {
const color = {};
color.r = r;
color.g = g;
color.b = b;
color.rgb = function () {
return `rgb(${r},${g},${b})`;
};
color.hex = function () {
const { r, g, b } = this;
return '#' + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
};
return color;
}
const firstColor = makeColor(35, 255, 150);
firstColor.hex(); //#23ff96
new 키워드를 통해 새로운 객체를 생성해준다.
function Color(r, g, b) {
this.r = r;
this.g = g;
this.b = b;
console.log(this);
}
new Color(255, 40, 100); //new 키워드를 통해 this가 window객체가 아닌 새 객체를 참조한다.
프로토 타입으로 메서드 추가
이 때 주의할건 기본 함수 표현식을 사용해야한다.
왜냐하면 this가 해당 객체를 가리키게 해야하기 때문
Color.prototype.rgb = function () {
const { r, g, b } = this;
return `rgb(${r},${g},${b})`;
};
const newColor = new Color(255, 40, 100);
console.log(newColor.rgb()); // rgb(255,40,100)
class 키워드를 사용하고 내부에 constructor가 생성자 역할을 한다.
해당 클래스에 메서드를 정의하고 생성자 안에서 특성을 할당할 수 있다.
생성자에서는 일반적으로 객체에 this로 액세스한다.
class Color {
constructor(r, g, b) {
this.r = r;
this.g = g;
this.b = b;
}
innerRGB() {
const { r, g, b } = this;
return `${r},${g},${b}`;
}
rgb() {
//객체 내부 메서드에 접근할 때 this로 접근한다.
return `rgb(${this.innerRGB()})`;
}
rgba(a = 1.0) {
return `rgba(${this.innerRGB()},${a})`;
}
hex() {
const { r, g, b } = this;
return '#' + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
}
}
const c1 = new Color(255, 67, 89);
console.log(c1.rgb()); // rgb(255,67,89)
console.log(c1.hex()); // #ff3459
extends 키워드를 통해 생성자, 특성, 메서드를 상속할 수 있다. 이를 통해 코드를 재사용하거나 확장할 수 있다.
class Pet {
constructor(name, age) {
this.name = name;
this.age = age;
}
eat() {
return `${this.name} is eating!`;
}
}
class Cat extends Pet {
/* constructor(name, age) {
this.name = name;
this.age = age;
}
eat() {
return `${this.name} is eating!`;
} */
meow() {
return `MEOW`;
}
}
class Dog extends Pet {
/* constructor(name, age) {
this.name = name;
this.age = age;
}
eat() {
return `${this.name} is eating!`;
} */
bark() {
return 'WOOOF!';
}
}
상속을 한 클래스는 super 클래스가 되고 이 클래스를 참조하는데 사용된다.
Pet 생성자에서
class Pet {
constructor(name, age) {
this.name = name;
this.age = age;
}
eat() {
return `${this.name} is eating!`;
}
}
class Cat extends Pet {
constructor(name, age, hobby) {
super(name, age);
this.hobby = hobby;
}
/*
eat() {
return `${this.name} is eating!`;
} */
meow() {
return `MEOW`;
}
}
class Dog extends Pet {
/* constructor(name, age) {
this.name = name;
this.age = age;
}
eat() {
return `${this.name} is eating!`;
} */
bark() {
return 'WOOOF!';
}
}
텍스트를 통해 내 기기와 상호작용할 수 있는
텍스트 기반의 프롬프트를 지칭한다.
한 번에 대여섯 개의 명령어를 실행할 수 있다.
보통은 마우스를 써서 클릭하고 드래그하던 작업을
타이핑만으로 다 할 수 있어 숙달이 되면 굉장히 빠르고 효율적으로 작업할 수 있다.
중대한 변경 사항을 반영하거나 권한을 바꿀 수 있는 등 보통은 접근 금지인 설정을 수정할 수 있다.
데이터베이스 등 개발에 사용하는 도구들을 다루려면 터미널을 사용할 줄 알아야한다.
Terminal 기기에서 실행되는 프로그램으로
명령을 받아 그것을 해석하고 프로그램을 실행하는 역할을 한다.
list를 의미하며 현재 있는 디렉토리의 콘텐츠를 나열
print Working Directory를 의미하며
현재 작업중인 디렉토리를 출력한다.
change directory를 의미하여
작업중인 디렉토리를 변경한다.
특정 파일이나 리소스의 경로를 의미한다.
/(루트) 에서 시작하며 어느 위치에 있건 이 경로를 사용하면 접근할 수 있다.
ex) /Users
. , ..을 사용하며 현재 디렉토리를 기준으로 이동한다.
. 현재 디렉토리
.. 상위 디렉토리
디렉토리 간 이동하는 명령어
cd ~ 홈 디렉토리로 이동
cd .. 상위 디렉토리로 이동
cd 절대 경로
make directory이며 디렉토리를 생성한다.
manual이며 매뉴얼을 의미한다.
ex) man ls // ls의 정보를 제공한다.
명령어의 옵션으로 명령어의 동작을 바꾸는데 사용된다.
ex) mkidr -v // 디렉토리 생성 후 디렉토리를 출력한다.
파일을 호출하고 만약 없다면 해당 이름으로 파일을 만든다.
파일이 있는 경우 호출하게 되면 파일의 정보 중 접근시간이 바뀐다.
파일을 제거하는 명령어
디렉토리를 제거하는 명령어
이 때 디렉토리는 비어있는 경우에만 가능하다.
비어있지 않은 디렉토리를 제거한다.