Posting/260327 - #74
Conversation
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request adds a new technical blog post titled "Exploring Frontend Bundling and Compressed Transmission," which provides a detailed analysis of bundle sizes, deployment strategies like EC2 and CloudFront, and the compression flows for CSR, SSR, and RSC. The review feedback identifies several typographical errors and spacing inconsistencies throughout the document, providing specific suggestions to improve the overall readability and professionalism of the content.
|
|
||
| ### Rendered탭의 의미 | ||
|
|
||
| pnpm run build를 실행하면 vite의 경우 dist 하위 폴더에 JS 파일들이 생성되는데여. 이 JS파일들이 **Rendered**를 지칭합니다. Vite가 소스코드를 트리쉐이킹, 미니파이, 청크분할 등의 최적화를 거쳐서 만든 **번들링 결과물**의 크기를 의미합니다. |
There was a problem hiding this comment.
'생성되는데여'를 '생성되는데요'로 수정하고, 'Vite'의 대문자 표기 및 띄어쓰기(JS 파일들이)를 적용하여 가독성을 높이는 것이 좋습니다.
| pnpm run build를 실행하면 vite의 경우 dist 하위 폴더에 JS 파일들이 생성되는데여. 이 JS파일들이 **Rendered**를 지칭합니다. Vite가 소스코드를 트리쉐이킹, 미니파이, 청크분할 등의 최적화를 거쳐서 만든 **번들링 결과물**의 크기를 의미합니다. | |
| pnpm run build를 실행하면 Vite의 경우 dist 하위 폴더에 JS 파일들이 생성되는데요. 이 JS 파일들이 **Rendered**를 지칭합니다. Vite가 소스코드를 트리쉐이킹, 미니파이, 청크분할 등의 최적화를 거쳐서 만든 **번들링 결과물**의 크기를 의미합니다. |
|
|
||
| 번들 분석을 하다보니 이런 궁금증이 생겼습니다. 로컬에서 pnpm run build를 통해 나온 결과물은 Rendered인데, Vercel에 배포된거는 Gzip을 사용한다? 그러면 **로컬에서 빌드한 것과 실제 배포된 것이 다른 용량의 결과물을 사용하는건가?** 생각이 들었습니다. | ||
| | ||
| 결론부터 말하면, **같은 결과물(Rendered), 같읍 압축(Gzip)을 동일한 플로우로 진행합니다.** 차이가 생기는 건 그냥 실행 환경입니다. 환경에 상관없이 사이트에 사용자가 접속하면 웹서버가 Rendered 파일을 Gzip으로 압축해서 보내주는건데, 이건 파일을 변환하는게 아니라 네트워크 전송 단계에서 압축하는 것입니다. 브라우저가 받으면 자동으로 압축을 풀고, 브라우저는 원래의 Rendered 파일을 실행합니다. |
There was a problem hiding this comment.
'같읍'을 '같은'으로 수정하고, '보내주는 건데', '변환하는 게'와 같이 의존 명사 앞의 띄어쓰기를 적용하는 것이 좋습니다.
| 결론부터 말하면, **같은 결과물(Rendered), 같읍 압축(Gzip)을 동일한 플로우로 진행합니다.** 차이가 생기는 건 그냥 실행 환경입니다. 환경에 상관없이 사이트에 사용자가 접속하면 웹서버가 Rendered 파일을 Gzip으로 압축해서 보내주는건데, 이건 파일을 변환하는게 아니라 네트워크 전송 단계에서 압축하는 것입니다. 브라우저가 받으면 자동으로 압축을 풀고, 브라우저는 원래의 Rendered 파일을 실행합니다. | |
| 결론부터 말하면, **같은 결과물(Rendered), 같은 압축(Gzip)을 동일한 플로우로 진행합니다.** 차이가 생기는 건 그냥 실행 환경입니다. 환경에 상관없이 사이트에 사용자가 접속하면 웹서버가 Rendered 파일을 Gzip으로 압축해서 보내주는 건데, 이건 파일을 변환하는 게 아니라 네트워크 전송 단계에서 압축하는 것입니다. 브라우저가 받으면 자동으로 압축을 풀고, 브라우저는 원래의 Rendered 파일을 실행합니다. |
|
|
||
| ### 2. Next JS같은 서버사이드 렌더링, 리액트 서버 컴포넌트는 Gzip전송을 어떻게? | ||
|
|
||
| 위의 플로우는 React CSR 기준인데요 Next.js같은 SSR 프레임워크나 리액트 서버 컴포넌트(RSC)는 전송 방식이 어떻게 다를지 궁금해졌씁니다. |
There was a problem hiding this comment.
'궁금해졌씁니다'의 오타를 수정하고, 'Next.js 같은'과 같이 띄어쓰기를 적용하는 것이 좋습니다.
| 위의 플로우는 React CSR 기준인데요 Next.js같은 SSR 프레임워크나 리액트 서버 컴포넌트(RSC)는 전송 방식이 어떻게 다를지 궁금해졌씁니다. | |
| 위의 플로우는 React CSR 기준인데요 Next.js 같은 SSR 프레임워크나 리액트 서버 컴포넌트(RSC)는 전송 방식이 어떻게 다를지 궁금해졌습니다. |
|
|
||
| ## 마치며 | ||
|
|
||
| 사실 어느정도의 흐름만 알고 있었는데, AI에이전트시대에 들어가면서 제대로 아는것이 중요하다 생각하게 되어서 이번 기회에 한번 깊게 공부 해보았습니다. |
There was a problem hiding this comment.
'AI 에이전트 시대', '아는 것이'와 같이 띄어쓰기를 적용하여 문장의 가독성을 높이는 것이 좋습니다.
| 사실 어느정도의 흐름만 알고 있었는데, AI에이전트시대에 들어가면서 제대로 아는것이 중요하다 생각하게 되어서 이번 기회에 한번 깊게 공부 해보았습니다. | |
| 사실 어느정도의 흐름만 알고 있었는데, AI 에이전트 시대에 들어가면서 제대로 아는 것이 중요하다 생각하게 되어서 이번 기회에 한번 깊게 공부 해보았습니다. |
1 participant
PR전 코드 퀄리티 체크하기
작업내용