Vue 알아보기 #1

개발관련 공부한 내용을 공유할려고합니다.
보기만 한 내용은 기억에 안남으니 강의를 들으면서 작업한 내용을 하나씩 정리해 다른분과도 공유 하고자 합니다.
시작만 하고 끝이 없는 강의들이 많은데 하나씩 다 채워 가고자 합니다.

요즘 개발은 BackEnd / FrontEnd 안가리고 다 해보는게 좋은거 같네여.
React보다는 Vue가 FrontEnd F/W으로는 배우기도 싶고 하여 이번 공유내용은 Vue로 잡았습니다.

Vue를 배우기 위해 필요한 도구들을 먼저 설치 하는법 부터 공유 하겠습니다.

강의내용 참고는 아래 inflearn에 있는 아래 강사분에 강의를 참고 했습니다.
강의명 : Vue.js 시작하기 - Age of Vue.js
강사 : 장기효(캡틴판교) 

Vue IDE설치

1. Chrome 설치
2. Visual Studio 설치
3. node.js 설치
4. vue.js dev tools 설치

위 4개지 IDE Tools 설치 방법을 공유 드립니다.

Chrome 설치

FrontEnd를 개발할때 제일 필요한거는 Browser입니다.
각자 본인에게 맞는 Browser를 설치하면 되는데, Chrome이 많이 익숙하여 해당 Browser를 설치 하겠습니다.

Browser 에서 chome download로 검색을 하면 아래와 같이 Chrome을 다운 받을 수 있는 링크가 보입니다.

링크를 타고 들어오면 아래와 같이 Window / Mac OS환경에 맞게 다운로드 받을 수 있도록 링크가 나옵니다.
다운로드를 클릭하여 Chrome을 다운로드 받아서 설치 합니다.

 

Visual Studio 설치

MS에서 무료로 배포하는 매우 좋은 개발 IDE Tool 입니다.
아래 링크를 클릭하시면 OS환경에 맞는 무료버전을 다운로드 받아 설치할 수 있습니다.
많은 Plugin을 제공하여 개발편의성도 높습니다.

https://visualstudio.microsoft.com/ko/

Visual Studio: 소프트웨어 개발자 및 Teams용 IDE 및 코드 편집기

 

Node.js 설치

Node.js는 JavaScript를 서버에서도 사용할수 있도록 만든 프로그램 입니다.
Node.js는 V8이라는 JavaScript 엔진 위에서 동작하는 자바스크립트 런타임(환경) 입니다.
Node.js는 서버사이드 스크립트 언어가 아닌, 프로개름(환경) 입니다.
Node.js는 웹서버와 같이 확장성 있는 네트워크 프로그램을 제작하기 위해 만들어 졌습니다.

아래 Site에 방문하게 되면 OS환경에 맞는 Node.js를 받을 수 있습니다.
23/01/26일 제가 방문했을때는 아래와 같이 18.13.0 LTS 버전을 제공하고 있습니다.
https://nodejs.org/ko/

Node.js

Vue.js dev tools

Chrome 확장 프로그램으로 Vue를 Debug할수 있는 Tool 입니다.
Chrome 웹스토어에서 Vue.js dev tools로 검색해서 다운받으셔도 되고, 아래와 같이 검색하셔서 Chrome 웹 스토어로 방문 하셔서
설치 하셔도 됩니다.

 

이제 Vue를 개발하기 위해 필요한 Tool을 모두 설치 했습니다.
다음 강의에서는 추가로 필요한 것들을 설치 해 보겠습니다.