이 또한 지나가리라

1. Node JS 개요 browser 밖에서 실행되는 JavaScript 실행환경 2. Node는 어디에 사용하는가? 웹 서버 커맨드라인 툴 네이티브 앱(VSCode, Twitch etc...) 비디오 게임 드론 소프트웨어 등 3. Node 설치하기 https://nodejs.org/ko/download/ 다운로드 | Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 4. Node REPL node 명령어로 node에 접근한다. 코드를 콘솔에 입력, 코드를 읽고 평가, 뭔가를 출력한다. widow(브라우저 전역 객체), DOM 객체가 없다. global(nodejs 전역객체, 최상위 객체)..

1. 백엔드 개요 지금까지 클라이언트 측의 요청을 받아 서버의 응답을 단순 웹 페이지를 띄워왔다. 이제는 클라이언트의 요청을 분석하고 이에 따라 웹페이지를 구축하는 방식의 동적 응답을 빌드하는 방법을 배워 볼 것이다. 2. 터미널 명령이란? 터미널 - 텍스트 기반의 프롬프트이다. gui가 아닌 command line으로 폴더나 파일들을 조작한다. 3. 터미널 명령을 알아야 하는 이유 작업 속도가 빠르다. 서버 시작이나 프로세스 중단 등의 작업에 대한 access 권한에 관대하다. Node ,Express, DB 등이 terminal을 기반으로 한다. terminal - 텍스트 기반의 컴퓨터 인터페이스로 우리는 software terminal을 사용한다. shell - terminal에서 실행되는 soft..

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. 우리의 가장 첫 번째 함수 함수 사용하기 함수 선언 함수 호출 // 함수 선언하기 ..