분류 전체보기(67)
-
DNS(Domain Name System)
DNS TCP/IP 네트워크상에서 기억하기 쉽게 문자로 만들어진 도메인을 컴퓨터가 처리할 수 있는 숫자로된 인터넷 주소(IP)로 바꾸는 시스템 네트워크 상에서 컴퓨터들은 IP주소를 이용하여 서로를 구별하고 통신. 사람들이 네트워크를 통해 원격의 컴퓨터에 접속하기 위해서는 IP주소를 이용하여야 하지만, 숫자의 연속인 IP주소를 일일이 외울 수 없기 때문에 쉽게 기억할 수 있는 도메인 주소 체계가 만들어짐 DNS Server IP 주소와 Domain 이름을 기억하는 기능 Client 가 이름을 물어보면 IP를 알려주는 기능 수천대의 서버가 협력 도메인 질의 계층 구조 맨 뒤의 .은 생략 각각의 부분들은 부분들을 담당하는 독자적인 Server Computer가 존재 root는 top-level을 담당하는 Se..
2020.06.24 -
비동기 처리 - async & aswait
문법 async function 선언은 AsyncFunction 객체를 반환하는 하나의 비동기 함수를 정의 비동기 함수는 이벤트 루프를 통해 비동기적으로 작동하는 함수, 암시적으로 Promise를 사용하여 결과를 반환 (Promise : async 함수에 의해 반환 된 값으로 해결되거나 async 함수 내에서 발생하는 캐치되지 않는 예외로 거부되는 값) await 연산자는 async 함수의 실행을 일시 중지하고 전달 된 Promise의 해결을 기다린 다음 async 함수의 실행을 다시 시작하고 완료후 값을 반환 await 연산자는 async function 내부에서만 사용 가능 async function 함수명() { await 비동기 메서드명(); } 예제) function fetchData() { r..
2020.06.17 -
비동기 처리 - Promise
개요 전통적인 자바스크립트의 비동기 처리를 위한 패턴으로 콜백함수가 존재 콜백함수의 경우, 가독성 및 에러의 예외처리 한계 ES6 Promise 등장하여 단점 보완 정의 Promise는 비동기 작업의 최종 완료 또는 실패를 나타내는 객체 Promise는 함수에 콜백을 전달하는 대신, 콜백을 첨부하는 방식의 객체 특징 콜백은 자바스크립트 Event Loop 가 현재 실행중인 콜 스택을 완료하기 전에는 절대 호출 되지않음 then() 을 여러번 사용하여 여러개의 콜백 추가 가능(chaning), 순서대로 콜백이 수행 예제) // Promise 객체 생성 const fetchData = new Promise((resolve, reject) => { // 비동기 작업 수행, setTimeout으로 대체 setT..
2020.06.16 -
이벤트 전달 방식(버블링, 캡처, 위임)
1. 이벤트 등록 addEventListener 메서드 사용하여 특정 요소에 이벤트 등록 클릭 2. 브라우저의 이벤트 감지 1) 이벤트 버블링(Event Bubbling) 특정 요소에서 이벤트 발생 시, 해당 이벤트가 상위 요소들로 이벤트 전달(자식 -> 부모) 하위에서 상위 요소로 이벤트 전파 방식을 이벤트 버블링(Event Bubbling) 예제) const divs = document.querySelectorAll('div') divs.forEach((div) => { div.addEventListener('click', (evnet) => { console.log(event.currentTarget.className + " click"); }); }); -- 출력 결과(div3 클릭) -- div..
2020.06.15 -
iterator 와 for-of
iterator 반복 처리가 가능한 객체 시퀀스를 정의하고 종료시의 반환값을 잠재적으로 정의하는 객체 반복자는 두 개의 속성(value, done)을 반환하는 next() 메소드 사용하여 객체의 iterator protocol 을 구현 반환되는 value 속성은 현재 iterator 가 가리키는 곳의 값을 가리키며, done 속성은 iterator 가 끝까지 도달했는지를 구분해주는 true/flase 값을 가짐 Array, String, Map, Set, DOM이 iterable, 이러한 요소를 탐색할 수 있게 하는 객체가 iterator 예제) const furitArr = ['사과', '배', '오렌지']; const iterator = furitArr[Symbol.iterator](); consol..
2020.04.10 -
Rest, Spread 연산자
Spread 연산자 이터러블 오브젝트(Iterable Object)의 엘리먼트를 하나씩 분기 전개한 결과를 변수에 할당 / 호출하는 함수의 파라미터 인수 예제) 기존 객체를 복사, 새로운 객체를 반환 // 새로운 객체 생성 const book = { action : 'read' }; const js_book = { ...book, title: 'JS' }; const react_book = { ...js_book, title: 'react', price: '1000' }; console.log(book); console.log(js_book); console.log(react_book); console.log('------------------------------------------------'); ..
2020.04.09