JS 프레임워크에 대해 알기 위해선 가장 먼저 프레임워크의 개념을 잡고가는 것이 필요합니다.

 

프레임워크는 간단하게 프로그램의 기본 구조(뼈대)라고 생각하시면 될 것 같은데요. 이러한 프레임워크는 자동차 프레임에 빗대어 표현이 되곤 합니다,

 

좀 더 풀어서 얘기하자면, 프레임워크는 개발자가 원하는 기능 구현에만 집중하여 빠른 속도로 개발을 할 수 있도록 기본적으로 필요한 기능을 갖추고 있는 것을 말합니다. 물론 프레임워크만으로는 실행되지 않으며 기본 구조에 여러가지 기능 추가해야하며, 프레임워크에 의존하고, 프레임워크가 정의한 규칙에 따라 개발해야 합니다. 

 

이때, 많은 사람들이 프레임워크와 라이브러리가 똑같은 기능을 하는게 아니냐고 생각하기도 합니다.

 

잠깐 라이브러리의 정의에 대해서 살펴보면, 라이브러리는 자주 사용되는 로직을 재사용하기 편리하도록 잘 정리해둔 일련의 기능집합을 말합니다. 자동차 프레임에 비유되는 프레임워크와 달리 라이브러리를 자동차의 바퀴, 헤드라이트, 에어백 등으로 비유됩니다. 

 

다시 한번 말하자면 라이브러리는 재사용이 필요한 기능들을 반복적인 코드 작성을 없애기 위해 언제든지 필요한 곳에 호출하여 사용할 수 있도록 클래스나 function으로 구성되어진 것을 의미합니다.

 

다시 프레임워크 얘기로 돌아오면, 프레임워크는 이미 어느정도 필수 기능을 갖추고 있어 보기에 편리하게만 느껴질 수도 있지만 몇 가지의 단점도 존재합니다.

 

[프레임워크의 장점]

 

1. 코드작성이 효율적이다

아무것도 작성되어있지 않은 상태에서 코드를 하나하나 짜는 것보다 프레임워크를 사용하게되면 시간과 비용이 훨씬 절약되어 생산성이 올라가게 됩니다.

 

2. 코드의 질적 향상

프레임워크 사용은 이미 검증된 코드를 사용하는 것이기 때문에 버그 발생 가능성을 저하시키고, 반복 작업에서 일어날 수 있는 실수들을 방지하게 도와줍니다. 

 

3. 유지 보수가 안정적이다

프레임워크를 사용하게되면 프로젝트 도중 개발 담당자가 바뀌더라도 이미 코드가 비교적 체계적이기 때문에 위험 부담을 줄일 수 있으며 , 유지 보수 측면에서 안정적이라고 볼 수 있습니다.

 

[프레임워크의 단점]


1. 학습시간이 길다

다수의 개발자가 사용하며 수정의 수정의 거쳐 만들어진 코드들이 대부분이다 보니, 프레임워크에 있는 코드를 습득하고 활용하는 데에 시간이 오래 걸릴 수 있습니다.

 

2. 자유롭지 못한 개발 환경

앞서 말했듯이, 프레임워크 사용시 프레임워크에 의존하고, 프레임워크의 규칙을 따라야하기 때문에 개발자가 자유롭고 유연하게 개발하는 데에 한계가 있습니다. 기존의 구조를 유지하며 코드에 적절히 기능을 추가해야하기 때문에 여러 제약 사항이 있을 수 있겠죠?

 

그렇다면 프레임워크의 종류에는 어떤 것들이 있을까요?

 

프레임워크는 크게 자바 프레임워크 / QRM 프레임워크 / 자바스크립트 프레임워크 / 프론트엔드 프레임 워크로 분류됩니다.

 

오늘 함께 집중적으로 살펴볼 프레임워크는 자바스크립트 프레임워크입니다. 

 

자바스크립트 프레임워크는 말그대로 프론트엔드 개발에 쓰이는 자바스크립트 언어를 프레임워크화해서 개발 차원에서의 효율성과 사용자 환경(UI)의 편의성을 높이고자 하는 목적으로 개발되었습니다. 

 

자바스크립트 프레임워크는 HTML, CSS를 포함한 웹 관련 기능들이 포함되어 있으며, 크게 웹 기능 구현을 위한 기능 모음과, 디자인 스타일에 대한 내용이 들어가 있습니다. 

 

*프론트엔드란? 사용자가 웹 사이트 또는 웹 애플리케이션 사용시 화면에 보이는 영역을 의미. 디자인적 요소와 더불어 사이트 내에서 특정 기능을 호출하여 실행시키는 것 또한 프론트엔드 개발의 한 부분이다.

 

다양한 회사들이 JS(자바스크립트)프레임워크를 만들었는데, 그 중에서 Vue, React. Angular 프레임워크가 대표적입니다. 

  

[Vue.js]


Vue.js는 구글의 엔지니어 Evan You에 의해 개발되었으며, 2014년 2월에 공식적으로 배포되었습니다. 대표적인 사용기업은 나사, 어도비, 깃랩, 페이스북, 넷플릭스, 샤오미, 알리바바 등이 있습니다.

 

-특징

 Vue.js는 다른 프레임워크와는 달리 선택적으로 채택하여 사용할 수 있는데요. 따라서 다른 라이브러리나 기존 프로젝트에 적용하는 것이 비교적 수월합니다. 또한, Vue는 개발한 프론트엔드 파일을 사용자가 볼 수 있도록 브라우저 화면에 렌더링하는 과정에 템플릿이란 문법을 사용하는데요. 이때 이 템플릿을 구성하는 문법이 HTML 기반으로 이루어져 있어 초보 개발자도 빠른 시간 안에 기본적인 사용이 가능할 정도로 쉬워 입문자에게 적합한 프레임워크라고 할 수 있습니다.

 

 이러한 Vue.js는 Angular에서 핵심적인 요소들이 가진 장점을 기반으로 가볍게 제작한 프레임워크로 작은 규모의 어플리케이션의 개발시 용이하며 속도 측면에서 큰 장점을 보입니다. 더불어 Vue는 단일 파일 컴포넌트 기반를 기반으로 하는데요. 이는 웹의 뷰(view)를 구성하는 요소인 HTML, CSS, JavaScript 코드를 .vue 확장자를 가진 하나의 파일에 모두 정의하는 방식입니다. 이러한 관리 방식은 적당한 규모의 프로젝트에서 관리의 생산성을 높이고, 협업을 수월하게 한다는 장점이 있습니다.

  

2. React

 

 React는 페이스북의 엔지니어 Jordan Walke에 의해 개발 되었으며, 2011년에 페이스북 뉴스피드에 처음으로 적용되었습니다. 대표적인 사용 기업은 페이스북, 넷플릭스, 우버, 페이팔, 에어비앤비, 마이크로 소프트 등이 있습니다. 싱글페이지 어플리케이션, 모바일 어플리케이션 개발시 많이 활용되며 데이터 변경에 따라 특정 컴포넌트만 효율적으로 갱신하고 렌더링한다는 특징이 있습니다. 

 

-특징 

 

React의 가장 큰 특징은 거대한 사용자 커뮤니티가 있다는 것입니다. 페이스북의 지원을 받는 만큼 지속적인 버전 관리 및 오류 수정이 이루어지고,  사용자가 많아 다양한 레퍼런스, 확장 라이브러리가 많습니다.

 

한편, 템플릿 방식으로 프레임워크를 관리하는 Vue와는 달리, React는 JSX 코드로 컴포넌트를 작성하고 컴포넌트의 상태를 변화시키지 않고 관리합니다. 따라서 템플릿은 재구조화가 어렵고, 에러에 취약한 반면, React는 상태를 고유 속성대로 유지하기 때문에 대규모 프로젝트에서도 관리가 수월하고 테스트에도 적합합니다.

 

또 다른 특징으로는 코어 기능 외의 편의 기능을 제공하지 않기 때문에 타 프레임워크에 비해 독립적으로 사용이 가능합니다. 더불어 이미 서비스 배포 중인 어플리케이션에도 점진적으로 채택할 수 있습니다.

 

* 컴포넌트란: 리액트에서 구현하고자하는 기능을 캡슐화하는 기본 단위로서, 각각 라이프사이클을 가지고 내부의 상태를 관리한다.(높은 재사용성)

  

3. Angular


대규모 어플리케이션 개발에 적합한 프레임워크입니다.  구글의 엔지니어 Misko Hevery의 개인 프로젝트로 개발이 시작되었으며 2012년에 공식적으로 공개되었습니다. 대표적인 사용기업은 구글, 유튜브, 텔레그램, 나이키 등이 있습니다.

 

-특징

 

Angular는 완전한 프레임워크로 프로젝트의 생성, 테스트, 빌드, 배포를 위한 모든 기능을 제공합니다. 또한, Angular CLI를 제공하여 개발환경을 지원하는데요. 파일 생성, 빌드, 패키징, 라이트 서버 기능 등 개발에 필요한 대부분의 기능을 자체적으로 제공하여 간편한 개발 환경을 구축합니다. 더불어 Angular는 타입스크립트를 채택함으로서 다양한 도구의 지원을 받을 수 있으며, 코드의 가독성과 안정성을 향상시킵니다. 다만, 기본적으로 제공되는 기능이 많기 때문에 유연한 개발 사용이 다소 어렵다는 특징도 있습니다.

 

이렇게 프레임워크의 전반적인 내용과 자바스크립트 프레임워크 종류에 대해 알아봤습니다.

 

JS프레임워크를 활용하여 사용자의 편의를 향상시켜주는 UI 개발에 관심이 있으시다면 인천일보아카데미의 교육과정을 살펴보시는 건 어떨까요? :)​ 



*참고자료

https://moolgogiheart.tistory.com/87

https://brunch.co.kr/@clay1987/93

https://balmostory.tistory.com/166

https://wickies.tistory.com/120

https://library.gabia.com/contents/infrahosting/8284/