개발 framework 와 Next.js (feat. 인기있는 기술)

웹 프레임워크 web framework 또는 웹 애플리케이션 프레임워크web application framework는 웹 서비스 개발을 위한 프레임워크다. java의 spring, python의 Django, Node.js의 Express, PHP의 Laravel, Ruby의 Ruby on Rails 등이 특히 알려져 있는 상태인거 같다. 웹 프레임워크를 사용하면 빠르게 웹사이트를 구축하는 과정을 진행한다고 한다.? 아직 잘 모르겟다

 

웹 프론트 앤드용 SPA 프레임워크는 AngularJS나 Vue.js 등으로 Javascript 기반이다.

Spring이나 Django, Ruby on Rails의 경우 풀 스택 Full-stack 웹 프레임워크다. 풀 스택은 "모든 분야에 다 능숙한"이라는 의미로, 풀 스택 웹 프레임워크면 웹 개발에 필요한 요소를 모두 갖춘 웹 프레임워크다. 풀 스택 웹 개발자는 프론트엔도와 백엔드 개발이 모두 가능한 개발자를 말한다. 마이크로 프레임워크는 풀 스택 프레임워크가 아닌 것을 말한다. Python의 Flask나 Ruby의 Sinatra 등이 여기에 해당하고 있다.

 

 

2022 가장 인기 있는 기술

자료:https://survey.stackoverflow.co/

2022년은 자바스크립가 10년 연속으로 가장 일반적으로 사용되는 프로그래밍 언어로 선정되었다. 그러나 코딩을 배우는 사람들에게는 HTML/CSS, 자바스크립트 및 파이썬은 코딩을 배우는 사람들에게 가장 인기 있는 언어로 묶여 있다. 코딩을 배우는 사람들은 전문 개발자보다 Python, C++ 및 C를 사용률이 높은 것으로 설문되었으며 전문 개발자에 비해 코딩을 배우는 사람들은 SQL, TypeScript 및 Bash/Shell도 높았다.

 

그리고 2019년 당시 주요 프레임워크 커뮤니티 규모

	Angular	React	Vue.js
Watchers	3,294	6,638	5,923
Stars	49,015	131,181	141,538
Forks	13,224	24,164	20,388
Commit in last month	14,467	11,035	3,022
Contributors	950	1,295	276

뷰에는 많은 수의 관찰자와 스타, 포크가 있었고 이것은 뷰와 리엑트를 비교할 때 사용자와 그 가치 사이에서 인기가 있는 것으로 보인다. 그러나 뷰의 커밋 및 참여자 수는 앤귤러와 리엑트보다 낮았다. 이것은 뷰는 공개소스 커뮤니티에서 주도되는 반면 앤귤러나 리엑트는 구글 및 페이스북 직원의 기여도가 높은 것으로 분석되었다. 이런 통계로 어느 것을 사용할지 결정하는 것은 쉽지 않다. 세가지 프로젝트 모두 개발활동에는 활발히 이뤄지고 있고 앞으로도 진행될 예정이다.

 

학습난이도

angular는 타임스크립트 및 MVC 관련 개념을 같이 알아야 한다. 배우는 데는 아무례도 시간이 걸린다. 프론트엔드 전체 동작 방식을 이해하게되면 개발에 큰 도움이된다.

React는 약 1시간만에 사용환경을 설정할 수 있는 Getting Started 가이드를 제공한다. 일반적인 문제에 해답은 StackOverflow에 등록되 있다. 리엑트는 완전한 프레임워크가 아니어서 고급기능을 위해서는 서드파티 라이브러리를 사용한다. 이로써 핵심 프레임워크 학습난이도가 높지 않으나 추가기능을 수행하는 경로에 따라 달라지게된다.

Vue.js는 위 두가지보다 쉽다. 컴포넌트 사용과 같은 기능이 많은 부분 비슷하다. 그러나 Vue.js의 단순성과 유연성은 장단점이 있어서 디버깅 및 테스트에서 문제로 다가올 수 있다.

React, Vue.js, Angular의 NPM 다운로드 현황(2019년 7월)

 

마이크레이션

선택한 프레임워크로 작업할 때 프레임워크의 업데이트가 애플리케이션에 영향을 미치는 것을 고민해 볼 필요가 있다. 한 버전에서 다른 버전으로 업데이트할 때 대부분의 경우 많은 문제점을 겪지는 않겠지만 일부 업데이트는 중대한 변화가 포함될 수 있고 호환성을 유지해 구조변경이 필요한 경우가 있어서 프레임워크 업데이트는 중요하게 다뤄진다.

 

앤귤러는 6개월마다 주요 업데이트를 계획하고 주요 API가 사용 중지되기 전에 6개월의 유예기간을 두기 때문에 필요한 경우 변경을 수행하는데 두 번의 릴리스 주기(1년)가 소요된다.

앤귤러 VS 리엑트와 관련해 메타(페이스북)는 트위터 및 에어비엔비 같은 거대기업이 리엑트를 사용하므로 안정성이 가장 중요하다고 말한다. 버전을 통한 업그레이드는 일반적으로 리엑트가 가장 쉽다. 리엑트-코드모드 react-codemod와 같은 스크립트를 사용하면 마이그레이션 하는데 큰 도움이 된다. 마이그레이션을 위한 FAQ 섹션에서 Vue.js는 1.x에서 2로 마이그레이션 할 경우 aPI의 90%가 동일하다고 언급한다. Vue.js 콘솔에서 애플리케이션의 상태를 평가하는 Migration Helper Tool도 활용해볼 수 있다.

 

시사점

프론트엔드 생태계는 역동적이며 빠르게 변하고 있다. 개발자들이 새로운 프레임워크에 익숙해지는데 시간이 걸리기는 하지만 프레임워크 선택에 큰 변동은 없을 것으로 예상되고 있다. 모든 프레임워크는 그것들만의 특징이 있다. 프로젝트가 규모가 있고 타입스크립트를 선호한다면 Angular, 큰 생태계와 유연성은 React, 쉽고 가벼운것은 Vue.js로 접근하면 유효해 보인다.

 

그리고

 

Next.js는 리엑트의 프레임워크다.

Next.js는 Vercel에서 만든 SSR, SEO 등을 하기 위한 React Framework다.

사용자가 초기에 Server에 페이지 접속을 요청한 경우 SSR방식으로 렌더링 될 HTML을 보내줌으로써 SEO 최적화가 되어 검색 엔진에 노출이 되고 이후에 사용자가 페이지와 상호작용을 할 때는 CSR 방식으로 브라우저에서 처리하면서 SPA의 장점을 또한 가져간다.

 

단점은 번들링된 JS 파일의 크기가 크기 때문에 사용자가 웹 사이트를 요청했을 때 사용자에게 실제 보여지는 타이밍이 늦어진다. 요청한 파일의 크기가 클수록 다운받는 시간이 증가하게 된다.