HwiDoorumi

[개발환경]

1. 에디터 : vscode

2. 운영체제 : windows 10

3. 사전설치 프로그램 : npm / node.js (https://nm817.tistory.com/34?category=816335 참고)

[vue.js 설치]

1. npm / node를 이용한 vue cli 전역으로 설치

-g 는 로컬 어디에서든 vue-cli를 요청할 수 있도록 해주는 명령어다.

설치하는데 약간의 시간이 걸리며, vue-cli를 통해 vue.js 응용 프로그램을 만들 수 있다.

cli란 해당 프레임워크의 명령어를 통해 컴퓨터가 입력받아 출력해주는 명령어 인터페이스다.

vue.js framework를 개발하면서 편한 기능들을 제공해준다.

2. cli를 이용한 vue.js 앱 만들기

cli 명령으롤 통해 my-app 이라는 vue framework를 설치하는 명령어다.

앵귤러의 경우 ng ~~ 라는 명령어로 실행하듯이, vue는 관련 cli명령들이 vue로 시작된다.

3. vscode extension 설치

vs code에서 vue.js 응용프로그램을 개발하기 위한 extension 들이 모여있는 pack extension이다.

주요 구성물

- Vetur : Vetur 확장 프로그램. vue.js 언어기능(구문 강조, InteliSense, Vue snippets, 서식) 등 제공

- npm Intellisense : npm module을 import 할 때 자동완성 기능을 제공

4. vue cli를 통한 vue.js 프로젝트 생성

vscode의 내장 터미널로 vue 프로젝트를 생성할 때 에러가 발생했다.. 일반 명령 프롬프트(cmd)로 하면 생성되는데, 원인을 모르겠다 ㅠㅠ 해결방법을 알면 알려주세요..

에러났던게 영 마음에 걸려서 알아봤는데, shell의 문제였다.

이유는 vscode에서는 ms사의 제품이라서, 기본적으로 터미널의 기본을 파웨셸(powerShell)로 한다는 것이다.

몽고DB를 할 때에는 powerShell을 많이 사용한다고 하는데, 당장 우리에게 필요한건 아니니 기본 터미널을 cmd로 바꿔주도록 하자.

방법은 vscode에서 Ctrl+Shift+P(팔레트 선택)을 누르게 되면 상단에 명령을 칠 수 있는 공란이 생기는데,

여기에 shell 이라고 입력하면 된다.

그럼 상단에 Select Default Shell 이라는 것을 선택해 주고, Commond Prompt를 선택한다.

이제 터미널의 default가 cmd가 된 것을 확인할 수 있다.

terminal에서 생성했을때는 에러를 뱉었는데, cmd에서는 정상적으로 패키지를 생성하였다.

명령어를 치게되면 우측 처럼 어떤 방식으로 설치할 것이냐고 물어보는데, 방향키를 이용하여

default (babel . eslint) 를 선택하여 생성해 준다.

Javascript를 브라우저 호환 ES5로 변환하고 ESLint 린터를 설치하여 코딩 오류를 감지해준다고

공홈에서 설명하니 얌전히 따라간다.

5. vue 프로젝트 실행

대망의 helloWorld 를 띄워볼 타이밍이 왔다.

설레는 마음으로 npm run serve 를 입력해준다.

명령어 npm run serve 를 치고 node module이 package.json을 참고하여 프로젝트를 실행한다.

잠시후, Complied successfully in ~~ Local http://localhost:8080/ 이라는 메세지가 뜬다.

이제 원하는 브라우저를 열어서, 해당 주소 (http://localhost:8080/) 를 입력해주면 다음과 같은 화면을 볼 수 있다!

이제 vue.js 를 개발하기 위한 환경이 완료되었다.

vue.js를 컴포넌트를 불러들이고 재사용하는 방식의 프론트엔드 프레임워크 이다.

이제 하나하나 뜯어보면서 시행착오 겪으면서 맨땅에 헤딩을 시작할 차례다..

필자도 만들어진 vue.js환경에서 html코딩을 하여 vue개발자들에게 전달하는 방식으로 작업을 했던지라,

처음하는거나 다름이 없다...ㅎㅎ 

[설치하기]

1. node.js 설치 (https://nodejs.org/en/download/)

windows 환경에서 node를 설치할 것이기 때문에, 빨간 박스의 내용을 설치했다.

LTS 버전과 Current 버전의 차이는, 안정성과 최신의 차이다.

안정된 버전의 LTS버전을 받는게 최선이고, 필자는 최신버전으로 설치하였다.

별다른 체크 없이, next next finish 해주면 설치가 완료된다.

설치가 완료되면 window - cmd 명령 프롬프트를 열어 node가 제대로 설치되어있는지 확인한다.

설치가 제대로 완료되었는지 확인하려면 node --version / npm --version 의 명령어를 입력하여

확인할 수 있다.

* 설치를 시작하기 전에

vue.js 를 공부하고자 마음먹고 설치 및 환경세팅을 하는중, 의문이 생겼다.

공식 홈페이지(https://kr.vuejs.org/) 에서 설치방법을 열심히 정독하였다.

vue.js란 무엇인가?

필자는 vue 환경에서 두번정도의 프로젝트를 진행하였다.

pa(project assistabt) 역활이라, 그저 시키는대로 프로젝트를 진행할 뿐이였지만,

vue.js 환경에서 작업을 했다는것은 vue를 공부하기에 충분한 매리트를 느낄 수 있었다.

공식홈페이지에 따르면 사용자 인터페이스를 만들기위한 프로그레시브 프레임워크 라고 한다.

실무에서 가장 많이 사용하는 프론트엔드 프레임워크 로는 대표적으로 react, vue, angular

정도라고 한다. 뭐가 더 좋다고 콕 찝어 말할 수는 없지만, 세 프레임워크 다 수박겉핥기 식으로

공부해본 결과, 전체적인 방식은 비슷하다는 점이다.

즉, 하나만 공부하면 나머지는 생각보다 수월하게 따라갈 수 있다는 뜻이 된다.

퍼블리셔가 접근하기에 진입장벽이 가장 쉽다는 vue.js 부터 공부하게 되었다.

vue.js의 가장 큰 장점으로는 현재 개발되어 있는 홈페이지를 vue 환경으로 변경하기가 쉽다는 점이였다.

vue.js는 두 가지 방법으로 공부를 할 수 있도록 되어있다.

1. cdn방식으로 import 하여 사용하는 방식

- 가장 단순한 방식이다. head 영역에 다음 코드를 추가한다.

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

해당 방식은 그저 단순히 vue.js의 문법을 사용하기 위한 방식이다.

공식홈페이지에서도 '프로토 타이핑 또는 학습 목적'에 사용할때 기술하라고 나와있다.

2. vue framework 설치방식

해당 방식은 절차가 꽤나 복잡하다. node.js를 설치해야 하고, vue-cli를 통해

vue framework를 설치하는 방식이다. 1번 방식과는 달리, .html이 아닌 .vue를 작업/관리하게 된다.

필자는 vue.js를 다루면서 2번 방식으로 공부를 하려고 한다.

(설치방법 및 환경설정은 다음 글에서 다루도록 하겠다.)

주관적인 생각으로는, 1번방식(cdn import)이 vue framework를 사용하기 위해

'라이브러리 화' 하여 공부하는 방식이면, 2번방식(vue-cli / npm)이 vue framework를 실제로 공부하기에

적합하다고 생각한다.

로컬 개발서버를 사용한다는것, npm/node.js를 사용해 본다는것, 실제 실무에서 사용하듯

.vue로 진행한다는 이점이 있다.