TIL/Javascript/Design/Vanilla-JS-Component/

[utterances-bot]

Vanilla Javascript로 웹 컴포넌트 만들기 | 개발자 황준일

Vanilla Javascript로 간단한 웹 컴포넌트를 만드는 과정에 대해 소개합니다.

https://junilhwang.github.io/TIL/Javascript/Design/Vanilla-JS-Component/

[yujo11]

우와 너무 정리가 잘 된 글이네요! 좋은 글 감사합니다!!

[shimpark]

저도 잘 읽고 갑니다. 처음부터 쉽게 설명해서 점점 이해해 주도록 가이드 준 강의를 보고 인상 깊어서 이렇게 댓글을 기재하고 갑니다. 좋은 글 감사합니다.

[wealways]

와 너무 잘봤습니다!!

[shinyuna]

진짜 감탄이 절로 나오네염 😲
잘 배우고 갑니다! 좋은 글 감사합니닷

[wealways]

혹시 작성하신 글 제 블로그에 올려도 괜찮을까요?

[JunilHwang]

@wealways 넵 올려도 괜찮습니다!

[bbumjun]

딱 원하던 내용을 찾았네요. 한번에 이해가 너무 잘됐어요 ㅠㅠ 좋은 설명 감사합니다 😆

[wealways]

오 감사합니다!! 출처남겨서 정리하겠습니다 :)

[deveeni]

정말 감사합니다! 그런데 질문이 있습니다. $target, $props, $state 이처럼 $ dollar sign 은 왜 붙이는 건가요?

[JunilHwang]

@vivabin 특별한 의미는 없습니다!

[sh0seo]

👍

[1000peach]

안녕하세요. vanilla js를 공부하고 있는데 정말 도움이 많이 됐어요 감사합니다! 👍 혹시 깃헙에 마크다운으로 출처를 남기고 정리해도 괜찮을까요?

[JunilHwang]

@1000peach 넵 정리해도 괜찮습니다!

[danmin20]

좋은 글 감사합니다! 많은 도움 되었습니다 :) 혹시 출처를 밝히고 제 블로그에 개인적으로 정리하여도 괜찮을까요?

[JunilHwang]

@danmin20 안녕하세요! 답변을 너무 늦게 드렸네요 ㅠㅠ 정리해도 괜찮습니다!

[dalcon10028]

잘읽었습니다 좋은글 감사합니다

[kyupkyup]

안녕하세요 글 잘 봤습니다! 바닐라로 작성했을 때 상태 변화마다 리렌더링이 일어날 경우 성능 저하에 대해 어떻게 생각하시나요? 큰 영향이 없다고 보시나요?

[JunilHwang]

@kyupkyup 안녕하세요! 이 코드는 당연히 성능상에 문제가 있습니다. 그래서 이를 해결하기 위해 observer pattern, bebounce 등을 이용하여 렌더링을 최적화하고, diff 알고리즘을 통해 돔을 비교하여 필요한 부분만 업데이트 하는 형태로 최적화 할 수 있답니다! 이에 대한 내용은 다음 포스팅에서 다뤄볼 예정입니다 ㅎㅎ

[KIMSEUNGGYU]

저도 블랙 커피 스터디에 참여 하면서 해당 내용을 고민하고 정리하고자 했었는데 정말 대단하시네요!! 너무 좋은 컨텐츠인거 같습니다!! 많이 배웠습니다.

[KIMSEUNGGYU]

아 수정기능이 없어서 또 다시 댓글 남깁니다. 해당 컨테츠로 좀 자세히 학습하고 분석할 예정인데 해당 내용을 제 github 나 블로그에 출처를 남기고 사용해도 되는지 궁금합니다.

[JunilHwang]

@KIMSEUNGGYU 안녕하세요! 사용해도 무방합니다 😁

[anxiubin]

이해하기 쉽게 정리해주셔서 고맙습니다! 많이 배우고 갑니다 :)

[monii]

안녕하세요! 컴포넌트를 공부하다가 찾아오게 되었습니다 :) 글을 보다가 궁금한점이 생겼습니다Componet 클래스에 constructor 안에 왜 this.setup(); , this.render(); 두개의 함수만 this로 해주나요?? 다른 함수들은 this로 지정 안 해 도 되나요?

[JunilHwang]

@monii 안녕하세요! 지정한다기보단 실행하는거라고 보시면 된답니다 ㅎㅎ constructor 시점에, 즉 인스턴스가 만드러지는 시점에 실행하는 메소드가 this.setup() this.render() 이렇게 두 개인 상태입니다!

[min1378]

먼저 좋은 글을 남겨주셔서 바닐라 자바스크립트로 컴포넌트를 만드는 법에 대해 쉽게 공부할 수 있었습니다! 질문이 있는데 input에 value가 있을 때 상태가 변화하면 초기화되는데 이러한 문제는 diff를 통해 바뀐부분만 렌더링 해주어야 하는건가요??

[JunilHwang]

@min1378 잘 읽어주셔서 감사합니다 😁 그리고 말씀 해주신 것 처럼 diff를 통해서 변경하는게 제일 좋습니다. https://junilhwang.github.io/TIL/Javascript/Design/Vanilla-JS-Virtual-DOM/ 이 포스트의 내용을 참고해주세요 (깨알홍보)

[jihun1233]

안녕하세요! 리액트의 내부 구조를 공부하려고 하는데 이 포스트가 내용이 좋은것같아서 따라해보려고합니다. 해당 내용을 참고해서 제 블로그에 포스팅해도 될까요?

• 그리고 추가로 질문이 있는데 innerHTML의 사용이 위험할 수 있다고 들었는데 실제 react에서도 innerHTML을 사용해서 컴포넌트를 렌더링 하게 되나요?

[JunilHwang]

@jihun1233 안녕하세요! 포스팅 해도 괜찮습니다 ㅎㅎ 그리고 React나 Vue의 경우 가상돔을 이용해서 변경된 부분에 대해서만 업데이트를 한답니다! https://junilhwang.github.io/TIL/Javascript/Design/Vanilla-JS-Virtual-DOM/ 자세한 내용은 위의 링크를 참고해주세요!

[95rolancia]

정말 좋은 글 잘보고갑니다...!!

[gofeel8]

안녕하세요! 이벤트 위임 추상화 방식을 공부하다가 잘 안되는 부분이 있어 질문 드립니다. 저는 생성자 안에 render() 보다 setEvent() 가 먼저 실행되면서 addEvent 의 ​const children = [ ...this.$target.querySelectorAll(selector) ]; 부분에서 querySelector가 해당 selector를 못 찾는 것 같아서 해당 로직을 바로 아래 addEventListener의 콜백 함수 안으로 옮겨 사용했는데 괜찮을까요?

[JunilHwang]

@gofeel8 이단 코드를 같이 공유해주셔야 어떻게 사용하면 좋을지 조언해드리기가 편할 것 같아요!

[gofeel8]

@JunilHwang issue 등록 하였습니다..!!ㅎㅎ

[jin-Pro]

안녕하세요, 이번 연휴 기간에 황준일님께서 작성하신 블로그 내용 vanilla JS로 웹 컴포넌트 만들기, 상태관리 시스템 만들기, 가상돔 만들기를 학습해보려 하는데 학습한 내용을 참고하여 제 블로그에 정리해도 될까요??

[JunilHwang]

@jin-Pro 넵 정리하셔도 된답니다!

[jin-Pro]

감사합니다! 연휴 잘보내세요!

[yangwooseong]

template함수안에서, ``안에 있는 html 태그들은 문자열로 인식되서 입력되는데.. 태그 인식해서 자동입력 해주는 extension이 vscode에 있나요..?

[JunilHwang]

@yangwooseong 저의 경우 intellij를 사용하고 있는데, intellij는 자동으로 인식 되어서요! vscode 플러그인은 잘 모르겠네요 ㅠㅠ 죄송합니다!

[yangwooseong]

답변 감사합니다.. vscode에서 적용이 잘 안되서 고생하고 있네요.. ㅎㅎ 그런데, Component 추상 클래스에서 innerHTML = template() 으로 되어 있어서, 부모컴포넌트 밑에 자식 컴포넌트가 여러 개 있고, 그 중에 하나만 props가 바뀌거나 하면 rendering이 될때 다른 자식 컴포넌트가 없어지지 않을까요..? 그래서 React의 component가 그러는 것처럼 항상 최상위 태그 하나가 있어야 할 것 같은데.. 맞을까요?

[JunilHwang]

@yangwooseong 말씀하신 내용이 맞습니다! React에서는 이를 가상돔과 Diff 알고리즘으로 해결하고, 메모이제이션 같은 기법을 이용해서 값이 실제로 변한게 아니라면 렌더링을 하지 않는 등의 최적화를 하고 있습니다 ㅎㅎ 관련 내용은 다음 포스트들에 더 상세히 기술해놔서 참고해보시면 좋을 것 같아요!

• Vanilla Javascript로 상태관리 시스템 만들기
• Vanilla Javascript로 가상돔(VirtualDOM) 만들기
• Vanilla Javascript로 React UseState Hook 만들기

[yangwooseong]

감사합니다.. 도움이 많이 될 것 같습니다ㅜ 감사해요!

[KIMSEUNGGYU]

안녕하세요! 블로그 codeview (코드를 보여주는 UI) 에서 강조하고 싶을 때 라인에 검은색 배경이 생기는데 혹시 해당 기술을 어떻게 적용했는지 알 수 있을까요?? 어떤 라이브러리인지?? 검색 키워드가 무엇인지 궁금합니다. 저도 개인 블로그를 운영하고 있어 달라진 부분이나 강조하고 싶은 부분이 있는데 해당 기능을 적용하면 좋을 거 같아 찾아봤지만 찾지 못해 댓글 남깁니다.

좋은 글 항상 감사합니다.

[JunilHwang]

@KIMSEUNGGYU 안녕하세요! 이건 vuepress 자체에서 제공하는 기능이고.. 아마 공식 플러그인 같은건 따로 없는 걸로 알고 있어요 ㅠㅠ

[nr-baek]

정리를 잘해주셔서 이해가 잘 됐어요!! 좋은 글 감사합니다~!

[zoo0190]

안녕하세요! 저도 이번에 블랙커피 스터디 참가하게 되어 어떻게 구현 하면 좋을지 블로깅 하다 이 글을 보게 되었는데... 정말 대단하시네요 !! 많이 배우고 갑니다 !! 감사합니다 !!

[euijinkk]

좋은 글 감사합니다! 혹시 지금 inFilter와 items 상태를 하나의 $state에 두었는데, 상태가 매우 많아진다고 가정하면 어떻게 대응하는 것이 좋을까요?

[JunilHwang]

@euijinkk 보통 한 개의 컴포넌트에 생타가 많이 사용되는 경우는 많지 않은걸로 알고 있습니다 ㅎㅎ 상태가 많다는것은 결국 기능이 많다는 것이고, 이게 한 개의 컴포넌트에 들어가야 하는 기능인가? 고민을 해봐야겠죠?

[TaeSeungRyu]

즐겁고 재미있는 내용 잘보았습니다! 좋은 글 감사합니다. : - )

[Leo-Xee]

좋은 글 너무나 감사합니다. : ) 질문 하나 드리자면 map 함수로 새로운 컴포넌트를 여러개 생성해줄 때 각각의 컴포넌트에 map 함수의 매개변수를 넘겨 줄 수 있는 방법이 있을까요? React의 경우에는 props로 넘겨주면 되지만 이 글의 경우에는 template과 mounted로 분리되어 있어서 제가 생각하기에는 불가한 것 같은데 혹시 준일님께서 생각하시는 가능한 방법이 있는지 궁금합니다.

[C17AN]

정말 도움이 많이 되었습니다! 감사합니다! 🙂

[minxd95]

안녕하세요. 우선 너무 좋은 글 감사드립니다. 코드에 한가지 오류가 있는 것 같아서 댓글 남깁니다. Component 클래스의 constructor에서 setEvent 전에 render가 선행되어야 할 것 같습니다. DOM이 생성되지 않은 상태라서 children 이 빈 배열로 뜨네요.