181108 - TIL

---

주제: 자바스크립트

강의: 자바스크립트 부트캠프

날짜: 2018.11.07

강의자: 김민태님

---

api -  Application Programming Interface, 앱을 프로그램으로 만들기 위해 필요한 창구. 앱과 - 스크린, 마우스, 키보드, 네트워크 등(컴퓨터의 자원들)와 소통할 수 있도록. 앱과 컴퓨터의 자원이 코드로 소통할 수 있도록 하는 것.

sdk - software development kit, api의 묶음.

ui - userinterface 사용자가 화면에서 보는 여러가지 요소들, 사용자와 프로그램이 소통하기 위한 창구.

##이벤트 시스템

버튼이 있다. 이 버튼을 누르는 것. 이벤트가 발생한다.

그리고 이러한 이벤트가 한곳에 기록되어있다.

기록지를 보고 버튼클릭이라는 것이 있으면 함수를 호출시켜준다.

이벤트를 처리하는 것을 이벤트 시스템이라고 한다.

document객체, 웹문서의 html 마크업을 코드의 형태로 가지고 있다. 또 이 마크업을 조작할 수 있는 요소들도 가지고 있다.

querySelectorAll() - 모든 셀렉터를 배열의 형태로 가지고 온다

querySelector() - 해당하는 셀렉터중 첫번째를 가지고 온다

document객체로 가지고 온 것들은 모두 이벤트시스템을 가지고 있다.

##브라우저 기본 객체 개요

브라우저가 제공하는 기본 객체, builtin object

가장 대표적인 기본 객체

• window(중요!) - 전역객체로 불리는 최상위 객체, document, navigator객체도 window객체의 하위 속성이다.
• document(중요!) - html을 자바스크립트 코드형태로 구성, 그리고 이를 조작할 수 있는 것을 모두 품고 있다, dom(document object model), 문서를 객체모델화
• navigator

##JSON(javascript object notation) - 자바스크립트에서 데이터를 교환하기 위한 문법, 객체와 모양이 비슷하다. 속상-값으로 이루어져있다. 

객체와 다른 점

• json은 키와 밸류 모두 ""로 묶어 사용한다. 싱글쿼테이션도 안된다. 무조건 더블쿼테이션 사용!!!, 안쓰면 문법오류
• json은 함수를 밸류값으로 사용할 수 없다.
• json이 제공하는 자료형은 문자열, 수, 참거짓, 배열, 객체, null만 담겨있다(데이터만 담겨있다)

🚀 자바스크립트에서 쓰기 쉬워서 json을 사용. json을 자바스크립트객체로, 자바스크립트객체를 json으로 변환하기 쉽다

## 브라우저 개발자도구 살펴보기

console-repl(read-eval-print-loop)이라고도 부른다

sources - 실행중인 앱의 소스를 볼 수 있다. 또 디버깅을 할 수 있다. 

debugger; 명령어를 쓰고 개발자 도구를 열어놓고 자바스크립트를 실행하면 디버깅이 가능하다

network - 서버와 api, 이미지 등 인터넷을 통해서 다른 서버 자원을 가지고 오는 것에 대한 다양한 자원들을 표시해줌

bug-내가 의도한대로 동작하지 않는 것, 나는 의도대로 코드를 짰는데 프로그램이 제대로 돌아가지 않는것, -> 나의 착각. 이것을 찾아가는 과정을 디버깅.

error-예측가능, 오류

##네트워크 프로그래밍

코드 자체는 어렵지 않지만 진입시에 배워야할 개념이 많다. 고로 꼼꼼하게 배우자

let request = new XMLHttpRequest();//XMLHttpRequest() 서버와 통신하기 위해 사용하는 메소드

request.open('GET', '/api/books', true); //보안의 문제로 도메인은 고정되어있다. 주소만 작성한다

request.addEventListener('load', function() {//언제 응답이 올지 모르기때문에 네트웍을 통한 api호출도 이벤트리스너를 통해 사용.'load'라는 이벤트가 발생하면 실행!('load'는 데이터가 모두 불려왔음을 의미)

if (request.status >= 200 && request.status < 400) {

let books = JSON.parse(request.responseText);

let bookList = document.querySelector('#book-list');

books.forEach(book => {

let li = document.createElement('li');

li.innerText = `${book.title} - ${book.writer}`;

bookList.appendChild(li);

});

} else {

alert('문제가 발생했습니다');

}

});

request.addEventListener('error', function() {//실패할 경우가 있다. ui이벤트는 실패할 경우가 없다. 하지만 api호출은 실패할 경우가 있다.

alert('네트워크 연결을 확인해 주세요.');

});

request.send();

https://www.naver.com/main/

https - 프로토콜(통신규약), html이라는 문서를 인터넷을 통해 다른 컴퓨터와 주고받는지에 대한 규약

www.naver.com - 도메인, 주소, 상대방 컴퓨터가 있는 주소, 숫자는 기억하기 어려우니 문자로....

main - path, 폴더명, 웹서버가 서비스를 할때 특정 디렉토리를 기준으로 서비스를 한다. 그 중 최상위 디렉토리(루트디렉토리) 

## querySelector

document.getElementById, getElementsByTagName() 등은 css선택자를 사용하지 않는다. 잘 사용하지 않는다

document.querySelector() - css선택자를 사용하기 때문에 더 많이 사용한다

노트 요약

---

---

초보 퍼블리셔의 공부정리 블로그입니다.

내용에 오류가 있거나 수정사항이 있다면 꼭 댓글 부탁드립니다