Frontend
-
CustomEvent를 활용하여 customElements에 객체를 전달하는 방법Frontend/JavaScript 2023. 3. 27. 18:12
이전에 작성한 글들을 잘 참고해보면 커스텀 엘리먼트는 외부에서 어트리뷰트 값을 직접 넘길 수는 있지만, 직접 객체를 넘기는 방법은 지원하지 않습니다. 많은 사람들이 이를 해결하기 위해 다양한 방법을 활용했을 것으로 예상됩니다. 가장 쉬운 방법으로는, 특정 엘리먼트를 불러와서 어떤 메서드를 통해 객체를 전달하는 방법이 가장 일반적일 것입니다. 예를 들면 다음과 같은 방법이 있을 것입니다. import MyElement from "./MyElement.js"; customElements.define('my-element', MyElement); class MyElement extends HTMLElement { state = { value: 'init value' }; constructor() { super..
-
JavaScript의 customElements에서 Proxy을 활용한 객체 변화 감지Frontend/JavaScript 2023. 3. 3. 14:13
앞서 작성한 글을 완벽하게 숙지하고 사용하시다 보면 attribute 값을 업데이트 하는 과정에서 여러 의문이 들 것입니다. ??? : observedAttributes() 와 attributeChangedCallback() 으로 태그의 attribute 값이 바뀌는 것을 감지해주는건 알겠는데… ??? : 여기에 render() 함수를 걸어두면 attribute값이 바뀔 때 렌더링도 자동으로 최신화해주는 것도 알겠는데.. ??? : attribute는 텍스트만 넘겨줄 수 있고, attribute를 감지하는 것이지 엘리먼트 내부의 상태값을 감지하는 것은 아니지 않나? 객체가 변했을 때 렌더링이 자동으로 일어나게 할 수 없을까? customElements을 그렇게 만들어 보겠습니다. class MyProxy..
-
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..
-
[React Native] Expo에 Android Studio 에뮬레이터 연결하기Frontend/React·React Native 2022. 5. 6. 15:34
React Native를 개발할 때 본인 컴퓨터가 Windows면서 iOS를 사용하는 사용하는 경우에는 불가피하게 Expo를 사용하게 되는 경우가 있습니다. (본인이 아니더라도 팀원이 해당 환경을 사용하는 경우도 있습니다.) 아무튼 간에 Expo로 앱 개발을 하게 되면 일반적으로 각자의 스마트폰에 Expo Go를 설치하여 테스트를 하게 됩니다. 하지만 이는 너무나도 귀찮은 작업입니다. 스마트폰을 거치해야 하며, 테스트도 손으로 일일이 해야 해서 여러모로 귀찮습니다. 스마트폰을 개발 내내 켜놔야 하는 문제도 있습니다. Expo 없이 React Native로 앱 개발을 할 때에는 Android Studio의 에뮬레이터에 물려서 사용했었는데 Expo에서도 가능합니다. 글 시작에 앞서 현재 제 개발 환경을 공유..