<div id="readability-page-1" class="page"><div><ul>
<li>강의 전 기존에 알고 있던 개념들을 정리해놓았고 추후 수정될 수 있습니다.</li>
</ul>
<ol>
<li>CSR(Client-side Rendering)이란 무엇이며, 그것의 장단점에 대하여 설명해주세요.</li>
</ol>
CSR(Client-side Rendering)이란 웹 브라우저에 데이터들을 보여주는 마지막 작업인 컴포넌트들을 렌더링하는 작업을 하는 방법 중에 하나이다. 이미 렌더링에 필요한 로직들을 모두 Client(웹브라우저)에게 보내 Sever와 통신 없이도 Client의 요청에 따라 빠르게 렌더링 하는 방식을 말한다. 이 방식은 처음 모든 렌더링에 필요한 로직들을 보내 셋팅해야해야하기 때문에 초기에 로딩이 길어질 수 있다는 점과 SEO에 불리한 점이 단점입니다. 이와 상반되는 개념으로 SSR(Sever-side Rendering)이 있으며 장단점이 반대입니다.
<ol start="2">
<li>SPA(Single Page Application)로 구성된 웹 앱에서 SSR(Server-side Rendering)이 필요한 이유에 대하여 설명해주세요.</li>
</ol>
SPA는 기본적으로 CSR으로 구현되어 있습니다. 그래야 하나의 페이지에서 Client 요청에 따라 어플리케이션을 작동시킬 수 있습니다. 그러므로 CSR의 단점을 가집니다. 1. 첫 로딩이 느린점. 이는 고객에게 서비스를 소개도 하지 못한채 바로 이탈할 수 있다는 점에서 크리티컬한 단점입니다. 2. SEO(검색 엔진 최적화)의 불리함. 대부분의 고객들은 Search를 통해 서비스에 유입합니다. 이를 위해 SEO에 맞는 서비스를 개발하여 고객들이 검색을 통해 쉽게 우리 서비스에 접근할 수 있도록 해야합니다. 
이러한 문제점들을 해결하기 위해 SPA에 SSR이 필요합니다. 
<ol start="3">
<li>Next.js 프로젝트를 세팅한 뒤 yarn start 스크립트를 실행했을 때 실행되는 코드를 nextjs github 레포지토리에서 찾은 뒤, 해당 파일에 대한 간단한 설명을 첨부해주세요. 
<a href="https://nextjs.org/docs/getting-started">https://nextjs.org/docs/getting-started</a> (Next.js 세팅 가이드) 
<a href="https://github.com/vercel/next.js/">https://github.com/vercel/next.js/</a> (Next.js Github 레포지토리)</li>
</ol>
<img src="https://velog.velcdn.com/images/2taesung/post/321a3d5d-1858-4b02-8e82-6a8e7855a7d7/image.png">
=&gt; 창피하게도 yarn start 시 실행 코드를 찾지 못했다 ..... 
=&gt; 포기하다 시피 하다가 마지막으로 Next.js docs를 다시 한번 읽어봤다.
<img src="https://velog.velcdn.com/images/2taesung/post/90031837-1d8e-4c29-8729-176dce1e2d70/image.png">
=&gt; production server? 
=&gt; server라는 키워드를 추적해보니
<pre><code>// 서버를 실행할 때 옵션, 서버 생성하는 인스턴스 모듈, 리퀘스트에 결과 값을 return 해주는 핸들러 모듈
import type { NextServerOptions, NextServer, RequestHandler } from '../next'
import { warn } from '../../build/output/log'
import http from 'http'
import next from '../next'

// 서버 생성시 옵션
interface StartServerOptions extends NextServerOptions {
 allowRetry?: boolean
 keepAliveTimeout?: number
}

export function startServer(opts: StartServerOptions) {
 let requestHandler: RequestHandler

 const server = http.createServer((req, res) =&gt; {
 return requestHandler(req, res)
 })

 if (opts.keepAliveTimeout) {
 server.keepAliveTimeout = opts.keepAliveTimeout
 }
	
 // 강제로 프로미스로 만드는 방법.
 return new Promise&lt;NextServer&gt;((resolve, reject) =&gt; {
 let port = opts.port
 let retryCount = 0

 server.on('error', (err: NodeJS.ErrnoException) =&gt; {
 if (
 port &amp;&amp;
 opts.allowRetry &amp;&amp;
 err.code === 'EADDRINUSE' &amp;&amp;
 retryCount &lt; 10
 ) {
 warn(`Port ${port} is in use, trying ${port + 1} instead.`)
 port += 1
 retryCount += 1
 server.listen(port, opts.hostname)
 } else {
 reject(err)
 }
 })

 let upgradeHandler: any

 if (!opts.dev) {
 server.on('upgrade', (req, socket, upgrade) =&gt; {
 upgradeHandler(req, socket, upgrade)
 })
 }

 server.on('listening', () =&gt; {
 const addr = server.address()
 // 이렇게 변수들에 삼항 연산자를 적극적으로 활용하는군 ..
 const hostname =
 !opts.hostname || opts.hostname === '0.0.0.0'
 ? 'localhost'
 : opts.hostname

 const app = next({
 ...opts,
 hostname,
 customServer: false,
 httpServer: server,
 port: addr &amp;&amp; typeof addr === 'object' ? addr.port : port,
 })

 requestHandler = app.getRequestHandler()
 upgradeHandler = app.getUpgradeHandler()
 resolve(app)
 })

 server.listen(port, opts.hostname)
 })
}</code></pre>
=&gt; 상당히 Node.js 의 내용들이 많았다. 
=&gt; 나야 나름 Node.js를 학습해서 익숙했지 
=&gt; 프론트 개발한다고 하면 아예 모르는 사람들도 많지 않을까 ...
=&gt; 코드를 리뷰하다보니 이 코드가 맞는듯 싶다.</div></div>

2taesung.log

Taesung Lee

강의 전 기존에 알고 있던 개념들을 정리해놓았고 추후 수정될 수 있습니다.
CSR(Client-side Rendering)이란 무엇이며, 그것의 장단점에 대하여 설명해주세요.
CSR(Client-side Rendering)이란 웹 브라우저에 데이터들을 보여주는 마지막 작업인 컴포넌트들을 렌더링하는 작업을 하는 방법 중에 하나이다. 이미 렌더링에 필요한 로직들을 모두 Client(웹브라우저)에게 보내 Sever와 통신 없이도 Client의 요청에 따라 빠르게 렌더링 하는 방식을 말한다. 이 방식은 처음 모든 렌더링에 필요한 로직들을 보내 셋팅해야해야하기 때문에 초기에 로딩이 길어질 수 있다는 점과 SEO에 불리한 점이 단점입니다. 이와 상반되는 개념으로 SSR(Sever-side Rendering)이 있으며 장단점이 반대입니다.
SPA(Single Page Application)로 구성된 웹 앱에서 SSR(Server-side Rendering)이 필요한 이유에 대하여 설명해주세요.
SPA는 기본적으로 CSR으로 구현되어 있습니다. 그래야 하나의 페이지에서 Client 요청에 따라 어플리케이션을 작동시킬 수 있습니다. 그러므로 CSR의 단점을 가집니다. 1. 첫 로딩이 느린점. 이는 고객에게 서비스를 소개도 하지 못한채 바로 이탈할 수 있다는 점에서 크리티컬한 단점입니다. 2. SEO(검색 엔진 최적화)의 불리함. 대부분의 고객들은 Search를 통해 서비스에 유입합니다. 이를 위해 SEO에 맞는 서비스를 개발하여 고객들이 검색을 통해 쉽게 우리 서비스에 접근할 수 있도록 해야합니다. 
이러한 문제점들을 해결하기 위해 SPA에 SSR이 필요합니다. 
Next.js 프로젝트를 세팅한 뒤 yarn start 스크립트를 실행했을 때 실행되는 코드를 nextjs github 레포지토리에서 찾은 뒤, 해당 파일에 대한 간단한 설명을 첨부해주세요.
https://nextjs.org/docs/getting-started (Next.js 세팅 가이드)
https://github.com/vercel/next.js/ (Next.js Github 레포지토리)
=> 창피하게도 yarn start 시 실행 코드를 찾지 못했다 .....
=> 포기하다 시피 하다가 마지막으로 Next.js docs를 다시 한번 읽어봤다.
=> production server?
=> server라는 키워드를 추적해보니
// 서버를 실행할 때 옵션, 서버 생성하는 인스턴스 모듈, 리퀘스트에 결과 값을 return 해주는 핸들러 모듈
import type { NextServerOptions, NextServer, RequestHandler } from '../next'
import { warn } from '../../build/output/log'
import http from 'http'
import next from '../next'
// 서버 생성시 옵션
interface StartServerOptions extends NextServerOptions {
 allowRetry?: boolean
 keepAliveTimeout?: number
}
export function startServer(opts: StartServerOptions) {
 let requestHandler: RequestHandler
 const server = http.createServer((req, res) => {
 return requestHandler(req, res)
 })
 if (opts.keepAliveTimeout) {
 server.keepAliveTimeout = opts.keepAliveTimeout
 }
 // 강제로 프로미스로 만드는 방법.
 return new Promise<NextServer>((resolve, reject) => {
 let port = opts.port
 let retryCount = 0
 server.on('error', (err: NodeJS.ErrnoException) => {
 if (
 port &&
 opts.allowRetry &&
 err.code === 'EADDRINUSE' &&
 retryCount < 10
 ) {
 warn(`Port ${port} is in use, trying ${port + 1} instead.`)
 port += 1
 retryCount += 1
 server.listen(port, opts.hostname)
 } else {
 reject(err)
 }
 })
 let upgradeHandler: any
 if (!opts.dev) {
 server.on('upgrade', (req, socket, upgrade) => {
 upgradeHandler(req, socket, upgrade)
 })
 }
 server.on('listening', () => {
 const addr = server.address()
 // 이렇게 변수들에 삼항 연산자를 적극적으로 활용하는군 ..
 const hostname =
 !opts.hostname || opts.hostname === '0.0.0.0'
 ? 'localhost'
 : opts.hostname
 const app = next({
 ...opts,
 hostname,
 customServer: false,
 httpServer: server,
 port: addr && typeof addr === 'object' ? addr.port : port,
 })
 requestHandler = app.getRequestHandler()
 upgradeHandler = app.getUpgradeHandler()
 resolve(app)
 })
 server.listen(port, opts.hostname)
 })
}
=> 상당히 Node.js 의 내용들이 많았다. 
=> 나야 나름 Node.js를 학습해서 익숙했지 
=> 프론트 개발한다고 하면 아예 모르는 사람들도 많지 않을까 ...
=> 코드를 리뷰하다보니 이 코드가 맞는듯 싶다.

CSR / SSR with Next.js

댓글