input 을 관리할때 onChange 와 value 를 통해 사용하고 useState 를 통해 관리한다.더 관리하기 좋은 형태는 없을까?무슨 고민이야? 아래 코드는 간단한 todo 리스트의 입력부분이다.import React, { useState } from "react";import "../../styles/index.css";import TodoFormButton from "./buttons/TodoFormButton";const TodoForm = ({ setTodos }) => { const [title, setTitle] = useState(""); const [content, setContent] = useState(""); const addTodoHandler = (e) => { ..

리엑트를 사용하는 이유에는 여러가지가 있다.그중에서 가상 DOM 은 큰 특징이다.DOM 웹 페이지나 웹 앱에 있는 HTML 요소들을 구조적으로 표현한 것이다.DOM 은 애플리케이션 전체 UI 를 나타내고 트리 구조로 표현된다.여기에는 Web Document 에 있는 각 UI 요소에 대한 노드가 포함된다.웹 개발자가 자바스크립트를 통해 컨텐츠를 수정할 수 있기 때문에 유용하다.또한 구조화된 형식으로 되어 있어 특정 대상을 선택할 수 있고 모든 코드 작업이 쉬워지기 때문에 도움이된다. DOM 의 문제점은? DOM 은 트리 구조로 되어 있어 이해하기 쉽지만, 노드의 수가 많아질 수록 느려지고, DOM 업데이트에 잦은 오류를 발생시킬 수 있다.또 최근 웹은 SPA 를 사용한다. 하나의 웹 페이지를 어플리케이션처..

바닐라 JS 로 프로그래밍을 하다보면 생기는 현상이 있다.이벤트를 다른 곳에 지정했는데 왜 상위요소가 지정되지?왜 하위요소도 전부..?event flow DOM 이벤트 흐름에는 캡처링, 타겟, 버블링 3가지가 있다. 캡처링은 이벤트가 하위요소로 전파되는 것이고타겟은 이벤트가 실제 타겟 요소에 전달되는 것그리고 버블링은 이벤트가 상위 요소로 전파되는 것이다. td 태그를 클릭하게 되면 이벤트가 최상위에서 시작해 아래로 전파. -> 캡처링이벤트가 타겟 요소에 도착해 실행 된다. -> 타겟그리고 다시 위로 전파된다. -> 버블링 위 그림의 3개의 phase 중에서 이벤트 핸들러가 실행되는 과정은 원래 target phase, bubbling phase 이나, 필요에 따라서 capture phase 와 targ..

요즘 TypeScript 가 선호된다. 왜 선호되고 장점은 무엇이고 단점은 없을까?javascript & typescript 자바스크립트는 동적 웹 페이지를 만들기 위해 고안된 언어이며 브라우저를 통해 실행된다.타입스크립트는 자바스크립트의 슈퍼셋으로 정적 타입을 제공하여 대규모 애플리케이션의 개발을 용이하게 한다. 자바스크립트와 타입스크립트는 웹 개발자에게 강력한 도구를 제공한다. 이들은 개발자가 빠르게, 안정적으로 유연하게 애플리케이션을 개발 할 수 있도록 도와준다. typescript  타입스크립트는 자바스크립트 기반의 정적 타입 문법을 추가한 언어이다.타입스크립트는 자바스크립트의 슈퍼 셋, 즉 상위 확장자로 자바스크립트 엔진을 사용하며 자신이 원하는 변수의 타입을 정의하고 프로그래밍을 하면 자바스크..

this 는 무엇일까?this this는 일반적으로 객체지향 언어에서 자기자신을 가리키는 객체, 즉 자기 자신과 굉장히 관련이 깊다.자바스크립트도 비슷할까?그렇지 않다. 자바스크립트가 조금 특별하기 때문인데,자바스크립트의 함수는 객체, 그 중에서도 일급 객체이다.일급 객체인 자바스크립트 함수는 변수나 데이터에 할당할 수 있고, 다른 함수에 인수 또는 반환값으로도 사용할 수 있다. // 1. 변수나 데이터에 저장const myFunc = func// 2. 함수의 인수로 전달function func1(func2) {}// 3. 함수의 반환값으로 사용function func1() { ... return func1} 이런 특징으로 자바스크립트의 함수는 다양한 환경에서 호출될 수 있다. func(), tes..

클로져를 알기위해서는 실행 컨텍스트에 대해 알아야 한다. https://muyeon95.tistory.com/317 실행 컨텍스트실행 컨텍스트는 실행할 코드에 제공할 환경 정보들을 모아놓은 객체이다. 이는 자바스크립트의 동적 언어로서의 성격을 가장 잘 파악할 수 있는 개념이다. 자바스크립트는 어떤 실행 컨텍스트muyeon95.tistory.com 클로져는 무엇이고 어떻게 활용할 수 있을까?정의 MDN : 함수와 함수가 선언된 어휘적 환경의 조합 ????????????확실히 MDN 이 만능은 아니다. 코어 자바스크립트 : 어떤 함수 A 에서 선언한 변수 a 를 참조하는 내부 함수 B를 외부로 전달할 경우 A 의 실행 컨텍스트가 종료된 이후에도 변수 a 가 사라지지 않는 현상 ex code 1)functio..