프레임워크

1. React

   React란 "지속적으로 데이터가 변화하는 대규모 애플리케이션 구축", 오로지 VIEW만 담당하는 라이브러리

   • 언어 : JavaScript & TypeScript
   • 장점
     • 자바스크립트의 문법을 그대로 사용함
     • 컴포넌트를 비교적 더 간단하고 단순하게 정의 가능함
     • 성능이 뛰어난 garbage collector, 메모리 관리 기능 제공
     • UI 수정과 재사용성이 좋으며, 코드 가독성을 높일 수 있다.
     • 사용자가 많고, 역시 Facebook에서 만들었다보니 확실히 커뮤니티나 자료가 굉장히 방대하다.
     • Component를 사용해서 효율적으로 재사용이 가능하고 높고 유지보수가 용이

       Component는 UI를 구성하는 개별적인 뷰 단위로 전체 앱은 각 Component들이 결합해서 만들어 지게 되는데 무엇보다 각 Component들은 앱의 다른 부분, 
       또는 다른 앱에서 쉽게 재사용이 가능하다. Redux의 창시자이며, 현재는 Facebook React Core팀의 일원인 Dan Abramov는 
       React의 목표가 성능보다는 유지가능한 앱을 만드는 것에 있다고 설명한다.

     • 가상 돔 (Virtual DOM)

       가상 돔이란 렌더링 과정에서 리플로우와 리페인트가 자주 수행되는 문제를 해결하기 위해 화면에 표시되는 DOM과 동일한 DOM을 메모리상에 만들고 
       DOM 조작이 발생하면 메모리상에 생성한 가상 돔에 모든 연산을 수행한 후, 실제 DOM을 갱신하여 리플로우/리페인트 연산을 최소화 하는 것이다.

     • 단방향 데이터 바인딩

       단방향 데이터 바인딩은 단 하나의 Watcher가 자바스크립트의 데이터 갱신을 감지하여 사용자의 UI 데이터를 갱신합니다. 
       사용자가 UI를 통해 자바스크립트의 데이터를 갱신할 때는, 이벤트를 통해 갱신하게 됩니다. 
       이처럼 단방향 데이터 바인딩은 하나의 Watcher를 사용하기 때문에 양방향 데이터 바인딩이 가지는 성능적인 이슈를 해결하고 더 확실하게 데이터를 추적할 수 있게 해줍니다.

     • Hook

       함수 컴포넌트에서 React state와 생명주기 기능(lifecycle features)을 “연동(hook into)“할 수 있게 해주는 함수입니다. Hook은 class 안에서는 동작하지 않습니다. 대신 class 없이 React를 사용할 수 있게 해주는 것입니다.

   • 단점
     • (치명적) 로딩시간이 길.
     • 데이터 모델링, 라우팅, Ajax 등 기능이 지원 안된다.
     • IE8 이하 버전은 지원하지 않는다.
     • 프레임워크의 MVC 와 비교하였을때 V(View)만을 관리한다.

       View 부분만을 관리하기 때문에 다른 부분은 써드파티 라이브러리(Third party library, 패키지)를 이용하거나 직접 구현해야한다.

2. Angular

   Angular란 확장가능한 컴포넌트 구조로 웹 애플리케이션을 만드는 프레임워크입니다.
   라우팅, 폼 관리, 클라이언트-서버 통신 등 웹 개발에 필요한 라이브러리를 조화롭게 통합한 모음집입니다.
   완전한 프레임 워크로, 프로젝트의 생성, 테스트, 빌드, 배포를 위한 모든 기능을 제공합니다.

   • 언어 : TypeScript
   • 장점
     • Angular CLI를 제공하여 개발환경을 지원합니다. 파일 생성, 빌드, 패키징, 라이트 서버 기능 등 개발에 필요한 거의 모든 기능을 자체적으로 제공합니다.
     • 모듈과 컴포넌트 기반으로 동작합니다.
     • 유지 관리가 용이하다.

       코드 유지 관리 성을 높이기 위해 TypeScript를 사용하고, (일단은) 당분간은 안정적으로 지속적인 기술 지원이 이루어지고 있기 때문에 유지 측면에서 장점이 있습니다.

     • Angular-cli

       프로젝트 생성을 도와줍니다. 명령어 하나로 프로젝트를 생성하고 알아서 모든 의존성 패키지를 함께 설치해줍니다. 
       모듈/컴포넌트/디렉티브/서비스 등을 생성하는 역할 또한 Angular cli로 할 수 있습니다.
       라이트 한 서버를 제공합니다. 별다른 설정에 대한 노력 없이 간단하게 서버를 실행하여 개발을 진행할 수 있습니다. 코드를 수정하면 즉시 변경사항이 반영되어 웹페이지에서 렌더링 됩니다. 
       Node.js의 nodemon이나 기존 client의 livereload와 비슷하게 생각하면 될 것 같습니다.
       기본적으로 Webpack을 내장하고 있으며 알아서 빌드까지 수행합니다. Typescript를 컴파일하고 자바스크립트를 압축하는 것까지 자동으로 해주며, (저와 같이) 웹팩에 대한 지식이 전혀 없어도 사용 가능합니다.
       테스트도 할 수 있어요!

     • 양방향 데이터 바인딩

       모델 상테는 해당 UI 요소의 모든 변경 사항을 반영합니다. 반대로 UI 상태는 모델 상태의 모든 변경 사항을 바인딩합니다.
       => 이 기능을 통해 프레임워크에서 컨트롤러를 통해 DOM을 모델 데이터에 연결 할 수 있습니다.

   • 단점
     • 학습 곡선

       앵귤러는 "내가 너희를 위해 모든 것을 제공 하노라!" 라는 정신으로 무장한 건지, 정말 소소한 것들에 대해서까지 많은 것을 제공합니다. 애초에 시작 시점에 배워야 하는 것들이 많긴 합니다.
       처음 접근을 위해서 뭔가 공부해야 할 사항이 늘어나는 것 같습니다.
       Angular CLI, Typescript, Module, Component, RxJS, Form, Router, Pipe, directive...
       
       초반에 접근하기 매우 어려운 프레임 워크이다.

     • 용량

       프레임워크답게, 기본적으로 앵귤러 프로젝트를 생성하면 기본 폴더 용량이 어마어마합니다. (대부분의 용량은  node_modules가 차지합니다)
       물론 빌드 후 결과물은 작습니다만, 어쨌든 처음 접근을 위해서는 꽤나 많은 자원을 필요로 합니다.

     • 업데이트 관리

       Angular는 업데이트 주기가 빠르고 업데이트에 따라 코드를 변경해야 할 수도 있습니다.

3. Vue

   Vue( view 와 마찬가지로 /vjuː/ 라고 발음합니다 )는 사용자 인터페이스를 구축하기 위한 JavaScript 프레임워크입니다. 
   표준 HTML, CSS 및 JavaScript를 기반으로 구축되며, 단순한 것 부터 복잡한 것 까지 사용자 인터페이스를 효율적으로 개발할 수 있는 컴포넌트 기반 프로그래밍 모델을 제공합니다.

   • 언어 : JavaScript
   • 장점
     • 학습 곡선 : 매우 쉽다.
     • 속도가 빠르다
     • 가상DOM을 사용하여 렌더링 성능 향상 : React와 동일
   • 단점
     • 만들어진지 얼마 되지 않아서 커뮤니티가 작다.
     • 성능 이슈

       가상 돔 기반의 성능 최적화는 대부분의 상황에서 효과적이지만, 매우 큰 규모의 애플리케이션에서는 성능에 제약이 있을 수 있다.

4. Next

   Next.js는 React 기반의 웹 프레임워크로, 웹 애플리케이션 및 웹 사이트를 개발하기 위한 도구와 기능을 제공한다.
   특히 서버 사이드 렌더링 (SSR) 및 정적 사이트 생성 (SSG)과 같은 고급 기능을 지원하여 성능 최적화 및 검색 엔진 최적화 (SEO)를 향상시키는 데 도움이 된다

   • 언어 : TypeScript
   • 장점
     • 서버 사이드 렌더링(SSR) 및 정적 사이트 생성(SSG) 지원

       성능 향상과 검색 엔진 최적화(SEO)를 위한 SSR 및 SSG를 쉽게 구현할 수 있다.

     • 간편한 라우팅 : 파일 시스템 기반의 라우팅 구조로 쉽게 페이지를 생성하고 관리할 수 있습니다.
     • 데이터 가져오기

       getServerSideProps 또는 getStaticProps와 같은 메서드를 사용하여 데이터를 가져와 페이지에 주입할 수 있다. 
       이는 서버 사이드 렌더링 및 정적 사이트 생성과 함께 사용된다.

   • 단점
     • 초기 학습 곡선

       React와 함께 사용되므로 React에 익숙하지 않은 개발자에게는 초기 학습 곡선이 존재할 수 있다.

     • 복잡한 설정

       프로젝트의 규모가 커질수록 구성 및 설정이 복잡해질 수 있다.

     • 서버 요구사항

       SSR을 사용할 때 서버 리소스가 필요하므로 서버 비용이 증가할 수 있다.

     • 데이터 가져오기 복잡성

       데이터 가져오기 메서드를 사용할 때 몇 가지 복잡성이 발생할 수 있으며, 특히 초기 설정이나 오류 처리 관점에서 주의가 필요하다.

     • 프레임워크 종속성

       Next.js는 React에 의존하므로 React와 함께 업데이트 및 유지 관리되어야 한다.

Angular, React, Vue 중 선택애야 하는 경우

■ 앵귤러를 선택해야 하는 경우

• 기능이 풍부하고 규모가 큰 애플리케이션을 개발할 때
• 믿을 수 있고 확장 가능한 프레임워크가 필요할 때
• 채팅 앱이나 메시징 앱과 같은 실시간 애플리케이션을 개발할 때
• 장기프로젝트이며, 투자규모도 상당한 네이티브 앱이나 하이브리드 앱, 또는 웹앱을 개발할 때
• 타입스크립트(TypeScript)로 코딩해야 할 때
• 객체지향(Object-oriented)프로그래밍을 해야 할 때

■ 리액트를 선택해야 하는 경우

• 빠른 일정 안에 엔터프라이즈 수준의 가벼우면서도 현대적인 애플리케이션을 개발해야 할 때
• 웹사이트 개발 솔루션을 안전하게 보호할 수 있는 유연한 프레임워크가 필요할 때
• 크로스 플랫폼(cross-platform) 애플리케이션이나 싱글 페이지 애플리케이션(SPA)을 개발할 때
• 기존의 앱에서 기능성을 확장할 때
• 강력한 커뮤니티 지원과 솔루션이 필요할 때

■ 뷰를 선택해야 하는 경우

• 시장 진입 단계에서 필요한 프레임워크를 선택할 때
• 작고 가벼운 애플리케이션을 개발할 때
• 기존의 프로젝트에서 현대적이지만 제한된 리소스를 가진 프레임워크로 마이그레이션을 해야할 때
• 기업이 아니라 사용자 커뮤니티의 지원을 받는 프레임워크를 원할 때

Next 와 React

■ NEXT

• 최고의 서버 측 렌더링 및 정적 웹 사이트 개발 솔루션을 제공한다.
• 다양한 도구와 기능으로 프로젝트를 쉽게 관리할 수 있다.
• 웹 애플리케이션을 만들고 서버 측 렌더링을 수행하는 데 사용된다.
• React 라이브러리를 사용하여 웹 앱용 UI 및 페이지를 빌드하는 데 사용되는 프레임워크이다.

■ REACT

• SPA용 UI를 개발하는 데 가장 적합한 선택이다.
• 모바일 및 웹 앱 레이어와 함께 작동한다.
• DOM을 향한 렌더링에 중점을 둔다.
• 클라이언트 측 렌더링을 제공하여 애플리케이션 성능을 향상 시킨다.
• 라이브러리로, UI 구성 요소 부분인 프레임워크의 일부분이다.

⇒ Next.js는 개발 프로세스를 최소화하기 위한 다양한 도구와 기능을 제공하는 반면 React.js는 모바일 및 웹 애플리케이션의 프런트 엔드 개발을 위한 더 나은 리소스를 제공합니다.

내가 선택한 프레임 워크

• Angular
  학습에 어려움이 있어 빠른 기간 내에 체득하기 어려워 순위에서 가장 후순위
  또한 채팅 앱이나 메시징 앱을 개발을 하는 것이 아님.
• Vue
  학습에 있어서 귀운 모습을 보이지만, 페오펫의 애플리케이션은 점점 커져갈 것이기 때문에 작고 가벼운 애플리케이션과 맞지 않다고 생각이 듦
  규모가 커질수록 가상 돔 + 양방향 데이터 바인딩에 의해 성능이 크게 저하될 수 있음.

해당 사항을 통해 React와 Next 둘 중 하나로 생각이 좁혀 졌고, 이번에 Next의 새로운 버전인 14가 자세히 조사해 보니 기존 함수는 사용할 수 있게 해놨고, 추가적인 업데이트에 php 처럼 front에서 sql문을 조작할 수 있게 만들어 놔서 논란이 됨.
=> 즉 해당 sql문 조작 부분을 사용하지 않으면 기존 코드를 사용할 수 있으며, 성능도 매우 빨라진 모습을 보여줘 호평을 받고 있음.
그래서 개인적인 생각으로는 오류를 최대한 잡아줄 수 있는 TypeScript와 속도나 성능면에서 많이 개선이 된 NextJs를 쓰는 것이 좋을 것 같다.