WebMaster

자바스크립트는 스크립트 언어라서 즉석에서 코드를 실행할 수 있음 REPL이라는 콘솔 제공 R(Read), E(Evaluate), P(Print), L(Loop) 윈도에서는 명령 프롬프트, 맥이나 리눅스에서는 터미널에 node 입력 프롬프트가 > 모양으로 바뀌면, 자바스크립트 코드 입력 입력한 값의 결괏값이 바로 출력됨. 간단한 코드를 테스트하는 용도로 적합 긴 코드를 입력하기에는 부적합 HelloWorld.js function helloWorld(){ console.log('Hello World'); helloNode(); } function helloNode() { const str = 'Hello Node'; console.log(str); } helloWorld(); 자바스크립트 파일을 만들어 통째..

서버로 요청을 보내는 코드 라이브러리 없이는 브라우저가 지원하는 XMLHttpRequest 객체 이용 AJAX 요청 시 Axios 라이브러리를 사용하는 게 편함. HTML에 아래 스크립트를 추가하면 사용할 수 있음. FormData를 통해 데이터를 전달할 수 있다. GET 요청 보내기 axios.get 함수의 인수로 요청을 보낼 주소를 넣으면 된다. 프로미스 기반 코드라 async/await 사용 가능. axios가 프로미스를 지원하는지, callback을 지원하는지는 코드만 봐서는 알 수 없기 때문에 공식문서를 확인 해야한다. POST 요청 보내기 POST 요청을 하는 코드(데이터를 담아 서버로 보내는 경우) 전체적인 구조는 비슷하나 두 번째 인수로 데이터를 넣어 보냄 FormData HTML form..

Promise 프로미스: 내용이 실행은 되었지만 결과를 아직 반환하지 않은 객체 콜백 헬이라고 불리는 지저분한 자바스크립트 코드의 해결책 function callback() {} //callback 이라는게 항상 들어가야 한다. //callback 함수는 이렇게 빼내는 것이 최선이다. setTimeout(callback, 3000); const promise = setTimeoutPromise(3000); console.log("딴짓"); console.log("딴짓"); console.log("딴짓"); console.log("딴짓"); console.log("딴짓"); //... promise.then(() => { //변수로 뽑아 사용할 수 있다 console.log("지금 할래"); }); The..

프로토타입 문법을 깔끔하게 작성할 수 있는 Class 문법 Function 코드가 복잡하고, 분석하기 힘들다. class 사용 전반적으로 코드 구성이 깔끔해짐 Class 내부에 관련된 코드들이 묶임 Super로 부모 Class 호출 Static 키워드로 클래스 메서드 생성 Constructor(생성자), Extends(상속) 등을 깔끔하게 처리할 수 있음 코드가 그룹화되어 가독성이 향상됨.

const example = {a: 123, b: { c: 135, d: 146}}; const a = example.a; const d = example.b.d; const { a, b: { d } } = example; console.log(a); //123 console.log(d); //146, 객체는 키가 같아야 된다. const arr = [1,2,3,4,5]; const x = arr[0]; const y = arr[1]; const z = arr[4]; const [x, y, , , z] = arr; //배열은 자리가 같아야된다 객체는 키가 일치해야하고, 배열은 자리가 일치해야 한다. const { 변수 } = 객체;로 객체 안의 속성을 변수명으로 사용 가능 단, getCandy()를 실행..

function 문법을 완벽하게 대체하는 것이 아니다. function add1(x, y) { return x + y; } const add2 = (x,y) => { return x + y; } const add3 = (x,y) => x + y; //중괄호 뒤 바로 리턴시 생략 가능 const add4 = (x,y) => (x + y);//리턴값을 한번 묶어준다. function not1(x) { return !x; } const not2 = x => !x; //매개변수 하나면 생략 가능 const obj = (x, y) => { return {x, y}; //객체 반환 리터럴 } const obj = (x, y) => ({x,y});// 객체를 바로 반환하게 된다면 JS가 어떤걸 반환하는지 구별을 못하..

템플릿 문자열 var won = 1000; var result = "이 과자는" + won + "원 입니다."; // 이 과자는1000원 입니다. //문자열 리터럴, 백틱으로 문자를 감싸면 된다 const result = `이 과자는 ${won}원 입니다.`; //템플릿 문자열, 백틱 문자열 function a() {} a(); a``; //태그드 템플릿 메소드, 함수를 호출 할 수 있다 //최신 문법에 포함 ES2015부터는 '(빽틱) 사용이 가능하다. ' 문자열 안에는 ${변수} 처럼 사용 가능하다 메서드명''으로 함수를 호출할 수 도 있다. 객체 리터럴 var sayNode = function(){ console.log('Node'); } var es = 'ES'; var oldObject = { ..

var ES2015 이전에는 var 로 변수를 선언 ES2015부터는 const와 let이 대체 가장 큰 차이점 :블록 스코프(var 함수 스코프) if (true) { var x = 3; } //var 같은 경우 블록스코프를 무시해서 접근 가능하다 //function 으로 감싸져 있는 function 스코프 밖에서는 사용할 수 없다 console.log(x); if (true) { const y = 3; } // Uncaught ReferenceError: y is not defined console.log(y); //블록 스코프 밖에서 const 접근시 오류가 난다 기존: 함수 스코프(function() {}이 스코프의 기준점) 다른 언어와는 달리 if나 for,while은 영향을 미치지 못함 con..

자바 스크립트의 분석 호출 스택 -> 백그라운드 -> 태스크 큐 형식으로 돌아가면서 동작한다. 동작 순서 파일을 시작하면 반드시 anonymous가 실행이 된다. 함수를 선언한다(run) console.log(시작)을 실행한다(콘솔 창에 '시작' 출력) setTimeout 호출 비동기적 호출인 setTimeout은 백그라운드로 보내진다. 백그라운드에 어떤 함수가 먼저 실행될지 알 수가 없다. 타이머 (run, 3초)를 전달해 준다. console.log(끝)을 호출하고 anonymous 또한 호출 스택에서 제거해준다(모든 호출 스택이 비어져 있다) -> 콘솔 창에 '끝' 출력 후, anonymous를 제거 백그라운드에 타이머가 남아있고, 해당 타이머가 끝나게 되면 run함수를 태스크 큐로 전달한다. 호출..

위 순서 예측 ( 세 번째 -> 두 번째 -> 첫 번째 ) 호출 스택( 함수의 호출, 자료구조의 Stack) Anonymous는 가상의 전역 컨텍스트( 항상 있다고 생각하는 게 좋다) -> Chrome에서 나오는 용어 Anonymous는 파일이 실행되면 생기고, 종료되면 사라진다. 전역 컨텍스트, 전역 스코프라고 생각하면 된다. 함수 호출 순서대로 쌓이고, 역순으로 실행됨 함수 실행이 완료되면 스택에서 빠짐 LIFO 구조라서 스택이라고 불림 비동기 함수는 호출 스택으로 표현할 수 없다 호출 스택만으로는 설명이 안되는 상황이 있다(비동기 코드) 호출 스택 + 이벤트 루프로 설명할 수 있음