Next.js란?
리액트는 간단하게 설명하면 User Interface 사용자가 사용하는 화면을 만들 수 있는 JavaScript 라이브러리입니다. 여기서 '라이브러리'라는 말에 주목해야하죠. 라이브러리는 개발을 위한 다양한 기능을 제공하지만, 상당 부분의 권한과 책임을 개발자에게 넘깁니다. 따라서 더 효율적이고 완성도 높은 UI를 만들기 위해서 개발자를 도와주는 React 프레임워크가 Next.js입니다.
웹 브라우저가 UI를 생성하는 원리
사용자가 웹 페이지에 방문하면, 서버는 갖고 있던 HTML 파일을 웹 브라우저에 전달합니다. 그러면 브라우저는 HTML을 읽고 DOM(Document Object Model, 문서 객체 모델)을 생성합니다.
1. 문서 조작(Manipulating documents
)
우선 사용자가 보는 실제 인터넷 화면(document)은 객체에 의해 JavaScript로 표현됩니다. 이 document를 사용해서 문서를 구성하는 HTML 및 CSS 에 대한 정보를 조작하고 반환할 수 있죠. DOM 요소의 텍스트 콘텐츠를 변경하고, 새 스타일을 적용하고, 새로운 요소를 추가할 수도 있습니다. 이것을 우리는 문서 조작이라고 부릅니다.
2. 문서 객체 모델, DOM
다시 말해서, 브라우저 탭(window) 안에 출력된 실제 화면(document)는 문서 객체 모델로 표시됩니다. 이는 프로그래밍 언어가 HTML 문서를 쉽게 액세스할 수 있도록 '웹 브라우저'가 생성한 트리 구조 표현이죠. 따라서 페이지가 렌더링된 후, '개발자 도구'에서 JavaScript로 DOM을 조작할 수 있는 이유가 이 때문입니다.
3. 트리 구조
트리의 각 항목은 노드라고 합니다.
- Root node : 트리의 최상위 노드이며, HTML에서는 HTML 노드가 루트 노드입니다.
- Child node : 다른 노드 바로 아래에 있는 노드입니다.
- Descendant node : 다른 노드 아래 어딘가에 있는 노드입니다.
- Parent node : 다른 노드 위에 있는 노드입니다.
- Sibling nodes : 같은 레벨에 위치하고 있는 노드입니다.
오늘의 개발지식
라우팅
라우팅은 정해진 규칙에 따라 최상의 경로를 선택하는 프로세스입니다. 네트워크는 노드라는 시스템과 노드와 노드를 연결하는 경로 또는 링크로 구성되어 있습니다. 따라서 한 노드에서 다른 노드로 이동하며 가장 효율적인 경로 이동을 하는 것을 '라우팅'이라고 볼 수 있습니다.
참조 링크
