정리/Web (4) 썸네일형 리스트형 [Web] 브라우저 렌더링 웹 브라우저 웹 브라우저란?웹 브라우저는 인터넷 상의 다양한 정보를 사용자에게 제공하고 웹 페이지와 상호작용할 수 있도록 돕는 소프트웨어다. 웹 브라우저는 단순히 텍스트나 이미지를 보여주는 것을 넘어서 복잡한 애플리케이션을 실행하고 사용자 경험을 개선하기 위해 여러 작업을 수행한다.웹 브라우저의 구조• 사용자 인터페이스 • 주소 표시줄, 이전/다음 버튼, 북마크 메뉴 등 요청한 페이지를 보여주는 창을 제외한 나머지 모든 부분 • 렌더링 엔진 • HTML과 CSS를 파싱하여 요청한 웹 페이지를 표시하는 렌더링 엔진 • 브라우저 엔진 • 유저 인터페이스와 렌더링 엔진을 연결하는 엔진 • 통신 • HTTP 요청과 같은 네트워크 호출에 사용되는 네트워킹 파트 • UI 백엔드 • 체크박.. [Web] Next.js의 App Router Next.js의 App Router는?Next.js 13부터 새롭게 추가된 기존의 Page Router를 대체하는 완전히 새로운 개념의 router다.routing을 설정하는 방식이 기존의 Page Router 버전과는 완전히 달라지게 된다.페이지의 레이아웃을 설정하는 방법이나 데이터를 불러오는 방식에도 다양한 변화가 생기게 된다.React 18부터 새롭게 추가된 리액트 서버 컴포넌트나 스트리밍 등의 최신 기능들도 함께 사용할 수 있게 된다. Page Routing page라는 이름을 갖는 파일만 page 파일로써 취급된다.만약 test 경로에 대응하는 페이지를 만들려면 페이지를 만들고자 하는 폴더 안에 page 파일을 만들면 된다. 동적 경로 URL 파라미터를 사용하는 동적 경로에 대응하게 되는 페이.. [Web] Next.js의 Page Router Next.js의 Page Router는?React Router 처럼 특정 조건을 기준으로 웹 서비스 내에 페이지를 분할하고 분할된 페이지 간의 이동을 처리하는 등의 페이지 라우팅을 처리해주는 기능을 제공해준다. 기본 파일프로젝트를 생성하면 pages 폴더 안에 _app.tsx, _document.tsx 파일이 자동으로 생성된다. _app.tsx App 컴포넌트는 root 컴포넌트로서 모든 페이지 컴포넌트의 부모 컴포넌트가 된다.전체 페이지에 공통적으로 포함되는 컴포넌트를 렌더링 하거나 비즈니스 로직들을 작성할 수 있는 공간이다. _document.tsx 모든 페이지에 공통적으로 적용되어야 하는 메타 태그 또는 폰트와 같은 HTML 태그를 설정하는 곳이다. Page Routing useRouter 훅.. [Web] CSR, SSR, SSG CSRCSR이란?Client Side Rendering의 약자로, 클라이언트 측에서 웹 페이지를 렌더링하는 방식이다. 동작 방식1. 사용자가 웹 페이지에 방문한다.2. 서버는 클라이언트에게 빈 HTML 파일과 JS bundle 파일을 보낸다.3. 클라이언트는 받은 HTML 파일에 있는 JS 번들 파일을 다운로드한다. (이때 사용자는 텅 빈 화면을 보게 된다.)4. 다운로드가 완료된 JS 파일을 해석하고 실행한다.5. 페이지를 렌더링한다.장점처음에 모든 스크립트를 불러왔기 때문에 페이지 전환 시 브라우저가 새 페이지를 로드하지 않고 기존 페이지를 업데이트하기 때문에 빠른 페이지 전환이 가능하다.서버는 클라이언트에게 데이터를 전달하기만 하면 되고, 렌더링은 클라이언트에서 처리되므로 서버의 부담이 줄어든다.단.. 이전 1 다음