개발에 AtoZ까지

안녕하세요 😀 한동안 웹 최적화에 대해서 관심이 있었는데 그 분야와 연관성이 있는 defer와 async에 대해서 알아보겠습니다. 글은 크게 아래와 같은 소주제로 진행하겠습니다. JS는 언제 다운로드 받을까? defer / async 의 정의와 어떤 차이가 있을까? 각 속성을 적절하게 사용하는 방법은 뭘까? 마무리 JS는 언제 다운로드 받을까? 일전에 브라우저 렌더링 하는 과정에 대해서 공유해 드린 적이 있는데 그 부분에서 HTML이나 CSS에 대해서는 언급이 있었지만, JS에 대한 언급은 없었습니다. 그래서 JS는 언제 다운로드 받고 어떻게 적용되는지 궁금하실 수도 있을거 같아요. 보통 HTML을 다운로드 받고 HTML에서 import 한 JS를 다운로드 받습니다. 그런데 JS는 항상 같은 순서로 다운..

◆목표 JS Import 하는 방법과 차이점 HTML에 Import 하는 방법 1) Head 태그에 JS를 import 하는 방법 2) Body 태그에 JS를 import 하는 방법 3) Head 태그에 async를 붙여서 JS를 import 하는 방법 4) Head 태그에 defer를 붙여서 JS를 import 하는 방법 Import 방법별 브라우저 파싱 단계 및 특징 Head 태그에 JS를 import 하는 방법 html 파일을 위에서부터 순차적으로 파싱하다가 head 부분에 있는 script 태그를 만나면 해당 src에 있는 파일을 다운로드 한다. parsing HTML. => blocked (fetching js / executing js 파일 다운) => parsing HTML 단점: 만약 다운..

◆목표 DOM 객체 생성 DOM 객체 읽기 DOM 객체 수정 DOM 객체 삭제 1. DOM 객체 생성 메서드명 설명 document.createElement(태그명) HTML 요소 생성하기 document.appendChild(요소명) HTML 요소 추가하기 2. DOM 객체 읽기(찾기) 메서드 설명 document.getElementById(아이디명) id로 찾기 document.getElementsByTagName(태그명) 태그로 찾기(배열로 리턴, 복수) document.getElementsByClassName(클래스명) class 이름으로 찾기(배열로 리턴, 복수) document.querySelector(css명) css Selector로 찾기(첫번째 요소만 선택됨) document.queryS..

◆목표 DOM의 정의 웹브라우저 동작과정 BOM의 정의 1. DOM(Document Object Model)의 정의 -구조화된 문서(Document)를 객체로 표현하는 방식 2. 웹브라우저 동작 과정 1) HTML 파일을 웹서버로 부터 가져옴 2) 가져온 HTML 파일을 파싱(Parsing) 하여 Dom Tree 생성, Css 정보를 파싱(Parsing)하여 Cssom Tree 생성 3) 파싱한 Dom Tree와 Cssom Tree를 기반으로 Render Tree를 생성 4) 생성한 Render Tree로 Rendering을 하고 그것으로 사용자에게 페이지를 보여줌 Tip) 자바스크립트 선언 위치 - HTML 코드를 기반으로 DOM 트리를 구성하기 때문에 DOM 트리를 구성하기 전에 자바 스크립트로 HT..

◆목표 Promise 등장 배경 및 정의 Promise 사용법 콜백 지옥에 대한 Promise 해결법 Promise의 기타 문법 1. Promise 등장 배경 및 정의 - 콜백함수의 단점인 콜백 지옥을 해결하기 위해 등장 - 비동기적 처리의 근본적인 문제점이였던 서버에서 데이터를 받아오기 전에 화면에 데이터를 표시하려고 할 때 발생하는 오류를 해결하기 위해 등장 - ES6에서 부터 추가된 문법으로 비동기 처리를 위해 기존에 있던 단점들을 보완하기 위해 사용됨 2. Promise 사용법 promise 객체를 생성 promise 객체는 executor라는 함수가 내부적으로 자동적으로 실행되는데 executor 함수에서는 resolve와 reject라는 두개의 함수를 인자로 받아서 비동기 처리 함수를 실행함 ..

◆목표 동기/비동기 정의 비동기 처리 사용되는 곳 비동기 처리 사용법(SetTimeout) 비동기 처리의 문제점 및 해결방안 1. 동기 / 비동기 처리의 정의 - 동기적 처리 요청을 보낸 후, 해당 요청의 응답이 올 때까지 다른 작업을 하지 못하는 방식 즉, 코드 한줄 실행이 완료되어야지만 다음 줄 실행이 가능하다는 뜻 - 비동기적 처리 요청을 보낸 후, 해당 요청의 응답과 상관없이 다른 작업을 하는 방식 즉, 코드 한줄 실행 후 결과와 상관없이 다음 줄 실행한다는 뜻 2. 비동기 처리 사용되는 곳 - 보통 오래걸리는 기능들은 비동기적 방식으로 처리함 Rest API 요청 파일/데이터베이스 처리 타이머, 암호화/복호 화등 3. 비동기 처리 사용법(setTimeout) 1) setTimeOut() - 사용..

◆목표 Scope 정의 Scope 종류 및 특징 Block Scope 예시 Var 키워드와 Block Scope 결합 시 영향력 1. Scope 정의 - 자바스크립트 변수 또는 함수 선언시, 해당 변수 또는 함수가 유효한 범위를 의미함 2. Scope 종류 및 특징 - Global(전역) Scope : 코드 전체 범위 - Function(함수) Scope : 함수 내에서의 범위 - Block(블록) Scope : {} 괄호로 이루어진 블록 내에서의 범위 Tip) 일반적인 프로그래밍 언어에서는 전역,함수로 나눠지는데 자바스크립트에서 블록 scope가 추가되어 다른 언어와 상이함 3. Block Scope 예시 - let과 const로 선언된 변수는 블록 안에서 선언이 되었다면, 블록 밖에서는 유효하지 않음..

◆목표 Javascript의 Hoisting 이슈 - 정의 - 현상과 이유 - 해결 방법 1. Hoisting 이슈 정의 - 일반적인 언어에서는 함수, 변수를 선언한 후에 사용이 가능하지만 JS에서는 호이 스팅(끌어올린다)이라는 현상 때문에 에러가 발생하지 않는다. 이렇게 에러가 발생하지 않는 점으로 인해 논리적 오류가 발생한다. 2. Hoisting 현상과 이유 - Hoisting 현상은 변수, 함수에서 발생하지만 이슈가 되는 포인트는 Var 키워드로 선언했을때다. Tip) var 키워드란? let, const가 나오기전에 사용하던 키워드로 해당 키워드를 사용하면 같은 이름의 변수를 여러 번 선언하더라도 오류를 발생시키지 않는 이슈가 있음 console.log(b); b = 1; console.log(..