DOM, Virtual DOM이 뭔가요?

📜 라디오 대본

얄코: 카페에서 창밖 내다보며 듣는 얄코 라디오! 얄코: 오늘의 주제는 DOM과 가상 Dom입니다. 얄코: 아울러 후반부에는 Svelte를 얄코: React나 Vue 등이랑 비교해보는 시간도 있을거구요. 얄코: 저는 얄팍한 개발자 얄코 미토: 미친토끼 미토에요 미토: 이거이거 이 DOM이라는거 이거 미토: 웹 개발하시는 분들 중에서도 미토: 이게 뭔지 모르고 쓰는사람들 많을거에요 얄코: 그렇죠. 심지어 이 DOM의 기능들 다 잘 활용하면서도 얄코: 이 DOM이 무엇인가에 대해서 딱히 생각해본 일이 없거나 얄코: 어렴풋이, 모호하게만 파악하고 있는 경우들이 많죠. 미토: 사실 저도 그렇거든요 저도 미토: 뭔가 HTML이랑 관련이 있어는 보이고 미토: 화면에 나타나는 요소들이 돔이거나 그 비슷한 거인거는 같은데 미토: 누가 갑자기 DOM이 뭐냐고 그러면은 미토: 제가 당당하게 대답을 못할 것 같애요. 미토: 그래서 이참에 나도 확실이 알고 가야겠어 미토: 얄코씨 DOM이 뭐에요? DOM이? 미토: DOM은 HTML이에요? 얄코: 아니에요. 말씀하셨듯이 깊이 연관됐지만 같지는 않아요. 얄코: DOM, Document Object Model이죠. 얄코: 여기서의 Document는 HTML 문서를 말해요. 얄코: 자, 브라우저가 있어요. 크롬이나 사파이, 엣지, 얄코: 파이어폭스 이런것들이 브라우저죠. 얄코: 이 브라우저들이 공장이라고 칩시다. 얄코: HTML 문서는 이 공장들에 보내는 주문서에요. 얄코: 이 주문서에는 내가 원하는 웹페이지의 요소들과- 얄코: 그 구조가 설계도처럼 표현돼있죠. 얄코: body 태그 안에 header태그랑 main 태그가 있고 얄코: header 안에는 ul에 묶여서 li들이 몇개가 들어가고 얄코: body에는 이것들 저것들이 이렇게저렇게 들어가고 얄코: 이런 구체적인 구조를 HTML이란 주문서에 담아서 얄코: 웹페이지에 접속할 때 쓰는 브라우저에 보내는거죠. 얄코: 그러면 이 브라우저라는 공장에서 얄코: 이 주문서를 보고 그 안의 HTML 요소들 얄코: body, div, li, span, 텍스트 내용 이런것들을 얄코: 실제 제품들로 뚝딱뚝딱 제작을 하는거에요. 얄코: 예를 들어서 input 태그는 얄코: HTML 파일에서는 그냥 꺾쇄 안에 input라는 글자 얄코: 그리고 그 안에 클래스 등의 속성들 등이 든 문자열이지만 얄코: 이게 브라우저라는 공장으로 들어가면 얄코: 우리가 아는 input, 즉 지정된 타입에 따라- 얄코: 빈 칸이 있어서 문자열이나 숫자를 입력받거나 얄코: 체크박스로 온/오프를 하는 등 입력을 받고 얄코: 그 값을 value로 내보낼 수 있는 얄코: 그런 기능들을 다 갖춘 실제 제품 얄코: input 오브젝트로 만들어지는거에요. 얄코: 이처럼 HTML의 각 요소들이 브라우저에서 실체로 제작되는거죠. 미토: 그러면은 DOM은 input이나 div, table같은 그 실제품들이에요? 얄코: 아니에요. 그 HTML 요소들 하나하나가 아니라 얄코: HTML 주문서에 작성한 그 전체 구조에 맞춰서 이 제품들이 배치되고, 얄코: 이것들에 내가 추가적으로 명령을 보내서- 얄코: 속성이나 디자인, 배치 등을 조작할 수 있도록 된 상태 얄코: 즉, HTML이란 코드로 설계된 웹페이지가 브라우저 안에서 얄코: 화면에 나타나고 이벤트에 반응하고 값을 입력받는 등- 얄코: 기능들을 수행할 객체들로 실체화된 형태라고 보면 돼요. 미토: 그럼 이 HTML 요소들 하나하나가 부품들이라고 치고 미토: 이것들로 조립돼서 만들어진 웹페이지를 갖다가 미토: 실제품으로 찍어낸게 DOM이라고 봐도 되겠네요. 얄코: 보다 공식적이고 정확한 정의는 이따 나오겠지만 얄코: 일단은 그렇게 이해해도 무리는 없을거에요. 얄코: 이제 이 DOM을 사용해서 원하는대로 웹 화면을 보여주고 얄코: 필요에 따라 자바스크립트로 이 DOM을 조작할 수도 있는거죠. 미토: 자바스크립트로 조작할 수 있다. 미토: 그러면은 DOM은 자바스크립트 요소에요? 얄코: 아니에요. 자바스크립트를 사용해서 명령을 받을 수 있고 얄코: 실제로 그렇게 가장 흔히 사용이 되지만 얄코: 이 DOM이 특정 언어에 종속지는 않아요. 얄코: 자바스크립트 객체는 아니지만, 자바스크립트 등을 사용해서- 얄코: 제어할 수 있는 대상이라는 이야기죠. 미토: 아 그래가지고 그 파이썬에서도 BeautifulSoup 가지고다가 미토: DOM을 조작하고 그러고 할 수 있는거구나 얄코: 맞아요. 이처럼 어떤 언어로든 라이브러리만 갖춰지면- 얄코: 이 DOM을 조작할 수 있는데 얄코: 그건 이 DOM이 API를 갖고 있어서에요. 미토: API는 그거잖아요. 어떤 방식으로 명령이나 요청을 내리면은 미토: 그거에 따라서 무슨 기능들을 수행하도록 만들어놓은거 얄코: 그렇죠. 즉 이 DOM이나, 그 부품들에 각각 얄코: 그 기능별로 버튼같은게 달려 있다고 보면 돼요. 얄코: 어떤 언어로든 그 버튼을 눌러서 기능을 작동시킬 수 있는거죠. 얄코: 예를 들어서 아까 그 input 태그에는 value란 버튼이 있어서 얄코: 그걸 누르면 거기에 입력된 값이 반환되는거구요. 미토: 그런데 아까 이 DOM을 브라우저라는 공장이 만든다고 그랬잖아요. 미토: 그럼 이 공장들마다 만들어내는 제품들이 똑같애야 미토: 이런 API 같은것들도 웹사이트를 크롬으로 보든 다른걸로 보든 미토: 일관성 있게 사용을 할 수가 있을거겠네요. 얄코: 맞아요. AA 배터리나 SD카드 등이 제조사가 달라도 얄코: 기본적인 기능과 규격, 사용법은 다 같은 것처럼 얄코: DOM을 크롬에서 만들든 파이어폭스에서만들든 얄코: 엣지에서 만들든 세세한 부분들을 제외하면 다를 게 없어요. 얄코: 그래서 우리가 웹사이트를 어떤 브라우저에서 접속하든 얄코: (물론 익스플로러는 제외하고) 얄코: 별다른 차이 없이 이용할 수가 있는거에요. 얄코: 여튼 이 DOM 안에는 각종 node들이 트리 구조로 들어있어요. 미토: 노드는 뭐고 트리는 또 왜 트리에요? 얄코: HTML 문서를 보면 보통 HTML 태그 안에 얄코: head, body 태그들이 들어있고 얄코: body 태그 안에는 div 등 여러 다른 태그들이 얄코: 그 안에는 ul, 또 그 안에는 li 등 계속해서 얄코: 요소들이 다른 0에서 N개의 요소들을 포함하는 식이잖아요. 미토: 그 관계도를 html부터 위로 이어서 그려나가면 나무 모양이 되겠네요. 미토: 그래서 DOM 트리다, DOM이 트리로 되어있다고들 하는구나. 미토: 그럼 Node란 거는 또 뭐에요? 얄코: DOM의 모든 요소들, html이든 div든 radio든 table이든 얄코: 이것들은 모두 node로부터 상속받아요. 미토: 상속이라고 하면 객체지향을 안 배우신 분들은 못 알아들을텐데요 얄코: 그렇죠, 그냥 모든 HTML Element, 즉 HTML 요소들은 얄코: 기본적으로 node다 라고 이해하시면 돼요. 얄코: 개나 고양이, 토끼가 모두 포유류인것처럼요. 얄코: 그말이 무슨 뜻이냐면, 이것들 모두가 Node의 기능들을 얄코: 전부 기본적으로 갖추고 있다는 얘기죠. 얄코: 포유류는 척추가 있는거니까, 개 고양이 토끼들 모두 척추가 있잖아요. 얄코: 대신 포유류라는 동물이 없는 것처럼, Node라는 요소가 따로 존재하진 않아요. 미토: 추상클래스 같은거네요 추상클래스 미토: 하여튼간 DOM의 구성요소들이 기본적으로다가 다 Node니까 미토: DOM은 이 Node들로 만들어진다고 한다는거죠. 미토: 그럼 이 Node의 기능이라고 한 건 어떤것들이에요? 얄코: HTML 요소들에서 공통적으로 볼 수 있는 기능들은 얄코: 다수가 Node의 속성 또는 기능이라고 보시면 돼요. 얄코: textContent, childNodes, firstChild, lastChild, 얄코: parentNode, cloneNode, appendChild, insertBefore 얄코: removeChild 이런것들이 다 사실 node의 기능들인거죠. 얄코: 그리고 이 node는 또 EventTarget으로부터 상속받기 때문에- 얄코: 즉 Node는 클릭 등의 이벤트가 가해지는 EventTarget이기 때문에 얄코: 이 요소들은 모두 addEventListener 등의 기능 또한 갖고있는거에요. 미토: 그 기능들이란게 모든 DOM 요소에 버튼들로 달려가지고다가 미토: 우리가 자바스크립트로든 뭐로든 각 요소들을 조작을 할 수 있는거네요. 미토: 거기에다 각 요소들의 고유 속성이나 기능들이 또 있는거구요. 미토: 예를 들어보면은 a태그, 즉 anchor같은 경우 href랑 target 미토: 그리고 이미지는 src같은 이런 속성들을 반환하는- 미토: API, 버튼들이 요소마다 추가로 달려있는거겠죠. 얄코: 맞아요. 결국 이런 API들로 구성돼있기 때문에 얄코: MDN 사이트에서는 이 DOM을 정의하기를 얄코: 'HTML이나 XML문서를 나타내는 API'라고 해요. 미토: 그게 DOM의 공식 정의에 가까운거네요. 미토: 'HTML이나 XML문서를 실체로 나타내는 API' 미토: 이 DOM에 그럼 CSS같은것도 포함이 되는거에요? 얄코: CSS는 CSS Object Model, CSSOM이란걸로 따로 만들어져요. 미토: C S S O M 이거 어떻게 읽어? 크쏨이에요? 얄코: 이 CSSOM도 포함 관계로 나타내지는만큼 얄코: 트리 형식으로 출력이 돼요. 얄코: 브라우저는 DOM 트리랑 CSSOM 트리를 융합해서 얄코: 우리가 보는 화면들을 만들어내는거죠. 얄코: 그리고 Browser Object Model이라고, BOM이란 것도 있어요. 얄코: 이거는 브라우저 자체를 다루기 위한 API인데 얄코: window, location, navicator, screen 얄코: 이것들이 다 BOM에서 제공되는것들이에요. 미토: window. 뒤에 붙이거나 그냥 호출하는 alert나 setTimeout, 미토: location의 replace 이런것들은 다 BOM으로 하는거네요. 미토: 다 브라우저가 실행주체인 기능들이니까. 미토: 하여튼간에 이 DOM만 해도 얘기할 게 되게 많네요 되게 많어 얄코: DOM을 제대로 파면 책 한 권이 나와요. 미토: 그러면은 가상 돔이란거는 뭐에요? 가상돔 얄코: Virtual Dom, 가상 돔을 다루려면 React나 Vue 같은 것들에 대한 얄코: 기본적인 이해가 필요한데요 얄코: 이런 Single Page Application들이 왜 만들어졌죠? 미토: 얄코씨가 'Angular, React, Vue가 뭔가요?' 영상에서 이미 미토: 예제를 가지고다가 알아듣기 쉽게 알려줬지만은 미토: 내가 간략하게 다시 설명을 해볼게요. 미토: 라떼는 말이에요. 웹사이트에서 뭐가 변경이 되려면은 미토: 페이지를 새로다가 로딩을 해야됐어요. 미토: 예를 들어서 아는 동생이 토끼풀 뜯는거 찍어올려가지고 미토: 거기에 내가 잘 씹어먹는다고 좋아요 버튼 누르면은 미토: 그거 쬐끄만거 그 하트 하나 시뻘겋게 만들어준다고 미토: 페이지 전체가 리로딩이 되는거였던 건거거든요? 얄코: 웹사이트 전체가 깜빡 하고 하얘졌다가 다시 나타나는거죠- 얄코: 다른 페이지로 접속할때처럼. 뭘 하든간에요. 얄코: 사용자 경험으로는 썩 좋지 않은 모습이었어요. 미토: 그때니까 그게 불편한 줄 모르고 썼지 미토: 요즘 그따구로 만들면은 웹사이트 닫아야죠. 미토: 이런거를 보완을 할려구다가 미토: 자바스크립트를 사용해서 그 하트 색만 바꽈줄 수 있게 미토: HTML 요소들을 선택해서 필요한데만 바꾸기 시작한거잖아요. 미토: 페이지를 다 다시 불러오는거가 아니라 미토: 자바스크립트로갖다가 딱 필요한 부분만 바꽈주는거 미토: 지금 생각해보니까 그게 다 DOM을 조작하는거였구만. 얄코: 네, 그래서 불과 몇 년 전까지 jQuery가 널리 쓰였죠. 얄코: 간결한 문법으로 DOM을 편리하게 다룰 수 있었고 얄코: 무엇보다, 어느 브라우저에서나 코드가 제대로 동작하도록 얄코: 크로스 브라우징이 잘 되어있는게 강점이었어요. 미토: 그 좋았던 거를 요즘은 왜 안 써요? 얄코: 시대가 바뀌면서 수요도 달라진거죠. 여러 이유가 있어요. 얄코: 일단 크로스 브라우징의 필요성이 전보단 줄어들었고 얄코: 순수 자바스크립트도 발전해서 충분히 간결하고 강력해졌죠. 얄코: DOM을 조작하는 방식도 React 같은 것들이 생겨나면서 얄코: 불필요하게 무겁고, 옛날 자바스크립트 방식에 맞춰진 얄코: jQuery는 점점 밀려나게 됐어요. 미토: 오호라. 하기사 jQuery는 직접 특정 div등의 요소들을 선택해다가 미토: 그거의 내용을 바꾸든 클래스 등을 조작하든 미토: 다른 요소를 안에 더하거나 빼든 해가지고 미토: 여튼 이렇게 직접 코드로 이 DOM을 갖다가 조작을 하는거잖아요. 미토: 그런데 이 React나 Vue는 템플릿으로 HTML 요소를 코딩해두고 미토: 그것들을 어떤 변수 등에 들어간 데이터에 연결만 해놓으면은 미토: 그 데이터들에 맞춰서 알아서 화면이 다 바뀌게 되는거죠. 얄코: 맞아요. 그 과정에서 사용되는게 가상 DOM이에요. 얄코: Angular는 또 달라서 이번 화에서는 뺄게요. 미토: 가상이라고 하면은 진짜 돔이 아니라는거겠네요? 얄코: 네, DOM의 구조만 간결히 흉내낸 자바스크립드 객체에요. 미토: 아니 화면에 뭐가 나타나고 바뀌고 하려면은 어쨌든간에 미토: 진짜 DOM에 조작이 가해져야 되는것인데 미토: 뭐에다 쓰려고 이 가상 돔을 만드는거에요? 얄코: HTML이란 주문서를 가지고 브라우저란 공장들이 얄코: 그 설계를 실체로 만들어낸게 DOM이라고 했죠? 얄코: 이게 각 HTML 요소들을 가구처럼 물리적인걸로 얄코: 찍어내서 주문서에 맞게 배치하는거라고 상상을 해볼게요. 얄코: DIV는 딱딱한 상자, 테이블은 선반 형태 이런식이겠죠. 얄코: 이런 요소들을 다 제작해다가 HTML 주문서의 구조대로 얄코: 각각 적합한 위치에 가져다놨어요. 얄코: 그런데 자바스크립트로 지시가 들어와서 얄코: 중간에 DIV 몇 개를 빼거나 다른걸로 바꿔야돼요. 얄코: DOM의 HTML 요소들에 조작이 가해지는거죠. 미토: 그러면은 전반적인 배치에도 좀 바뀌는것들이 있겠네요. 미토: 이거 빼면 그자리로 저거 옮겨야 돼고 그럼 다른거 밀려나고 미토: 이거 뭐 뭐가 어떻게 될지를 모르니까 미토: 일꾼들이 그 근처를 싹 치우고 다시 하나하나 놔가면서 미토: 배치를 또 해야겠는데요. 진짜 골치아프겠는데. 얄코: 그렇죠. 이런 과정을 가구들을 직접 옮겨가면서 얄코: 즉 실제 DOM을 조작해서 하려면 컴퓨터에 부담도 되고 속도도 느릴거에요. 얄코: 가상 돔을 쓴다는 건, 이 가구들을 종이같은걸로 얄코: 모양만 똑같이 나타낸 미니어쳐들로 만든 다음에 얄코: 이 미니어쳐들을 움직여가면서 어떤 가구들이 실제로 위치가 바뀌는지 얄코: 먼저 파악을 한 다음에 딱 그 실제 가구들만 움직이는거에요. 미토: 오호라, 실제 DOM은 이것저것 든 게 많고 무거우니까 미토: 그것들을 간략한 자바스크립트 오브젝트로 바꾼 다음에 미토: 이걸로 먼저 시뮬레이션을 돌려가지고다가 가장 경제적으로 미토: DOM에 변화를 가하는 방법을 찾아낸다 이런거네요! 얄코: 맞아요. 이 미니어쳐들을 먼저 기존의 모습대로 배치를 해요. 얄코: 그리고 다른 미니어쳐들을 출력해서 바뀔 모습으로 배치를 하고 얄코: 이 둘을 합리적인 알고리즘으로 비교해서 얄코: 차이가 생기는 부분만 파악한 다음에, 이걸 diffing이라고 해요 얄코: 그 부분만 실제 DOM에 반영을 하는거죠. 얄코: 그래서 어떤 ul 내에 li들만 변경할거라 치면 얄코: 다른 것들 안 건드리고 딱 필요한 그것들만 조작을 하는거에요. 미토: 이 가상 돔을 쓰기 때문에 React나 Vue 같은것들이 미토: 그렇게 빠르고 가볍게 화면들을 조작할 수 있는거구나. 얄코: 그렇게 알려져 있기는 한데, 이 Virtual DOM때문에- 얄코: 빠르다고 하는 건 사실 정확한 표현은 아니에요. 얄코: 예를 들어, 얼마 전부터 급부상하는 Svelte는 얄코: 이 가상 DOM을 안 쓰기 때문에 더 빠르다고 하거든요. 미토: 아니, 방금 그랬잖아요. 이 미니어쳐들을 출력해가지고 미토: 그것들로 미리 배치를 해봐가지고다가 제일 효율적인 방식으로 미토: 실제 가구들을 움직이는거라구요. 그러니까 빠른거 아녜요? 얄코: 거기에서, 미니어쳐를 출력해서 시뮬레이션하는 과정을 빼면- 얄코: 더 빨라지겠죠. 그것들 없이도 효율적으로 DOM을 조작한다면요. 미토: 오 그러네요. 미토: 가상 돔을 쓴다는것도 결국 어떤 과정을 추가하는거니까. 미토: 아니, 그것들 없이도 효율적으로다가 DOM을 조작할 수 있으면은 미토: React나 Vue는 왜 가상 돔을 쓰는거에요? 미토: Svelte 개발자들보다 좀 덜 똑똑해서 그런건가? 얄코: React랑 Vue는 라이브러리 또는 framework 형태고, 얄코: Svelte는 컴파일러라는 데 차이가 있어요. 미토: React는 라이브러리고 Svelte는 컴파일러다? 그게 무슨 말이에요? 얄코: React로 만든 사이트들은 React의 기능들을 담은 얄코: 자바스크립트 파일들을 사용해서 동작해요. 얄코: Node.js 없이 리액트 사용할 때 보면 script 태그에다가 얄코: react 어쩌구 .js파일을 로드하잖아요. Vue도 마찬가지구요. 미토: 그걸로 로드된 React나 Vue의 라이브러리 내지 프레임워크가 미토: 사이트가 실행될 때 코드에 있는 템플릿이랑 데이터들을 읽어가지고 미토: 화면에 스마트하게 그것들을 나타내주는거죠. 얄코: 그렇죠. 가상 돔은 사실 그 과정을 브라우저단에서- 얄코: 효율적으로 해내기 위해 만들어진거라고 보는게 더 맞아요. 얄코: 사용자가 작성한 React 전용 코드를 브라우저가 가상 돔으로 해석해서 얄코: 메모리에서 먼저 구현한 다음 최종적으로 실제 DOM에 적용을 하는거에요. 얄코: DOM 변경을, 웹사이트에 로드된 React나 Vue 라이브러리가 얄코: '가장 빠르게'는 아니지만 사용자가 불편하지 않을 만큼 얄코: '충분히 빠르게' 설계한 결과물이 이 가상 돔 방식인거죠. 미토: 그러면은 이... S v e l t e, Svelte? 이거 발음 세게 하면 큰일나겠네 미토: Svelte는 뭐가 다른거에요? 얄코: 위의 React등이 거치는 과정은 사이트가 실행되는 시점 얄코: 즉 런타임에서 일어나는거에요. 얄코: 브라우저가 자바스크립트 파일 받아서 하는 작업이라는거죠. 얄코: 가상 돔은 이 런타임이란 제약 조건 하에서, 얄코: 브라우저에 로드된 라이브러리로서, DOM에 가해지는 변화들을 얄코: 최소한의 변경으로 구현할 방법을 찾는 방식인거구요. 얄코: Svelte는 그 과정을 사이트가 배포되기 전에 미리 다 해두도록 한 거에요. 미토: 그래서 컴파일이구나! 어떤 데이터가 바뀌면 어떤 가구만 움직이면 될지를 미토: 미리 다 계산을 해 놓은 다음에 그걸 빌드해서 내놓는다는거죠? 얄코: 맞아요. Svelte로 만든 사이트를 소스보기해서 js 파일들을 살펴보면 얄코: Svelte 라이브러리에 관련된 코드가 없다는 걸 확인할 수 있을거에요. 미토: 그러네? Svelte가 하는 일은 브라우저로 결과물을 갖다주기전에 미토: 컴퓨터에서 Node.js로 컴파일하는 과정에서 다 이뤄지는거니까 미토: 브라우저는 그런 것들을 알 필요가 없다는거죠. 얄코: 그렇죠. Svelte 형식에 맞게 코드를 짜고 이걸 빌드하면 얄코: Svelte는 사이트에서 딱 실제로 일어날 일들 얄코: 즉 이 이벤트가 들어오면 이 가구를 어디로 옮기고 이것들만 얄코: 컴팩트한 자바스크립트 파일로 컴파일해서 내놓는거에요. 미토: 브라우저에서 따로 뭘 돌릴 필요가 없어지겠네요. 미토: React나 Vue가 사용작 사이트 접속했을 때 미토: 자기네 라이브러리를 로드해가지고다가 미토: 브라우저에서 가상 DOM을 써서 하는 최적화 작업을 미토: Svelte는 코딩하고 나서 빌드할때 미리 해둬가지고 미토: 딱 필요한 부분만 자바스크립트 코드로 내놓는다는거죠. 얄코: 네, 맞아요. 때문에 Svelte로 만든 사이트들은 얄코: 용량 면에서도 더 가볍고 DOM의 조작도 더 빠른거에요. 미토: 그러면은 Svelte가 짱짱맨이에요? 미토: 그러면은 이제 React같은거 말고 Svelte 배워야돼요? 미토: 그러면은 React로 만들던 사이트 Svelte로 갈아엎어야돼요? 얄코: 그건 말하기 조심스러워요. 얄코: Svelte가 상대적으로 덜 오래됐기때문에 얄코: 아직 기능이나 커뮤니티가 덜 쌓인 부분들도 있구요. 얄코: 코드를 미리 컴파일을 해서 내보내야 한다는것도 얄코: 특정 형태의 사이트에서는 한계가 될 수도 있겠죠. 얄코: 이에 비하면 React나 Vue는 강력한 기능들도 많고 얄코: 안정성도 많이 다져진 상태에요. 얄코: 물론 Svelte가 빠르게 성장하고 있고 얄코: React나 Vue도 앞으로 어떤 변화가 있을지 모르니까 얄코: 오늘 얘기한 특징들을 기억하고, 추이를 지켜보면서 얄코: 각자의 필요에 적합한 걸 선택하면 되겠죠. 미토: 책임지지 못할 부분은 모호하게 넘기시는구나. 얄코: 자 오늘 이처럼 DOM과 가상 DOM에 대해서 얄코: 그리고 가상돔을 쓰는 이유와 쓰지 않는 이유에 대해서도 얄코: 이야기를 나눠봤어요. 얄코: 얄코 라디오에서 다뤄주었으면 하는 주제들 얄코: 댓글로 제안주시면 감사하겠습니다. 얄코: 이상 얄코와 미토였습니다. 즐코하세요!




관련 태그의 다른 영상들

DOM은 뭐고 Virtual DOM은 뭔가요?
DOM이 무엇이고 Virtual DOM이 React 등에서 어떻게 살펴봅니다.
#
# 가상 돔
# 노드
# React
# Svelte
앵귤러, 리액트, 뷰가 뭔가요?
프론트엔드에도 프레임워크가 있다? SPA를 알아봅니다.
# Angular
# React
# Vue
# SPA
# 프론트엔드
#
...
🌏 Why not change the world?