본문 바로가기

Framework63

[공식문서] 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.
[공식문서] React에서 Next.js로 #1 마지막 레슨에서는 React를 시작하는 방법에 대해 논의했습니다. 아래는 최종 코드 예시입니다. 이 코드를 시작점으로 사용하려면 해당 코드를 코드 편집기의 index.html 파일에 붙여넣으세요. 이제 간단한 React 앱을 Next.js로 전환하는 방법을 알아보겠습니다. 2023. 8. 11.

티스토리툴바