DOM은 뭐고 가상 DOM은 뭔가요? (+ Svelte와 React의 차이)
Vložit
- čas přidán 16. 06. 2021
- #DOM, #가상돔, #svelte
= = =
🏠 얄코사이트: www.yalco.kr
🛒 개발자스티커 구매: smartstore.naver.com/honeykers
🎥 가장 쉬운 Git 튜토리얼: • [고정댓글필독] 가장 쉬운 Git 강좌 ...
🎥 가장 쉽게 배우는 리눅스: • 가장 쉬운 리눅스 강좌
🎥 포인터 쉽게 알아보기: • 포인터가 뭐고 왜 쓰는건가요?
🎥 객체지향에 대해 알아보기: • 객체지향 프로그래밍이 뭔가요?
🎥 객체지향 디자인 패턴: • 객체지향 디자인패턴 1
🎥 함수형 프로그래밍이란?: • 함수형 프로그래밍이 뭔가요?
🎥 쿠키 vs 세션 vs 캐시: • 쿠키, 세션, 캐시가 뭔가요?
🎥 프로세스와 스레드: • 프로세스는 뭐고 스레드는 뭔가요?
🎥 비동기 프로그래밍: • [코딩만화] 비동기 프로그래밍이 뭔가요?
🎥 REST API 알아보기: • [구버전 - 고정댓글 필독] REST A...
🎥 GraphQL 알아보기: • [고정댓글 필독] GraphQL이 뭔가요?
🎵 엔딩송 : 권민호, 김한영 - Let's Dance
🎼 자료출처 : gongu.copyright.or.kr
🎼 Music promoted by DayDreamSound : • Video - Věda a technologie
- DOM: html 문서를 실체화하고 다루기 위한 트리 형태의 모델(html 문서라는 주문서를 가지고 브라우저 공장에서 그 설계로 실체화한 것)
- 노드로 구성돼있음
(엘리먼트들은 노드를 상속받고 노드는 이벤트 타겟으로 이벤트 추가 등 여러 기능을 사용할 수 있음(dom api))
- BOM: 브라우저를 다루기 위한 모델 (alert, settimeout, location, ..)
- spa 만들어진 이유: 페이지 전체를 로드하지 않고 수정된 부분만 바꿔서 깜빡거리는 현상을 없애기 위해서임
-> 자바스크립트로 돔을 조작해서 일부만 변경
- jquery: 간결한 문법으로 돔을 조작하고 크로스 브라우징이 잘돼있는 강점이 있음
- 수요가 줄은 이유
1. 크로스 브라우징 필요성이 전보다 줄음
2. 순수 js가 발전해서 충분히 간결해짐
3. 불필요하게 무겁고 옛날 js에 맞춰져 있음
- jquery와 리액트, 뷰와의 차이점: 전자는 직접 코딩해서 돔 조작 / 후자는 템플릿으로 요소 코딩해두고 데이터 연결해놓으면 데이터에 맞춰서 화면이 바뀜
-> 후자의 과정에서 사용되는게 가상 돔!
- 가상 돔: 돔의 구조와 간결하게 흉내낸 자바스크립트 객체
- 스벨트는 가상돔을 사용하지 않아 더 빠름 (가상돔은 런타임 단계에서 이뤄지는데 스벨트는 컴파일 단계에서 작업이 끝남)
DOM/가상DOM, React/Svelt의 핵심 개념들을 잘 말씀해 주셔서 이해에 크게 도움이 되었습니다. ^^
이 시리즈 계속 해주셨으면 좋겠어요 두번 세번 복습합니다 ㅎㅎ
정말 좋은 컨텐츠 항상 감사드립니다! 특히 얄코라디오는 회사 출퇴근 시 지하철 타면서 개발 텐션을 유지할수 있다는점이 너무 좋아요~ 🤩🤩🤩
너무 좋다.. 미토센세가 나같은 쩌렙 눈높이에 맞게 다시 되묻고 다시 정리해주는 부분이 너무 좋네요. 그렇게 되짚어주니까 얄코 센세가 알려주는 개념이 더 찰떡같이 이해되네요. 감사합니다.
감사합니다!!
얄코님 진짜 정체가 뭐에요... 채널 영상 보면 볼수록 감탄만 하게 돼요. 영상 제작도 그렇고 알기 쉽게 비유하신 교육 내용들.. 또 홈페이지 가면 실습 소스코드, 여러 꿀팁 정보 등등.. 대박이에요ㅠㅠ.. 진짜 앞으로 채널 영향력이 어마어마하게 커질 가능성이 무한대네요. 교육 컨텐츠를 큰 틀들을 이미 설계하시고 진행하시는 것 같은데 .. 아무튼 뭉뚱그리게 개발 지식을 가지고 있어서 알려고 하면 복잡하고 이해가 안되서 자책만 했는데 ㅠㅠ 이런 재능기부해주셔서 무한 감사 올립니다.. 진짜 앞으로 더 잘되실거에여..
얄코님 라디오시리즈 너무 좋아요 출퇴근길에 듣기에도 좋고 목소리와 발음이 좋으셔서 집중이 잘되네여 ㅎㅎ 시간내서 좋은 콘텐츠 계속 만들어주셔서 감사합니다
이동할때 짬짬히 듣기 좋은 방송이예요.
좋은 영상 잘 보고 갑니다.
마침 DOM 공부하고 있었는데, 설명이 너무 쉽고 이해가 잘 되네요. 감사합니다!!
가끔 코딩 인강 듣다가 누워있는데 귀로 듣고 싶을때나 밥먹을때 가볍게 듣고 싶거나 자기전 기본 지식 듣고 싶을때 들어요! 반드시 화면 안봐도 되니까 좋아요
DOM을 아십니까
이제 알게 되었습니다
런닝하며 듣기 넘 좋아요.라디오로포맷바꾸신거 신의한수인듯
진짜 얄코님 컨텐츠들은 개발자 면접을 준비하는 취준생들에게도 매우 유익한 컨텐츠 이라고 느껴지고 내용들이 면접관이 하나 쯤 꼭 물어 볼만한 내용들이 녹아 있네요
즉, DOM이란 HTML로 작성된 웹 문서를 DOM이라는 물감들을 통해 웹 브라우저란 도화지에 그린다고 이해 해도 되겠네요 ㅎㅎ
그 비유도 정말 좋네요!! 감사합니다~!
압도적인 설명 능력...!
매일 아침 잘 듣고있어요
우와 감탄이 나오는 영상이였어요... 이해도 쉽고 재미도 있었어요
자면서 듣겠습니다
간결하고 공감되는 설명 감사합니다
영상 응원합니다!
Svelte로 개발 중인데, 영상의 관련 설명에 대해서 공감되네요!!
DOM에 대한 시작과 더불어 BOM에 대한 지식들도 설명 잘해주셔서 감사합니다~
너무 유익해요ㅠㅠㅠㅠ!!! 잘보고있어용 ~~여러번 반복해서 들을께욯ㅎㅎ!!
최고의 강의입니다!!!
컨텐츠가 너무 좋아요.
고맙습니다!
눈이 너무 피곤했는데 감사합니다!
와우 짱.👍
유일한 단점, 유머 코드가 비슷해서 웃다가 내용 놓침.
아앗! 오제이튜브님 감사합니다~!!!!
카페오자마자 틀었는데 카페에서 창밖 내다보며 듣는 얄코 라디오라길래 깜짝 놀랐네요
깔끔한 정리 감사합니다 ㅎㅎ
정말 좋은 영상 감사합니다!
유익한정보 정말정말 감사합니당 ㅜ.ㅜ !!
너무 잘 보고있어요
사랑합니다 쓰앵님
와 대박 이렇게 설명을 잘하시다니
정말 도움 많이되는 영상이네요 ㅎㅎ 웹 프론트 개발자분들 여기 지식 맛집이에요!
DOM과 VDOM 설명은 못 참지 😊
이 시리즈 너무 좋아요! Client side rendering, server side rendering 관련된 영상 혹시 안올라오나용???
감사합니다!!
와 한국어로 스벨트를 다루는 컨텐츠가 나오다니!!!
너무 재밌어요 ㅋㅋㅋ
감사합니다~
비주얼 컨텐츠 만드는 작업이 어려워서 라디오 형식 쓰는거 다 알지만, 어쨋든 덕분에 빨리 만들어진다? 오히려 좋아
그저 갓..!
유익하다 유익해
12:27 “스벨트 개발자들 보다 좀 덜 똑똑해서 그런가?”
ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
리덕스 웃지마라 너 얘기다
라디오 진짜 좋은데 한가지 아쉬운건...아웃트로는 영상버전 처럼 되어있으면 좋겠습니당...얄코님 영상 마지막에 "그럼 즐코하세요!"하고 빰!!!!!!!!!하고 나오는 음악이 진짜 뭔가 청춘드라마 같아서 호랑이 기분이 솟고 그런데, 그게 없으니까 삼겹살 구워먹고 찌개없이 나가는 느낌입니다. 제발 아웃트로 다시 살려주세요 ㅠㅠ
동감
나름 꽤 공들여 만들었던 아웃트로였는데 좋다는 말 처음 들었네요 😭. 담부터 넣도록 하겠습니다!! 감사합니다~~
말씀하신것처럼 스벨트는 브라우저에 도착하기전 스벨트 로직처리가 이루어지니까 리액트처럼 사용자 컴퓨터보다는 기업같은 서버컴퓨터의 비용이 높아지는게 맞나요?
면접에서 이정도 말할 수 있으면 좋겠네요 ㅋㅋ
6:57 Killing point
미친토끼너무읏갸~%^^^^
아토믹디자인, 디자인 시스템에 대해서 알고싶어요
돈내고도 들을 퀄리티 !
6:45 CSSOM -> 크쏨!
얄코님 궁금한게 있는데. Virtual DOM은 메모리에서 DOM 구조를 올린다는건데. 항상 Virtual DOM이 메모리에 있어서 Old Virtual DOM과 New Virtual DOM이 Diffing되는건가요?
그리고 계속 만약 Virtual DOM이 Old와 New가 계속 떠있는 상태이면 메모리가 부족하지않나요?
메모리의 용량은 얼핏 생각하는 것보다 큽니다 😅 그 정도로 부족해지지는 않아요. 자세한 동작 과정은 리액트의 문서를 살펴보시면 알 수 있습니다.
가상돔 말고 참돔으로 주세요
미토 너무 웃겨요 ㅋㅋ
angular 도 부탁드립니다
다음에는 클로져 해주세요
라디오로 설명하긴 어려운 주제지만 😅 그것도 구상해볼게요!!
zzzzㅋㅋㅋㅋ미토 말투 ㅇ너무 웃기넼ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ미친톢낔ㅋ
06:56 ㅋㅋㅋㅋㅋ
얄코님! Svelte의 코드를 미리 컴파일해서 내보내야하는 점이 예를 들어 어떤 특정 사이트에서 한계가 될까요?
예를 들어 기존의 웹사이트에 일정부분만 리액트 등의 컴포넌트를 만들어 넣는 경우가 있는데 Svelte로는 그렇게 하기가 개발 프로세스상 까다로울 수 있을거에요. 리액트는 코드만 바로 넣으면 되는데 Svelte는 컴파일 환경 따로 만들고 빌드파일을 연결하는 등 해야 하니까요.
@@yalco-coding 감사합니다!
고척돔, 참돔을 기대했었는데...반성 합니다.
아 .. 이렇게 쉽게 설명해도.. 잘 못알아듣는 아재는 이제 희망이 없구나...
아무튼 감사합니다. 열심히 공부하겠습니다.
원래 어려운 개념이에용 ㅠ 감사합니다!!
얄코님 앵귤러 한번 딥하게 부탁드립니다 ㅠ
앵귤러는 따로 강좌를 만들거나 해야겠네요 ㅎㅎ 저도 공부해볼게요!!
안자용?
미토가 CSSOM을 크~~~쏨이라고 읽는거냐고 물어봤는데 얄코님이 무시함ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
가상돔에 대해서 항상 이해가 안 가는 부분이 하나 있습니다.. 여러 실제 가상돔 제작 튜토리얼도 해보고 그랬는데, 어쨌든 결국 변경시킬 노드 일부를 잡아다 그냥 innerHTML을 바꿔 버리는 거랑 똑같은데 뭐하러 전체 변경 전 소스랑 변경 후 소스를 다 비교해서 diff작업을 거치는 거죠?? 그리고 좋아요 하트 하나 빨갛게 하는 거 그냥 자바스크립트로 애드이벤트 해서 고 부분만 빨갛게 만들면 되는 거 아닌가요???
자바스크립트로 애드이벤트를 사용자가 일일이 할 필요가 없도록 하기 위해서입니다. 리액트나 뷰를 사용해보셨다면 거기서 어떻게 이벤트를 처리하는지 생각해보시면 돼요 🙂
@@yalco-coding 가상 돔에 대한 예시가 언제나 무슨 메모리에 돔을 만들고 어쩌구.. 해서 저는 실제 리액트를 처음 배울 때 무슨 거창한 마법의 도구가 있는 줄 알았는데 가상돔 튜토리얼 코드들을 보고 따라 해보면 언제나 그냥 일반 자바스크립트하듯이 오브젝트 잡아다가 속성 변경해주더라구요. 단순히 거기거 더 나아가서 일견 불필요해보이는 작업(보다 정확성과 동시성을 위해서인가? 하고 지금도 의아합니다만) 전체 노드들을 다 일일히 비교해서 일부 다른 지점만 찾아 변경하고요. 누가 최초로 그 예시를 사용한 건지... 가상돔이 없으면 일부 돔 오브젝트 하나만 바꿔도 전체 페이지가 갱신된다는 말 때문에 얼마나 헷갈렸는지 모르겠어요. 그러니까 얄코님 말씀으로는 일반 getElement 해서 오브젝트 하나만 잡아서 속성 바꿔주는 거 해도 전체 페이지는 안 갱신되는 게 맞죠?? ?
그 코드상으로는 그거 하나만 잡아 바꿔주는 것으로 보여도, 브라우저의 DOM에서는 사이트 구조가 복잡할수록 더 많은 것들이 돌아가게 됩니다. 그 변경들이 돔 내에서 도미노처럼 연쇄작용을 일으키는데 여기서 메모리 등이 소요되는거고, 가상 돔은 도미노를 미리 다 쓰러뜨려 본 다음 그걸 돔에 그냥 씌워놓는거라 보심 됩니다.
@@yalco-coding 아...! 그러니까 예를 들면 플렉스 박스나 그리드 혹은 그 반응형 디자인의 여타 요소들이 붙어 있을 때 개중 하나만 빼서 지운다고 한다면 실상 그 위치들을 재배치 맞춰주는 과정에서 남은 요소들, 링크드 노드 하나하나씩 위치나 데이터를 수정해줘야 한다는 거군요..? 음 ... 아니 어차피 리액트도 디프 작업 거쳐서 달라진 지점의 HTML을 똑같은 루트로 고치는 게 아닌지... 그럼 그 현상도 동일하게 일어날 텐데....
말씀하신대로 어떤 요소를 선택해서 그것만 변경하는 식으로 할거면 성능 자체는 괜찮겠지만, 프로그래밍은 예전 jQuery 시절처럼 불편하겠죠. 그래서 리액트 등이 나온거구요. 그 ‘리액트의 기능을 수행하는데 있어서’, 가상돔 없이 전체를 다 새로 그려버리면 낭비가 되기 때문에 가상 돔을 쓰는겁니다. 요소를 하나하나 선택해서 제어할 필요 없이 코딩하면서도 이를 렌더링하는데 낭비가 없도록 말이죠 🙂
Shadow 돔은 뭔가요?
셰도돔은 짧게 댓글로 남기긴 복잡한 주제네요. 언제 웹 강좌를 만들에 되면 자세히 다뤄볼게요. 일단 아래 링크에 설명이 잘 돼있습니다.
d2.naver.com/helloworld/188655
소감 : 도미 먹고 싶다..
미.토.조.아.
크쏨? ㅋㅋㅋㅋㅋㅋㅋㅋㅋ
크쏨....
버추얼돔은 자바스크립트 api로 개발자가 구현이 가능한가요?
자바스크립트 ‘API’라고 하신 것의 의미는 모르겠지만(라이브러리를 말씀하신거라면 맞습니다) 그렇게 한게 React나 Vue 등의 버추얼 돔입니다. 물론 그 전에도 있었구요. 그냥 DOM응 흉내내는 자바스크립트 오브젝트를 만드심 돼요 😀
@@yalco-coding
답변 감사합니다.
7:25 BOM 오탈자 같아서 말씀드립니다.
아니라면 무시해주세요.
BOM 맞습니다. 바로 몇초 앞을 보아주세요😀