[2024.04.28] 바닐라 자바스크립트로 웹 컴포넌트 만들기_state 기준

오늘은 계속 공부 중..

이전에 바닐라 자바스크립트에서 웹 컴포넌트를 작성하기 위해서는 반드시 custom-element와 shadow DOM 구조를 이용해야만 하는 줄 알았다. 하지만 그렇게 되면 자바스크립트로 렌더링 되는 게 아닌 HTML 구조만을 이용한 결과가 되기 때문에 내가 생각한 구조와는 조금 달라지겠다는 생각이 들었다. 때문에 더 많은 자료를 구글링 해보면서 새로운 방법을 알게 되었다.

'개발자 황준일'님의 블로그

 

단순히 기능별로 JS파일을 나누는 게 아닌 상태(state)와 컴포넌트 기능별로 어떻게 바닐라 자바스크립트에서 동작하는지 순서대로 포스팅된 황준일 님의 블로그를 알게 되었다. 뭔가 눈에 익을 듯하면서도 살짝 헷갈려 여기에 있는 내용을 좀 더 공부하고 프로젝트에 적용해보려 한다.

 

---

요즘 자주 보고 있는 '프롱트' 유튜버님의 영상 중 코드를 어떻게 관리하는 게 좋을지에 대한 내용을 보았다. 핵심적이 내용만 간추려서 알려주시기 때문에 잘 기억했다가 혹여 이런 실수를 범하지 않도록 주의해야겠다.

1. 커밋 로그 잘 쓰기
2. 로직 안에 소스 코드가 있으면 안 됨(url 같은 거)
3. 하나의 책임을 갖도록 나누기(파일, 클래스, 함수)
4. 허세코드 x
 - 확장성을 고려했다 해도 굳이 필요하지 않다면 지양하기
5. 디버깅 코드 다 지우기(특히 console.log 들)

 

 

※ 출처
[개발자 황준일] https://junilhwang.github.io/TIL/Javascript/Design/Vanilla-JS-Component/#_1-%E1%84%8F%E1%85%A5%E1%86%B7%E1%84%91%E1%85%A9%E1%84%82%E1%85%A5%E1%86%AB%E1%84%90%E1%85%B3%E1%84%8B%E1%85%AA-%E1%84%89%E1%85%A1%E1%86%BC%E1%84%90%E1%85%A2%E1%84%80%E1%85%AA%E1%86%AB%E1%84%85%E1%85%B5
[프롱트님 유튜브] https://www.youtube.com/watch?v=A8sDMZN8ATc