JavaScript는 시간이 흐르면서 꾸준히 인기를 얻어왔고, 그 커뮤니티는 눈에 띄게 성장했습니다. 개발자들은 이 언어를 위한 도구들을 매일같이 개발하고 있으며, 이는 JavaScript 환경의 역동성을 보여줍니다.
하지만 이렇게 풍부한 선택지는 때로는 개발자에게 어려움을 안겨주기도 합니다. JavaScript에서는 사실상 모든 작업에 대해 다양한 선택지가 존재하므로, 특정 프로젝트에 적합한 도구나 프레임워크, 라이브러리를 결정하는 과정은 종종 압도적으로 느껴질 수 있습니다. 특히 처음 JavaScript를 배우는 사람에게는 어떤 라이브러리나 프레임워크부터 시작해야 할지 결정하기가 더욱 어렵습니다.
본 글에서는 여러 JavaScript 프론트엔드 프레임워크와 라이브러리 사용이 가져다주는 이점을 살펴보고, 궁극적으로 이러한 선택에 대한 더 명확한 그림을 제시하고자 합니다. 여러분의 선택 과정을 조금 더 수월하게 만드는 데 목적을 두고 있습니다.
React
React는 사용자 인터페이스를 구축하기 위한 JavaScript 라이브러리입니다. 프레임워크가 아닌 라이브러리라는 점을 명확히 할 필요가 있습니다.
오픈 소스 프로젝트로, Facebook과 활발한 개발자 커뮤니티에 의해 유지 관리됩니다. React는 원래 조던 워커에 의해 Facebook 내부 도구로 개발되었으며, 2013년에 오픈 소스로 공개된 후 큰 인기를 얻었습니다.
React의 주요 특징은 다음과 같습니다.
- 재사용 가능하고 사용자 정의 가능한 반응형 컴포넌트를 제공합니다.
- 가상 DOM을 활용하여 효율적인 업데이트를 가능하게 합니다.
- 매우 빠른 성능을 자랑합니다.
- 컴포넌트 기반 아키텍처를 채택하여 코드 재사용성을 높입니다.
- 단방향 데이터 바인딩을 통해 데이터 흐름을 명확히 합니다.
- 활발하고 성장하는 개발 생태계를 가지고 있습니다.
- 상태 관리 기능을 편리하게 제공합니다.
설치 및 사용
React는 프론트엔드 환경에서 두 가지 방식으로 사용할 수 있습니다.
CDN을 통한 사용
공식 웹사이트에서 HTML 문서의 헤더 태그에 포함할 수 있는 스크립트 링크를 얻을 수 있습니다. 필요한 목적에 따라 적절한 링크를 선택해야 합니다.
예를 들어 개발 환경에서는 다음 링크를 사용합니다.
<script crossorigin src="https://unpkg.com/[email protected]/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>
프로덕션 환경에서는 다음 링크를 사용합니다.
<script crossorigin src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script> <script crossorigin src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>
Node.js를 사용한 설치
Node.js가 이미 설치되어 있다고 가정합니다. React를 설치하려면 다음 명령을 실행하면 됩니다.
sudo npm i -g create-react-app –save-dev
설치가 완료되면 다음 명령을 실행합니다.
create-react-app my-first-react-application
위 명령은 개발 서버, webpack, babel 등 React가 정상적으로 실행되는 데 필요한 모든 라이브러리를 설치합니다.
my-first-react-application 폴더로 이동하여 다음 명령을 실행합니다.
npm start
위 명령을 실행하면 3000번 포트에서 개발 서버가 시작됩니다. 브라우저에서 해당 IP 주소의 3000번 포트로 접속하면 다음과 같은 화면을 볼 수 있습니다.
React는 많은 대규모 조직에서 널리 사용되고 있으며 수요가 높습니다. 학습에 관심이 있다면, 완전한 가이드 과정을 추천합니다.
Vue.js
Vue.js는 대화형 사용자 인터페이스와 단일 페이지 응용 프로그램을 구축하기 위한 진보적인 JavaScript 프레임워크입니다. 뷰 레이어에 중점을 둔 모델-뷰 프레임워크이며, 특히 단일 페이지 애플리케이션을 지원하는 기능으로 유명합니다. React와 달리, Vue는 JSX 대신 원시 HTML을 사용합니다.
Vue.js는 오픈 소스이며, 에반 유에 의해 2014년 2월에 처음 공개되었습니다. Vue.js의 주요 특징은 다음과 같습니다.
- 반응형이고 컴포넌트 기반의 뷰를 제공합니다.
- 가상 DOM을 활용하여 성능을 개선합니다.
- 핵심 라이브러리에만 집중하여 간결함을 유지합니다.
- CSS-In-JS 없이 CSS 범위 지정을 지원합니다.
- 컴포넌트 내 단방향 바인딩을 제공합니다.
- 다양한 필수 애드온을 지원합니다.
- 코드 재사용성을 높입니다.
설치 및 사용
Vue.js는 CDN을 통해 또는 Node.js와 함께 프론트엔드에서 사용할 수 있습니다.
CDN 방식을 사용하려면 HTML 페이지 헤더 섹션에 다음 스크립트를 추가하면 됩니다.
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
위의 스크립트는 개발용 콘솔 메시지를 포함하고 있어 개발 환경에 적합합니다. 프로덕션 환경에서는 다음 스크립트를 사용해야 합니다.
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
Node.js를 사용하는 경우, npm 명령어를 통해 설치할 수 있습니다.
npm install vue더 자세한 정보를 얻고 싶거나 추가 학습을 고려하고 있다면 공식 Vue.js 문서를 참고하거나, 관련 강의를 수강하는 것을 추천합니다.
Angular
Angular는 동적 웹 페이지를 위한 구조적인 JavaScript 프레임워크입니다. HTML을 템플릿 언어로 사용할 수 있으며, HTML 구문을 사용하여 애플리케이션 컴포넌트를 명확하고 간결하게 표현할 수 있습니다. Google과 여러 기여자에 의해 관리되는 오픈 소스 프로젝트입니다.
설치
먼저 최신 버전의 Node.js가 설치되어 있는지 확인해야 합니다. 가장 먼저 설치해야 할 것은 Angular CLI 도구입니다.
npm install -g @angular/cli
설치가 완료되면 다음 명령어를 사용하여 새 프로젝트를 생성할 수 있습니다.
ng new my-first-angular-app화면에 표시되는 지시에 따라 진행합니다. 이는 Angular가 정상적으로 실행되는 데 필요한 파일 및 폴더, npm 모듈을 사용하여 타사 라이브러리를 다운로드합니다.
새로 생성된 애플리케이션을 시작하려면 해당 앱 폴더에서 다음 명령어를 실행합니다.
ng serve그러면 포트 4200에서 개발 서버가 자동으로 시작됩니다.
[[email protected] my-first-angular-app]# ng serve
10% building 3/3 modules 0 activeℹ ｢wds｣: Project is running at http://localhost:4200/webpack-dev-server/
ℹ ｢wds｣: webpack output is served from /
ℹ ｢wds｣: 404s will fallback to //index.html
chunk {main} main.js, main.js.map (main) 47.8 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 264 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.15 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 10 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 3.81 MB [initial] [rendered]
Date: 2019-12-28T12:08:20.138Z - Hash: 5d4b93c7bf9e61979c4d - Time: 12864ms
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
ℹ ｢wdm｣: Compiled successfully.결론
따라서 어떤 프레임워크를 선택할지는 “어떤 것이 더 나은가”보다는 개인적인 선호에 달려있다고 할 수 있습니다.
위에 나열된 모든 프레임워크/라이브러리는 각자의 장점을 가지고 있습니다. 다음은 간단한 요약입니다.
- 외부 종속성을 직접 관리하고 싶지 않다면, Angular를 배우는 것이 좋은 선택입니다.
- 빠른 PWA(Progressive Web App)나 단일 페이지 응용 프로그램을 구축하고 싶고 JSX에 익숙하다면 React를 선택해야 합니다.
- React는 가장 활발한 커뮤니티를 보유하고 있으며, 많은 취업 기회를 제공합니다.
- React는 비교적 쉽게 시작할 수 있다는 장점이 있습니다.
- React는 매우 사용자 정의가 가능하며, UI의 각 부분을 컴포넌트로 취급합니다.
- Vue는 React와 유사한 장점을 가지고 있지만, JSX를 사용하지 않습니다.
- Vue의 취업 시장은 지속적으로 성장하고 있습니다.
다음은 Google 트렌드 차트에서 3가지 프레임워크의 인기도를 비교한 결과입니다.
프론트엔드 개발에 관심이 있다면 유데미 강좌를 확인해 보세요.