[JS] 자바스크립트 프레임워크 종류와 설명

 

웹개발을 시작한다고 했을 때 어디선가 한번씩은 들어본 프로그래밍 언어들이다.

각 언어는 어떤 역할을 하는지 알아보자!

 

1. 자바스크립트란?

 

-HTML이 웹페이지의 프레임을 만드는 언어라고 한다면 웹페이지의 조작과 변경, 이벤트 동작을 만드는데 필요한 프로그래밍 언어이다

-즉 정적 언어인 HTML을 조작해서 이벤트를 추가하고 웹페이지를 움직이게끔 만들어주는 것이 자바스크립트의 역할이다. 

 

사실상 웹페이지를 만들기 위해서는 기본적으로는 HTML, CSS, Java Script만 있으면 기본적인 웹페이지를 만들 수 있다. 

하지만 이렇게만 하면 복잡한 데이터가 들어오거나 서버를 이용하는 사용자가 많아지면 서버가 느리게 동작하는 경우가 많다.

 

 

이러한 불편함으로 인해 자바스크립트 엔진에 대한 필요성이 커져갔다.

*자바스크립트 엔진: 자바스크립트 파일을 컴퓨터가 읽을 수 있도록 변환해주는 역할을 한다.

 

 

2. 자바스크립트 프레임워크

 

자바스크립트 vs 라이브러리 


프레임워크란 쉽게 말하면 프로그램의 기본구조(=뼈대)임
라이브러리는 자주 사용되는 로직을 재사용하기 편리하도록 잘 정리해둔 일련의 기능집합임

프레임워크는 개발자가 원하는 기능 구현에만 집중하여 빠른 속도로 개발을 할 수 있게끔 기본적인 기능만 갖추고 있고 이러한 기본 구조에 여러 기능을 추가하기 위하여 라이브러리를 추가하는 것이다. 

라이브러리는 재사용이 필요한 기능들을 반복적인 코드 작성을 없애기 위해 언제든지 필요한 곳에 호출하여 사용할 수 있게끔 클래스나 function으로 구성되어진 것이

 

*  자바스크립트 프레임워크에는 Vue.js, React, Angular 프레임워크가 대표적이다

 

프레임워크가 자동차 프레임이라면 자동차 바퀴, 헤드라이트, 에어백 등의 다양한 기능은 라이브러리라고 볼 수 있음 

 

 

 

 TypeScript란?

-자바스크립트에 타입을 부여한 언어/ 자바스크립트의 확장된 언어

 

-대규모 애플리케이션을 개발하는 데 자바스크립트가 어렵고 불편하다는 불만에 대응하기 위해 개발

-기존의 자바스크립트 문법을 그대로 사용할 수 있음

-즉 기존의 자바스크립트와 호환이 되는 것은 물론 클래스, 인터페이스 등 객체지향 프로그래밍 패턴을 제공한다. 자바스크립트의 단점을 보완하고 있다고 생각하면 된다.

 

장점

 

-정적타입 언어이기 때문에 컴파일 단계에서 오류를 포착할 수 있어 코드의 가독성을 높이고 컴파일 시 오류를 찾기 때문에 안정적이고 예측할 수 있으며 디버깅이 쉬움

 

 

 

 JS ??? TS??

 

자바스크립트는 동적 타입의 언어이다. 이 말은 런타임 시 타입을 결정해서 적용을 일일이 하는 것인데 이는 오류가 있는지 확인하는 작업이 추가되기 때문에 실행 속도가 오래 걸린다. 하지만 TS는 코드 작성을 할 때 타입을 미리 결정하기 때문에 런타임 때 작업을 줄여서 실행속도가 빠르다.

 

즉 쉽게 말하면 자바스크립트가 동적으로 처리하는 것 때문에 속도가 오래 걸리고 오류메시지가 모호하다는 단점이 많았기 때문에 이러한 단점을 보완한 자바스크립트의 확장된 언어인 TypeScript가 나온 것이다.

 

하지만 TypeScript는 그 자체로  브라우저에서 동작하지 않는다. 따라서 자바스크립트로 변환을 해줘야 한다.

TypeScript파일은 TypeScript 컴파일러(tsc)를 이용하여 자바스크립트 파일로 변환하여 사용해야 한다.

 

 

 

 

Node. js란?

-자바스크립트의 실행환경(=런타임) 

((((-여기서 런타임이란 특정 언어가 구동되는 환경을 말한다. )))

 

-Node.js를 설치하면 브라우저를 키지 않아도 자바스크립트를 컴퓨터에서 실행할 수 있게 된다.

 

-즉 자바스크립트를 웹브라우저로부터 독립시켜 서버 구현을 가능하게 한다. 

  

 

장점

 

-JSON 형식의 데이터를 쉽게 처리할 수 있어 api서버를 만드는 데 용이함

-개발 환경을 구축하는 데 걸리는 시간이 줄어들어 생산성이 매우 높음

-일반적인 서버가 처리하는 방식과 달리 병렬적으로 처리되는 특징을 가지고 있기 때문에 실시간으로 데이터를 보여주는 처리를 할 경우 유용

-코드가 매우 짧고 쉬워서 빠른 개발 기능이 잘되고 작은 데이터를 실시간으로 주고받는 것이 유리하여

실시간 채팅이나 주식 차트 등에 노드를 많이 사용

 

 React.js란?

-자바스크립트 라이브러리의 하나로서 사용자 인터페이스를 만들기 위해 사용됨

 

-즉 html 과 css, js만을 이용해서도 웹페이지를 만들 수 있지만 사용자와 상호작용할 수 있는 동적인 UI를 쉽게 만들기 위하여 리액트를 사용한다. 

 

-UI(=view) 를 여러 컴포넌트로 쪼개서 만들어서 한 페이지 내에서도 여러 각 부분을 독립적인 컴포넌트로 만들고 화면을 구성하여 재사용성이 높다. 코드는 반복해 입력할 필요없이 컴포넌트만 import하여 사용하면 된다는 간편함이 있으며 애플리케이션이 복잡해지더라도 코드의 유지보수 관리가 용이해진다.

(수정하고 싶은 부분이 있으면 그 컴포넌트만 수정하면 된다)

 

-Virtual DOM(가상 돔): 이벤트가 발생할 때마다 가상돔을 만들고 다시 그릴 때마다 실제 DOM과 비교하고 전후 상태를 비교해 변경이 필요한 최소한의 변경사항만 실제 DOM에 반영함으로서 앱의 효율성과 속도를 개선할 수 있음 

 

장점

-재사용성이 높음

-유지보수성이 좋음

-생산성이 좋음 

-거대한 사용자 커뮤니티가 있음 - 페이스북의 지원을 받는 만큼 지속적인 버전 관리와 오류 수정이 많고 사용자가 많아 확장 라이브러리 또한 많음 

-코어 기능 외의 편의 기능을 제공하지 않으므로 타 프레임워크에 비해 독립적인 사용이 가능

 

 

Next.js란?

-리액트를 위해 만든 오픈소스 자바스크립트 웹 프레임워크

 

-리액트에는 없는 서버 사이드렌더링(SSR), 정적 사이트 생성(SSG), 증분 정적 재생성(ISR) 과 같은 다양하고 풍부한 기능을 제공

 

장점

 

-다양한 기능과 라이브러리가 존재

-다양한 환경에서 사용할 수 있음

-비동기적인 작업을 처리할 수 있어 대규모 애플리케이션 개발에 적합

-라우팅, 코드 스플리팅, 자동 코드 번들링 등의 기능을 제공하여 프론트엔드 개발의 대부분 기능을 제공

 

 

 

Node.js ?? Next.js?? 

 

둘 다 자바스크립트로 만들어진 웹 개발 프레임워크와 런타임이다. 

이름이 비슷하지만 둘은 목적과 사용방법이 다르다

 

결론적으로 말하면

Node.js는 자바스크립트 런타임 환경이고 브라우저 밖에서 자바스크립트 코드를 실행할 수 있도록 해준다.

Next.js는 리액트 기반의 서버사이드 렌더링 프레임워크이다. 주로 웹 애플리케이션 개발에 사용이 된다. 

 

Vue.js란?

사용자 인터페이스를 만들기 위한 동적 자바스크립트 프레임워크이다. 

 

-HTML 기반 템플릿 구문이여서 개발한 프론트엔드 파일을 사용자가 볼 수 있게끔 브라우저 화면에 렌더링하는 과정에 템플릿이라는 문법을 사용함. 이 템플릿을 구성하는 문법이 HTML 기반으로 이뤄져 있어 배우기 쉬움

 

 

장점

 

-React, Angular에 비해 배우기 쉽지만 React의 Virtaul Dom, Angular의 데이터 바인딩의 장점을 모두 갖추고 있음

-가볍고 성능이 빠름

-컴포넌트 기반 프레임워크여서 컴포넌트 조합으로 뷰를 구성하여 코드 재사용이 쉬움

 

 

*React ?? Vue?? 

모두 사용자 인터페이스(UI)개발을 위한 프레임워크임

-둘 다 가상돔을 사용하여 생산성이 좋음

 

- React는 라이브러리이고 Vue는 프레임워크이다. 

 

-또한 템플릿 방식으로 관리하는 Vue와 달리 React는 JSX코드로 컴포넌트를 작성하고 컴포넌트의 상태를 변화시키지 않고 관리함

 

 

 

 

기존 서비스에서 점진적인 개선을 원한다면 Vue, 컴포넌트 재사용과 관리의 수월함, 참고할 개발 레퍼런스가 중요하고 대규모 서비스를 운영한다면 React를 선택하는 것이 좋음

 

 

 

정리

JavaScript: 웹페이지를 동적이게 만들어주는 프로그래밍 언어

TypeScript: Js의 확장버전

Node.Js: JavaScript를 실행시킬 수 있는 환경 제공 (=런타임 환경 제공)/ 단순히 브라우저가 아닌 환경에서도 실행할 수 있게 함 // Vue.js나 React에서 쓰일 코드를 작성하여 개발하기 위해서는 node가 기본적으로 필요하다

Vue.js: React + Angular의 인기 기능 결합 / 애플리케이션을 빌드하는 데 점진적 채택 가능 

React: 웹 애플리케이션을 위한 직관적인 사용자 인터페이스 디자인 , 대규모 웹 애플리케이션 만드는 것에 유리 

Next.js: 비즈니스를 위한 최고의 프레임워크, 플러그인에 의존할 필요 없음