멋쟁이 사자처럼 프론트엔드 심화과정 4기 - Day 1

멋쟁이 사자처럼 (출처 : 나무위키)

 

 

첫날 프론트엔드 심화과정에 참여한 나는 사실 기대 반, 걱정 반이었다. 

특히 Next.js 라는 녀석은 이름은 많이 들었지만 제대로 파고 들면서 학습해본 적이 없어서 더욱 그랬다.

역시나 첫 수업부터 쉽지 않았지만, 정리를 해보면서 기록으로 남기려고 한다.

 

1. 왜 Next.js를 배워야 하는가?

항상 어떤 프레임워크나 라이브러리를 고르기 전에 응당 해야하는 질문이었다고 생각한다.

그렇지만 이전에 내가 React를 선택했을때에는 지인의 추천, 그리고 사용하다보니 편해서가 주된 이유였다.

그래서 편했다는 이유 외에 굳이 왜 ? 라는 질문에는 현재도 대답하기 힘들다.

그렇지만 이번 멋쟁이 사자처럼 프론트엔드 심화과정은 왜 Next.js를 배워야 하는지 부터 수업을 진행했고, 그에 대한 이유를 어느정도 이해하게 되었다.

 

처음에 웹 기술은 단순한 HTML과 CSS로 이루어진 정적 웹 페이지(Static Web Page)였다고 한다. 

 

정적 웹 페이지란, 쉽게 말하면 문서에 저장된 그대로 사용자에게 전달되는 웹 페이지이다.

 

그게 전부였던 시절은 어땠을까? 하고 궁금증이 생기긴 하지만, 알아보고 싶지는 않다. 너무 괴로울 것 같아서.

여튼 그러다 JavaScript과 Ajax의 등장으로 동적인 웹(Dynamic Web Page)이 가능해졌고, 웹의 모습이 완전이 바뀌었다고 한다.

 

동적 웹 페이지는, 쉽게 말하면 사용자의 요청이나 상황에 따라서 실시간으로 내용이 달라지는 웹 페이지이다.

 

특히, SPA(Single Page Application)이 유행하면서 웹 사이트가 하나의 페이지로 동작하게 되었다. 쉽게 얘기하면, 동적 웹 페이지를 한 단계 더 발전시킨 방식이라고도 할 수 있을 것 같다.

 

SPA는 처음에 한번 로딩된 후 페이지 전체를 다시 불러오지 않고도, 필요한 부분만 동적으로 변경하면서 작동하는 웹 어플리케이션이다.

 

사실 이때까지 내가 만드는게 SPA인지도 모르고 계속 만들어오면서, 이 용어를 볼때마다 이건 어떻게 만드는걸까? 또 뭘까? 이렇게 생각했었는데 개념을 확실하게 짚고 넘어가는 것 같아서 좋은 것 같다.

 

여튼 이후에 Fat Client, Full-Stack, SSR(Server Side Rendering)까지 개념이 쏟아져 나왔고, SEO나 성능관리 등 다양한 요구가 생겨났다. 바로 여기서 Next.js가 등장하게 되었다고 한다. 이 요구들을 만족시키기 위해서.

 

이전에는 단순히 React의 한계를 극복하기 위한 프레임워크 정도로만 생각하고 있었는데, 생각보다 필요로 의해서 탄생한 프레임워크라는 사실이 흥미로웠다.

 

수업 중 더 흥미로운 부분이 있었는데, 그것은 아키텍처의 개념이었다. 키오스크, 요리사, 농부라는 비유를 들어주셨는데, 키오스크는 사용자와의 입출력(프론트엔드), 요리사는 실제 업무 처리(비즈니스 로직), 농부는 데이터를 관리(DB) 한다는 설명이 이해를 돕기에 정말 좋았었다. 그래서 나중에 프로젝트를 진행할 때 어떻게 구조를 잡아야 할지 조금씩 그림이 그려지는 것 같았다.

 

또한, MVC 패턴, MVVM, Flux 등과 같은 아키텍처적 접근도 배웠는데, 항상 공고에서 봤던 내용들이었지만 제대로 모르고 있었던 나를 보면서 정말 반성을 많이 했다..

 

MVC  패턴이란?

mvc 패턴이란 간단히 말해, 어플리케이션의 구조를 Model, View, Controller 라는 세 가지 영역으로 나누어서 관리하는 설계 방법이다.

• Model (모델)
  • 데이터나 상태를 관리하는 부분이다.
  • ex) 사용자 정보, 데이터베이스에 저장된 상품 정보임
• View (뷰)
  • 사용자에게 보여지는 화면, 즉 UI를 담당하는 부분이다.
  • ex) 웹페이지, 버튼, 입력 폼 등 사용자와 직접 상호작용 하는 부분임
• Controlloer (컨트롤러)
  • 사용자의 입력이나 요청을 받아서 Model 과 View 사이를 연결하고 처리하는 역할을 한다. 
  • ex) 로그인 버튼 클릭 시 사용자의 입력을 받아 Model을 통해 로그인 처리를 한 뒤, 결과를 View에 전달함

MVVM 패턴이란?

mvvm 패턴이란 데이터와 화면의 연결을 강조하는 양방향 데이터 흐름 패턴이다.

• Model (모델)
  • 데이터 및 비즈니스 로직을 관리한다.
  • ex) 서버에서 받아온 사용자 정보, DB와의 통신 등
• View (뷰)
  • 사용자에게 보여지는 화면(UI)을 담당하는 부분이다.
  • ex) 입력 폼, 버튼 등
• ViewModel (뷰모델)
  • Model 과 View를 연결하는 중간자이다.
  • View 가 사용할 데이터를 가공하거나 준비하고, 사용자 입력을 받아서 Model에 반영한다.

Flux 패턴이란?

Flux 패턴은 페이스북에서 제안한, 데이터 흐름이 단방향으로만 흐르는 단방향 데이터 흐름 패턴이다.

• Action (액션)
  • 사용자가 한 행동이나, 이벤트 발생 시 일어나는 일종의 메시지이다.
  • ex) "로그인 버튼 클릭", "상품 장바구니 담기"
• Dispatcher (디스패처)
  • Action 을 받아서 Store 에 전달해주는 중앙 관리자이다.
• Store (스토어)
  • 데이터를 관리하고 상태 변화를 담당한다.
  • Action 을 받아 상태를 업데이트한 후 View 에 전달한다.
• View (뷰)
  • 사용자에게 UI를 제공하고 Store의 데이터를 기반으로 화면을 보여준다.

그런데 수업중에 강사님이 Facebook에서 Flux 패턴을 발표하면서 AngularJS 의 MVVM 패턴을 엄청 비판했다고 하셨는데, 그 이유는 양방향 데이터 바인딩으로 인한 복잡성과, 상태관리의 어려움 때문이라고 했다.

 

우선 데이터 바인딩은 화면에 보이는 데이터(UI) 와 실제 데이터(상태)를 서로 연결시켜주는 기능이라고 할 수 있을 것 같다.

 

그런데 MVVM은 양방향 바인딩으로 인해 데이터 흐름이 여러 방향으로 일어나서 상태가 바뀔 때 어디서, 왜 바뀌었는지 추적하기가 어렵고, 데이터와 UI가 서로 강하게 결합되어 복잡해지면 디버깅과 유지보수가 힘들어 예측하기 어려운 오류들이 많이 발생할 수 있다고 했다.

 

그러나 Flux는 데이터 흐름을 단방향으로만 제한하여 상태 변화를 명확하고 예측 가능하게 관리할 수 있고, 어디서 문제가 발생했는지 추적하고 디버깅하기 쉽다는 장점이 있다고 했다. 

 

나는 몰랐지만, React의 상태관리 라이브러리를 사용하다 보니까 단방향 데이터 바인딩을 사용하고 있었다.

그래서 MVVM 패턴을 이용하여 구현해보진 않았지만, 말만 들어도 불편할 것 같다는 생각을 많이 했다.

아마 그래서 지금 React가 주류가 된 이유가 아닐까? 라는 생각이 들었다.

 

그래서 결론적으로 Next.js의 필요성을 조금 더 명확히 하자면, React만으로는 SEO 최적화나 성능 최적화, 초기 렌더링 속도 개선 등 여러 문제를 해결하기 어려웠기 때문이다. 특히 서버사이드 렌더링(SSR)을 지원해 검색 엔진이 콘텐츠를 쉽게 인식할 수 있게 도와주고, 초기 로딩 속도를 현저히 줄여 사용자 경험을 높일 수 있었다. 또한 정적인 페이지 생성을 지원하면서도, 필요한 부분만 동적으로 로딩할 수 있는 하이브리드한 구조 덕분에, 프로젝트의 성능을 더욱 정교하게 관리할 수 있다는 장점이 있었다.

 

결국 Next.js는 단지 최신 유행이 아니라, 빠르게 변화하는 프론트엔드 환경에서 복잡한 요구 사항을 효과적으로 해결할 수 있는 강력한 도구였다. 이번 과정을 통해 Next.js를 깊게 이해하고, 앞으로의 프로젝트에서 더욱 확실하게 활용할 수 있기를 기대하면서 오늘 글은 여기까지 작성하도록 해야겠다.