배꼽파지 않도록 잘 개발해요

◆ 자바스크립트 변수 정의 과정 ◆ 자바스크립트 Hoisting ◆ 자바스크립트 내장 객체 1 ◆ 자바스크립트 내장 객체 2 ◆ 자바스크립트 내장 객체 3 자바스크립트 변수 정의 과정 자바스크립트 엔진 · 자바스크립트 엔진은 자바스크립트 코드를 읽어 실행하는 프로그램이다. · 작성한 자바스크립트 코드는 자바스크립트 엔진을 통해 파싱되고 실행된다. · Chrome 브라우저의 경우 V8 엔진(구글에서 만든 자바스크립트 엔진)을 사용한다. 파싱(Parsing) : 자바스크립트 엔진은 먼저 소스 코드를 읽어 들이고 이를 추상 구문 트리(AST)로 변환한다. AST는 코드의 구조를 트리 형태로 표현하여 각 요소의 관계와 의미를 파악하도록 돕는다. 컴파일(Compilation) : AST로 변환된 코드는 컴파일러에..

◆ 자바스크립트 함수가 실행되는 과정 ◆ 실행 컨텍스트 ◆ this가 가리키는 것 ◆ 화살표 함수와 일반 함수의 this ◆ 자바스크립트 Closure ◆ ES6 Rest, Spread Operator 자바스크립트 함수가 실행되는 과정 자바스크립트 코드의 실행1 // 어떤 코드도 없는 경우 this : window 객체 (브라우저의 최상위단 스코프) Variable Object(변수들을 담는 객체) : {} Scope chain : [] · 자바스크립트 엔진은 코드가 없어도 실행 환경(실행 컨텍스트)을 초기화한다. · 스코프(scope)는 코드가 현재 실행되는 환경, 맥락(context)을 의미한다. - this 포인터, 스코프에 저장된 변수들, 스코프 체인 등이 환경에 포함된다. - this 포인터(레..

HTML 삽입 미리보기할 수 없는 소스 HTML 삽입 미리보기할 수 없는 소스 모듈 모듈의 장점 · 코드를 효율적으로 관리할 수 있음 · 다른 프로그램에서 재사용할 수 있음 · 이미 만들어진 모듈도 많음 Node.js ·크로스플랫폼 오픈소스 자바스크립트 런타임 환경 ·윈도우, 리눅스, macOS 등을 지원함. ·V8 자바스크립트 엔진으로 구동되며, 웹 브라우저 바깥에서 자바스크립트 코드를 실행할 수 있음. 프론트엔드 개발도 Node.js 환경에서 많이 함. - 코드 개발 시에는 서드파티 모듈과 Node.js가 제공하는 기능을 활용 - 개발이 완료되면 최종 결과물을 빌드해서 웹 브라우저에서 실행함. 모듈의 정확한 의미는 context에 따라 달라질 수 있음. • 웹브라우저에서의 모듈 : ES 모듈 = 모듈..

async/await async/await 구문은 Syntactic sugar(기존 문법을 더 편하게 사용할 수 있도록 하는 문법적 장치)에 해당 fetch('https://jsonplaceholder.typicode.com/users') .then((response) => response.text()) .then((result) => { console.log(result); }); async function fetchAndPrint() { const response = await fetch('https://jsonplaceholder.typicode.com/users'); const result = await response.text(); console.log(result); } fetchAndPrin..

HTML 삽입 미리보기할 수 없는 소스 HTML 삽입 미리보기할 수 없는 소스 DOM · Document Object Model의 약자로, 문서 객체 모델을 의미함. · 객체 지향 모델로써 구조화된 문서를 표현하는 형식 · XML이나 HTML 문서의 프로그래밍 인터페이스 · 문서의 구조화된 표현(structured representation)을 제공 → 프로그래밍 언어가 문서 구조, 스타일, 내용 등을 변경할 수 있도록 함. · 주로 자바스크립트를 사용하지만, 어떠한 언어에서도 DOM의 구현이 가능하다. DOM의 종류 Core DOM 모든 문서 타입을 위한 DOM 모델 HTML DOM HTML 문서를 위한 DOM 모델 - HTML 문서를 조작하고 접근하는 표준화된 방법 - 모든 HTML 요소는 HTML ..

HTML 삽입 미리보기할 수 없는 소스 HTML 삽입 미리보기할 수 없는 소스 객체 지향과 절차 지향 • 객체 지향 프로그래밍 : 프로퍼티와 메소드로 이루어진 각 객체들의 상호작용을 중심으로 코드를 작성하는 것 • 절차 지향 프로그래밍 : 변수와 함수를 가지고 작업의 순서에 맞게 코드를 작성하는 것 객체만들기 Object-Literal · 객체를 나타내는 문자열 · 중괄호 안에 프로티와 메소드를 나열 프로퍼티 : 객체의 상태를 나타내는 변수들 / email, birthdate 메소드 : 객체의 행동을 나타내는 함수들 / buy(item) this : 현재 객체 자체를 의미 (user) this.email : user의 email 프로퍼티 const user = { email: 'gildong@google..

fetch 함수와 비동기 실행 • 동기 실행 : 코드를 순차적으로 한 줄씩 실행하는 방식 • 비동기 실행 : 코드를 순차적으로 진행하지 않고, 특정 작업이 완료될 때까지 기다리지 않고 다음 작업을 시작하는 방식 console.log('Start!'); fetch('https://jsonplaceholder.typicode.com/users') .then((response) => response.text()) .then((result) => { console.log(result); }); console.log('End'); 여기서 then 메소드는 콜백을 등록만 함. then 메소드가 콜백을 등록하면 바로 console.log('End')가 실행됨. 서버에 response가 도착하게 되면 등록해두었던 콜백..

HTML 삽입 미리보기할 수 없는 소스 HTML 삽입 미리보기할 수 없는 소스 fetch 함수 구글 홈페이지를 볼 수 있는 이유 웹 브라우저가 구글 홈페이지를 제공하는 서버에 어떤 요청을 보냄 → 서버가 보내 준 응답(코드 덩어리)을 받아서 해석해줌 fetch('https://www.google.com') .then((response) => response.text()) .then((result) => { console.log(result); }); 구글 화면을 구성하는데 필요한 HTML과 자바스크립트 코드들 • Request : 웹 브라우저가 서버로 보내는 요청 • Response : 서버가 다시 보내지는 응답 fetch · 서버로 리퀘스트를 보내고 리스폰스를 받는 함수 .then((response) ..

HTML 삽입 미리보기할 수 없는 소스 HTML 삽입 미리보기할 수 없는 소스 이벤트 핸들러 등록하기 이벤트 핸들러를 등록할 때 가장 권장되는 방법 : addEventListener 하나의 요소에 여러 개의 독립적인 이벤트 핸들러를 등록할 수 있음. Element.addEventListener('type', 'handler') Element.removeEventListner('type', 'handler') removeEventListener 메소드는 파라미터로 전달하는 타입과 이벤트 핸들러가 addEventListener 메소드로 등록할 때와 동일할 때만 이벤트 핸들러를 삭제할 수 있음. // 이벤트 등록하기 let btn = document.querySelector('#myBtn'); // btn.o..

HTML 삽입 미리보기할 수 없는 소스 HTML 삽입 미리보기할 수 없는 소스 id로 태그 선택하기 document.getElementsById('id') → id에 해당하는 태그 하나 const myTag = document.getElementById('id'); 존재하지 않는 id 넣으면 null이 리턴됨. const myTag2 = document.getElementById('no_id'); consoel.log(myTag2) // null class로 태그 선택하기 document.getElementsByClassName('class') → class에 해당하는 태그 모음(HTMLCollection) 유사배열 형태로 출력됨. 배열의 형태이지만 완벽한 배열은 아님. · splice, push같은 배..