[용어 쉽게 이해하기] : DOM / 가상돔 / 환경변수 / 라이브러리 / 디버깅 / 컴파일러
디버깅 - 소프트웨어에 발생한 문제를 해결 (개발중)
컴파일러(마지막에 한번에 변환) - C언어 vs 인터프리터(스크립터/그때그때 컴퓨터언어로 변환) - 자바 - 느리고 쉽게 코드가 노출
빌드 - 작업한 파일을 압축해서 보냄, 코드를 못알아보게 또는 형식만 변경, 압축 등
배포 - 사람들이 보는 웹사이트에 작업결과를 반영
환경변수
소프트웨어(컴퓨터)가 동작하는 공간+컴퓨터마다 지정된 값
두 집에 각각 다른 환경변수 값이 있다고 가정해보자
| PATRICK | SPONGEBOB | |
| 서재 | 안방 | 거실 |
| 건물종류 | 아파트 | 단독주택 |
| 현관비밀번호 | 1234# | ***3000*** |
환경변수가 사용되는 곳
1. 영어책을 ${서재}에 꽂으시오 라고 했을때 집마다 각 서재에 꽂을 수 있음
자바스크립트 설치 시 해당 컴퓨터의 적절한 곳에 가서 알아서 설치 가능
2. 집의 ${건물종류}가 전원주택이면 잔디를 깎으세요 각 환경의 조건마다 어떻게 시행할지 정할 수 있음
mode: dev(개발용)과 prod(배포용)이 있을때 내부 정보를 개발용 컴퓨터에만 나타날 수 있게 함
3.${현관비밀번호}를 입력하고 들어가세요. -> #1234를 입력하고 들어가세요 처럼 현관 비번이 노출되지 않도록 하여 보안 강화
라이브러리 vs 프레임워크
라이브러리 - 부품 . 특정 기능들이 함수나 클래스로 제작되어 공개된 것을 사용할 수 있음
프레임워크 - 뼈대. 기본 골격 위에서 무언가를 만듬 ex) 스프링, 장고, .NET, 라라벨, Express, Vue
DOM(Document Object Model)
HTML로 작성된 웹 문서라는 물감들을 DOM이라는 붓을 통해 웹 브라우저란 도화지에 그린다
DOM의 공식정의 = HTML, XML문서를 나타내는 API
CSS는 트리형식(CSS Object Model, CSSOM)으로 따로 만들어짐
브라우저는 DOM 트리와 CSSOM트리를 융합하여 우리가 보는 화면을 만들어냄
다른 예시로 공장(브라우저(크롬, 사파리 등))에 보내는 주문서(document = HTML문서)를 가지고 HTML의 각 요소들이 브라우저에서 실체로 제작. HTML문서에 작성한 그 전체구조에 맞춰서 이(dev, li..)제품들이 배치되고 이것들에 내가 추가적으로 명령을 보내서
속성이나 디자인, 배치등을 조작할 수 있도록 된 상태
즉, HTML이란 코드로 설계된 웹페이지가 브라우저 안에서 화면에 나타나고 이벤트에 반응하고 값을 입력받는 등 기능들을 수행할 객체들로 실체화된 형태
HTML요소들 하나하나가 부품이라고 했을때 이걸로 조립해서 만들어진 웹페이지를 가져다 실 제품으로 찍어낸 것
이 DOM을 사용해서 원하는대로 웹 화면을 보여주고 필요에 따라 자바스크립트로 이 DOM을 조작
API를 가지고 있기 때문에(DOM에 기능별로 버튼같은 것이 달려있어서 어떤 언어로든 기능 작동시킬수있음) 해당 언어의 라이브러리를 사용해서 제어는 가능(특정 언어에 종속되지는 않음)
파이썬에서도 beautiful soup으로 조작 가능
DOM을 엣지, 크롬, 파이어폭스 등 어디서 만들든 세세한 부분을 제외하면 동일(어떤 브라우저에서 접속하든 동일)
각종 node들이 tree구조로 들어있음
ex) 포유류 - 개, 고양이, 토끼. but 포유류라는 동물은 없음. 마찬가지로 node라는 요소도 따로 없음
node는 클릭등의 이벤트가 가해지는 EventTarget이기에 addEventListener등의 기능 보유
node의 기능 - textContent, childNodes, firstChild, lastChild, parentNode, cloneNode, AppendChild, insertBefore, removeChild
a태그(anchor) - href, target . 이미지 - src 속성 반환하는 API(버튼)들이 요소마다 추가로 달려있음
BOM(Browser Object Model) - 브라우저 자체를 다루기 위한 API.
window안의 location, navicater, screen 제공
window. 뒤에 붙이거나 그냥 호출하는 alert나 setTimeout, location의 replace 등도 BOM으로 함.
전부 브라우저가 실행 주체인 기능들
가상돔(vertual dom)
DOM의 구조만 간결히 흉내낸 자바스크립트
인스타에 좋아요 누를때 전체페이지를 리로딩하지않고 해당 부분만 변경
DOM을 공장에서 가구들을 실제로 배치한다고 했을때 변경이 있는경우 실제 가구들을 옮기는 등 너무 무거워짐
가상돔은 종이로 미니어쳐를 만들어서 시뮬레이션해보고 실제 필요한 가구만 이동시키므로 경제적임
미니어쳐들을 기존의 모습대로 배치하고 다른미니어쳐들을 출력해서 바뀔 모습으로 배치하고 둘을 합리적인 알고리즘으로 비교해서 차이가 생기는 부분만 파악(diffing)한 후 그 부분만 실제 DOM에 반영
어떤 ul내에 li들만 변경한다고 치면 다른것 안건드리고 그것들만 조작
React나 Vue는 (라이브러리) DOM에 가해지는 변화를 최소한의 변경으로 구현할 방법을 찾음
Svelte는 (컴파일러) 시뮬레이션 동작도 배제해서 더 빠름. 용량면에서도 더 가볍고 DOM의 조작도 더 빠름
| React나 Vue | Svelte |
| (라이브러리로서 자바스크립트 파일들을 사용해서 동작 - 사이트가 실행되는 시점.런타임에서 발생) 템플릿으로 HTML요소를 코딩해두고 그것들을 어떤 변수 등에 들어간 데이터에 연결만 해놓으면 그 데이터들에 맞춰서 알아서 화면이 다 바뀌게 되는 것 자기네 라이브러리를 로드해서 브라우저에서 가상 DOM을 써서 하는 최적화작업을 svelte는 코딩하고나서 빌드할때 미리 해둬서 필요한 부분만 자바스크립트 코드로 내놓음 |
DOM에 가해지는 변화를 사이트가 배포되기전에 미리 빌드 브라우저로 결과물을 가져다주기 전에 컴퓨터에서 Node.js로 컴파일하는 과정에서 다 이루어지기때문에 브라우저는 알 필요가 없음 딱 실제에서 일어날 일들 - 이벤트가 들어오면 이 가구를 어디로 옮기고 이것만 컴팩트한 자바스크립트파일로 컴파일해서 내놓음. 브라우저에서는 따로 돌릴 필요가 사라짐 |
| 강력한 기능도 많고 안정성이 다져진 상태 | 단, 빠르게 성장중이나 최신이고 특정형태의 사이트에서는 한계가 될 수도 있음 |
해당 유투브를 참고하여 작성했으니 필요한경우 참고를 참고하세요