티스토리

sylvia.log

검색하기

블로그 홈

sylvia.log

s2ylvia.tistory.com/m

s2ylvia 님의 블로그입니다.

구독자: 0

방명록 방문하기

주요 글 목록

[Next.js] Server Component와 Client Component에 대해 알아보자 Next.js는 Server Component와 Client Component를 개발자가 선택하고 정의하여 사용할 수 있다.(기본적으로 모든 컴포넌트는 Server Component이고, "use client"를 통해 Client Component로 정의할 수 있다.) React 18 이전의 렌더링React는 Client Side Rendering을 하기 때문에, 모든 컴포넌트의 렌더링은 클라이언트(브라우저)에서 이루어졌다. 서버가 클라이언트(브라우저)에 React에서 작성한 JavaScript 파일을 넘겨주면, 브라우저는 해당 파일을 해석하여 최소한의 초기 리소스에서 상호작용을 통해 JavaScript를 실행하면서 동적으로 화면을 생성해갔다. 하지만 초기 로딩 속도가 느리고, 검색 엔진 최적화가 되지.. 공감수 0 댓글수 0 2024. 6. 12.
[Next.js] App Router와 Page Router에 대해 알아보자 Next.js의 Router (Page Router)기존 Next.js는 페이지 개념을 기반으로 구축된 파일 시스템 기반 라우터를 사용했다./page 디렉터리에 파일이 추가되면 라우팅 설정 필요없이 자동으로 경로로 사용할 수 있었다.따라서 개발자는 Next.js가 기본으로 제공하는 라우팅을 사용하여 효율적으로 개발이 가능했다.pages/index.js → /pages/blog/index.js → /blog 위와 같이 /page 디렉터리 안에 디렉터리나 파일을 생성하면 자동으로 라우팅이 가능하다. App Router하지만 Next.js 13부터 App Router가 새로 도입되었다.App Router는 공유 레이아웃, 중첩 라우팅, 로딩 상태, 오류 처리 등을 지원하는 React Sever Compone.. 공감수 0 댓글수 0 2024. 6. 12.
[Next.js] Next.js를 설치하고 실행해 보자! Next.js? 왜 사용하는 거야? 현재, Next.js와 같은 서버 사이드 렌더링을 지원하는 프레임워크가 큰 인기를 끌고 있습니다. 이전에는 대부분의 렌더링과 라우팅 기능을 브라우저의 자바스크립트에 의존하는 클라이언트 사이드 렌더링이 유행이었습니다. 이는 서버를 걸쳐 필요한 자원을 받아올 일이 적어 사용자에게 우수한 UI/UX를 제공했습니다. 그러나 클라이언트 사이드 렌더링은 구글 검색 노출이 어렵고 초기 페이지 로딩 속도가 느려 수익에 부정적인 영향을 미쳤습니다. 이에 따라 정적 사이트 생성을 지원하고 렌더링과 라우팅 기능을 서버가 담당하는 서버 사이드 렌더링이 대세로 떠올랐습니다. 그래서 저도 한번 공부를 해보도록 하겠습니다.. 설치 및 실행방법 간단합니다. node.js와 npm이 설치되어 있다면.. 공감수 0 댓글수 0 2024. 4. 16.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.