Next JS 란? Next JS 사용하는 이유. 웹개발 역사를 짧게 알아보자.

Next JS 란? Next JS 사용하는 이유. 웹개발 역사를 짧게 알아보자.

 

안녕하세요.

오늘은 왜 리액트가 등장하였고 또한 왜 NextJS가 등장하고 사랑받고 있는지,

가볍게 알아보겠습니다.

 

1. HTML, CSS, Javascript
2. 리액트의 등장
3. Next JS의 등장
4. 마치며

 

1. HTML, CSS, Javascript

 

누구든지 처음 웹 개발을 공부, 시작하게 되면 듣게 되는 3가지 언어들이 있습니다.

HTML, CSS, Javascript입니다.

예전에는 HTML과 기본적인 CSS로 개발을 했습니다.

그 후 자바스크립트의 등장으로 웹 개발의 시동을 걸었다고 할 수 있습니다.

하지만 이를 위해서는 기본적으로 브라우저의 역사를 알 필요가 있습니다.

 

하지만 너무 자세히 들어가면 내용이 방대해질 수 있으므로,

가볍게 정리하자면, 브라우저의 발전에 따라 자바스크립트가 개발되었고,

그 후 여러 브라우저 개발사 혹은 개발자들은 자신들만의 언어를 브라우저에 장착하기 시작했습니다.

하지만 이는 브라우저에 따라 다르게 혹은 동작하지 않는 결과를 초래하였고,

끝내 ECMA스크립트가 등장하였습니다. 이는 또 다른 언어가 아닌 자바스크립트를 기본으로 규격, 규율을 정하여,

여러 브라우저에서도 큰 차이 없이 동일한 작업을 수행할 수 있도록 도와주었습니다.

 

하지만 당시 자바스크립트로 DOM에 접근하여 태그들을 컨트롤하는 것은 꽤나 불편한 일이었습니다.

그리고 이러한 작업을 줄이고 쉽게 해 줄 수 있는 여러 라이브러리들이 출현하게 되었고, 그중 유명한 것이 JQuery라고 할 수 있습니다.

(예전에도 언급하였지만 현시점에서 JQeury는 할 줄 안다면 좋겠지만, 거의 필요가 없습니다.

당연히 회사에서 JQuery를 사용하거나, JQeury로 개발된 예전 프로그램들을 관리하게 된다면 사용할 수밖에 없지만,

그렇지 않다면 크게 배울 이유는 없지 않을까 싶습니다.)

 

하지만 후에 여러 문제점들 혹은 개선사항들이 발견되기 시작합니다.

 

1. JQuery가 너무 무거웠습니다.

2. 유저의 조그마한 Interact에도 브라우저가 전체 리로드 되어야 했습니다.

이는 Single Page Application으로 발전되기 시작하였고 또한 컴포넌트들을 분할하여 각각 따로 동작할 수 있는 방법을 강구하게 하였습니다. 예를 들어 컴포넌트들이 분할되어 동작하지 못한다면, 유튜브에서 동영상을 보다가 좋아요 버튼을 누르면 페이지 전체가 리로드 되어

비디오가 처음부터 시작되는 것과 같습니다.

 

그리고 이러한 단점들을 보안할 수 있는 라이브러리인 리액트가 등장하게 되었습니다.

 

 

2. 리액트의 등장

 

앞서 말한 여러 단점들의 보안을 위해 리액트가 등장하였습니다.

리액트는 기본적으로 SPA를 지원하며, 컴포넌트들 분할하여 관리할 수 있습니다.

또한 이러한 컴포넌트들은 재사용될 수 있어 코딩의 시간과 번거로움을 줄여줍니다.

 

하지만 그다음 문제가 슬슬 등장하기 시작합니다.

그중 하나는 CSR 즉 클라이언트 사이드 렌더링이었습니다.

 

CSR이 무엇인지 짧게 알아보겠습니다.

 

CSR은 클라이언트, 즉 유저 쪽에서 우리가 작성한 코드를 다운로드하고 리액트가 렌더링 하여 결과적으로 유저에게 보여줍니다.

이는 대략 크게 2가지의 문제가 존재합니다.

 

1. 인터넷 사용량이 증가하고, 사용인원이 증가함에 따라 홈페이지를 구글과 같은 포털에 더 쉽고 자주 노출시켜, 유저들에게

보여줄 필요가 생겼습니다. 이는 끝내 검색엔진에 의해 이루어지는데, CSR이 경우 유저가 홈페이지를 리로드 하는 과정 중 검색엔진은

사실상 아무런 데이터도 받지 못하게 됩니다. 그렇다면 이는 당연히 검색엔진 사용에 불리하게 작용합니다.

 

2. 인터넷 속도입니다.

사실상 우리가 이용하는 인터넷의 속도는 워낙 빠르기 때문에 큰 문제는 되지 않을 수 있지만,

검색엔진과 같은 프로그램들에게는 앞서 말한 것처럼 불리할 수 있습니다.

그리고 인터넷이 느리다면 유저는 모든 로딩이 끝날 때까지 아무런 화면도 볼 수 없다는 것입니다.

사실 요즘은 로딩 화면을 구성하거나 혹은 리액트의 Suspense를 이용하여 로딩화면을 더 쉽게 구현할 수 있습니다.

 

그렇다면 이러한 문제들을 해결 혹은 발전시키기 위해서 나온 것이 Next JS입니다.

 

 

3.Next JS의 등장

 

자 드디어 Next JS가 나왔습니다.

 Next JS는 리액트의 프레임워크입니다.

Next JS는 SSR을 기본적으로 지원합니다.

이를 확인하는 방법은 간단합니다. Next JS 환경을 구축하고,

로컬에서 실행시킨 뒤 브라우저에서 개발자 툴을 이용하여 네트워크를 확인하시면 

현재 보시는 홈페이지의 구성요소들이 서버를 통해 들어오는 것을 확인하실 수 있습니다.

 

그리고 또한 페이지를 리로드 할 때 속도를 체감하신다면 얼마나 빠르게 렌더링 되는지 확인하실 수 있습니다.

Next JS는 이미 대부분의 필요한 요소들이 들어가 있기에 별다른 모듈을 또다시 다운로드할 필요가 줄어듭니다.

이는 또한 끝내 로딩 속도를 줄여주게 되는 계기가 됩니다.

 

SSR은 결과적으로 앞서 말한 문제점들을 대부분 개선할 수 있습니다.

또한 Next JS가 지원하는 라우팅은 정말 편하고 직관적입니다.

그리고 결과적으로 여러 기능들이 추가된 리액트라고 생각하시면 되기에, 또 다른 언어를 배우거나 모르는 문법 혹은 기능을 배우는 것이

아닙니다. 이는 조금만 익숙해져도 기본 리액트를 이용하여 개발하시는 것보다 훨씬 쉽고 빠르며 효과적이라는 것을 알게 되실 것입니다.

 

그 외에도 여러 많은 기능 혹은 장점들이 존재합니다. 이는 후에 시간이 된다면 Next JS만 중점적으로 다루어보도록 하겠습니다.

 

 

4. 마치며 

 

웹 개발환경은 하루가 다르게 변화하고 있습니다.

특히 프론트엔드는 말하기 힘들 정도로 새로운 기능, 변화들이 이루어지고 있습니다.

새로운 것에 거부감을 줄이고 흥미를 들이는 것이 개발자가 가져야 할 자질 중 하나이지 않을까 싶습니다.

 

오늘은 이렇게 처음부터 Next JS까지 쉽게, 빠르게 훑어보았습니다.

이는 대략적으로 제가 짧게 요약한 것입니다. 사실은 더 복잡하고 많은 사건들이 있었습니다.

우리가 개발을 할 때 왜 이러한 라이브러리, 프레임워크 혹은 기능들을 사용하는지 대략적으로 알고 사용하는 것은

큰 도움이 됩니다. 이를 위해서 선임 개발자분들이 제게 자주 하던 말이 바닐라로도 한번 만들어봐라라는 것입니다.

예를 들면 슬라이드 기능과 같이 바닐라로 만들기에는 꽤나 시간을 들여야 하는 기능들을 스스로 만들어보는 것입니다.

한번 만들어 보고 나면 왜 모듈 사용이 효율적이고 더 안전할 수 있는지 등등을 알게 될 수 있습니다.

 

오늘도 제 블로그를 방문해 주셔서 감사하고, 즐거운 개발하시기 바랍니다!

 

완벽한 준비란 없다, 완벽한 준비란 영원히 시작하지 않는 것과 같다

Es gibt keine Perfekte Vorbereitung.

Perfekte Vorbereitung ist das Gleiche, wie nie anzufangen.