HeYStRanGeR
article thumbnail

(2021.01.11)

 

겨울방학을 맞이해서 웹개발공부를 새로운 마음으로 시작하려고 새 책을 샀다.

전에 공부하던 책이 너무 별로였다...

 

book.naver.com/bookdb/book_detail.nhn?bid=13256615

 

Do it! Vue.js 입문

Vue.js 현업 개발자이자 국내 최초 Vue.js 전문 강사의 핵심 노하우 대공개! 실무자 3일 완성! 입문자 7일 완성! 바쁜 개발자의 시간 절약 입문서! 실무의 정글 속에서 살아남기 위한 실전 예제형 Vue.j

book.naver.com

바로 이 책이다!!

 

요즘 느끼는 건데 한국인이 쓴 책이 잘 읽히는 것 같다.

번역본도 약간 잘 안읽힌다. 

한국인이 집필한 책이 최고다....

 

그래서 이 책대로 뷰 시작부분부터 다시 해보았다.

 


 

이 책의 1장은 Vue.js에 대한 소개였고, 2장부터 개발환경 세팅에 대한 내용이다.

 

 

 

Vue.js 개발 환경 설정을 위해서 총 3가지 단계를 거쳐야한다.

 

1. 아톰(atom) 설치
2. Node.js 설치
3. 뷰 개발자 도구 설치

 


1. 아톰(atom) 설치하기 & 아톰 세팅하기 & 아톰 패키지 설치하기

 

atom.io/

 

A hackable text editor for the 21st Century

At GitHub, we’re building the text editor we’ve always wanted: hackable to the core, but approachable on the first day without ever touching a config file. We can’t wait to see what you build with it.

atom.io

이 사이트에 들어가서 자신의 운영체제에 맞는 버전을 다운받아준다.

 

예전보다 화면이 더 귀여워진 것 같다...

 

 

아톰 설치가 끝나면, 아톰을 실행시켜준다.

 

 

File > Settings > Install > Themes 를 차례로 눌러주고,

seti-ui 를 검색해서 다운받아준다.

 

파일 구분이 쉽고, 색 조합이 튀지 않음

 

 

그리고,  atom-material-syntax-dark 를 검색해서 다운받아준다.

 

자바스크립트 코드 구문 강조색의 조합이 좋음

 

 

Install 클릭했던 라인에 Themes에 들어가준다.

 

 

 

UI Theme은 Seti로, Syntax theme은 Atom Material Dark로 바꿔준다.

 

seti를 누르는 순간 아톰이 확 바뀐다

 

 

Setting > Install > Packages 에 들어가서  language-vue  를 설치해준다.

 

자동완성 기능이 표시되고 코드 구조도 갖춰짐

 

이렇게 하면 아톰설치와 아톰패키지 설치는 끝난다.

 

 

 


2. Node.js 설치하기

 

nodejs.org/ko/

 

Node.js

Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.

nodejs.org

node.js 홈페이지에 들어가서 이것도 설치해준다.

 

 

설치가 끝나면, 윈도우 명령 프롬프트 창을 열어서

node -v

를 입력해주면 설치된 node.js의 버전이 나타난다.

 

 

 


3. 뷰 개발자 도구 설치하기

 

Google 검색창에 vue.js devtools 을 입력한다.

 

 

 

chrome 웹스토어에서 설치를 진행한다 .

 

 

 

나중에 코드 짜고, chorme 개발자 도구에서 vue를 클릭하면 볼 수 있다.

 

 

 

 


책에 하루 2시간 7일 완성이라고 써있길래 

오바가 심하다고 생각했는데 정말 그럴 수 있을지도 모르겠다....

여기까지 했는데 2장이 끝났다.... 

총 7장인데 뒤로갈수록 어려워지기는 하겠지만 책이 워낙 얇아서 금방 끝낼 것 같다!! 

728x90

'개발 공부 > Vue.js' 카테고리의 다른 글

05. Vue.js - 뷰 라우터  (1) 2021.01.18
04. Vue.js - 뷰 컴포넌트 통신  (0) 2021.01.13
03. Vue.js - 뷰 컴포넌트  (0) 2021.01.12
02. Vue.js - 뷰 인스턴스  (2) 2021.01.12
[오류해결] 뷰 개발자 도구 오류 해결  (0) 2021.01.11
profile

HeYStRanGeR

@HeYStRanGeR

포스팅이 좋았다면 "좋아요❤️" 또는 "구독👍🏻" 해주세요!