search

JunilHwang / blog-comment

TIL comments
1 stars 0 forks source link

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

Open utterances-bot opened 3 years ago

utterances-bot commented 3 years ago

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

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

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

minxd95 commented 2 years ago

또한 template이 재실행되면 기존에 있던 DOM이 날라가고 다시 그려지는 과정에서 children배열의 노드들이 무용지물이 되버리네요. target.closest을 통해 정상작동 되긴 하나 코드가 의도된 대로 동작하지 않는 것 같습니다 ㅜ

bohaesoju commented 2 years ago

리액트 관련한 글을 쓰고 있는데, 준일님이 구현하신 아이디어 몇가지 (가상돔 Diff 알고리즘, Hooks 구현등) 를 참고 하여 작성하여도 괜찮을까요?? 당연히 출처는 남기도록 하겠습니다 :)

blan19 commented 2 years ago

안녕하세요! 바닐라 js로 컴포넌트 단위 개발 포스팅을 찾아보다 너무 좋은 글을 찾게되어 바로 정독해버렸네요.. 감사합니다 ㅠㅠ 바닐라 js 컴포넌트 단위 개발 블로그 포스팅을 참고하면서 작성하고 싶은데 혹시 버츄얼 돔 관련 포스팅과 컴포넌트 포스팅 글 참고하여 작성해도 괜찮을까요?

Doosies commented 2 years ago

정말 좋은글 감사합니다!

beta1360 commented 2 years ago

좋은글 읽고 갑니다! 감사합니다.

alstn113 commented 2 years ago

프레임워크만 사용하다가 바닐라로 SPA만들려니까 어렵네요. 좋은 글 감사합니다.

alstn113 commented 2 years ago

안녕한세요. 궁금한 점이 있어서 글을 남겨봅니다.

App.js에서 api call을 시도했습니다. mounted에 넣었더니 api call관련 함수에 setState가 있어서 mounted -> setState -> render -> mounted가 무한반복됐습니다.

setState을 하지 않으면 api call함수가 실행될 때 로딩컴포넌트로 state변화가 일어나지 않아서 setState는 꼭 써야할 것 같습니다. 혹시 방법이 있을까요?

JunilHwang commented 2 years ago

@neko113 mounted 내에서 state의 값이 있는지 없는지 핸들링 하는 작업이 필요할 것 같아요!

jungcolor commented 1 year ago

선생님 좋은글 잘 봤습니다!! 혹시 괜찮으시다면 출처 밝히고 깃이랑 블로그에 정리좀 해도 될까요??

ChangSubKwak commented 1 year ago

다시 봐도 좋은 글입니다.

sh0seo commented 1 year ago

👍

Yoonjs9821 commented 1 year ago

큰 도움이 되었습니다^^

rlaehgns5399 commented 1 year ago

https://pomb.us/build-your-own-react/ 을 읽다가 이해가 잘 가지 않아서 찾아봤는데 참 설명을 잘하시는 것 같아요 감사합니다 🙇

gayoungyeom commented 1 year ago

좋은 글 감사합니다! 바닐라 자바스크립트로 컴포넌트 만드는데 큰 도움이 되었어요 :)

ghost commented 1 year ago

지금 저에게 딱 필요한 글이었어요! 좋은 글 너무너무 감사드립니다. 다른 글도 정독해야겠어요!

DoK6n commented 7 months ago

3-2에서 this.setEvent()를 this.render()를 render 이후가 아니라 render 전에 추가하신 이유가 있나요??

cys4585 commented 4 months ago

안녕하세요! 좋은 글 감사합니다!

  1. 이벤트 처리 > (3) 버블링 추상화에서 아래 코드는 없어도 되는 것이 아닐까요??? const children = [ ...this.$target.querySelectorAll(selector) ];
JunilHwang commented 4 months ago

@cys4585 맞습니다! 없어도 무방할 것 같아요 ㅎㅎ

@DoK6n 이벤트 위임의 효과를 의도적으로 표현한거라고 봐주시면 좋을 것 같습니다.

jasongoose commented 2 weeks ago

그저 사용하기만 했던 React 컴포넌트의 렌더링이 어떻게 동작하는 방식을 하나씩 짚어볼 수 있어서 유익한 아티클이었습니다!

특히 컴포넌트 인스턴스 초기화 단계에서 이벤트 버블링으로 DOM 이벤트 핸들링 로직을 한번만 등록하는 부분과

setState 호출로 리렌더링할 때 mounted 메서드 단에서 하위 컴포넌트 인스턴스가 부모 컴포넌트의 state를 참조할 수 있도록 call 메서드로 this 바인딩 처리한 부분에서 개인적으로 감탄했습니다😲