프론트엔드50 [공식문서] Next.js의 작동 방식 #10 네트워크란 무엇인가? 배포된 응용 프로그램 코드가 저장되고 실행되는 위치를 알아두는 것은 도움이 됩니다. 네트워크는 자원을 공유할 수 있는 연결된 컴퓨터(또는 서버)로 생각할 수 있습니다. Next.js 애플리케이션의 경우 응용 프로그램 코드는 원본 서버, 콘텐츠 전송 네트워크(CDN), 그리고 엣지에 배포될 수 있습니다. 각각에 대해 알아보겠습니다. Origin Server (원본 서버) 앞서 논의한대로 서버는 응용 프로그램 코드의 원본 버전을 저장하고 실행하는 주요 컴퓨터를 의미합니다. 원본 서버라는 용어를 사용하여 응용 프로그램 코드가 CDN 서버와 엣지 서버와 같은 다른 위치로 배포되는 서버와 구별합니다. 원본 서버가 요청을 받으면 응답을 보내기 전에 일부 계산을 수행합니다. 이 계산 작업의 결과.. 2023. 8. 12. [공식문서] Next.js의 작동 방식 #9 렌더링이란 무엇인가? React에서 작성한 코드를 UI의 HTML 표현으로 변환하는 작업을 의미합니다. 이 과정을 렌더링이라고 합니다. 렌더링은 서버 또는 클라이언트에서 발생할 수 있습니다. 렌더링은 빌드 시점에서 미리 실행될 수 있고, 런타임에서 각 요청마다 실행될 수 있습니다. Next.js에서는 세 가지 유형의 렌더링 방법을 사용할 수 있습니다. 서버 사이드 렌더링, 정적 사이트 생성, 클라이언트 사이드 렌더링. Pre-Rendering (사전 렌더링) 서버 사이드 렌더링과 정적 사이트 생성은 사전 렌더링으로도 불립니다. 외부 데이터의 가져오기 및 React 컴포넌트를 HTML로 변환하는 작업이 클라이언트에게 결과가 전송되기 전에 미리 실행되기 때문입니다. Client-Side Rendering v.. 2023. 8. 12. [공식문서] Next.js의 작동 방식 #8 클라이언트와 서버 (Client and Server) 웹 애플리케이션의 맥락에서 클라이언트는 사용자의 기기에 있는 브라우저를 나타내며, 이 브라우저는 애플리케이션 코드를 요청하기 위해 서버에 요청을 보냅니다. 그런 다음 서버로부터 받은 응답을 사용자가 상호 작용할 수 있는 인터페이스로 변환합니다. 서버는 데이터 센터 내의 컴퓨터를 나타내며, 애플리케이션 코드를 저장하고 클라이언트로부터 요청을 받아 일부 계산을 수행한 다음 적절한 응답을 다시 보냅니다. 2023. 8. 12. [공식문서] 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. 이전 1 2 3 4 5 6 다음
