현재까지 이어진 상황으로서,하나의 컴포넌트가 state 를 가질 수 있게 만들어 두었다.하지만, 상위 컴포넌트의 state 가 하위 컴포넌트의 props 가 될 수 있다.이 때, state, setState() 의 메서드는 EventTarget 으로부터 파생하였다.Working File : useState.jsclass CustomEventTarget extends EventTarget { constructor(secretValue) { super(); this._secret = secretValue; } setSecret = (newSecret) => { this._secret = newSecret; } getSecret = () => {..
HTML Component Deep Dive
제목 : 커스텀 웹 컴포넌트 정의 및 선언커스텀 웹 컴포넌트를 브라우저에 등록하여 사용하는 방법은 2 가지 방식이 존재한다.이 두 가지 방식을 보기 전에, 먼저 등록하는 법을 보자 :const customElements = window.customElements;customElements.define("component-name", 등록할 커스텀 컴포넌트 클래스);여기에서, define 할 두 가지 방식이 있다.1. 클래스 정식 선언 후 등록class InitComponent extends HTMLElement { constructor(){ super(); // ... this.setAttribute("number", "1"); } static..
제목 : 커스텀 웹 컴포넌트 정의 및 선언커스텀 웹 컴포넌트를 브라우저에 등록하여 사용하는 방법은 2 가지 방식이 존재한다.이 두 가지 방식을 보기 전에, 먼저 등록하는 법을 보자 :const customElements = window.customElements;customElements.define("component-name", 등록할 커스텀 컴포넌트 클래스);여기에서, define 할 두 가지 방식이 있다.1. 클래스 정식 선언 후 등록class InitComponent extends HTMLElement { constructor(){ super(); // ... this.setAttribute("number", "1"); } static..
제목 : Web Component 생명주기웹 컴포넌트의 기본 상태와 생명주기 메서드는 다음과 같다 : class InitComponent extends HTMLElement { constructor(){ super(); // 내장 변수 및 메서드 선언 } connectedCallback(){ // 브라우저 DOM 에 "실제로" 연결되면 호출, 실행됨. } disconnectedCallback(){ // 브라우저 DOM 에서 연결이 끊어지면 호출, 실행됨. } adoptedCallback(){ // 새로운 document 로 이동되었을 때 마다 호출됨. // 부모 트리가 바뀌면 실행되지 않을까..
제목 : Web Component 사용법Web Component 라는 기술은 스마트폰의 보급과 함께,웹사이트에서 동적인 요소들을 효과적으로 관리하기 위해 제작되었는데,안타깝게도 사용 난이도와 번거로움, 최적화에 있어 현대의 모든 웹 서버 프레임워크를 이기지 못한다.하지만, 나의 커스텀 리액트를 제작하기 위해서 기초가 될 뼈대로는 충분하다.Web Component 란브라우저에는 일반적으로 div, p, h1, img 와 같은 기본 태그들이 들어갈 수 있다.하지만, 개발자가 자신만의 커스텀 태그를 만들어 이를 컴포넌트화 시키고 싶을 경우 사용하는 라이브러리이다.단, 기억해야 할 것은 커스텀 컴포넌트를 Node 환경에 등록하는 것이 아니라, 브라우저에 등록한다는 것이다.예를 들어, 라는 초기화 컴포넌트를 직..
제목 : 커스텀 리액트 제작기 시작제목 : Web Component우리는 현재 React, Vue, Svelte 와 같은 웹 서버 프레임워크를 사용하고 있다.이는 현재 라이브러리로서 활약중이지만, 사실상 프레임워크라고 봐도 될 정도로 방대하다.이러한 웹 서버 프레임워크들은, 브라우저 엔진에서 제공하는 저 수준의 변수와 메서드, 프로세스를자체적으로 가공하여 편리하게 만들었으며, 유저 풀을 만들었다.이러한 웹 서버 프레임워크의 진화 과정 속에서 나 또한 리액트를 공부했었다.하지만 드는 생각은, 너무 편리하기에 내부에서 진행되는 과정을 모르겠다는 것이었다.리액트는 어떠한 이유로 클래스에서 함수 형태의 컴포넌트로 진화하였는지,왜 개발자들이 리액트를 선택하였는지 이에 대해 의구심을 가졌다.그리고 프로그래머스 부트..
