전체 글

[0. 모듈화의 필요성]자바스크립트는 script 태그를 통해 외부의 스크립트 파일을 가져올 수 있다.하지만 파일마다 독립적인 파일 스코프를 가지지 않고 하나의 전역 객체를 공유한다.예를 들어, 두 개의 js 파일을 스크립트 태그에 넣는다고 가정해 보자.   자바스크립트는 가장 뒤에 있는 스크립트를 기준으로 변수명을 적용하게 된다. // math.jsfunction sum(x, y) { return x + y;}// app.jssum(1, 2);console.log(sum(1, 2)); // 3 위와 같이 코드가 작성되었을 때, 만약 app.js에서 sum이 재정의되면 어떻게 될까?// math.jsfunction sum(x, y) { return x + y;}// app.js..

[1.  useRef]useState와 유사하게 컴포넌트 내부에서 렌더링이 일어나도 변경 가능한 상태값을 가진다.하지만 useState와 달리 반환 값인 객체 내부에 있는 current로 값에 접근 / 변경할 수 있고 값이 변해도 렌더링을 트리거하지 않는다. useRef는 상태값을 저장하고 싶지만 렌더링을 원하지 않을 때 사용할 수 있다.ex) 값이 자주 바뀌지만 렌더는 많이 필요없는 데이터 [2. useLayoutEffect]useEffect와 유사하지만 useEffect는 렌더링 후에 비동기적으로 호출이 발생하고 useLayoutEffect는 렌더링 전에 동기적으로 호출이 일어난다. 렌더링이 시작되기 전 값을 동기화하기 때문에 렌더 후 함수를 실행하는 useEffect와 달리 reflow, repai..

[1.DOM과 브라우저 렌더링 과정][1-1. DOM이란]문서 객체 모델(Document Object Model)은 XML, HTML 문서의 각 항목을 계층으로 표현하여 생성, 변형, 삭제할 수 있도록 돕는 인터페이스이다. W3C(World Wide Web Consortium)의 표준이다. DOM은 웹페이지의 콘텐츠와 구조를 어떻게 구현해야 하는지에 대한 정보를 담은 인터페이스로,  트리 구조로 이루어져 있다. [1-2. 브라우저 렌더링]브라우저 렌더링은 다음과 같은 순서로 이루어진다.URL의 호스트 이름이 DNS를 통해 IP 주소로 변경되고, 그 주소의 서버에 요청을 전송한다.서버는 HTML 파일을 전송한다.HTML/XML 파서는 전달받은 HTML을 파싱해 DOM 트리를 생성한다.파싱 과정에서 외부 리..