티스토리 뷰

코딩 일기/랩실스터디

내 이름은 Vue.js! 나를 소개하지! [스마트인재개발원]

harotea 2021. 7. 25. 22:38

드디어 저의 스터디 최종 목표인 Vue.js 써보기의 도입부입니다!!

본 내용은 스마트인재개발원 랩실에서 4주 차 발표에 진행했던 Vue.js 주제를 가지고  포스팅했습니다.

 

Vue.js란 무엇인가! 이것을 알아보기 위해 다음과 같은 순서로 설명해 볼까 합니다.

  • SPA 프레임워크
  • Vue.js - Vue의 탄생
  • Vue의 장점
  • Vue의 특징

 

 

1. SPA 프레임워크

예전에는 PC용 웹사이트 하나만 만들면 되었지만 모바일 시대가 열리고,

앱이나 스마트폰 브라우저로 서비스들이 이용되기 시작하면서 이제는 어느 정도 갖춰진 사업을 하는 회사에서는 개발자들이 PC용 웹, 모바일용 웹 그리고 iOS와 안드로이드 앱과 서버까지 개발해야 하게 되었습니다.

먼저 PC용 사이트의 경우에는 접속이 들어오면 데이터베이스에서 정보들을 찾아서 그걸로 HTML, CSS, Javascript로 렌더링하고 이걸 PC 브라우저로 보내줍니다.
반응형으로 만들지 않는다는 가정 하에 모바일용 사이트도 이러한 과정을 거쳐야 합니다.
안드로이드나 iOS의 네이티브 앱은 앱 개발자들이 만든 앱에서 서버에 정보를 요청하면 데이터베이스에서 정보들을 찾아서 앱으로 전송하고 앱에서는 이 정보들을 받아서 안드로이드나 iOS의 방식으로 폰 화면에 띄워주게 됩니다.

 

여기서 겹치는 부분들을 최소화하고 업무를 좀 더 깔끔하게 분할할 수는 없을까요?

안드로이드와 iOS에는 자체적인 SW와 시스템이 있어서 서버로부터 데이터만 전송받으면 화면이 보일 수 있습니다.
웹에서도 그게 가능하다면, 즉 서버에서 데이터만 보내줘도 이걸 브라우저에서 HTML, CSS, JS로

랜더링 해낼 수 있다면, 이제 서버는 어디서 정보를 요청하든 동일한 작업을 수행해서 데이터를 전송하면 될 것입니다.

 프론트엔드와 백엔드를 분리!

 


웹 사이트 개발을 이렇게 사용자 컴퓨터의 브라우저에서 돌아가는 프런트엔드와 서버에서 돌아가는 백엔드로 분리하는 것입니다.
브라우저에서도 동작하는 자바스크립트란 언어로 강력한 라이브러리나 프레임워크를 만들면 가능하지 않을까요??

 

바로 그게 Angular, React, Vue 같은 SPA 프레임워크입니다.
Angular, React, Vue는 방식들은 다르지만 기본 아이디어와 원리는 유사합니다.

 

2. Vue.js - Vue의 탄생

앵귤러나 리액트의 경우에는 현 프런트엔드 프레임워크 시장을 보았을 때, Vue보다 상대적으로 오래된 프레임워크이며 이미 많은 기업에서 시스템을 해당 프레임워크로 구축해 서비스하고 있습니다.

뷰의 창시자인 에반도 구글에서 일할 당시 브라우저 상에서 많은 프로토타이핑 작업을 앵귤러로 구현하였습니다.

에반은 앵귤러의 데이터 바인딩 방식과 돔(DOM)에 직접 접근하지 않고도 데이터를 표현하는 방식에 흥미를 느꼈습니다.

하지만 앵귤러의 경우 자바스크립트를 보완하여 나온 타입 스크립트나 ES6 등의 언어를 기반으로 방대한 크기의 프레임워크를 이해해야 하기에 입문자라면 부담을 느낄 수 있습니다.

그래서 에반은 앵귤러의 데이터 바인딩과 같은 필수적인 요소들만 가지고 화면을 구현하였고, 오픈 소스화하면서 많은 사람들이 참여하여 프레임워크의 기능을 붙여 나가기 시작했습니다. 그렇게 하여 뷰가 탄생하게 되었습니다.

 

3. Vue의 장점

  • 배우기가 쉽다!

   - HTML, CSS 그리고 Javascript에 대한 이해도가 있다면 일주일 좀 더 보태서 하루 안에도 전반적인 이해가 가능할 것입니다.

  • 리액트, 앵귤러에 비해 성능이 우수하고 빠르다!
  • 리액트와 앵귤러의 장점을 가지고 있다!

   - Vue는 앵귤러의 데이터 바인딩 특성과 리액트의 가상 돔 기반 렌더링 두 가지 특징을 모두 가지고 있습니다.

 

이번 포스팅에서는 뷰의 전반적인 장점에 대해서 까지 다뤄보았고, 다음 포스팅에서 Vue의 장점을 어떻게 쓰는지 예시와 함께 설명해 드리도록 하겠습니다.

 

 

 

 

 

 

 

해당 수업은 '스마트인재개발원'에서 '지능형 IoT 융합 SW 전문가 과정(NCS) 과정'에서 진행한 교육내용입니다.

 

 

 

스마트인재개발원

4차산업혁명시대를 선도하는 빅데이터, 인공지능, 사물인터넷 전문 '0원' 취업연계교육기관

www.smhrd.or.kr

 

저작자표시 동일조건

'코딩 일기 > 랩실스터디' 카테고리의 다른 글

Vue.js 이벤트 핸들링 / Computed 속성 [스마트인재개발원]  (0) 2021.08.01
내 이름은 Vue.js! 내 장점은 말이야~ [스마트인재개발원]  (0) 2021.08.01
AJAX 그것이 알고싶다! (2) [스마트인재개발원]  (0) 2021.07.25
AJAX 그것이 알고싶다! (1) [스마트인재개발원]  (0) 2021.07.09
JSON과 친해지기(2) [스마트인재개발원]  (0) 2021.06.28
댓글