SSR, SSG, JAM Stack이 뭔가요?
Next.js 코드
import { useEffect, useState } from 'react'
// 서버단에서 ['호랑이', '표범']을 받아옴
export async function getServerSideProps() {
const res = await fetch(`https://${API서버주소}/server-animal`)
const data = await res.json()
return { props: { data } }
}
export default function Home(props) {
const [animals, setAnimals] = useState(['토끼', '사슴', ...props.data])
useEffect(() => {
setAnimals(animals => [...animals, '늑대', '여우'])
// 클라이언트단에서 ['거북이', '자라']를 받아옴
fetch(`https://${API서버주소}/client-animal`).then(res =>
res.json()
).then((data) => {
setAnimals(animals => [...animals, ...data])
})
}, [])
return (
<div>
<ul>
{animals.map((animal, key) => (
<li key={key}>{animal}</li>
))}
</ul>
</div>
)
}
Nuxt.js 코드
<template>
<div>
<ul>
<li v-for="(animal, bIdx) in animals" :key="bIdx">
{{ animal }}
</li>
</ul>
</div>
</template>
<script>
export default {
data () {
return {
animals: [
'토끼',
'사슴'
]
}
},
async fetch () {
// 서버단에서 ['호랑이', '표범']을 받아옴
this.animals = [
...this.animals,
...(await fetch(`https://${API서버주소}/server-animal`).then(res =>
res.json()
))
]
},
mounted () {
this.animals.push('늑대')
this.animals.push('여우')
// 클라이언트단에서 ['거북이', '자라']를 받아옴
fetch(`https://${API서버주소}/client-animal`).then(res =>
res.json()
).then((data) => {
this.animals = [
...this.animals,
...data
]
})
}
}
</script>
브라우저에 나타난 화면
페이지 소스 보기로 열어본 결과
<!doctype html>
<html>
<head >
<!-- 생략 -->
</head>
<body >
<div>
<ul>
<li>토끼</li>
<li>사슴</li>
<li>호랑이</li>
<li>표범</li>
</ul>
</div>
<script>
// 늑대와 여우를 추가한 뒤
// 서버로부터 거북이와 자라를 받아와
// 렌더링하는 등의 자바스크립트 코드
</script>
</body>
</html>
📜 라디오 대본
얄코: 라식 수술받은 날 밤 눈 못 뜰 때 듣는 얄코 라디오!
얄코: 오늘의 주제는 SSR과 SSG, 그리고 JAM Stack입니다.
얄코: 저는 얄팍한 개발자 얄코
미토: 미친토끼 미토에요.
미토: 내가 React로다가 동물소개 웹 사이트를 만들려고 그러는데요
미토: 누가 그냥 리액트도 좋은데 Next.js란 것도 써보라고 그래가지고
미토: 이건 또 뭔가 해서 찾아보니까 뭐, SSR? 그런게 있다고 해서
미토: 내가 또 너무 화가 나는거에요!
얄코: 뭔가 새로운 걸 접하면 너무 화가 나는 무슨 훈련같은거라도 받았어요?
미토: 이 SSR이란게 뭐에요? 도대체
얄코: SSR은 사실 새로운 게 아니에요. 오히려 오랫동안 써오던거죠.
얄코: 이 SSR, Server Side Rendering이 뭔지 이해하려면
얄코: 그 반대인 CSR, Client Side Rendering을 먼저 생각해보시면 돼요.
미토: CSR? 그거는 또 뭐에요?
얄코: React나 Vue 등이 기본적으로 CSR을 하는 것들이죠.
얄코: 이것들에 대해서는 알고 계시죠?
미토: 나는 안 모르는데 이거 모르는 청취자분들 있으면은
미토: 얄코 채널에서 'Angular, React, Vue가 뭔가요?'
미토: 이 영상 찾아서 봐보시면 되구요. 배경지식이죠 배경지식
미토: 얄코씨가 맨날 써먹는 그 비유 있잖아요.
미토: 사용자가 브라우저로 웹사이트 방문하는 걸 뭘 사먹는거에 빗대가지고
미토: 정적 웹사이트는 편의점에서 미리 포장돼서 진열된거 사가는것처럼
미토: 고정된 HTML, CSS, 자바스크립트, 이미지 등을 서버가 줘가지고다가
미토: 변하지 않는 웹사이트를 보여주는거랬구요. 무슨 소개페이지처럼요.
미토: 동적 웹사이트는 게시판이나 무슨 통계 페이지처럼
미토: 데이터베이스 등 계속 바뀌는 내용에 따라가지고
미토: 사용자가 방문할 때마다 서버가 그때그때
미토: HTML 내용들을 렌더링, 요리해다 갖다주는
미토: JSP나 PHP같은것들로 만드는 그런 것들인 것이다.
미토: 그리고 이 React같은 SPA 라이브러리나 프레임워크들은
미토: 정적 웹사이트처럼 서버한테선 똑같은 걸 받아가는데
미토: 거기 있는 자바스크립트로다가 서버로부터 데이터를 요청해서
미토: 그 받아온 정보들을 가지고 사용자의 컴퓨터에 깔린 브라우저가
미토: 셀프로다가 페이지 내용들을 요리해내는, 말하자면은
미토: 손님이 불판만 받아와가지고다가 고기라는 데이터를 계속 요청해서
미토: 직접 구워먹는 고깃집같은거라고 그랬었죠.
얄코: 맞아요. 그런 웹사이트들은 기존의 동적 웹사이트처럼
얄코: 링크를 클릭할 때마다 다른 페이지로 이동을 하는 것이 아니라
얄코: 같은 페이지에서 자바스크립트를 사용해서
얄코: HTML 요소들을 계속 동적으로 바꿔주는 것이기 때문에
얄코: 한 페이지에서 모든게 다 되는 Single Page Application,
얄코: SPA라고 부른다고 했었죠.
얄코: 그리고 이미 말씀하셨듯, 이 웹사이트의 주요 컨텐츠들은
얄코: 서버쪽이 아닌 클라이언트단, 즉 사용자의 컴퓨터에 깔린
얄코: 브라우저에서 데이터에 따라 HTML 요소들이 렌더링되기 때문에
얄코: Client Side Rendering - CSR이라 불리기도 해요.
얄코: 물론 클라이언트 사이드 렌더링이 싱글 페이지에서만 되는건 아니니까
얄코: CSR이랑 SPA 이 둘이 동의어는 아니에요.
미토: 그렇다면은 이 서버 사이드 렌더링이라는거는
미토: 이 React같은 것들이가 생기기 전에 쓰이던
미토: 그 오래된 방식을 말하는 거인 거잖아요?
미토: 스프링이랑 JSP 뭐 이런것들로 만들던거.
미토: 지금 SSR를 쓴다는 거는 과거로 회귀를 하는건데
미토: 그럼 나한테 Next.js인지 뭐인지 써보라고 한 그 친구는
미토: 나에게 모멸감을 주려고 그런 말을 한 것인가?
얄코: 아닐거에요. 예전 방식으로 완전히 돌아가는 게 아니라
얄코: 이 CSR과 SSR의 장단점을 절충한 방식들을 쓰는거에요.
얄코: CSR 덕분에 분명 웹 개발도 수월해지고
얄코: 사용자들로서도 어디 클릭할 때마다 링크 이동 없이
얄코: 깔끔한 유저경험을 갖게 된 이점들도 있지만
얄코: 이게 꼭 장점들만 있던 건 아니거든요.
얄코: 이런 CSR, SPA로 어느정도 규모가 있는 사이트를 만들면
얄코: 처음에 화면이 로딩되는 속도가 다소
얄코: 느리다고 느껴질 때가 있었을거에요.
미토: 그러고보니까 내가 전에 리액트로갖다가 사이트를 만들었는데
미토: 사이트에 접속할 때마다 맨 처음에 그 흰 화면 떠 있는 시간이
미토: 사이트에 뭐가 많아질 수록 점점 길어지는거에요.
미토: 내가 너무 화가 나가지고 페이지 소스 보기를 해보니까
미토: HTML body 태그 안에 무슨 div 하나만 딸랑 들어있어요.
미토: 그래가지고 내가 컴퓨터에 귀신이 든 건가 하고
미토: 기절할 뻔 했던 거 아녜요!
얄코: 맞아요. 고깃집에 가면 처음에 앞접시가 비어있는것처럼
얄코: SPA 웹의 HTML 파일에는 body에 보통 빈 태그 하나만 들어가죠.
미토: 그럼 화면에 보이는 그 HTML 요소들은 어디서 나오는거에요?
얄코: 잘 보시면 어떤 용량이 좀 있는 자바스크립트 파일을
얄코: 로드하는 코드도 있을거에요. 이게 불판인거죠.
얄코: 이것들을 받아온 사용자의 브라우저에서
얄코: 이미 코드에 들어있거나 서버로부터 요청해 받아온 데이터를
얄코: 이 자바스크립트 코드로 구워다가 사이트 요소들을 렌더링해내는거에요.
미토: 요리가 다 돼서 나오는 곳이 아니라 손님이 직접
미토: 불판에다 고기를 궈먹어야되는 곳이기 땜세
미토: 첨에 바로 못 먹는 것처럼, 첫 페이지 로딩이 있는 거란 얘긴거죠?
미토: SSR은 서버에서 이미 다 HTML 요리 다 해서 내오는데말이에요.
미토: 그러면은 이것땜세 React같은거들의 장점들도 다 포기하고
미토: JSP 같은걸로다가 돌아가야 되는거에요?
얄코: 양쪽의 장점들을 다 가져오기 위해, Next.js나 Nuxt.js 등
얄코: 하이브리드 프레임워크들이 나온거에요.
얄코: Next.js는 React, Nuxt.js는 Vue에 각각
얄코: SSR로 페이지를 제공하는 기능들을 추가한거죠.
미토: React나 Vue 사이트를 SSR로 짤 수가 있다는 말이에요?
얄코: 사이트의 원하는 부분을 SSR로 만들 수가 있어요.
얄코: ul 태그 안에 li 태그로, 동물들 목록을 보여주는
얄코: 간단한 웹페이지를 예를 들어 설명할게요.
얄코: 그냥 순수 Vue로 짠다면, 그 HTML 결과물에는
얄코: 아까 말씀하셨던것처럼 빈 div 태그 하나가 들어있겠죠.
얄코: 그리고 이 페이지가 브라우저에서 실행이 되고 나서야
얄코: 거기 링크된 자바스크립트 파일이 다운로드돼서
얄코: 그 코드에 이미 들어있거나, 서버에 다시 요청해서 받아온
얄코: 동물들 데이터를 기반으로 위의 그 빈 div 안에
얄코: ul, li 엘리먼트들을 생성해서 토끼, 사슴 등의 동물들을
얄코: 클라이언트단에서 만들어 넣어주게 될 거에요.
미토: 이 과정이 많고 무거워지면 시작시 딜레이가 발생하는거죠.
미토: 그러면은 그 Vue는 Nuxt라고 그랬나? 그건 어떻게 돌아가요?
얄코: 고정댓글의 링크를 클릭해보시면 예제 페이지로 들어가지는데요
얄코: 라디오로만 들어도 되는 내용이니까, 나중에 더 자세히 알고 싶으시면
얄코: 방문해서 살펴보시면 돼요.
얄코: 거기에 보면 먼저 Next랑 Nuxt로 짠 코드들이 있고, 그 다음에는
얄코: 그 페이지에 방문했을 때 나오는 화면의 스크린샷이 있어요.
얄코: 토끼부터 자라까지 총 8 마리 동물들이 있죠.
얄코: 그 다음 코드는 이 화면을 페이지 소스보기를 한 모습인데
얄코: 이 HTML 페이지에 이미 ul 엘리머트 안에 li로
얄코: 동물들 4 마리가 들어있는 걸 보실 수 있을거에요.
미토: 그러네? 토끼랑 사슴, 호랑이 표범은 이미 HTML 안에 든 채로 와서
미토: 페이지 접속하자마자 바로 나타나고, 그 다음에 늑대랑 여우,
미토: 조금 있다가 망할 거북이놈이랑 별주부자식이 짠 하고 나타나네요?
미토: 어떻게 된 거에요 이게?
얄코: 말씀드렸듯 첫 4마리, 토끼부터 여우까지는 서버에서 이미
얄코: HTML 요소들로 렌더링이 된 다음 오는거에요.
얄코: 다시 위의 Next와 Nuxt 코드들을 살펴보시면 (구조는 다르지만)
얄코: 토끼랑 사슴은 이미 데이터에 들어있는 상태로 시작하고
얄코: fetch 코드를 사용해서 Next나 Nuxt 서버에서 다른, API 서버로부터
얄코: 호랑이랑 표범을 받아와요.
미토: API 서버한테서 데이터 땡겨오는거를, 서버에서 한단 말이에요?
얄코: 네. 생소하죠? 우리가 아는 React나 Vue는 클라이언트에서 도니까요.
얄코: 여튼 이렇게 4마리를 서버에서 렌더링해서 클라이언트에게 보내면
얄코: 이제 사용자의 브라우저에서 그냥 Vue에서처럼
얄코: mounted에서 먼저 늑대랑 여우를 넣어주고
얄코: fetch로 거북이와 자라를 API 서버에서 받아와 넣는거에요.
미토: 아니, 이게 될려면은 우리가 React나 Vue 일반적으로 쓸 때처럼
미토: 프론트엔드 코딩한거를 정적 파일로 서버에 올려두는게 아니라
미토: 스프링이나 장고처럼 어플리케이션 서버가 돌고 있어야되는거 아니에요?
미토: API서버랑 별개로 이 Next.js가 서버로 또 돌고 있다는건가?
얄코: 맞아요. 그래서 Next.js나 Nuxt.js로 만든 웹을 SSR 모드로 돌리려면
얄코: 정적 파일들로 빌드해서 올리는게 아니라 Node.js가 깔린 서버에서
얄코: 프로젝트를 어플리케이션으로 실행해서 프론트엔드를 배포하는거에요.
얄코: 이런 방식으로 서버에서 페이지의 요소들 중에
얄코: 페이지 접속 시 바로 나타나야 할 것들을 정해서
얄코: 그것들은 서버에서 미리 렌더링해서 보내도록 짤 수 있는거에요.
얄코: 그 이후에 다른 요소들은 기존의 Vue 방식대로
얄코: ajax 등을 사용해서 동적으로 동작하는거죠.
미토: 말하자면은 첫 판은 구워서 나오는 고기집인 거인 거네요.
미토: 일단 바로 먹으면서 다음 고기들 구울 수 있게끄름요.
미토: 음~ 그렇게 해가지고 SSR마냥 첫 로딩이 빠르고
미토: CSR처럼 이후 동작도 부드럽고 코딩하기도 수월한
미토: 프론트엔드를 짤 수가 있는 거인 거구만.
얄코: 맞아요. 이 SSR로 보완하고자 하는
얄코: CSR, 여기서는 정확히 SPA의 또 다른 단점은
얄코: Search Engine Optimization, SEO에요.
미토: SEO면 서네 서. 이 서가 뭐에요?
얄코: 그냥 SEO라고 읽어요. SEO란 건 사이트가 구글이나 네이버 등
얄코: 검색엔진으로 찾아지기에 적합하도록 만드는 걸 뜻해요.
얄코: 구글에서 마이크로소프트를 검색해보시면 검색결과에
얄코: 마이크로소프트 본 홈 뿐 아니라, 그 밑에 서브 링크들로
얄코: Microsoft 365, 다운로드 센터, Microsoft 계정 등등
얄코: 내부 페이지들로 바로 들어갈 수 있도록 나와 있죠.
얄코: 검색 엔진들은 크롤링으로 웹사이트들을 돌아다니면서
얄코: 이들의 구조와 컨텐츠를 파악한 다음 목차와 색인을 만들어두고
얄코: 이에 기반해서 사용자가 검색을 할 때 적절한 결과물을 보여줘요.
얄코: 말하자면, 식당들마다 돌아다니면서 주방에서 나오는 음식들을
얄코: 사진찍어두고 메뉴판으로 정리해서 맛집탐방 가이드를 만드는거죠.
미토: 오호라, 그러면은 생구이를 해먹든 불고기를 해먹든 연탄에 구워먹든
미토: 손님이 자기 테이블에서 알아서 하는 React나 Vue 등의 CSR 고기집들은
미토: 뭘 메뉴판으로 미리 만들어둘 수가 없는거겠네요.
미토: 주방에서는 불판이랑 빈 접시만 나가니까.
미토: 반면에 아까처럼 SSR이랑 섞은 Next.js나 Nuxt.js에서는
미토: 그래도 첫 판 구워져 나가는거 보고 메뉴로 정리할 수 있을거구요.
얄코: 바로 그거에요. 사실 구글처럼 자바스크립트 엔진도 장착한 크롤러는
얄코: 브라우저에서 렌더링되는 부분, 즉 손님들 식탁도 들여다보기 때문에
얄코: CSR 페이지들도 곧잘 분석을 해 내지만
얄코: 아직 그렇지 못한 검색 사이트에서는 빈 페이지로만 인식하죠.
얄코: 때문에 어디서는 내 웹사이트의 컨텐츠와 서브페이지들이
얄코: 잘 검색되어서 사용자들의 눈에 많이 띄게 하려면
얄코: 사이트를 어느정도 SSR로 제공하거나 메타태그들을 활용하는 등
얄코: SEO, 검색엔진 최적화를 고민해야하는거에요.
미토: 오~ 이제는 이 서버 사이드 렌더링을 쓰는 이유를 내가 알 것 같애요.
미토: 그런데 아까 Next.js같은게 'SSR 모드로 사이트를 돌리면'이라고 했는데
미토: 그럼 그거 말고 다른 모드도 있는거에요?
얄코: 잘 캐치하셨네요. SSR과 조금 다른 방식으로, SSG라는게 있어요.
미토: SSG? 쓱이잖아요 쓱. 신세계에서 만드는거에요?
얄코: Static Site Generator, 즉 정적 사이트 생성기의 줄임말이에요.
얄코: 원래 Hugo나 Gatsby, Jekyll 등에서 하던걸 요즘은
얄코: [Next](http://next.sk)나 Nuxt에서도 제공하게 된 건데요.
얄코: 얄코 사이트, [yalco.kr](http://yalco.kr)에 접속하셔서 아무 페이지를
얄코: 페이지 소스 보기로 여신 다음 거기 나오는 소스를
얄코: html formatter 사이트 등에 붙여넣어서 살펴보세요.
미토: 이거는... 다 만들어져 있는거 보니까 정적 사이트네요.
미토: 아니면 SSR처럼 서버에서 접속할때마다 렌더링이 돼서 오는건가?
얄코: 서버에서도 클라이언트에서도 렌더링은 하지 않아요.
얄코: 하지만 React 코드로 짠 거죠.
미토: React를 갖다가 CSR이나 SSR도 아니고
미토: 그냥 순 정적 사이트를 만든다구요?
얄코: 이 얄코 사이트는 Gatsby로 만든거에요.
얄코: 기본적으로 React의 코드를 사용해서 리액트 방식으로 코딩하는데
얄코: 이걸 결과물로 내놓을때는 렌더링을 다 마친 정적파일들을
얄코: 생성, generate를 해서 이것들로 배포를 하는거에요.
얄코: 얄코 사이트를 스프링 같은 기존의 SSR로 만들었다면
얄코: 메인 페이지에서 각 강의 페이지에 접속할 때마다
얄코: 서버에서 데이터베이스 등으로부터 정보들을 가져온 다음
얄코: 서버 사이드에서 HTML을 그때그때 만들어서 보냈을거고
얄코: 그냥 React나 Vue 등의 CSR로 만들었다면
얄코: 클라이언트에서 Ajax로 서버에 역시 정보들을 요청한 다음
얄코: 자바스크립트로 프론트엔드에서 요소들을 만들었겠죠.
얄코: 그런데 Gatsby로 사이트를 만들 때는 강의 정보들을
얄코: json이나 yaml 등의 정적 파일에 저장하고
얄코: 이걸 읽어와서 React 방식으로 렌더링을 하는 코드를 짠 다음
얄코: 빌드 명령어를 실행하면, 모든 강의마다의 페이지들을
얄코: 각각 그 컨텐츠가 들어있는 HTML 파일들로 생성하게 돼요.
얄코: 즉 사이트에서 접속하는 모든 페이지마다 정적 HTML이
얄코: 이미 빌드한 시점에서 생성돼서 서버에 올라가 있는거죠.
얄코: 이것들을 정적사이트처럼 완제품으로 진열해서 배포하는거에요.
미토: React나 Vue의 간편하고 스마트한 방식으로 코딩은 하는데
미토: 그걸 배포할때는 정적 파일로 생성해서 내보낸다.
미토: React 쓰는 고기집에서 배운 솜씨로 갖다가
미토: 각종 고기 반찬들 만들어서 편의점이나 마트에 납품하는거네요.
얄코: 그렇게 볼 수 있겠네요. 역시 React로 렌더링하는 Next.js도
얄코: SSG를 이제 지원하고 Vue 방식인 Nuxt.js도 마찬가지에요.
얄코: 그리고 렌더링 방식이나 템플릿을 다르지만
얄코: 이들처럼 정적 페이지들로 결과물을 빌드해내는
얄코: Hugo, Jekylle, Hexo 등등의 프레임워크들 또는 라이브러리들을
얄코: 정적 사이트 생성기 - Static Site Generator라고 불러요.
미토: 페이지들이 이미 정적으로 진열돼 있으니까 SEO도 잘 되겠네.
미토: 그리고 이거는 페이지들이 많이 있기는 하지만
미토: 그 내용들이 변할 일은 크게 없고 다른 동적 요소들은 적은
미토: 이를테면 블로그 같은거에 많이 쓰이겠어요.
얄코: 정답이에요. 영상이나 강의들마다의 고정된 컨텐츠를 게시하는
얄코: 얄코 사이트를 이 SSG로 만든 건 그 때문이죠.
얄코: 기타 많은 코딩 블로그들도 마찬가지구요.
얄코: 변하지 않는 내용들을 보여줄 페이지이니 굳이 API 서버를 따로 두기보다는
얄코: 그냥 각 페이지들의 모든 내용들을 정적 파일들로 출력해서
얄코: 온프레미스의 웹서버나 S3, Netlify이나 Vercel 등으로
얄코: 간편하게 정적 배포를 하는거에요.
미토: 하기사 그냥 블로그 운영하는데 스프링이나 익스프레스같은
미토: 웹 어플리케이션 돌리는것보다는 그렇게 하는게 효율적이겠어요.
미토: 댓글 같은거야 뭐 외부 서비스 가져다 넣는게 더 편할거고.
얄코: 그렇죠. 이에 관련해서 요즘 많이 떠오르고 있는
얄코: JAM Stack이란 개념도 있는데 들어보셨어요?
미토: 잼 스택?
미토: 잼민이 같은거에요?
얄코: JavaScript API Markup에 스택이 붙은거에요.
얄코: 예전에 한동안 떠올랐던 MEAN 스택처럼요.
얄코: 웹 서비스를 만드는 한 설계 방식이라고 보면 돼요.
미토: 자바스크립트랑 API, 마크업은 HTML같은거고
미토: 그냥 우리가 쓰는 웬만한 사이트에 해당되는거 아녜요?
얄코: 단어들 하나하나로는 그렇게 볼 수 있지만 이 잼스택이란 용어는
얄코: 정적 사이트 생성기들을 사용한 서비스 설계를 의미해요.
얄코: 실제로 jamstack.org에 가보면 아예 주 메뉴에
얄코: Site Generators항목이 있어서 아까 얘기한
얄코: Next, Hugo, Gatsby 등등의 SSG들이 나열돼 있죠.
얄코: 자바스크립트를 활용한 다양한 라이브러이와 툴들로
얄코: 정적인 프론트엔드 마크업 페이지들을 미리 생성,
얄코: pre-rendering을 해주고
얄코: 로그인이나 결제, 그리고 아까 얘기했듯 댓글 같은 기능들은
얄코: 외부 API 서비스로 아웃소싱해서 설계를 분리,
얄코: decoupling해내는거에요.
얄코: 이 pre-rendering과 decoupling이 잼스택의 핵심요소에요.
미토: 요즘 Netlify나 Vercel 이런 서비스들 보면은
미토: 가입해다가 Github같은데 레포지토리에 연결하면
미토: 코드 푸시할때마다 알아서 땡겨와가지고 빌드까지 해서
미토: 이런 정적 사이트들을 그것도 공짜로 배포를 해주던데
미토: 이런 서비스들이랑도 궁합이 잘 맞겠어요.
얄코: 맞아요. Next.js를 만든 곳이 Vercel이니 말 다했죠.
얄코: 그와 같이 빌드와 배포를 자동화하는것과 더불어서
얄코: 이런 정적 페이지들을 CDN으로 배포함으로써
얄코: 비용도 절감하고 사용자 경험까지 개선하는 것 등이
얄코: JAM 스택에서 권장하는 전반 설계 구조에요.
얄코: 이런 구조를 통해 보안을 강화하고, 사이트를 쉽게 확장할 수 있고
얄코: 좋은 사이트 성능에다 개발의 용이함까지 챙길 수 있죠.
미토: 아주그냥 Git똥차게 Git똥차네요.
얄코: 오늘 이처럼 CSR부터 SSR과 SSG
얄코: 그리고 JAM 스택까티 알아봤습니다.
얄코: 이후 얄코라디오에서 다뤄주었으면 하는 주제들 있으면
얄코: 댓글로 달아주시면 감사하겠습니다.
얄코: 이상 얄코와 미토였습니다. 즐코하세요!
유튜브에서 영상 보기