본문 바로가기

React74

[공식문서] Next.js의 작동 방식 #7 빌드 시간과 요청 시간 (Build Time and Runtime) 빌드 시간(또는 빌드 단계)은 애플리케이션 코드를 프로덕션에 준비하기 위한 일련의 단계를 가리키는 용어입니다. 애플리케이션을 빌드할 때, Next.js는 코드를 프로덕션에 최적화된 파일로 변환하여 서버에 배포되고 사용자가 사용할 준 비를 합니다. 이러한 파일은 다음과 같습니다: 정적으로 생성된 페이지의 HTML 파일 서버에서 페이지를 렌더링하는 데 사용되는 JavaScript 코드 클라이언트에서 페이지를 대화식으로 만드는 데 사용되는 JavaScript 코드 CSS 파일 런타임(또는 요청 시간)은 애플리케이션이 빌드되고 배포된 후 사용자의 요청에 응답하여 실행되는 기간을 나타냅니다. 다음으로, 이 섹션에서 소개된 클라이언트, 서버 및 렌.. 2023. 8. 12.
[공식문서] Next.js의 작동 방식 #6 코드 분할이란? 개발자들은 보통 애플리케이션을 여러 페이지로 나누어 다른 URL에서 접근할 수 있도록 합니다. 각각의 이 페이지는 애플리케이션으로의 고유한 진입점(entry point)이 됩니다. 코드 분할은 애플리케이션의 번들을 각 진입점에서 필요한 작은 청크로 분할하는 프로세스입니다. 그 목표는 해당 페이지를 실행하는 데 필요한 코드만 로드하여 애플리케이션의 초기 로드 시간을 개선하는 것입니다. Next.js에는 코드 분할을 내장한 지원이 있습니다. pages/ 디렉터리 내의 각 파일은 빌드 단계에서 자체 JavaScript 번들로 자동으로 분할됩니다. 더 나아가서: 페이지 간에 공유되는 모든 코드도 다른 번들로 분할되어 동일한 코드를 다시 내려받는 것을 피합니다. 초기 페이지 로드 후에 Next.j.. 2023. 8. 11.
[공식문서] Next.js의 작동 방식 #5 번들링이란 무엇인가? 개발자들은 애플리케이션을 모듈, 컴포넌트 및 함수로 나눠서 더 큰 부분을 구축하는 데 사용할 수 있습니다. 내부 모듈 및 외부 서드파티 패키지를 내보내고 가져오면 파일 의존성의 복잡한 웹이 형성됩니다. 번들링은 의존성 웹을 해결하고 파일(또는 모듈)을 브라우저에 최적화된 번들로 병합(또는 '패키징')하는 프로세스로, 사용자가 웹 페이지를 방문할 때 파일 요청 수를 줄이는 것을 목표로 합니다. 2023. 8. 11.
[공식문서] Next.js의 작동 방식 #4 최소화란 무엇인가? 개발자들은 인간이 읽기 쉬운 최적화된 코드를 작성합니다. 이 코드는 주석, 공백, 들여쓰기 및 여러 줄과 같이 코드 실행에 필요하지 않은 추가 정보를 포함할 수 있습니다. Minification은 코드의 기능을 변경하지 않고 불필요한 코드 서식 및 주석을 제거하는 프로세스입니다. 목표는 파일 크기를 줄여 애플리케이션의 성능을 향상시키는 것입니다. Next.js에서는 JavaScript 및 CSS 파일이 자동으로 제품용으로 최소화됩니다. 2023. 8. 11.
[공식문서] Next.js의 작동 방식 #3 컴파일링이란 무엇인가? 개발자들은 JSX, TypeScript 및 최신 버전의 JavaScript와 같이 더 개발자 친화적인 언어로 코드를 작성합니다. 이러한 언어들은 개발자의 효율성과 확신을 향상시키지만, 브라우저가 이해할 수 있도록 하기 위해서는 JavaScript로 컴파일되어야 합니다. 컴파일은 한 언어로 작성된 코드를 다른 언어나 해당 언어의 다른 버전으로 변환하는 프로세스를 말합니다. Next.js에서 컴파일은 개발 단계에서 코드를 편집하는 동안 및 제품을 제작하기 위한 빌드 단계에서 발생합니다. 2023. 8. 11.
[공식문서] Next.js의 작동 방식 #2 개발 및 프로덕션 환경 환경은 코드가 실행되는 맥락을 생각할 수 있습니다. 개발 중에는 응용 프로그램을 로컬 머신에서 빌드하고 실행합니다. Production은 응용 프로그램을 배포하고 사용자가 소비 할 수 있도록 준비하는 과정입니다. 이것이 Next.js에 적용되는 방법 Next.js는 응용 프로그램의 개발 및 프로덕션 단계 모두에 대한 기능을 제공합니다. 예를 들어: 개발 단계에서 Next.js는 개발자와 응용 프로그램을 구축하는 경험을 최적화합니다. TypeScript 및 ESLint 통합, Fast Refresh 등과 같이 개발자 경험을 개선하는 기능을 제공합니다. 프로덕션 단계에서 Next.js는 최종 사용자와 그들이 응용 프로그램을 사용하는 경험을 최적화합니다. 코드를 변환하여 성능을 개선하고.. 2023. 8. 11.
[공식문서] Next.js의 작동 방식 #1 고급 Next.js 기능을 더 배우기 전에 Next.js의 기본 작동 방식을 이해하는 것이 도움이 될 것입니다. 이 과정의 시작에서 React가 응용 프로그램을 어떻게 구축하고 구조화하는지에 대해 비교적 객관적임을 설명했습니다. React로 응용 프로그램을 여러 가지 방법으로 구축할 수 있습니다. Next.js는 응용 프로그램을 구조화하고 개발 프로세스와 최종 애플리케이션을 모두 빠르게 만들어주는 최적화를 제공하는 프레임워크입니다. 다음 섹션에서는 다음과 같은 다른 단계에서 응용 프로그램 코드에 어떤 일이 발생하는지 살펴보겠습니다. 코드가 실행되는 환경 : Development vs. Production 코드가 실행되는 시점 : Build Time vs. Runtime 렌더링이 발생하는 위치 : Clie.. 2023. 8. 11.
[공식문서] React에서 Next.js로 #3 다음 단계 요약하자면, React와 Next.js의 기초 지식을 탐색하고, 간단한 React 애플리케이션을 Next.js 애플리케이션으로 마이그레이션했습니다. 이제 Next.js 여정에서 다음 단계를 선택할 수 있습니다. 첫 번째 앱을 만들며 Next.js 사용 방법을 배우세요. 이 과정은 주요 Next.js 기능을 소개하고 보다 복잡한 프로젝트를 구축하면서 실습을 할 수 있도록 도와줄 것입니다. 계속해서 이 과정을 진행하며 Next.js의 작동 방식을 더 자세히 탐구하세요. 다음 수업에서는 Next.js의 작동 방식을 탐색하면서 관련 웹 개발 개념을 소개합니다. 이러한 개념에 익숙해지면 기초가 확장되어 보다 고급 Next.js 기능을 배우는 것이 더욱 수월해질 것입니다. 2023. 8. 11.
[공식문서] React에서 Next.js로 #2 Next.js 시작하기 프로젝트에서 Next.js를 추가하려면 이제 더 이상 unpkg.com에서 react와 react-dom 스크립트를 로드할 필요가 없습니다. 대신 Node Package Manager(npm)를 사용하여 이러한 패키지를 로컬로 설치할 수 있습니다. 참고 : 먼저 Node.js가 설치되어 있어야 합니다(최소 버전 요구사항). Node.js는 여기서 다운로드 할 수 있습니다. 그렇게 하려면 package.json 이라는 빈 객체 {} 를 가진 새 파일을 생성하세요. // package.json { } 터미널에서 npm install react react-dom next 명령을 실행하세요. 설치가 완료되면 package.json 파일 내에 프로젝트 종속성이 나열되어 있는 것을 확인할 수.. 2023. 8. 11.

티스토리툴바