[Level 1] 미션 4: 자판기 미션 1단계

 

 

CustomElement

---

custom element api를 처음으로 사용해보았다. 사용하면서 state와 props의 차이, 생명 주기에 대한 이해가 높아졌다. 사용 방법은 mdn과 아래 글들에 정말 친절하게 나와있다.

https://meetup.toast.com/posts/115

https://developer.mozilla.org/ko/docs/Web/Web_Components/Using_custom_elements

https://ko.javascript.info/custom-elements

 

 

mixin

---

customElement를 쓰다보니 HTMLElement, HTMLTableRowElement를 상속받을 일이 있었다. 두 클래스 모두 내부 메서드는 동일하고 table property 차이 정도가 있었다. 중복을 제거하기 위해 메서드를 가지고 있는 클래스, Element를 다중 상속 받고 싶었다. 하지만 자바스크립트는 prototype기반이라 다중 상속이 불가능하다. 

Wikipedia에서 믹스인(mixin)을 다른 클래스를 상속받을 필요 없이 이들 클래스에 구현되어있는 메서드를 담고 있는 클래스라고 정의한다. 믹스인은 특정 행동을 실행해주는 메서드를 제공하는데 단독으로 쓰이지 않고 다른 클래스에 행동을 더해주는 용도로 사용된다.

extends와의 차이나 override에 대해서는 더 찾아보아야 할 것 같다. class에 대한 이해가 조금 부족한 것 같기도. 리뷰어님이 피드백으로 주의할 점/ 사이드 이펙트 등을 찾아보라고 하셨는데 찾기가 너무 어렵...다...

https://ko.javascript.info/mixins

https://developer.mozilla.org/en-US/docs/Glossary/Mixin

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Classes

 

 

reduce

---

reduce를 더하기 할때만 사용했는데 페어가 굉장히 멋있게 사용하는걸 보고 다시 한 번 공부해보았다. reduce를 잘 사용하면 map, filter등도 reduce를 사용해서 모두 구현이 가능하다. 특히 map과 filter를 동시에 사용하고 싶을 경우, reduce를 사용하면 한방에 해결할 수 있다. 가독성을 고려해서 잘 선택해서 사용하면 좋을 듯 하다.

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce

 

 

replaceChildren

---

엘리먼트의 자식들을 모두 지우기 위해서 while문과 replaceChild를 사용했다. 이 방법밖에 없는 줄 알았는데 리뷰어님이 replaceChildren을 알려주셨다. 앞으로는 굳이 while문 안쓰고 replaceChildren쓸듯하다.

https://developer.mozilla.org/en-US/docs/Web/API/Element/replaceChildren

 

 

짧은 회고

---

이전까지는 완벽하기 이해하기 전까지는 사용을 꺼려했었다. 이번 미션에서는 잘 몰라도 우선써보자로 진행했다. 할때는 너무 어려웠는데 미션 끝나고 관련 자료들을 다시보니 놀라울 정도로 이해가 잘됬다. 이론만 공부했을때는 이걸 어따 써먹어 싶었던 것들이 짜맞춰지면서 너무 신남. 어쩌면 너무 완벽하게 이해하고 쓰는 것보다 우선 해보고 다시 공부하는게 좋을 것 같다는 생각이 들었다.