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) => { ..

Vite 를 왜 사용해야 할까?그냥 마냥 사용하면 될까? 주의점은 없을까?번들링? 번들링은 빌드라고도 할 수 있다.사용자에게 웹 애플리케이션을 제공하기 위해 여러 코드와 프로그램들을 묶는 행위라고 정의할 수 있다.개발자는 최종적으로 번들링된 웹 애플리케이션을 만들어내고, 사용자가 웹 애플리케이션을 이용할 때는 번들링한 파일을 받아와 브라우저가 이 번들을 실행한다.  왜 번들링을 해야해? 코드를 번들링한다는 것은 단순히 묶기만 하는 것이 아닌 압축하는 개념과 비슷하다.번들 파일은 원본 프로그램 파일보다 크기가 작아지고 실행 속도, 로딩 속도 또한 빨라진다. 압축한 파일을 받아와 압축해제 전까지 파일을 조작할 수 없는 것처럼, 또한 번들링된 웹 애플리케이션은 사용자가 임의로 조작할 수 없다.  js 에서 변..

리엑트를 사용하는 이유에는 여러가지가 있다.그중에서 가상 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..