Frontend/JavaScript
-
JavaScript에서 customElements를 활용하여 독립적인 상태 관리하기Frontend/JavaScript 2023. 3. 1. 17:38
과거의 정적인 웹 페이지 구현과 달리, html을 동적으로 적절하게 관리한다는 것은 결코 쉽지 않습니다. 특히 SPA를 구현할 때, 많은 분들이 비슷한 고민을 겪게 될 것으로 생각됩니다. 동적인 화면 변화가 잦다면 정적인 html은 큰 도움을 주지 못합니다. html이 없으면 사용자에게 어떤 것을 보여줄 수 없지만, 그렇다고 해서 처음 부터 모든 태그들이 고정된 자리를 잡는 것은 동적인 웹 페이지를 그리는데 큰 도움을 주지 못할 가능성이 큽니다. 특히 ajax의 등장 이후, 웹 페이지를 동적으로 관리하려는 시도는 차츰 늘어오다가, 이를 해결하기 위해 상태 관리를 중심으로 한 react, vue, angular 등이 웹 프론트엔드 기술의 대세로 떠올랐고, 과거의 jquery는 이제 영광을 뒤로하고 퇴장을 ..
-
.onsubmit과 .addEventListener의 차이Frontend/JavaScript 2023. 2. 27. 16:57
다음 두 예제 코드를 봅시다. 예시 1 : .onsubmit 제출 const form = document.getElementById('foo'); form.onsubmit = function (event) { event.preventDefault(); console.log(event.target.bar.value); }; 예시 2 : .addEventListener 제출 const form = document.getElementById('foo'); form.addEventListener("submit", function (event) { event.preventDefault(); console.log(event.target.bar.value); }); 이 코드들의 실행 결과를 예상해보면, form 태그..
-
JavaScript 클래스 문법은 어떻게 쓰는 것일까?Frontend/JavaScript 2023. 2. 22. 15:45
프로토타입의 설명은 생략하였습니다. 클래스 자바스크립트는 프로토타입 기반의 객체지향 언어입니다 클래스 문법은 ES6(2015)에 와서야 추가되었습니다. 클래스 문법이 등장 하기 전에는 어떤 방식으로 객체지향 프로그래밍을 할 수 있었을까요? 클래스를 사용한 객체 생성 먼저 널리 알려진 클래스 기반 프로그래밍 언어이자 객체지향 프로그래밍 언어의 대표주자로 불리는 Java와 비교를 하면서 예시를 들겠습니다. JavaScript는 알고 Java를 모르시는 분이 다음과 같은 문법을 보게된다면 뭔가 어디서 본듯 한 느낌을 받을 것입니다. Java의 클래스 사용법 public class Car { String name; int position; public Car(String name) { this.name = na..