[언그래머] 일흔네번째 아티클_Next.js...😇 유행 좀 누가 멈춰줘

안녕하세요 여러분! 

송아지할때 송아 김송아입니다.

 

 

여러분들은 옷가게에 가면 이런 경험 없으신가요?

마음에 드는 옷을 발견해서, '오! 다음에 사야지ㅎㅎ' 했는데.. 다음에 갔는데 없어요😇

며칠 새에 주력 상품이 바뀌었고, 며칠전까지만 해도 전시되어 있던 상품들도 다 사라지는 마법같은 경험..!

 

ㅋㅋㅋㅋㅋ @구글링 '마법' 짤

 

 

 

정말 빠르게 변화하는 이런 패션 업계를 보고, 우리는 '패스트 패션'이라고 부르죠.  

최신 유행을 즉각 반영하여 상품 로테이션을 빠르게 시키는 것이 특징입니다.

 

 

 

맞습니다. 제가 무슨 얘기를 할 것 같나요?

우리.. React 유행한지 뭐 얼마나 되었다고..ㅎ

상태관리 중요하다고 배운지 뭐 얼마나 되었다고..

 

 

React의 장점이 그리 크지 않아지는 시대가 다시 돌아오고 있습니다.

유행은 돌고 도니까요 (돌리고.. 돌리고..)

 

혹시 나문희 선생님 돌리고 돌리고 아시는 분..? @KBS

 

 

 

 

 

지난 아티클에서 CSR과 SSR의 차이를 알아봤습니다!

단순히 얘기하면 Client에서 렌더링을 처리하느냐, Server에서 렌더링을 처리하느냐 차이였죠? (아래 아티클 참고해주세요)

[언그래머] 일흔세번째 아티클_CSR vs SSR

 

 

하지만, 우리가 얘기하지 않은 CSR의 단점도 있습니다. 🫢

만약 Client에서 처리하면, Client가 그 페이지를 다 만들 때 까지 화면이 계속 로딩 중! 이라는 겁니다.

그니까.. 페이지가 완성될 때까지 우린 페이지를 만나볼 수 없다는 거죠. 

페이지 로딩 속도가 오~래 걸린다는 거죠. 속도가 느리다는 겁니다.

 

 

그럼 당연히 첫 페이지 로딩 속도도?

맞습니다. 당연히 느리겠죠.

 

 

 

그럼 뭐가 문제냐구요?

 

*SEO(검색 엔진 최적화) 성능이 낮아진다는 겁니다.

쉽게 말해서, 검색했을 때 상위 노출이 잘 안된다는 거에요... 쿠궁⚡️

 

💡SEO란?

검색 엔진 최적화라는 뜻으로, 웹 페이지 검색엔진이 자료를 수집하고 순위를 매기는 방식에 맞게 웹 페이지를 구성해서 검색 결과의 상위에 나올 수 있게 하는 기술입니다.
(출처 : 위키 백과)

 

 

웹 사이트는 노출이 많이 되어야 하고, 많은 사람들이 봐줘야 하는게 당연한 목표이거늘..

상위 노출 안되면 사실 상 어려움이 많을 겁니다.

 

 

 

 

그래서 이 현상이 어떤 변화를 가져오고 있냐구요?

 

CSR의 단점이 곧 SSR의 장점이겠죠.

SSR의 장점 즉, 페이지 로딩 속도가 비교적 빠르다는 겁니다. 🚗💨

 

지난 아티클에서, CSR을 대표하는 기술이 바로 리액트라고 했었죠?

그 이유가 무엇이냐면,

 

상태 관리! 즉 useState, useEffect 등등 여러분들을 괴롭혔던 바로 그 기능들이 CSR을 위한 기술들이기 때문입니다..😇

이 말이 무슨 말일까요..

 

 

 

하하

✔️리액트의 중요한 기술들이 조금... 힘을 잃어간다는 뜻이겠죠.

 

 

 

그럼 손놓고 있을 수는 없겠죠?

프론트엔드 개발자이든 백엔드 개발자이든, 그럼 SSR하는 방법을 공부하면 되죠!! (말이 쉽지..또 공부냐..)

 

SSR은 말 그대로 Server에서 렌더링을 하는 방법이니,

Client가 아니라 Server를 공부해야할 것 같습니다.

 

 

백엔드 개발자는 같은 개념에서 언어만 좀 바꾸면 될 것 같은데

프론트엔드 개발자에게 너무 가혹한 것 아니냐 하실 수 있지만,

이 세상이 또 어떤 세상인가요

 

 

리액트를 할 줄 아시면, 금~방 서버 개발을 할 수 있도록 기술이 등장했습니다.

 

바로,

Next.js

 

 

NEXT.js 로고

 

리액트를 위해 만들었다고 해도 과언이 아닌 웹 개발 풀스택 프레임워크 Next.js

 

Server Side Rendering 뿐 아니라, 정적 웹 페이지 생성 등 리액트 기반 웹 애플리케이션 기능들을 가능케 하는 Node.js 위에서 빌드된 오픈 소스 웹 개발 프레임워크입니다.

(자바스크립트, 타입스크립트를 기본으로 구현 가능하지만 러스트도 지원하고 있습니다.)

 

Server Side Rendering을 가능하게 하는 것이 가장 중요하겠죠?

서버에서 미리 렌더링을 해두는 SSR 방식을 차용하여, 리액트 화면을 서버에서 미리 렌더링 해둔다는 겁니다!

그럼 브라우저는 이것을 다운로드 해서 화면에 바로 표시할 수 있겠죠?

그런 다음 사용자가 필요한 자바스크립트로 상호작용하면 되겠구요🥹

 

 

뿐만 아니라 ✨수~많은 내장 컴포넌트(자바스크립트 코드 덩어리)와 플러그인✨ 덕분에 작은 서비스 뿐 아니라 대규모 서비스까지 Next.js에 관심을 많이 가지고 있습니다.대표적인 서비스로는 넷플릭스, 틱톡, 엘라스틱 등을 들 수 있겠네요.

 

 

 

 

사실 SSR을 지원하는 다른 프레임워크도 많습니다.대표적으로 요즘 많이 들리고 있는 Angular Universal, Nuxt.js 등이 있습니다.

 

하지만 아직 프론트엔드 시장을 React가 꽉 쥐고 있는 만큼 React를 뒷받침해주는 프레임워크가 당연히 인기가 많을 수 밖에 없겠죠.

 

🔥 리액트의 부족한 부분을 채워줄 수 있는 프레임워크기이도 하면서,

🔥 인기가 많은 오픈소스인만큼 정말 적극적인 오픈소스 커뮤니티 즉, 깃허브가 활성화 되어 있기 때문에 

 

Next.js의 인기는 더 높아질 수 밖에 없는 것 같네요.

(feat. 오픈소스 아티클은 60~63번째 아티클에 있습니다)

 

 

 

React를 해보신 분들은 당연하고, Node.js를 해보신 분들까지도 

비교적 쉽게 진입해보실 수 있는 Next.js이니 관심있으신 분들은 이참에 하루 정도 투자해서 맛보기로라도 공부해보시면 너무 좋을 것 같습니다.

 

 

-

 

 

이리 빠르게 변하는 시대 속에 사는 우리도 진짜 고생이죠

 

그런 만큼 현재에 사는 게 제일 중요한 일 같네요.

 

모두들 과거를 후회하고 다가오지도 않은 미래를 걱정하지 말고!

당장 지금을 느껴보자구요🔥 

(사실 제가 제일 못하는 거니까, 여러분들이 제 몫까지 해주셔야 합니다)

 

 

감사합니다.

그럼 우린 또 다음주에 만나요😉