dom (4) 썸네일형 리스트형 <React> React Router Dom V6 도입기 1. 배경 최근 리액트라우터의 메이저 버전이 5에서 6으로 올랐다는 소식을 접했다. 바뀌어봤자 얼마나 바뀌었을까 싶었는데 생각보다 많은 것이 바뀌었고, 기존 프로젝트의 리액트라우터 버전을 올려보는 것도 재밌을 것 같아서 시도해보았다. 이번 포스팅에서는 기존 필자의 프로젝트에 도입하는 과정을 서술할 예정이다. 혹시라도 react-router-dom v6를 공부하고 싶어서 들어왔다면 빈약한 내용에 조금 실망할 수는 있지만 그래도 읽어본다면 도움은 되지 않을까. 흥미 외에도 도입하고 싶었던 이유는 번들 사이즈이다. 리액트라우터 v6로 올라가면서 번들사이즈가 현저하게 줄어들었다. minified 기준으로 28kB 에서 17kB 까지 줄어들었다. 프로젝트에서 수많은 리액트 라우터 기능을 쓰는 것이 아니므로 들이는.. <네트워크> 페이지 렌더링 과정 1. 소개 - 지난 포스팅에서는 페이지 로딩 과정에 대해 알아보았다. 거기서 렌더링을 간단하게 짚어보았는데, 이번 포스팅에서는 그 부분에 대한 과정을 좀 더 자세히 알아보고자 한다. - 브라우저가 렌더링 하는 과정을 간단하게 미리 언급하자면, 먼저 html과 css를 처리하여 DOM트리와 CSSOM 트리를 빌드한다. 그리고 그 둘을 결합하여 렌더트리(렌더링트리)를 만들고, 각 레이아웃을 실행하여 형태를 계산한다. 마지막으로 그들을 그린다. 이제 이 과정을 세세하게 알아보자. 2. 과정 * DOM - 다운받은 html을 파싱하며 DOM트리를 만든다. - html을 파싱하는 것은 다음 일련의 과정을 거친다. ∙ Conversion : 바이트를 읽고 인코딩하여 문자열로 바꾸는 과정을 의미한다. ∙ Tokeni.. <자바스크립트 기초> 11. DOM 스크립트 (2) 우리는 저번 장에서 변수에 HTML의 태그를 불러오는 방법에 대해 배웠다. 이제 불러온 태그를 그 변수를 이용하여 다뤄보자. * 속성 다루기 var link = document.querySelector('.list a'); console.log(link.getAttribute('href')); link.setAttribute('href', 'google.com'); console.log(link.getAttribute('href')); : 먼저 link라는 변수에 list라는 클래스의 a 태그를 삽입하였다. 이 때 변수.getAttribute('속성명') 으로 그 속성의 값을 불러올 수 있다. : setAttribute('속성명', '변경 값') 을 이용하면 속성의 값을 다른 값으로 변경시킬 수 있다. .. <자바스크립트 기초> 10. DOM 스크립트 (1) * DOM 스크립트란 - DOM 스크립트는 Document Object Model 스크립트의 약자로써 HTML문서의 태그나 클래스, 텍스트, 속성 등을 모두 객체로 취급한다는 의미이다. - DOM 스크립트는 위의 객체들을 조정하기 위해 만들어졌다. * 스크립트의 위치 - DOM스크립트에 들어가기전에 스크립트의 위치에 대해 짚고 넘어갈 필요가 있다. 스크립트 태그는 헤드에 넣어야할 것 같지만 단순히 그렇게만하면 DOM스크립트와 같이 body를 읽어야 변수를 받아들이는 스크립트는 수행이 불가능하다. 그러면 어떻게 해야할까. 이를 알아보기위해 id가 main-title인 h1태그를 title이라는 변수에 넣는 돔스크립트를 작성한다고 치자. var title = document.getElementById('ma.. 이전 1 다음
