Frontend) React와 Next.JS

막상 새로운 언어나 기술을 배울 때 몰랐지만 공부를 차근차근하면서 느낀 점이 있다.

개발은 선택의 연속이다..라고

그래서 팀의 상황과 프로젝트의 방향성에 맞게 프레임워크나 라이브러리를 선택해서 제일 효율적이고 편한 방법으로 개발을 해야 한다. 

현재까지 공부한 React와 Next.js의 차이를 이해하고 앞으로의 선택을 할 때 도움이 되고자 작성하였다.

 

React?

React는 Meta(페이스북)이 개발한 React는 오픈 소스이며 JavaScript 라이브러리다. 컴포넌트를 활용하여 UI를 쉽고 효율적으로 만들 수 있다.  (https://react.dev/)

 

React = Javascript Library

라이브러리(Library)란?

- 공통으로 사용될 수 있는 특정한 기능들을 모듈화한 것.

- 전체적인 틀이 아닌 하나의 기능만을 도구처럼 제공.

- 도구를 사용하는 주체는 개발자로, 우리가 구조에 관한 모든 결정.

개발자가 원하는 입맛대로 사용하고 구축하며, 라이브러리는 아무런 결정을 내리지 않는다.

 

 

리액트는 SPA, CSR, Virtual DOM 등 몇 가지 대표적인 특징들을 가지고 있다. 

 

SPA(Single Page Application)

단 하나의 페이지를 통해 유저의 요청을 처리해주는 방식이다.

• 필요한 모든 정적 리소스를 최초에 한 번 다운로드한다.
• 페이지간 이동 시, 페이지 갱신에 필요한 데이터만을 JSON으로 전달받아 페이지를 갱신하므로 전체적인 트래픽을 감소할 수 있다.
• 전체 페이지를 다시 렌더링 하지 않고 변경되는 부분만 갱신하기 때문에 새로고침이 발생하지 않는다.
• 속도, 사용성, 반응성의 향상으로 모바일 웹에 최적화 되어있다

SPA의 단점

• 초기 구동 속도가 느림
• SEO(검색엔진 최적화) 문제가 존재

서버 렌더링 방식(SSR)이 아닌 자바스크립트 기반 비동기 모델(CSR)이기 때문에 처음에 받은 웹페이지의 소스코드가 거의 비어있어 검색이 잘 안 될 수 있다.

하지만, SPA는 웹보다는 앱에 적합한 기술이고 React에는 서버 렌더링(SSR)을 지원하는 SEO 기술이 이미 존재한다.

 

CSR(Client Side Rendring) : 브라우저에서 렌더링 작업

리액트는 SPA 웹 프레임워크로 하나의 페이지로만 웹 애플리케이션을 구성한다고 했는데, 어떻게 이게 가능할까?

이를 위해 사용되는 방식이 바로 CSR이다.

 

Client Side Rendring은 렌더링(화면에 요소들을 보여주는 것)이 클라이언트에서 일어난다.

렌더링에 필요한 리소스들 html / css / javaScript 와 리액트 라이브러리까지 초기 요청 시 모두 보내준다.

 

리액트를 통해 만들어진 웹페이지는 컴포넌트들로 화면이 구성된다.

 

클라이언트는 초기에 서버로부터 필요한 코드들을 모두 받아놓은 다음, 유저 측에서 이벤트가 발생하면 하나의 페이지에서 컴포넌트들을 조작하며 동적으로 화면을 렌더링 하며 원하는 화면을 구성한다.

 

 

정리:

리액트는 Client Side Rendering을 통해 하나의 페이지에서 유저의 요청에 따라 컴포넌트들을 재구성하여 화면을 렌더링 하는 SPA 방식을 사용한다.

 

이러한 리액트의 방식에는 화면 깜빡임이 없이 빠르고, 서버로부터 리소스 요청을 처음에만 하기 때문에 서버 측에서도 요청처리에 대한 부담이 적다는 장점이 있지만,

 

초기 속도가 느리며 리소스 낭비가 이루어질 수도 있다는 단점이 존재한다. 특정 링크에 필요한 리소스를 포함한 모든 리소스들을 모두 서버 측에서 초기에 보내주었는데, 유저가 그 링크에 접속하지 않을 수도 있기 때문이다.

 

 

 

 

Next.JS?

Next.JS는 Vercel사에서 만든 Next.js는 오픈 소스이고, JavaScript 프레임워크이며, React를 사용하여 사용자 친화적인 웹 애플리케이션 및 정적 웹 사이트를 빠르게 개발할 수 있다. 

SSR 프레임워크로 풀스택 웹 애플리케이션을 지원한다. (https://nextjs.org/)

 

Next.J = React Framework

프레임워크( Framework )란?

- 일정한 형태를 가지고 다양한 형태의 결과물을 만드는 것.

- 하나의 기능이 아닌 전체적인 틀을 제공.

- 개발자의 코드를 사용하여 우리를 위해 많은 일들을 대신해 줌.

개발자가 제시되어 있는 규칙을 지켜야 하며, 규칙만 지키면 대신 결정, 구축해 준다.

 

 

SSR(Server Side Rendering) : 서버에서 렌더링 작업

SSR은 Server Side Rendering의 약자로 서버 측에서 즉시 렌더링 가능하게끔 가공한 html 파일을 만들어 브라우저에게 보내고, 브라우저는 이를 다운로드하여 즉각 화면에 렌더링 할 수 있는 방식이다.

 

Code Splitting 기술을 통해 초기 로드 시 필요한 최소한의 코드만 다운로드하여 실행하기 때문에, 앱의 초기 로딩 속도를 개선함과 동시에 React보다 가볍게 동작할 수 있다.

SEO(검색엔진 최적화) 또한 훌륭하다

 

Next.js는 풀스택 프레임워크로, 백엔드 개발 또한 가능하다.

뿐만 아니라 프런트엔드와 백엔드 개발에서 필요한 잡다한 설정들에 드는 수고를 크게 줄여준다.

리액트의 라우팅, 바벨, 웹팩 등의 설정부터 백엔드의 미들웨어 설정, SEO, SSR 등 많을 것을 Next.js가 해결해 준다.

 

 

 

 

Next.js의 장점

빠른 개발 :

Next.js는 많은 내장 Next JS 컴포넌트, 라이브러리 및 호환성을 제공하여 단시간에 MVP를 개발할 수 있습니다. 이를 통해 빠른 사용자 리뷰 또는 피드백을 받고 적절한 변경을 할 수 있습니다.

 

향상된 사용자 경험:

Next.js를 사용하면 비즈니스 목표와 일치하는 요구 사항에 따라 프런트엔드를 만들 수 있습니다. 놀라운 독특한 사용자 경험을 제공합니다.

 

SEO 친화적:

Next.js를 사용하면 더 빠르고 가벼운 정적 웹 사이트를 개발할 수 있으므로 SEO 친화적입니다. 따라서 검색 엔진의 첫 페이지에 웹 사이트를 순위 매길 가능성이 높습니다.

 

매우 빠른 렌더링:

웹 사이트를 다시 로드하여 수행한 모든 변경 사항을 볼 수 있습니다. 구성 요소가 실시간으로 렌더링 되어 변경 사항을 추적하기 쉽습니다.

 

내장 CSS:

JavaScript 파일에서 CSS 스타일을 Next.js로 가져와서 더 빠르게 렌더링 할 수 있습니다.

 

이미지 최적화:

이미지는 최적의 형식인 WebP로 스케일링되어 제공됩니다. 그들은 자동으로 더 작은 뷰포트에 맞게 조정됩니다.

 

ESLint 지원:

Next.js를 사용하면 개발자들이 "scripts": { "lint": "next lint" }와 같이 ESLint를 쉽게 사용할 수 있습니다.

 

 

Next.js의 단점

 

라우팅:

파일 시스템인 Next.js는 일부 프로젝트에는 부족합니다. 개발자는 동적 경로를 생성하기 위해 Node.js 도구를 사용하는 데 전문 지식이 필요합니다.

 

커뮤니티 지원:

리액트에 비해 개발자 커뮤니티가 작습니다. 그러나 이는 날이 갈수록 증가하고 있습니다. Next.js에 경험이 있는 몇몇 개발자를 찾을 수 있습니다. 따라서 Next.js 개발자에 대한 수요가 증가하고 있으며, 개발 산업에서 돋보이려는 사람들에게 기회를 제공합니다.

 

 

 

REACT

 

리액트의 장점

개발 용이성:

리액트 개발자들이 자바스크립트를 알고 있기 때문에 더 적은 코드베이스를 사용하여 동적 앱을 만들 수 있습니다.

 

개발자 커뮤니티:

리액트는 거대한 개발자 커뮤니티를 가지고 있습니다. 따라서 그들은 빠른 시간 내에 학습을 위한 지원 및 자료를 제공합니다.

 

리액트 컴포넌트:

리액트 컴포넌트는 사용 가능합니다. 이들은 특성을 유지하면서 많은 페이지를 반복적으로 로드할 수 있게 해 줍니다. 구성 요소 코드를 수정한 후 모든 페이지에서 변경 사항을 볼 수 있습니다. 사용자 정의: 리덕스와 같은 다른 도구를 사용하여 기능을 확장할 수 있는 기능 세트가 있습니다.

 

 

 

리액트의 단점

 

시작점:

리액트는 사용자 인터페이스 개발 라이브러리이므로 최대한의 잠재력을 이끌어 내기 위해 다른 도구가 필요합니다.

 

오래된 문서:

리액트의 개발 수명이 짧기 때문에 문서가 빠르게 오래되어 버립니다. 활성 커뮤니티는 의심이나 질문에 빠르게 응답하지만, 이는 해당 측면의 정기적인 재학습을 의미합니다.