자바스크립트 프레임워크를 알아보자

인트로

자바스크립트에는 프레임워크라는 것이 있다. 회사에 취직하면 거의 대다수는 프레임워크가 아닌 자바스크립트(Vanilla JS)를 쓰지 않는다. 대부분 리액트를 쓰고, Vue.js가 종종 보이는 정도.. 오늘의 글에서는 이 자바스크립트 프레임워크에 대해서 다뤄보고자 한다.

 

Hope you enjoy it!

 

자바스크립트 프레임워크가 뭘까?

자바스크립트 프레임워크(JavaScript framework)는 웹 응용 프로그램을 만들 때 따라야 할 구조와 규칙을 제공하는 미리 작성된 코드, 라이브러리 및 도구의 집합이다. 이를 통해 개발자가 원하는 기능 구현에만 집중하여 빠른 속도로 개발을 할 수 있도록 JS 프레임워크는 기본적으로 필요한 기능들을 갖추고 있는데 결국 개발 프로세스를 보다 효율적으로 만들기 위해 필요한 것이라고 말할 수 있다.

자바스크립트 프레임워크는 일반적으로 다음의 특징을 가진다

• 코드베이스를 구성하고 관리하기 위한 구조를 가지고 있다.
• 구성하는 코드 요소를 정의하고 작업하기 위한 일련의 규칙들의 집합이다.
• 데이터 바인딩, 라우팅 및 이벤트 처리와 같은 일반 작업을 위한 유틸리티 기능과 라이브러리를 가지고 있다.
• 응용프로그램 상태의 변경사항을 처리하기 위한 기본 제공 메커니즘을 제공한다. (예를 들어 리액트의 State)

 

인기있는 자바스크립트 프레임워크

널리 사용되는 자바스크립트 프레임워크는 아래와 같은 것들이 있다.

• React: 페이스북이 개발하고 유지보수하는 리액트는 사용자 인터페이스를 구축하기 위해 널리 사용되는 자바스크립트 프레임워크다. Component 기반 아키텍처와 가상 DOM을 사용하므로 매우 효율적이고 작업하기 쉽다. 나도 토이 프로젝트 시 개발을 잠깐 할 때 사용하기도 했고, 현재 재직 중인 회사도 리액트를 사용해서 사이트 리뉴얼 작업을 진행하고 있다.
• Angular: Angular는 웹 애플리케이션을 구축하기 위한 조금 더 포괄적인 프레임워크다. 복잡한 애플리케이션을 구축하기 위한 강력한 기능과 도구 세트를 제공하며, 대규모 개발자 커뮤니티를 가지고 있다.
• Vue.js: Vue는 사용자 인터페이스를 구축하기 위한 점진적인 프레임워크다. 컴포넌트 기반 아키텍처와 성능에 초점을 맞춘다는 점에서 리액트와 유사하다. 가볍고 배우기 쉬워 중소 프로젝트에 인기 있는 선택지다. 사이드 프로젝트로 시작했던 재직 중인 회사의 플랫폼 또한 Vue.js로 개발되었다. 단, SPA(Single Page Application, 단일 페이지로 웹 앱에 필요한 모든 정적 리소스를 처음에 한번 다운로드 하는 것) 형태를 띄기 때문에 SEO(Search Engine Optimization, 검색엔진최적화)가 힘들었다. 이것이 리뉴얼 시 리액트로 넘어가는 이유 중 하나..

 

 

프레임워크의 장점

1. 높은 코드작성의 효율성: 프레임워크를 사용하면 이미 짜여진 프레임워크의 코드를 사용할 수 있으므로 코드작성에 드는 시간이 상대적으로 줄어든다.
2. 코드의 질적 향상: 프레임워크의 코드는 이미 검증되어있다.
3. 안정적인 유지 보수: 프레임워크를 사용하게 되면 중간에 개발자가 바뀌더라도 프레임워크에서 정해놓은 코드를 사용하는 것인 만큼 위험부담을 줄일 수 있다.

 

프레임워크의 단점

1. 러닝커브: 프레임워크에 있는 코드를 학습하고 활용하는데 시간이 오래걸릴 수 있다. (그래도 바닐라JS의 코드를 쓰는 것 보다는 나을 듯)
2. 경직된 개발 환경: 프레임워크 사용 시 프레임워크에 의존하고, 해당 프레임워크의 규칙을 따를 수 밖에 없다.

 

그래서?

자신에게 알맞는 프레임워크를 잘 찾아서 사용하면 분명 개발 성능 향상, 생산성 향상, 보다 체계적인 코드 구조 등의 여러 이점을 누릴 수 있으니 잘 공부해서 사용하도록 하자.

 

참고

https://www.icia.co.kr/community/board/view/2/1/84

[IT 기본 지식] JS 프레임워크란? | 인천일보아카데미

https://velog.io/@gwanuuoo/SPA는-기존-웹사이트와-차이

SPA와 기존 웹사이트의 차이