웹개발 부트캠프 2022 2주차(자바스크립트)

백민철·2022년 5월 5일
자바스크립트
0

웹개발 부트캠프 2022

목록 보기
2/4
post-thumbnail

(4/29 ~5/5) The Web Developer 부트캠프 2022 강의 내용 정리
범위 : DOM이란? ~ 터미널 완벽 정리(섹션 24 ~30)

78. DOM 개요

DOM(Document Object Model)

웹 페이지를 구성하는 Javascript 객체들의 집합

Javascript로 HTML,CSS를 다룰 수 있게함.

클릭으로 목록을 확장하거나 접는 것
배경을 바꾼다거나 텍스트 입력, 버튼을 생기게 하는 것등이 그 예이다.

79. 문서 오브젝트

브라우저가 웹 페이지를 띄울 때 HTML,CSS 정보를 받아들인 다음 요소와 스타일을 기반으로 Javascript 객체를 생성한다. 이 때 생성되는 객체들은 트리 구조를 형성하며 유기적으로 연결 된 관계를 나타낸다. 이 트리 구조의 최상단에 있는 것이 document 객체이다. 또한 모든 특성과 메서드를 포함하고 있다.

이 트리 구조에 있는 객체들에 접근하여 html, css를 조작할 수 있다.

80. getElementById

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가 출력된다.

81. getElementByTagName & className

getElementByTagName

일치하는 Tag명에 대해 관련히여 반환되는 객체인 element를 담은 HTMLCollection을 반환한다.

HTMLCollection은 배열이 아니지만 [],인덱스,for of 사용이 가능하다. 하지만 map은 사용할 수 없다.

document.getElementByTagName('img');

getElementByClassName

클래스명으로 element를 담은 HTMLCollection을 반환받는다.

document.getClassName('클래스명');

82. querySelector & querySelectorAll

querySelector

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');
//자식을 찾는 경우

querySelectorAll

사용법은 querySelector와 동일하지만 반환값이 NodeList이다.

HTMLCollection과 NodeList 차이

NodeList는 앞의 HTMLCollection과 다르게 노드가 변경되도 그 상태를 반영하지 않는다.

83. innerHTML, textContent & innerText

innerHtml

특정 요소의 포함된 마크업의 전체 내용을 출력

요소를 다른 요소 안에 추가,변경 할 때 사용

document.querySelector('h1').innerHTML = '<i>test</i>'; //변경

document.querySelector('h1').innerHTML += '<i>test</i>'; //추가

textContent

textContent 는 \ 

<p>
    <strong>test </strong>
    띄어쓰기
</p>
document.querySelector('p').textContent();
/* '\n            test \n            띄어쓰기\n */

innerText

여는 태그와 닫는 태그 사이의 텍스트값을 반환한다.(개행 문자 포함)

innerText 는 "사람이 읽을 수 있는" 요소만 반환한다. 태그 무시 ,display=none인 요소는 처리하지 않는다.

<p>여기가 innerText 부분</p>

값 변경 시

document.querySelector('p').innerText = '변경 값';
<p>
    <strong>test </strong>
    띄어쓰기
</p>
document.querySelector('p').innerText; //'test 띄어쓰기'

84. getAttribute, setAttribute

getAttribute

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;

setAttribute

속성 값을 변경함

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로 변하게 된다.

85. 스타일 변경하기

인라인 스타일


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');

getComputedStyle

CSSStyleDeclaration을 반환한다. css 정보를 갖고 있다.

window.getComputedStyle(h1).color;

86. 계층 이동

부모, 자식 형제 요소 등에 액세스

요소를 제거,변경, 삽입하는 작업에 사용

parentElement

부모 요소에 액세스

<html>
    <body>
        <p></p>
    </body>
</html>
const p = document.querySelector('p');
p.parentElement; // <body></body>
p.parentElement.parentElement; // <html> ... <html>

children

자식 요소에 액세스

const p = document.querySelect('p').parentElement;
p.children; // HTMLCollection(2)[head,body]

nextSibling

다음 형제

nextElementSibling

다음 형제 (공백과 텍스트 노드 무시)

previousSibling previousElementSibling

이전 형제

previousElementSibling

이전 형제 (공백과 텍스트 노드 무시)

87. Append & AppendChild

페이지에 새로운 DOM 요소를 추가하는데 사용

document.createElement();

새로운 DOM 요소를 만드는데 사용

Append

뒤에 추가,텍스트 추가 가능, 한 개 이상 삽입 가능

//텍스트 추가 가능
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);

AppendChild

마지막 자식으로 추가

const newImg = document.createElement('img');
newImg.src = '이미지 경로';
document.body.appendChild(newImg);
//body에 img 추가

prepend

요소의 맨 앞 자식으로 추가

const newB = document.createElement('b');
newB.append('hi'); // <b>hi</b>
document.body.perpend(newB);

insertAdjacentElement

요소를 삽입하려는 위치를 지정해서 사용

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-->

after

요소를 다른 요소 다음에 삽입

const h3 = document.createElement('h3');
h3.innerText = 'I am h3';
const h2 = document.querySelector('h2');
h2.after(h3);

88. removeChild & remove

removeChild

부모 요소를 찾고 해당 요소에서 제거하려는 요소를 인수로하여 제거해야한다

<ul>
    <li>a</li>
</ul>
const li = document.querySelector('li');
const ul = li.parentElement;
ul.removeChild(li);

remove

부모요소 없이 제거하려는 요소에서 실행하여 제거한다.

const li = document.querySelector('li');
li.remove();

89. 이벤트 개요

사용자들이 하는 해동에 반응하는 작업

클릭, 드래그, 드롭, 마우스 올리기, 스크롤 움직이, 폼 제출 등

90. 인라인 이벤트

이벤트를 태그 속성으로 지정하는 것

<button onclick="alert('you clicked me!')"></button>

91. 객체 이벤트 속성

태그 속성이 아닌 객체 속성값에 이벤트를 지정할 수 있다.

//id가 v2인 버튼이 있다 가정하고
const btn = document.querySelector('#v2');
btn.onclick = function () {
    console.log('YOU CLICKED ME!');
};

92. addEventListener

감지하고 싶은 어떤 이벤트든 전달할 수 있다.
첫 번째 인수로는 이벤트 종류
두 번째 인수로는 이벤트의 동작을 콜백으로 넣는다.

const btn = document.querySelector('#v2');
btn.addEventListener('click', function () {
    console.log('You clicked me!');
});

기존에 이벤트가 지정되어 있다면 이벤트를 덮어씌우는 것이 아닌 추가하는 것이므로 기존 이벤트는 유지된다.

addEventListener를 사용하는 이유

  1. 동일한 이벤트 종류라할지라도 다른 동작을 하게 할 수 있다.
<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를 사용하는 이유

  1. 한번만 이벤트가 발동되게 하는등 추가적인 설정을 할 수 있다.
const btn = document.querySelector('#btn');
btn.addEventListener(
    'click',
    function () {
        console.log('You clicked me!');
    },
    { once: true }
); // 한번만 이벤트 발동

93. 이벤트와 this

이벤트를 작업할 때 this는 해당 요소를 가리킨다.
(==this는 이벤트를 수신하는 특정 객체를 참조한다.)

const h1 = document.querySelector('h1');
h1.addEventListener('click', colorize());
//이 때 colorize에서 this는 h1을 가리킴

function colorize() {
    this.style.backgroundColor = 'blue';
}

94. 키보드 이벤트와 이벤트 객체

키보드 이벤트

입력 또는 특정 키에 대한 이벤트

<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
});

95. 폼 이벤트와 PreventDefault

<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);
    )
});

96. 입력과 변경 이벤트

입력

다른 곳에 포커싱하지 않아도 값을 변경할 때마다 발동

입력 시 이벤트 발동

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');
});

97. 이벤트 버블링

부모와 자식에 이벤트가 종류가 동일한 상황에서 자식의 이벤트를 발동하면 부모의 이벤트도 발동되는 것을 말한다.

이처럼 이벤트는 위로 올라가며 이를 이벤트 버블링이라 한다.

<!-- 
자식 요소인 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>

98. 이벤트 위임

하위 요소마다 이벤트를 붙이지 않고 상위 요소에서 하위 요소의 이벤트들을 제어하는 방식

부모 요소에 이벤트 수신기를 달아 자식 요소를 다룬다.

부모 요소에 이벤트 수신기를 추가한 시점에 페이지에 없던 요소를 다룰 때 사용한다.

<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();
});

99. 콜 스택

자바스크립트 엔진이 구동되면서 실행 중인 코드를 추적하는 공간이 콜스택이다.
함수(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)

100. WebAPI와 단일 스레드

단일 스레드

한 번에 하나의 작업을 할 수 있는 것
자바스크립트는 단일 스레드 언어이다.

WebAPI

브라우저에 내장된 API이다.
API는 응용프로그램 인터페이스로 컴퓨터나 컴퓨터 프로그램 사이의 상호작용을 도와주는 매개체이다.

브라우저에게 작업을 넘기고 자바스크립트는 다른 작업을 하게 해준다.

/*setTimeout함수는 WebAPI 함수로서  호출하면 해당 작업을 브라우저에 3초 타이머 작업으로 넘기고 그 시간동안
자바스크립트는 다른 작업을 하다가 3초가 지나면 브라우저에 있던 작업이 콜 스택에 추가되고 이를 자바스크립트가 넘겨 받아 실행하게 된다.
*/
setTimeout(function () {
    console.log('timer');
}, 3000);

101. Callback 지옥

JavaScript를 이용한 비동기 프로그래밍시 발생하는 문제로서, 함수의 매개 변수로 넘겨지는 콜백 함수가 반복되어 코드의 들여쓰기 수준이 감당하기 힘들 정도로 깊어지는 현상

어떤 일이 일어나야 하는 종속적인 행동이 있을 때
첫 번째 것이 끝나야 두 번째 것이 발생할 수 있죠
이런 경우 우리가 콜백을 사용한다.

const delayedColorChange = (newColor, delay, doNext) => {
    setTimeout(() => {
        document.body.style.backgroundColor = newColor;
        doNext && doNext;
    }, delay);
};

delayedColorChange('orange', 1000, () => {
    delayedColorChange('orange', 1000, () => {
        delayedColorChange('orange', 1000, () => {});
    });
});

Callback을 사용한 fakeRequest

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);
    }
);

102. Promise

3가지의 상태 resolve(성공) reject(실패) pending(대기)를 가지며
호출할 때마다 Promise 객체를 반환한다.

promise 인스턴스 생성시 resolve,reject 콜백 함수를 인수로 받는다.

Promise를 사용한 fakeRequest

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!');
    });

Promise의 마법

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!');
    });

콜백에서 Promise로 변환

콜백사용한 코드

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);
    });

103. 비동기 키워드

async

함수 선언시 앞에 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

함수 호출 앞에 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);
}

104. 비동기 함수의 오류 처리하기

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();

105. AJAX 개요

자바스크립트를 통해서 서버에 데이터를 비동기 방식으로 요청하는 것
페이지 전체를 다시 로드하지 않고 응답 결과만을 다시 로드한다.

106. APIs 개요

애플리케이션 프로그래밍 인터페이스의 약자로 API는 컴퓨터가 여러 소프트웨어와 상호 작용하거나 소통하는 모든 인터페이스를 의미

웹 개발자들이 API란 용어를 사용할 때는 대부분 WebAPI를 뜻함
WebAPI는 웹, HTTP를 기반으로 하는 인터페이스이다.

특정 엔드포인트(특정url)를 제공하고 제공되는 엔드포인트는 사용되는 코드에 정보로 응답하거나 다른 소프트웨어에 정보로 응답한다.

API 예시

  • 비트코인 시세 같은 정보를 띄우는 API

  • reddit처럼 최신 글을 띄우거나 사용자의 최근 글을 찾는 API

  • 메세지를 보내는 API

  • 글을 자동으로 올릴 수 있는 API

107. JSON이란

API가 주로 데이터를 전송할 때 쓰는 포맷으로
키:값으로 이루어져있다.

모든 키는 ""를 갖는다

유효한 값: 객체, 배열, 문자열,숫자 참 거짓,null

유효하지 않은 값 : undefined (모두 null로 바뀜)

{
    data:{
        "id":"test",
        "password":"test",
    }
}

JSON.stringify

객체를 json으로 변환

const dog = {
    breed: 'lab',
};

console.log(typeof(JSON.stringify(dog)); // string

JSON.parse

json 문자열 값을 유효한 javascript 객체로 바꾸는 것

const dog = {
    breed: 'lab',
};

data = JSON.stringify(dog);
console.log(typeof JSON.parse(data));
//object

108. XHR 객체 만들기

비동기적으로 데이터 주고받는데 사용

사용하는데 복잡해서 주로 사용하는 방법이 아님

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();

109. Fetch API

비동기 요청 방식 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!');
    }
};

110. Axios 개요

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);
});

111. Axios로 헤더 세팅하기

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 ;(';
    }
};

112. 프로토타입이란

프로토타입은 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!

113. 객체 지향 프로그래밍

메서드와 특성을 가지는 객체간 상호작용을 통해 로직을 구성하는 것

특성과 메서드를 정의하는 클래스를 만들고 클래스로 객체를 생성한다.

114. 팩토리 함수

패턴이나 레시피를 기반으로 한 객체를 만드는 하나의 방법

비어 있는 상태로 시작하지만 주어진 인수를 기반으로 속성을 추가한다. 몇 가지 메서드를 추가하고 객체를 반환한다.

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

115. 생성자 함수

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)

116. Javascript 클래스

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

117. 확장 및 슈퍼 키워드

Extends

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

상속을 한 클래스는 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!';
    }
}

119. 터미널이란

텍스트를 통해 내 기기와 상호작용할 수 있는
텍스트 기반의 프롬프트를 지칭한다.

120. 터미널 사용 이유

  • 한 번에 대여섯 개의 명령어를 실행할 수 있다.

  • 보통은 마우스를 써서 클릭하고 드래그하던 작업을
    타이핑만으로 다 할 수 있어 숙달이 되면 굉장히 빠르고 효율적으로 작업할 수 있다.

  • 중대한 변경 사항을 반영하거나 권한을 바꿀 수 있는 등 보통은 접근 금지인 설정을 수정할 수 있다.

  • 데이터베이스 등 개발에 사용하는 도구들을 다루려면 터미널을 사용할 줄 알아야한다.

Shell

Terminal 기기에서 실행되는 프로그램으로
명령을 받아 그것을 해석하고 프로그램을 실행하는 역할을 한다.

121. 터미널 명령어

LS

list를 의미하며 현재 있는 디렉토리의 콘텐츠를 나열

PWD

print Working Directory를 의미하며
현재 작업중인 디렉토리를 출력한다.

cd

change directory를 의미하여
작업중인 디렉토리를 변경한다.

경로

특정 파일이나 리소스의 경로를 의미한다.

절대 경로

/(루트) 에서 시작하며 어느 위치에 있건 이 경로를 사용하면 접근할 수 있다.
ex) /Users

상대 경로

. , ..을 사용하며 현재 디렉토리를 기준으로 이동한다.

. 현재 디렉토리
.. 상위 디렉토리

디렉토리 간 이동하는 명령어
cd ~ 홈 디렉토리로 이동
cd .. 상위 디렉토리로 이동
cd 절대 경로

mkdir

make directory이며 디렉토리를 생성한다.

man

manual이며 매뉴얼을 의미한다.
ex) man ls // ls의 정보를 제공한다.

flag

명령어의 옵션으로 명령어의 동작을 바꾸는데 사용된다.

ex) mkidr -v // 디렉토리 생성 후 디렉토리를 출력한다.

touch

파일을 호출하고 만약 없다면 해당 이름으로 파일을 만든다.

파일이 있는 경우 호출하게 되면 파일의 정보 중 접근시간이 바뀐다.

rm

파일을 제거하는 명령어

rmdir

디렉토리를 제거하는 명령어
이 때 디렉토리는 비어있는 경우에만 가능하다.

rm -rf

비어있지 않은 디렉토리를 제거한다.

profile
백민철
이전 포스트

웹개발 부트캠프 2022 1주차 (자바스크립트)

다음 포스트

웹개발 부트캠프 2022 3주차(노드)

0개의 댓글