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

"프레임워크란 소프트웨어의 구체적인 부분에 해당하는 설계와 구현을 재사용이 가능하게끔 일련의 협업화된 형태로 클래스들을 제공하는 것 이라고 정의 할 수 있다."

위 용언은 Gof의 디자인패턴으로 유명한 랄프 존슨이 말한 것이다. 보통 사람들은 프레임워크와 라이브러리라는 개념과 비교해서 설명한다.

 

라이브러리란 자주 사용되는 로직을 재사용하기 편리하도록 코드들을 집합시켜 정리 한 것이다,  이런 식으로 정의만 말하면 이해하기 어려우니 자동차에 빗대서 설명하면 프레임워크는 자동차의 뼈대를 말한다. 그리고 라이브러리는 자동차의 바퀴나 헤드라이트와 같은 부품들을 뜻하는 것이다. 여기서 프레임워크는 말 그대로 한 개체의 뼈대이기 때문에 다른 자동차를 만들겠다고 수정을 할 수 없다. 하지만 반대로 부품 같은 경우는 언제든지 다른 차에 교체해서 끼워 넣을 수 있는 차이가 있다.

 

이러한 프레임워크를 사용하는 것도 장단점이 있다.

 

프레임워크의 장점

1 ) 효율적인 사용 

 이미 뼈대가 완성되어 있는 툴이기 때문에 시간과 비용이 절약되며 생산성이 올라간다.

2 ) 전체의 질적인 향상

 개발자가 반복작업에서 실수하기 쉬운 부분을 커버해준다. 이를 통해 버그 발생가능성을 낮추고 개발자가 사용하며 수정하다 보니 이미 검증된 코드라고 볼 수 있다.  

3 ) 유지 보수에 굉장히 뛰어남

 프레임워크를 사용하지 않고 코드를 짤 경우 회사 입장에서 담당자가 바뀌어버리면 유지보수하는데 큰 어려움이 생긴다. 하지만 이런 프레임워크를 사용하면 코드가 이전보다 체계적인 형식으로 바뀌어서 개발자가 바뀌어도 큰 위험부담을 줄일 수 있다. 

 

프레임워크의 단점

1) 학습시간이 길다

코드를 내가 짜놓은 형식이 아니기 때문에 그곳에 있는 코드를 습득하고 이해하는데 오랜 시간이 걸린다.

2) 제작자의 의도된 제약 사항

프레임워크를 제작한 제작자가 설계한 구조를 어느 정도 유지한 채 코드에 살을 붙여나가야 한다. 그래서 개발자는 자유롭고 유연하게 개발하는데 한계가 생긴다.

 

참고 : https://moolgogiheart.tistory.com/87

프레임워크(Framework)란? 개념, 장단점, 종류

 

이런 식으로 프레임워크는 장단점이 존재한다. 각각의 프레임워크들은 종류가 많지만  난 자바스크립트 프레임워크에 대해서 공부 할 것이다.

 

자바스크립트 프레임워크 는 말그대로 프론트엔드 개발에 사용하는 자바스크립트 언어를 프레임워크화해서 개발 차원에서의 효율성과 UI의 편의성을 높이고자 하는 목적으로 개발되었다. 이곳에서는 HTML/CSS를 포함한 웹 관련 기능들이 포함되어 있으며, 크게 웹 기능 구현을 위한 기능 모음과 디자인 스타일에 대한 내용이 들어가 있다.

 

그중에서도 대표적인 프레임워크인 Vue / Reac t/ Angular가 대표적이다.

 

JS프레임워크 소개

1) Vue.js

 구글의 엔지니어 이반 유(Eva you)에 의해 개발되었고 2014년 2월에 공식적으로 배포되었다.  이 프레임워크를 사용한 기업은 나사/어도비/깃랩/페이스북/넷플릭스/바이브/샤오미/알리바바 등이 있다. 

Vue.js의 특징

1-1) 타 프레임워크롸 달리 선택적으로 채택하여 사용할 수 있다. 따라서 다른 라이브러리나 기존 프로젝트에 적용하는것이 비교적 수월하다. 

 

1-2) 개발한 프론트엔드 파일을 사용자가 볼 수 있도록 브라우저 화면에 렌더링 하는 과정 중 템플릿이란 문법을 사용하였다. 이 템플릿을 구성하는 문법이 HTML기반으로 이루어져 있어서 초보 개발자도 빠른 시간 안에 기본적인 사용이 가능할 정도로 쉬워서 입문자에게 적합한 프레임워크이다

 

1-3) Angular에서 핵심적인 요소들이 가진 장점을 기반으로 가볍게 제작한 프레임워크로 작은 규모의 어플리케이션 개발 시 용이하며 속도 측면에서 큰 장점을 보여준다. 

 

1-4) 단일 파일 컴포넌트를 기반으로 하고 웹의 view를 구성하는 요소인 HTML/CSS/javascript 코드를  .vue확장자를 가진 하나의 파일에 모두 정의하는 방식이다. 이를 통한 관리 방식은 적당한 규모의 프로젝트에서 관리의 생산성을 높이고 , 협업을 수월하게 한다는 장점이 있다.

 

2) React

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

 

React의 특징

 

2-1) 페이스북의 지원을 받는 만큼 지속적인 버전 관리 및 오류 수정이 이루어지고 사용자가 많아 다양한 레퍼론스 확장 라이브러리가 많다.

 

2-2) JSX코드로 컴포넌트를 작성하고 컴포넌트의 상태를 변화 시키지 않고 관리한다. 따라서 템플릿 자체는 재구조화가 어렵고 에러에 취약한 반면 React는 상태를 고유 속성대로 유지하기 때문에 대규모 프로젝트에서도 관리가 수월하고 테스트에도 적합하다.

 

2-3) 코어 기능 외의 편의 기능을 제공하지 않아서 타 프레임워크에 비해 독립적으로 사용이 가능하다. 이미 서비스 배포 중인 어플리케이션에도 점진적으로 채택할 수 있다.

 

3) Angular 

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

 

Angular 의 특징

 

3-1) 완전한 프레임워크로 프로젝트의 생성/ 테스트/ 빌드/배포를 위한 모든 기능을 제공한다. 

 

3-2)  Angular CLI를 제공해서 개발환경을 지원한다. 파일 생성/빌드/패키징/라이트 서버 기능 등 개발에 필요한 대부분의 기능을 자체적으로 제공하여 간편한 개발환경을 구축한다. 

 

3-3) 타입스크립트를 채택하여서 다양한 도구의 지원을 받을 수 있고 코드의 가독성과 안정성을 향상시킨다.

 

3-4) 기본적으로 제공되는 기능이 많아 유연한 개발 사용이 다소 어렵다는 특징도 있다.