최고의 프론트엔드 프레임워크를 선택하는 방법

JavaScript 세계는 수십 개의 도구, 라이브러리 및 프레임워크가 있는 풍부한 환경입니다. 그러나 많은 옵션이 있으면 많은 혼란이 옵니다. 그야말로 양날의 검이다.

창의성과 실험을 위한 많은 공간이 있지만 때로는 어떤 라이브러리나 프레임워크를 선택해야 할지 확신이 서지 않을 때가 있습니다.

선택한 프론트엔드 프레임워크는 장기적으로 프로젝트를 성공시키거나 중단시킬 수 있습니다.

이 기사에서는 가장 인기 있는 JavaScript 프레임워크 중 일부와 서로 어떻게 대응하는지 살펴보겠습니다. 우리는 일반적으로 다음 JavaScript 프레임워크에 대한 결정을 내리는 프로세스를 용이하게 하는 이러한 프레임워크의 5가지 다른 관점을 검토할 것입니다.

이러한 인기 있는 JavaScript 프레임워크 중 하나를 선택하든 좀 더 난해한 프레임워크 중 하나를 선택하든 이러한 각 측면을 고려해야 합니다.

학습 자원의 가용성

이것은 분명하지만 종종 간과됩니다. 일부 프레임워크의 멋진 홈페이지가 눈을 사로잡을 수 있지만 시작하는 데 도움이 되는 지루하고 건조한 문서 외에도 추가 과정, 책, 자습서 및 기사가 필요합니다.

멋진 프레임워크를 만드는 것과 그 이면의 핵심 아이디어를 전달하는 것은 다릅니다. 실제로 코칭을 전문으로 하는 전문 개발자가 많이 있습니다. 잘 만들어진 학습 자료는 학습 곡선을 극적으로 줄여줄 것입니다.

이전에 경험이 있는 신뢰할 수 있는 저자의 리소스를 찾으십시오. 결국 시간을 할애할 가치가 있을 것입니다. 유용한 것을 찾는 데 어려움을 겪고 있다면 주의하십시오. 배우고자 하는 프레임워크가 새롭거나 커뮤니티에서 아직 잘 채택되지 않았을 수 있습니다.

문서만으로는 충분하지 않다고 언급했지만 여기에는 예외가 있습니다. 예를 들어 EmberJS에는 훌륭한 문서가 있습니다. 핵심 기능과 사용 사례는 여기 저기에 일반적인 예와 함께 잘 설명되어 있습니다. 불행히도 문서 외에 리소스 책, 비디오 과정 또는 기타 자료가 거의 없습니다.

반면에 Angular 및 React에 대한 리소스는 풍부합니다. 거의 모든 프론트 엔드 지향 교육 웹 사이트에는 그에 대한 기사 또는 두 가지가 있으며 전체 비디오 과정이나 책이있을 수도 있습니다.

Vue는 중간 지점에 도달했습니다. 좋은 문서가 있으며 선택할 수 있는 몇 가지 멋진 코스가 있습니다.

예를 들어, Aurelia는 자원이 거의 없습니다. 당신에게 유일한 희망은 문서와 행운입니다.

나는 선택권이 있는 것을 선호한다.

훌륭한 책이나 강의를 읽었더라도 다른 리소스에 자신을 노출함으로써 새로운 것을 배울 기회가 있습니다. 주제에 익숙하다면 종종 아직 명확하지 않은 가능한 영역을 훑어보고 찾을 수 있습니다.

불행히도 이 전략은 선택의 폭이 제한되어 작동하지 않아 다음 요점으로 이어집니다.

인기

이색적인 것을 배우는 것에 자부심을 느낄 수도 있지만 이것을 비즈니스 관점에서 보면 같지 않습니다. 귀하의 회사 또는 고객은 아마도 전투 테스트를 거친 도구 세트를 사용하는 것을 선호할 것입니다.

여기에는 몇 가지 이유가 있습니다. 프레임워크가 대중적이지 않다면 이를 전문으로 하는 개발자가 몇 명 있다는 의미입니다. 프로젝트를 포기하거나 새 직업을 찾으면 어떻게 됩니까? 고용주는 결국 당신이 사용한 프레임워크를 알고 있는 개발자를 찾는 데 매달리게 됩니다.

이 과정은 회사에 실질적인 부담이 될 수 있습니다. 프로젝트에 충실하고 성장하더라도 마찬가지입니다. 이제 고용주는 개발을 가속화하기 위해 더 많은 개발자가 필요합니다.

널리 사용되는 인기 있는 프레임워크를 선택해야 하는 다른 개인적인 이유가 있습니다. 어떤 문제에 봉착하여 도움을 요청할 수 있는 커뮤니티가 없다면 어떻게 됩니까? 혼자서 문서를 작성해야 하기 때문에 많은 시간을 낭비할 가능성이 높습니다.

그 외에도, 당신은 당신의 경력에서 미래, 더 매력적인 기회에 대해 생각하기를 원합니다. 당신이 인기 있는 것을 전문으로 하고 그것을 정말 잘한다면, 당신을 위한 많은 프로젝트가 있을 것입니다.

여기에서 분명한 리더는 Angular와 React입니다.

대부분의 프론트 엔드 관련 구인 목록에는 둘 중 하나가 필요합니다. 그들은 각각 Google과 Facebook의 지원을 받으므로 고용주는 자신의 선택에 대해 "안전"하다고 느낍니다.

때로는 회사나 클라이언트를 위한 프레임워크 선택이 귀하에게 달려 있지 않습니다. 이전 직원이나 팀의 다른 사람이 만든 것일 수 있습니다. Angular 또는 React일 가능성이 있습니다. 이제 Ember 및 Vue와 같은 다른 옵션이 있습니다. 하지만 일부러 사용하는 회사를 찾아야 합니다.

프로젝트가 GitHub 및 기타 장소에서 얼마나 잘 수행되고 있는지 빠르게 확인하여 프레임워크의 인기도를 결정할 수 있습니다. 다음은 이 기사를 작성하는 시점에서 수집된 몇 가지 통계입니다.

이러한 라이브러리는 인기 있는 옵션으로 스스로를 입증할 만큼 오랫동안 존재했지만, 정말 새로운 것을 시도하는 경우 해당 라이브러리에 대한 유사한 통계가 선택에 도움이 될 수 있습니다.

Angular 또는 React만 배우면 경력에서 지금까지 얻을 수 있습니다. 물론 기회는 많지만 다른 프레임워크가 존재하는 이유가 있습니다. 여가 시간에 그들에 대해 배우려고 노력하고 때때로 몇 가지 실험을 하십시오. 실제 프로젝트에서 사용하지 않더라도 일상적인 개발 작업에 도움이 되는 귀중한 통찰력을 얻을 수 있습니다.

핵심 기능

이제 약간의 기술적인 부분을 살펴보겠습니다.

처음에는 코딩을 시작할 때 적절한 기대치를 가질 수 있도록 프레임워크의 핵심 기능을 간략하게 살펴보고자 합니다. 이를 위해 문서를 스캔하십시오. 이 프레임워크가 일반적으로 무엇에 관한 것인지 이해해야 합니다. 뷰 레이어 전용입니까, 완전한 기능입니까, 아니면 그 중간입니까?

다른 프레임워크에 대한 풍부한 이전 경험이 있는 경우 이 프로세스가 쉽고 빠릅니다. 문서에서 템플릿, 상태 관리, HTTP 통신, 양식 처리 및 유효성 검사, 라우팅과 같은 주제를 찾으십시오. 개발자로서 일상적으로 하는 일입니다. 이들 모두가 핵심 프레임워크에 제시되어 있지 않거나 특정 문제에 대해 다른 접근 방식이 있을 수 있습니다.

인기 있는 옵션에 대해 간단히 살펴보겠습니다.

React와 Vue부터 시작하겠습니다. 그것들은 실제로 프레임워크가 아닙니다. 그것들은 애플리케이션의 뷰 레이어만을 나타냅니다. HTTP 통신, 양식 유효성 검사 등 다른 모든 부분은 사용자에게 달려 있습니다.

앞서 말했듯이 양날의 검일 수도 있다. 결국 자신만의 커스텀 프레임워크를 구축하게 될 것입니다. 둘 다 가장 일반적인 문제에 대한 솔루션을 제공하는 라이브러리 생태계를 가지고 있지만 전체 구조는 프로젝트마다 다릅니다.

React의 JSX는 항상 저를 오싹하게 만들었습니다. 나는 그것에 익숙해져야 했다. 그러나 Vue의 템플릿은 특히 Angular에서 온 경우 정말 좋습니다.

반면 Ember는 거의 모든 것을 갖추고 있습니다. 놀랍게도 Ember의 코어는 고급 양식 처리를 제공하지 않습니다. 입력 도우미가 있고 그게 전부입니다. 매우 독단적이며 자체 데이터 계층도 있습니다. 모든 것은 "엠버 방식"으로 이루어져야 합니다.

일반적으로 다른 프레임워크나 JavaScript에 대한 배경 지식이 있는 경우 Ember가 자체 개체 모델을 사용하기 때문에 좌절할 수 있습니다. 표준 ES2015 클래스는 설명서에 나와 있는 것처럼 널리 사용되지 않습니다. 속성에 값을 직접 할당하고 Ember가 그것에 대해 불평하는 자신을 발견할 수 있습니다.

다른 프레임워크와 크게 다른 또 다른 점은 Ember Data입니다. Ember 애플리케이션을 위한 데이터 계층입니다. 일종의 프론트엔드용 ORM처럼 생각할 수 있습니다. 모델을 만들고 모델 간의 관계를 매핑합니다.

이제 서버가 JSON API(JSON API 구현을 위한 사양)를 사용하는 경우 Ember를 사용하는 것이 좋지만 불행히도 대부분의 서버는 그렇지 않습니다. 따라서 사용자 지정 어댑터와 직렬 변환기를 작성해야 합니다. 그러나 Ember 방식으로 작업을 수행하면 정말 생산적일 수 있습니다. 그것은 단지 가파른 학습 곡선을 가지고 있습니다.

Angular 2는 기능이 풍부한 프레임워크입니다. Ember와 같은 많은 모듈과 함께 제공되므로 즉시 사용할 수 있는 수많은 도구가 있습니다. 그러나 Angular는 대규모 응용 프로그램을 위한 것이므로 TypeScript를 촉진하므로 사용하기 전에 약간의 저항이 발생할 수 있습니다.

또 다른 주목할만한 점은 Rx 라이브러리에서 옵저버블을 많이 사용한다는 것인데, 정말 좋습니다. 거의 모든 것을 관찰 가능한 것으로 나타낼 수 있으며 맵, 필터 등과 같은 고급 작업을 적용할 수 있습니다. Lodash 또는 Underscore를 사용한 경우 Rx는 일종의 동일하지만 스테로이드입니다.

다음은 이 기사에서 논의하는 네 가지 프레임워크의 핵심 기능에 대한 요약입니다.

우리가 간략하게 살펴본 모든 기능은 양초를 효과적으로 사용하기 위해 양초를 태워야 하는 경우 가치가 없습니다. 이것이 다음 요점입니다.

사용성

이 시점에서 여전히 선택한 프레임워크에 대한 열정이 있다면 다음 단계는 손을 더럽히는 것입니다.

귀하의 배경 때문에 프레임워크가 귀하에게 적합할 수 있습니다. 어쩌면 그것은 조금 다르고 어떤 면에서 당신에게 도전을 줄 것입니다. 당신은 아직 모릅니다. 당신이 직접 해보기 전까지는 튜토리얼을 읽거나 보는 것이 도움이 되지 않을 것입니다.

프레임워크에 대한 느낌을 얻는 가장 좋은 방법은 일부 미니 프로젝트에서 프레임워크를 사용하는 것입니다. 이것은 주어진 프레임워크로 위에서 언급한 일상적인 문제를 해결할 수 있는 기회를 제공합니다.

프로젝트를 진행하는 동안 시간을 ​​내어 자신이 생산적인지 여부를 곰곰이 생각해 보십시오. 원하는 결과를 얻는 것이 얼마나 쉽습니까? 외부 라이브러리를 찾아야 합니까? 커뮤니티의 플러그인이 필요할 수 있습니다. 프레임워크의 맥락 내에서 기존의 구조나 지침이 있습니까? 개발 프로세스를 가속화하는 CLI가 있을 수 있습니다. 이 단계에서는 기본 경험을 수집하여 향후 프로젝트에 이 프레임워크를 사용하거나 기존 프로젝트를 전환하는 경우 어떻게 될지 생각할 수 있습니다.

Ember는 적어도 핵심 사용자에게는 매우 생산적인 프레임워크로 간주됩니다. 실제로 도움이 되는 CLI와 함께 제공됩니다. 자체 테스트 스위트를 사용하여 경로, 컨트롤러, 구성 요소 및 모델을 생성할 수 있습니다. 이 모든 작업을 수동으로 수행하는 것은 지루한 작업입니다. 새로운 프로젝트 생성도 가능합니다. 기본 폴더 구조를 만들고, 필요한 패키지를 설치하고, 도구를 만들고, 테스트 환경을 만드는 등의 작업을 수행합니다. CLI를 이 정도로 사용해 본 적이 없다면 매우 만족할 것입니다. 그러나 앞서 언급했듯이 Ember는 매우 독단적입니다. 그 모든 장점에도 불구하고 일반적인 작업을 수행하는 동안 좌절감을 느낄 수 있습니다.

이제 React 및 Vue에는 일종의 CLI, create-react-app 및 vue-cli가 있습니다. 그러나 몇 가지 옵션이 있는 초기 프로젝트를 생성하는 것 외에 Ember 또는 Angular에 비해 그다지 많은 것을 제공하지 않습니다. 둘 다 뷰 레이어를 나타내므로 이해할 수 있습니다. 프로젝트별로 사용자 정의된 워크플로, 실험 또는 다른 구조를 좋아한다면 좋은 위치에 있습니다. 일부 개발자에게 유연성은 본질적으로 React 또는 Vue를 사용할 때 제공되는 핵심입니다.

Angular 4는 Ember와 같은 CLI와 함께 제공됩니다. 컴포넌트, 디렉티브, 서비스 등을 생성할 수 있습니다. 애플리케이션의 초기 구조도 생성하므로 제품에 대해서만 걱정하면 됩니다. 테스트 환경은 생성된 모든 앱과 함께 테스트 도구 모음이 (말 그대로) 근처에 있기 때문에 정말 좋습니다. 그 외에도 TypeScript는 실제 생산성 향상을 제공할 수 있습니다. 이유는 다음과 같습니다.

다음과 같은 라인이 있는 코드를 몇 번이나 만났습니까?

 function doSomething(someData) { // do something }

… 그리고 someData 가 도대체 ​​무엇인지, 어떤 속성을 가져야 하는지, 어떤 기능을 제공해야 하는지, 그리고 그 동작이 무엇인지 궁금했습니다. TypeScript를 사용하여 유형을 정의하고 적절한 데이터를 기대합니다. TypeScript를 지원하는 일부 IDE를 사용하면 더 나아갈 수 있습니다. 앱의 다양한 부분을 쉽게 탐색할 수 있습니다.

IDE는 다루지 않았지만 대부분의 인기 있는 프레임워크에는 개발을 정말 쉽게 만들어주는 플러그인이 있습니다. 예를 들어 WebStorm은 Angular, React 및 Vue에 대한 기본 제공 지원과 함께 제공됩니다.

통합 용이성(다른 라이브러리와)

마지막으로 이것은 사용성의 일부로 간주될 수 있지만 자체 섹션이 가치가 있을 정도로 중요합니다.

선택한 프레임워크의 기능이 아무리 풍부하더라도 추가 도구가 필요한 문제에 직면할 가능성이 있습니다. DOM 조작, 데이터 처리, 시간 형식 지정, 서식 있는 텍스트 편집 등과 같은 한 가지 문제에 초점을 맞춘 훌륭한 라이브러리가 있습니다. 그 중 하나를 통합하고 매번 몇 시간을 소비한다면 최적의 선택이 아닐 수도 있습니다. .

이것을 테스트하는 것은 매우 쉽습니다. 특정 라이브러리가 필요한 상상의 시나리오를 빠르게 생각해낼 수 있습니다. 당신의 과거 프로젝트를 보십시오. 어떤 도구를 어떤 시나리오에서 사용했습니까? 기회는 당신이 다시 같은 상황에 처하게 될 것이고 당신은 그것에 대비하고 싶거나 최소한 기대를 갖고 있을 것입니다.

모든 라이브러리가 TypeScript를 지원하는 것은 아닙니다. Angular가 많이 사용하기 때문에 이러한 라이브러리를 사용하는 동안 TypeScript의 장점 중 일부가 사라질 수 있습니다. 물론 해결 방법을 찾을 수 있지만 조금 더 번거롭습니다. Angular의 인기로 인해 라이브러리 자체 페이지에 지침을 통합할 수 있습니다.

Vue와 React의 경우 거의 모든 것을 사용자가 책임지고 다른 라이브러리를 사용하는 것도 예외는 아닙니다. Webpack 또는 이와 유사한 빌드 도구를 사용하는 경우 NPM을 사용하여 설치된 라이브러리를 직접 참조할 수 있습니다. Vue가 커뮤니티 플러그인을 사용하는 것이 약간 번거롭다는 것을 알았습니다. 특히 사용자 인터페이스 로직도 포함되어 있을 때 그렇습니다.

Ember에는 커뮤니티 플러그인 웹사이트인 EmberObserver가 있습니다. 그들 각각은 0에서 10까지의 점수를 가지고 있습니다. 필요한 것을 찾기에 정말 좋은 곳입니다. Lodash, Rx 또는 Ramda와 같은 즐겨찾는 라이브러리의 이름을 입력하면 간단한 래퍼에서 완전한 재작성까지 관련 플러그인을 찾을 수 있습니다. 물론 라이브러리를 비롯한 관련 리소스를 모으는 Awesome React와 Awesome Vue 리포지토리가 있지만 EmberObserver가 특히 유용하다는 것을 알았습니다.

JavaScript 프레임워크에 커밋하기

올바른 JavaScript 프레임워크를 선택하는 것은 웹 프로젝트를 성공으로 이끄는 가장 중요한 단계 중 하나입니다. 작은 프로젝트에서 작업하든 큰 프로젝트에서 작업하든, 솔로 작업이든 팀 작업이든, 이러한 각 세부 사항은 프로젝트에 가장 적합한 프레임워크를 결정하는 데 중요한 역할을 합니다. ).

핵심 기능과 사용성에 관해서는 개발자의 생산성에 다양한 영향을 미칠 포인트를 나열했습니다. 사용성은 사용자의 경험과 배경은 물론 근무 중인 회사나 조직에 따라 크게 좌우되기 때문에 특히 까다롭습니다.

시간이 지남에 따라 이 기사에서 논의한 프레임워크가 발전할 수 있고 인기도가 변경될 수 있으며 적합한 프로젝트가 변경될 수 있지만 이 기사에서는 이러한 각 프레임워크가 가장 잘 작동하는 위치에 대한 일반적인 이해를 제공해야 합니다.