[WebDevCurriculum] Javascript / DOM

Hyo Kyun Lee·2021년 10월 20일

WebDevCurriculum

목록 보기

5/44

개요

Javascript와 DOM에 대해 이해한다.

Checklist

자바스크립트의 문법은 다른 언어들과 비교해 어떤 특징이 있을까요?
→ Javascript는 매우 유연한 언어로, 가장 특징적인 부분은 동적선언과 비동기처리이다.
→ 동적선언 : Javascript에서는 자료형과 변수의 형태를 일치시키지 않아도 되는 런타임형 언어이며(컴파일이 아닌 실행 시 오류를 check), 다른 정적언어(C, C++, Java)에 비해 디버깅 오류가 자주 발생할 수 있다.
→ 비동기처리 : Javascript의 코드실행은 순차적으로 이루어지지 않으며, 이전 코드의 실행결과가 이후 코드의 실행원인에 영향을 주는 것을 보장하지 않는다.
자바스크립트에서 반복문을 돌리는 방법은 어떤 것들이 있을까요?

→ for(반복시작조건; 반복완료조건; 반복인자)

for (var i = 0; i < selectObject.options.length; i++)

→ do{ logic } while(반복조건)

do {
  i += 1;
  console.log(i);
} while (i < 5);`

→ while(반복완료조건) {logic}

n = 0;
x = 0;
while (n < 3) {
  n++;
  x += n;
}

※ 단 실무에서는 이러한 원론적인 반복문보다는 map과 같은 특수목적의 method를 더 많이 활용한다.

자바스크립트의 변수가 유효한 범위는 어떻게 결정되나요?
→ 기본적으로 선언한 변수는 하나의 component 및 function 등 변수가 선언된 요소 내부에서만 유효하다.
→ project 내부의 모든 script에 유효한 변수로 적용이 필요할 경우엔, global(전역) variable을 별도 설정해주어야 한다.
var과 let으로 변수를 정의하는 방법들은 어떻게 다르게 동작하나요?
→ var은 이전부터 Javascript에서 변수를 선언하는 방식이었으며, 동일한 변수명을 가져도 중복된 변수선언이 가능하였다.
→ 변수를 var로 중복선언하는 것에 대한 오류를 줄이기 위해, 변수를 선언하는 방식이 let으로 바뀌었다(let으로 변수를 선언할 경우 중복선언이 불가).
(※const는 상수값을(변화하지 않는 변수) 선언할 때 사용하며, 재선언 및 재할당 모두 불가능하다.)
자바스크립트의 익명 함수, Arrow function는 무엇인가요?
→ Javascript의 특성상 함수자체가 변수, 또 다른 함수의 인자, return 등으로 활용될 수 있다.
→ 이러한 함수의 즉시적인 실행, 즉 함수의 선언보다는 실행 그 자체에 목적을 둘 때 함수의 이름이 정해지지 않는 익명함수를 많이 사용한다.
→ 이러한 익명함수를 구성할 때 arrow function 방식을 많이 사용하며, 별도의 함수명을 선언하지 않고 const f = (arguments) => {result or return} 형식을 활용한다.

참고개념

VanillaJS
→ 순수 javascript로만 이루어진 언어는 vanillaJS이며, 실무에서 사용하는 js언어는 여기서 실무적으로 활용할 수 있도록 적합하게 정제된 언어이다.
ECMAScript(ES)
→ 서로 다른 웹프레임워크에서 활용하는 언어, 문법 및 활용방법 등의 한계를 극복하고자 만들어진 표준화 문법(언어).
→ 웹프레임워크마다 Javascript, Python 등 사용하는 언어가 다르고, 이로 인해 문법이나 명령체계가 다를 수 밖에 없다.
→ 이러한 다양한 언어 간 한계를 극복하기 위해 만들어진 표준화 문법으로, Javascript에 class를 지원하는 등 표준화된 체계를 일컫는다.
→ ECMAScript2015, ES6 등 현대적인 문법이나 체계를 Javascript 등에 적용 및 통용할 수 있도록 지속적인 반영이 진행 중이다.
ES종류
→ Javascript 관점에서 function / class 동시지원, const/지역변수/template변수, arrow function, 스프레드연산자, arguments[index](array 인덱싱) 등이 ES6 문법이다.
DOM(Documnet object model)
→ 객체화된, 혹은 객체로 구조화된 문서를 일컫는다.
→ 하나의 application는 매우 다양하게 얽힌 객체(object)들로 구성이 되어있으며, 이러한 object들이 구성한 집합을 Document라 한다.
Virtual DOM(partially update)
→ application에서 변경되는 부분을, 기존 DOM과 비교하여 변경된 부분만 반영하여 인터페이스에 나타나도록 하는 구조를 일컫는다.
→ 부분적인 DOM만을 구현하여 성능소모를 줄이고, 이에 따른 렌더링을 획기적으로 개선할 수 있게 되었다.