개발에 AtoZ까지

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

◆목표 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..

◆목표 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(..

◆목표 Javascript 기타 문법 - 삼항 연산자 - 함수 마라 미터 값 설정 - 구조 분해 할당 문법 - Rest 파라미터 - Spread 파라미터 1. 삼항 연산자 1) 문법 조건? 조건이 True일 때 결괏값: 조건이 False일때 결과값 2) 예제 - 삼항 연산자 사용 전 const nums=[2,3]; let isNum=''; if(nums.length==0){ isNum='빈 배열'; } else{ isNum='아이템이 있는 배열'; } - 삼항연산자 사용 후 const nums=[2,3]; let isNum=''; isNum = nums.length==0? '빈 배열': '아이템이 있는 배열'; 2. 함수의 기본 인자(파라미터) 값 설정 1) 문법 function 함수명(파라미터명=디폴트..

◆목표 Javascript 배열 사용법 - CRUD 방법(생성, 읽기, 수정, 삭제) - 배열과 관련된 함수 1. Javascript 배열 생성 1) 배열 생성(기본) const data = [1, 2, 3, "dave", true]; 2) 배열 안에 객체 선언 - {} 괄호는 JS에서는 객체 리터럴로 인지하고, 객체 또한 배열의 아이템으로 선언도 가능함 const data_object = [ { name: "dave", age: 2 }, { name: "dave", age: 2 } ]; 3) 2차원 배열 const arr = [ [1, 2, 3], [4, 5, 6] ]; 4) New 태그 사용 - JS는 배열을 객체로 인지하기 때문에 NEW 태그 사용이 가능함 const data1 = new Array..

◆목표 Javascript의 정의 Javascript의 역사 Javascript 사용하는 이유 Javascript 엔진 Javascript 동향 1. Javascript의 정의 - Javascript란 웹페이지에 생동감을 불어넣기 위해 만들어진 스크립트 언어 ex) 버튼을 클릭 시 창이 하나 띄어지는 행위, 어떤 이벤트가 발생했을 때 HTML의 구조를 변경한다던지 또는 css를 추가하는 등 Tip) 정적 웹 페이지 vs 동적 웹 페이지 - 정적 웹 페이지 : 사용자의 행동에 반응을 하지 않습니다. - 동적 웹 페이지 : 사용자의 행동에 반응을 합니다. 즉 상호작용을 합니다. 출처: https://rank01.tistory.com/14 [JAVA FOR JAVA] 2. Javascript의 역사 - 넷스케..