html

리액트에서 form을 다루기 위해 input 태그를 쓸 때, 흔히 볼 수 있는 에러가 있다. 바로 uncontrolled input이 controlled input으로 바뀌었다는 내용의 에러다. 콘솔에서 친절(?)하게 알려주고 있듯이, 초기값이 undefined 였다가 렌더링 후에 값이 들어와 defined value로 바뀌면서 에러가 발생하게 된다. 이 가이드에 따르면, input 태그를 일반적으로 사용하기 위해서는 value에 undefined가 들어가면 안 된다. 따라서 초기값이 존재하지 않을 경우, undefined가 아닌 공백(””)을 줘서 controlled input으로만 사용하도록 바꿔주면 에러를 방지할 수 있다. 그렇다면 여기서 말하는 controlled input이란 무엇일까? Cont..

바닐라 자바스크립트로 웹 애플리케이션을 만드는 고된 과정 속에는 DOM 조작이 필수적으로 들어간다. 그런데 이 DOM 조작은 때로는 안티 패턴(Anti-Pattern)으로 인식되기도 한다. 이번에는 DOM을 조작하는 Web API에는 주로 어떤 것들이 있고, 어떻게 하면 DOM을 조작하는 과정을 최적화할 수 있을지에 대해 알아보려고 한다. DOM이란? 문서 객체 모델(The Document Object Model, 이하 DOM) 은 HTML, XML 문서의 프로그래밍 interface이다. 기본적으로 HTML로 된 문서에는 웹페이지의 설계도가 그려져 있는데, 이 구체적인 구조를 웹페이지에 접속할 때 HTML이라는 형식을 통해 브라우저에 전달하게 된다. 그러면 브라우저는 이 형식을 보고, 그 안의 HTML..

현대 브라우저가 웹 사이트 렌더링을 수행하는 방법에는 크게 두 가지가 있다. 바로 클라이언트 사이드 렌더링(CSR)과 서버 사이드 렌더링(SSR)이다. 오늘은 이중 SPA에서 사용되는 클라이언트 사이드 렌더링에 대해 알아보고자 한다. 클라이언트 사이드 렌더링이란? 클라이언트 사이드 랜더링(CSR)은 웹사이트가 클라이언트에서 렌더링되는 것을 말한다. 여기서 말하는 클라이언트는 바로 브라우저다. 즉, 브라우저에서 렌더링을 수행하는 것이다. 이 과정은 다음과 같다. 1. 서버에서 index라는 단순한 구조의 HTML 파일을 클라이언트에 보내준다. 일반적인 구조의 SPA에서는 다음과 같은 HTML을 사용하게 되는데, 태그 안에 자바스크립트 링크가 담긴 2. HTML에 링크된 Javascript 파일(ex. ap..