이 또한 지나가리라

1. AJAX 개요 기존 요청 방식은 client의 특정 이벤트로부터 요청을 받은 서버가 html, css 그리고 JavaScript를 통해 새로운 웹 페이지를 출력해주는 방식이었다. AJAX의 경우에는 JavaScript 코드로 요청을 받고 그 결과에 대한 data를 응답 받는다. 이는 개발자도구 NetWork 탭을 통해 확인할 수 있다. 앞으로 formatting, data를 받기 위한 API, JavaScript를 통한 요청 방법을 알아볼 것이다. 2. APIs 개요 웹 개발자들이 언급하는 API 보통 WebAPI를 지칭한다. WebAPI는 HTTP를 기반으로 하는 인터페이스이며 다른 Application이나 database로 가는 진입로라고 볼 수 있다. API의 종류는 무수히 많다. 단순히 정보..

1. 콜 스택 (Call Stack) 스택은 LIFO 데이터 구조로 되어있다. JavaScript가 사용하는 메커니즘으로 여러 함수를 호출하는 스크립트에서 함수를 추적한다. JavaScript는 콜 스택에 함수 호출을 추가한다. 값이 반환되면 콜 스택의 함수를 삭제하고 다시 코드를 해석한다. const multiply = (x, y) => x * y; const square = (x) => multiply(x, x); const isRightTriangle = (a, b, c) => { // squre(a)는 multiply(a)의 값이 리턴 될 때까지 대기한다. -> multiply(a, a) // squre(b)는 square(a)의 값이 리턴 될 때까지 대기한다. -> multiply(b, b) /..

1. event 개요 동적 웹사이트 개발에 필수이다. 사용자로부터 발생한 특정 이벤트를 감지하고 반응한다. 클릭, 키보드 입력, 스크롤, 드래그 등 2. inline event html에 JavaScript 코드를 작성하는 방법. // index.html // 코드의 재사용성이 떨어진다. Click me 3. onClick 속성 inline event 방식을 html과 JavaScript 코드로 나눈 방법 // index.html Click me // app.js const btn = document.querySelector('#click'); // 버튼 클릭 시 알림 창 발생 btn.onclick = function () { alert('눌러줘서 고마웡'); }; 4. addEventListener 이..

1. DOM 개요 Document Object Model 웹 페이지를 구성하는 JavaScript 객체 JavaScript 객체를 조작하여 html 요소를 다룰 수 있다. 2. DOM mark up된 html 요소(모든 속성, 메서드)와 css를 받아들여 JavaScript 객체로 만들어진다. JavaScript 객체 관계도에서 가장 최상위 객체는 document이다. console.dir(document); 명령어로 JavaScript 객체를 확인 할 수 있다. Document는 하나의 객체이며 많은 하위 객체들과 함께 웹 페이지를 구성한다. 3. getElementById html 요소를 id 값으로 선택하여 다루는 메서드 예제 // html의 id 값으로 객체 다루기 // id 값은 단 하나의 el..

1. 기본 매개 변수 이전까지 함수를 사용할 때 매개 변수는 선택사항이었다. 이번에는 매개 변수를 default 값으로 설정해보자. 예제 1 : default 매개변수를 사용하지 않은 함수 // 주사위의 눈을 입력 받아 랜덤으로 숫자 출력 function rollDice(num) { // 만약 매개변수 값을 전달받지 못하면 1~6의 눈 출력 if(num === undefined) num = 6; return Math.floor(Math.random() * num) + 1; } rollDice() // 1~6의 숫자 중 하나의 숫자가 출력된다. 예제 2 : default 매개변수를 사용한 함수 // 매개변수의 기본 값을 6으로 설정한다. function rollDice(num = 6) { return Ma..

1. 이 섹션에서는 무엇을 배울까? 새로운 화살표 함수 문법 배열의 메서드를 이해한다. forEach map filter find reduce some every 2. forEach 메서드 배열의 요소를 하나씩 순회하는 메서드 예제 1 const numbers = [1, 2, 3, 4, 5]; function print(element) { console.log(element); } numbers.forEach(print); // for... of와 같은 결과를 확인할 수 있다. numbers.forEach(function (el) { console.log(el); }) 예제 2 const movies = [ { title: '신세계', score: 8.7 }, { title: '극한직업', score: ..

1. Function scope Scope란 변수 가시성이다. 변수가 어느 위치에 선언되었느냐에 따라 해당 변수에 접근 가능한 위치가 달라진다. function scope 예제 1 // 함수에서 선언한 변수는 함수를 벗어날 수 없다. function eatEggs { let totalEggs = 6; console.log(totalEggs); } // totalEggs는 함수 안에서 선언되었으므로 외부에서 접근할 수 없다. console.log(totalEggs); // -> error!! function scope 예제 2 let cat = 'black kitten'; function catWatch() { // 함수 안의 cat을 지우면 console에 'black kitten'이 찍힌다 let ca..

1. 함수 개요 왜 함수를 사용할까? 코드의 재사용 가능한 일부로서 함수를 호출하여 코드를 가져와 쓸 수 있다. 코드의 중복을 줄이는데 유용하다. 코드의 직관성을 높여준다. 함수의 필요성 // 아래 코드 4줄의 중복되는 부분이 너무 많다. // 비효율적으로 반복되는 부분을 묶을 수 없을까? let die1 = Math.floor(Math.random() * 6) + 1; let die2 = Math.floor(Math.random() * 6) + 1; let die3 = Math.floor(Math.random() * 12) + 1; let die4 = Math.floor(Math.random() * 18) + 1; 2. 우리의 가장 첫 번째 함수 함수 사용하기 함수 선언 함수 호출 // 함수 선언하기 ..

1. For 루프 루프문의 핵심 - 어떤 기능을 반복하는 것 다양한 루프문: for loop while loop for...of loop for...in loop // for(초기값;조건값;증감값) {} // 1부터 10까지의 수를 출력하는 루프문 for (let i = 1; i 0; i -= 10) { console.log(i); } 3. 무한 루프의 위험성 중단되지 않는 루프문을 의미한다. 컴퓨터의 메모리를 전부 차지하게 되고 브라우저가 제 역할을 하지 못하게 된다. 루프의 중단 조건에 대해 주의할 것 // 이 코드를 실행시키지 말 것! // for(let i = 20; i >= 0; i++) { // 조건값이 참이 되지 않는다. // 조건값이나 증감값을 수정하자 //console.log(i); //..

1. 객체 리터럴 (Object Literals)개요 Object Objects are collections of properties Properties are a key-value pair Rather than accessing data using an index, we use custom key 객체란? 순서가 중요하지 않은 레이블에 이름을 정해 저장하는 것 key와 value이라는 한쌍의 속성을 가지고 있다. 객체이름 = { key: value, } 2. 객체 리터럴 생성하기 리터럴이란? JavaScript에서 객체는 다양한 의미를 담고 있다. 여기서 이야기하고자 하는 객체는 중괄호를 사용하여 key, value를 가지고 있는 데이터 구조를 말한다. 첫 객체 리터럴 만들기 // 빈 객체 생성 con..