24.06.03 JS 톺아보기

자바스크립트란?

자바스크립트는 웹페이지에 생동감을 불어넣기 위해 만들어진 프로그래밍 언어이다. 모든 주요 브라우저에서 지원하며, 기본 언어로 사용된다.

 또한 브라우저에서만 쓸 목적으로 고안된 언어이지만, 다양한 환경에서 사용가능하다.

 

리액트란? 장점 / 단점

React란 Facebook에서 만든 JavaScript UI 라이브러리이다. 프론트엔드 DOM조작을 쉽게 해주는 jQuery를 많이 사용했으나 방식에 한계를 느껴 효율적으로 코드를 관리하고 컴포넌트 기반 UI개발을 지원하는 Angular, Vue, React가 등장하였다.

 

리액트의 장점

• 리액트는 자바스크립트 기반 문법을 사용하여 자바스크립트에 익숙하다면 쉽게 사용이 가능하다.
• 가볍고 유연한 라이브러리고 필요한 부분에만 적용할 수 있고, 타 프레임워크나 라이브러리와 동시사용이 가능하여 기존 코드를 크게 변경하지 않고 리액트를 사용할 수 있다.
• 사용자가 많고 그에따라 활발한 커뮤니티를 가지고 있어 필요한 문제해결방안과 자료를 쉽게 얻을 수 있으며 다양한 라이브러리를 활용하여 생산성을 높일 수 있다.
• 가상 DOM을 사용하여 UI 업데이트를 처리하기에 신속한 UI 업데이트가 가능하고 성능이 우수하다.
• 단방향 바인딩으로 UI 업데이트를 하여 성능 정하 없이 DOM을 렌더링 시켜준다.
• 컴포넌트 기반 아키텍쳐를 채택하여 작은 단위로 분리하여 개발하고 조합하여 복잡한 UI구성이 가능하다.
• 선언적으로 작성이 가능한 JSX 문법을 사용하여 코드의 가독성을 높이고 렌더링을 직관적으로 이해할 수 있다.
• React Native를 사용하면 리액트의 개념과 문법을 활용하여 ios나 안드로이드 애플리케이션을 개발할 수 있어 개발 생산성이 높다.
• 가상 DOM과 최적화 기법을 활용하여 성능을 향상 시킬 수 있으며 페이지 이동 시 발생하는 깜빡임을 없애 반응성을 향상시킬 수 있다.
• 컴포넌트 단위로 작게 UI를 분리 개발하여 코드의 재사용이 가능하므로 개발 생산성이 향상된다.

 

리액트의 단점

• 스타일링의 어려움
  • module css, 공통 css, emotion/ styled같은 모듈화 스타일, tailwindcss 사용을 하여야 한다.
• 무겁고 느리다
  • 리액트 개발에 필요한 스타일링, 상태관리 등 다양한 라이브러리를 설치하면 성능이 저하되며 반응성이 낮아진다.

 

NEXT.js란? 장점 / 단점

Next.js란 풀스택 웹 어플리케이션을 구축하기위한 react 프레임워크이다. 프론트의 UI구성은 react로 하고 next.js를 사용하여 추가 기능을 수행한다.

번들링, 컴파일과 같이 필요한 도구를 추상화하고 자동으로 구성하여 시간을 절약해 어플리케이션 구축에 집중할 수 있다.

또한 SEO를 위한 SSR을 가능하게 하기 위해 react에 적합하다.

 

Next.js의 장점

• 위에서 설명한 SEO를 위한 SSR을 쉽게 구현할 수 있따.
• 파일 시스템 기반의 라우팅 구조로 구성되어 쉽게 페이지를 생성, 관리 할 수 있다.
• 동적 임포트와 함께 코드 분할을 지원하여 번들 크기를 최적화하고 초기 로딩속도를 향상시킬 수 있다.
• 커뮤니티가 활발하여 다양한 패키지 및 플러그인을 풍부하게 얻을 수 있다.

 

Next.js의 단점

• react에 익숙하지 않은 개발자에게 초기 학습 곡선이 존재한다.
• 프로젝트의 규모가 커질수록 구성과 설정이 복잡해진다.
• SSR을 사용할 때 서버리소스가 필요하여 서버 비용이 증가한다.
• react에 의존하여 react와 함께 유지보수가 필요하다.

 

VUE란? 장점 / 단점

Vue.js란 UI개발을 위한 자바스크립트 프레임워크로 가상 돔 기반의 성능향상기능을 제공한다.

 

Vue.js의 장점

• 직관적인 API와 간결한 문법을 제공하여 학습곡선이 낮다.
• 가상 DOM을 사용하여 변화가 있는 부분만 적용하기에 효율적인 렌더링을 수행한다.
• 양방향 데이터 바인딩을 지원하여 변경사항이 자동으로 화면에 반영된다.
• 점진적인 프레임워크로 기존 프로젝트에 쉽게 통합할 수 있다.

 

Vue.js의 단점

• react와 비교하였을 때 상대적으로 작은 생태계를 가지고 있어 정보나 지원에 제한이 있다.
• 큰 규모의 어플리케이션에서 가상 DOM기반의 최적화가 성능에 제약이 있을 수 있다.
• 번들의 크기가 커 초기 로딩속도에 영향을 끼칠 수 있다.