[Vue.js] 개발환경 설정하기 / ATOM 에디터 설치하기

(https://kr.vuejs.org/)

Vue 정의하기

개발환경 설정 전에 간단하게 정의를 짚고 넘어가자면

Vue.js 란 ?

WEB 개발에서 프런트엔드 프레임워크 중 하나이다.

(프레임워크 : 개발자들의 개발 생산성을 높이기 위해 일정한 틀과 규칙에 따라 개발하도록 미리 구조를 정의해 놓은 도구)

대표적인 프런트엔드 프레임워크로는 React, Angular, Vue 가 있는데 각각의 장단점이 있겠지만

내 경우에는 HTML, CSS, Javascript 기초만 아는 비전공자도 쉽게 배울 수 있다는 말에 혹해서 Vue를 선택하였다!

Vue.js의 장점

1 배우기 쉽다

앞서 말했듯이 HTML, CSS, Javascript의 기초만 아는 입문자의 경우에도 하루안에 배우는 게 가능하다.

또한, Template 형식의 웹개발이라 전통적인 웹개발 패러다임과 매우 유사하고, 가독성이 좋기 때문에 초보자의 경우에도 이해하기가 쉽다.

여기서 Template은 표준 HTML 이외의 추가적인 HTML 공부가 필요하지만 걱정하지 않아도 된다!

2.x버전 이후부터 Vue는 디버깅과 테스트가 편리한 render()를 함께 지원하고 있다 :)

+ 가이드, 예제, API 등 문서화가 매우 잘되어있다!

2 성능이 우수하고 빠르다

Vue 제작팀에서 테스트를 통해 성능을 비교한 결과 뷰가 가장 빠른 것으로 나타났다고 한다

React의 가상 돔(Virtual DOM)은 앱의 상태가 변할 때 실제 DOM과 일치시키는데, 이 과정에서 스스로 최적화 한다.

Vue 또한 가상 돔 기반의 렌더링 특징을 가지고 있다.

같은 기능을 하는 Vue와 React의 라이브러리의 용량을 비교하였을 때, 약 2배에 육박하는 차이로 React의 용량이 많다!

웹페이지의 용량은 프로젝트에서 매우 많은 영향을 준다.

빠르고 경량의 웹페이지를 만들고 싶다면 Vue가 더욱 적절하다

+ 반대로 큰 규모의 앱 개발에는 React를 선택하는게 좋다

3 React와 Angular의 장점을 모두 가지고 있다

앵귤러의 양방향 데이터 바인딩(Two way Data Binding)과 리액트의 단방향 데이터 흐름(One way Data Flow)의 장점을

모두 결합한 프레임워크이다

* 양방향 데이터 바인딩 - 화면에 표시되는 값과 프레임워크의 모델 데이터 값이 동기화되어 한쪽이 변경되면 다른 한쪽도 자동으로 변경되는 것

* 단방향 데이터 흐름 - 컴포넌트 간에 데이터 전달 시 항상 상위 컴포넌트에서 하위 컴포넌트 한 방향으로만 전달하게끔 구조화되어 있는 것

---

Vue 개발환경 구성

기본적으로 뷰로 웹 개발을 위해서는 다음 도구들의 설치가 필요하다

(기존의 사용하고 있던 IDE가 있다면 굳이 설치할 필요는 없다 😊 )

1 크롬 브라우저

2 아톰(Atom) 텍스트 에디터

3 Node.js

4 뷰 개발자 도구 (Vue.js devtools, 크롬 확장 플러그인)

크롬 브라우저 설치는 넘어가고

Atom을 설치해보자!

1 https://atom.io 접속

메인화면이다. 노란 Download 버튼 너무 누르고 싶게 생겼으니까 누르면 된다 :)

2  실행파일 (.exe)를 실행하여 설치를 진행한다

끝💙

놀랍게도 정말 끝이다

이제 기본적인 기능은 모두 사용 가능하다 :)

너무 간단해서 허무하니까, 추가적으로 개발 시 유용한 테마와 패키지 설치까지 알아보자!

---

첫번째. 테마 적용하기

▶ 기본적으로 제공되는 테마에서는 .js .css .html 등 모든 파일 아이콘이 동일하게 보인다

Window 기준으로 따라가보면,

File → Settings → Install → 원하는 테마/패키지 설치 → Theme or Packages 탭 → 테마/패키지 설정

핵 간단!!

좀 더 자세히 보여주면

1 Install 탭

원하는 테마와 패키지를 설치할 수 있다

Search 창 오른쪽 Packages/Themes 버튼으로 테마/패키지 검색이 가능하다

사용할 테마를 검색해 설치하면 되는데 구글링을 통해 여러가지 테마의 예시를 볼 수 있다

개인적으로 현재 사용하고 있는 UI테마는 seti-ui  /  syntax테마는 atom-material-syntax-dark 를 추천한다

Vue.js 관련 입문서를 보면 가독성 등을 고려해서 가장 많이 언급되니까 😏

2 설치한 테마 적용

Themes 탭 → UI Theme 드롭 다운 박스 클릭 → 원하는 테마 선택/적용

Themes 탭 → Syntax Theme 드롭 다운 박스 클릭 → 원하는 테마 선택/적용

요롷게 하면

짜아안 👍

짜아아아아안 👍👍

가독성 아주 훌륭해졌다! (그리고 멀리서봐도 코딩하는 화면이 되어버려서, 카페에서 이거 하고있으면 좀 있어보인다...😎)

두번째. 패키지 적용하기

패키지는 아톰을 이용해서 개발할 때 유용한 기능들을 추가적으로 제공한다

위의 테마 설치 적용과 마찬가지로 Install 후 적용하면 된다!

+ 추천하는 패키지로는

emmet -  웹개발자에게는 필수라고 할 수 있는 툴! HTML, CSS 코드의 자동완성과 빠른 작업을 돕는다.

atom-beautify - 코드를 정렬해준다.

atom-html-preview - 코딩을 진행하면서 실시간으로 HTML 파일의 상태를 확인할 수 있다.

서버사이드 개발환경 구성은 다음

node.js 설치 -  [Vue.js] 개발환경 설정하기 / node.js 설치