Vanilla JavaScript를 더 잘쓰는 법 등등

[gabrielyoon7]

최근에 밀린 글을 작성해봤는데 바닐라 자스 혹은 제이쿼리 개발에 많은 도움이 되길 바랍니다.

가독성에 관련된 글

• 코드의 가독성을 위해 필수로 알아야 할 .every()와 .some()
  • 각종 검사를 단순화 하는 팁
• HTMLElement와 JavaScript 간의 상호작용을 개선하는 dataset (데이터 속성)
  • 이 정보는 커스텀 엘리먼트와 함께 쓸 때 더 유용한 것 같지만, 다른 상황(반복구조)에서도 충분히 사용이 가능합니다.

패턴

• IntersectionObserver를 활용한 element 감지 및 응용 (무한스크롤, 중간광고 예제 포함)
  • intersection 이외에도 옵저빙에 관련된 객체를 활용하면 웹 페이지를 더 동적으로 구현할 수 있습니다.
• JavaScript의 모듈 시스템과 Singleton 패턴을 통한 객체 공유
  • 기존의 학과 홈페이지 방식과 달리 모듈화로 개발할 때 도움이 될 거에요.
• JavaScript의 cloneNode와 이벤트 버블링을 활용한 HTML template tag 활용법
  • html코드를 js에서 좀 더 우아하게 사용할 수 있습니다.

[devwontory]

최근에 개인프로젝트하면서 some을 사용하려고 찾아봤었는데
참 좋은 배열함수인것같습니다. b

[gabrielyoon7]

개인적으로는 기존의 cs-home의 프로젝트에서 표준 내장 객체의 사용 빈도가 너무 적었던 것 같아요.
아무래도 당시에는 자바스크립트를 공부하고 짠 코드들이 아니라서 자바스럽게 짜인 코드가 많았어요.
이후에 코드를 본게 아니라서 어떻게 개선되었는지는 모르겠지만 기존의 지저분한 코드를 리팩토링하는 것도 자바스크립트 실력 향상에 많은 도움이 될 것으로 기대합니다!

[gabrielyoon7]

특히 배열 함수가 필요한 상황을 잘 찾아보면 좋을 것 같습니다