프론트엔드 취업에 유리한 프레임워크 알려드릴게요ㅣReact, Vue, Angular

- 영상 촬영 : 23년 5월 기준
- Youtube : https://www.youtube.com/watch?v=sC9EuEIfwnE

 

 

 

1. Npm trend에 의하면 React가 압도적으로 많이 다운 받고 있다.

 

1) 채용공고 측면

 

어떤 채용공고가 있는지를 보여주는 수치에 따르면

• Angular 150개
• Vue 339개
• React 748개

2) 주니어로 시작할 때

: 주니어로 시작할 때도 Vue, Angular로 시작하기에는 애매하다.

 

3) 전자정부 프레임워크

: React로 하는 예시들이 많아지고 있다.

 

4) 추천하는 바

(1) 프론트엔드 개발자가 많다면, React 혹은 Angular
(2) 백엔드 개발자끼리 어드민 같은 툴을 개발해야 한다면, 혹은 백엔드와 프론트엔드가 같이 개발을 해야 하는 상황이라면, Vue 추천
(Vue는 양방향 바인드이고, 스프링 부트에 붙이기 쉬워서)

• 양방항 바인드란?
  : 사용자가 UI에서 입력한 값이 자동으로 데이터 모델에 반영되고, 데이터 모델의 변경 사항이 자동으로 UI에 반영되는 기능.
  : Vue.js에서는 양방향 바인딩을 통해 데이터와 화면 요소를 연결해 두면, 화면에서의 변화가 자동으로 데이터에 반영되고, 데이터의 변화가 화면에 자동으로 반영된다.

 

5) Q&A

Q1. 현업에서는 어떤 서비스를 주로 사용하나요?

A1. React를 쓰는 곳들이 많아지다보니, 취업을 하려면 React를 해야 하는 분위기가 조성된다.

 

Q2. 무엇을 집중해서 공부하는 게 좋을까?

A3. 채용곡고수나 npm 다운로드 수, 깃허브 스타 수, 라이브러리 지원 등을 생각하면 React이지만,
Vue도 워낙 쓰는 분들이 많아서 Vue 혹은 React 하나를 어느 정도 다룰 줄 알고 하나에 집중하는 것도 좋은 방법이다.

하지만, 취준생 입장에서는 React가 더 유리할 것이다.

 

 

 

2. React와 Vue에서 집중해야 할 부분

 

1) React에서 집중해야 할 부분

 

• CreatePortal를 통해 오다를 조금 더 쉽게 쓸 수 있게 해준다.
• Lazy라는 부분도 API로 있고, 애플리케이션이 커지다 보면 필요한 부분이다.

(createPortal : React 컴포넌트가 다른 DOM 트리에 렌더링되도록 한다. 일반적으로 React 컴포넌트는 부모 컴포넌트 안에 렌더링되지만, 이를 사용하면 현재 컴포넌트 트리와는 다른 곳에서 렌더링할 수 있다. 주로 모달창을 만들 때 사용)

import ReactDOM from 'react-dom';

function Modal({ children }) {
  return ReactDOM.createPortal(
    <div className="modal">{children}</div>,
    document.getElementById('modal-root')
  );
}

 

(lazy : 컴포넌트를 코드 스플리팅을 통해 동적으로 로드할 수 있게 해주는 도구이다. 필요한 순간에만 컴포넌트를 로드하여 성능을 최적화한다.)

import React, { Suspense } from 'react';
const OtherComponent = React.lazy(() => import('./OtherComponent'));

function MyComponent() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <OtherComponent />
      </Suspense>
    </div>
  );
}
// Suspense는 lazy로 로드하는 컴포넌트가 준비될 때까지 로딩 스피너 같은 대체 UI를 보여주는 역할을 한다.

 

2) Vue에서 집중해야 할 부분

 

• 문법이라기 보다는 Template이라는 것을 쓴다.
  (template : 컴포넌트의 HTML 구조를 정의하는 영역)
• 필수로 해야 할 부분을 다 알아야 애플리케이션을 짤 수 있다.
• Vue 같은 경우에는 조금 Javascript를 배우고 나서도 본연의 문법에 또 있어 추가적인 스터디가 필요하다.

 

3) Angular에서 집중해야 할 부분

• Angular가 잘 만들어진 제품인 것은 많지만, Angular JS에서 Angular2로 올 때 너무 많은 부분이 바뀌었다.
  • 민심을 잃고, React나 Vue를 쓰겠다고 한 사람들이 많아졌다.
• 물론 Angular는 애플리케이션의 단단함을 갖고 있지만, 러닝커브가 많고 배워야 할 것도 많고, RX JS라는 큰 허들이 있다
  • (RxJS(React Extension for JavaScript) : 반응형 프로그래밍을 위해 설계된 라이브러리)