본문 바로가기

FE/Vue.js

[ Vue 3 ] 시작, 개발환경 설정( Vue CLI )

 

Vue.js 

 

간단한 화면 UI개발부터 라우팅, SSR 등의 애플리케이션 레벨의 개발을 지원하는 프레임워크

 

 

SSR ( 서버사이드렌더링 )

서버에서 페이지를 그려 클라이언트로 보낸 후 화면에 표시하는 기법

사용목적: 검색엔진 최적화, 빠른 페이지 렌더링

 

 

 

    Vue 2 와 Vue 3의 차이점

  • 라이브러리 내부 로직 재작성
  • 주요 개발 도구들 변경 예) 뷰 개발자 도구, VSCode 플러그인, Vite기반 프로젝트 생성 등
  • 컴포지션 API, Teleport 등 새로운 문법 지원
  • 리액티비티 시스템 기반 API 변경
  • 공식문서 변경

 

 

 

Vue 3의 코드 작성 방식

 

옵션API와 컴포지션API 방식으로 나뉘고

컴포지션API는 setup이라는 API를 이용해서 ref로 API를 선언했을때 값들이 메시지 형태로 선언이 됨

컴포지션과 옵션을 왔다갔다 하면서 구조적으로 낯설수 있기때문에,

Vue를 처음해보는 사람들에게는 객체형태를 띄고있는 인스턴스 옵션API 사용을 권장

 

 

 

 

 

개발환경 구성

 

VSCode - 확장플러그인

Vue VSCode Snippets

Live Server

Material Icon Theme

Night Owl

volar(vue3부터는 vetur가 아닌 volar를 사용한다)

 

Node.js - LTS버전

Cmder 설치 

 

 

 

 

Vue CLI

Command Live Interface

뷰의 실무프로젝트들이 80-90% 거의 뷰 CLI로 이루어져있을거기 때문에 뷰 CLI를 설치해주자

 

작업폴더만들고 > git 레파지토리 연결해줌

vscode 터미널창에서 npm install -g @vue/cli 입력 설치

vue create 프로젝트명 으로 프로젝트 생성해주면 기본 생성은 완료

cd 프로젝트명으로 넘어가서 npm run serve(yarn serve)를 입력하라고 나오는데, 

서브를 실행하는 명령어이다.

local url위에서 ctrl누르고 클릭하면 화면이 하나 뜨는데

 

이런 기본적인 화면이 하나 출력된다.

package.json

라이브러리가 배포용(dependencies)인지 개발용(devDepedencies)인지 구분해야한다.

예를들어 jquery같이 화면 로직과 직접적으로 관련된 라이브러리는 배포용으로 설치해야한다(npm i jquery)

이렇게 설치된 배포용 라이브러리는 npm rub build로 빌드를 하면 최종 애플리케이션 코드 안에 포함된다.

반대로 설치 옵션에 -D 를 주었다면 해당 라이브러리는 빌드하고 배포할 때 애플리케이션 코드에서 빠지게 된다.

즉 ! 최종 애플리케이션에 포함되어야 하는 라이브러리는 -D로 설치하면 안된다는것

 

vue.config.js

Vue CLI 서비스 관련된 내용들이 기본적으로 들어가있고

웹팩에 대한 설정을 바꾼다던지, 추가적으로 제공하는 내용들을 ctrl+space를 통해 확인하고 추가할 수 있다.

 

 

 


npm과 yarn의 차이

 

npm : Node Package Manager 

노드를 설치할 때 자동으로 설치되는 기본 패키지 관리자

역할 1. 온라인 플랫폼 2. 명령 줄 인터페이스

yarn : 페이스북에서 개발한 패키지 관리자 

npm 레지스트리와 호환하면서 속도나 안정성 측면에서 npm보다 향상

npm install yarn --global

npm을 통해 설치

 


 

 

 

vscode 터미널이 window환경에서는 PowerShell이 기본설정으로 되어있는 경우가 많은데, 

파워쉘을 사용하다가 간혹 권한문제로 애먹을 일도 생길 수있기때문에 Cmder을 사용해주기로 한다.

Cmder은 윈도우 명령어에 리눅스 기반 명령어까지 사용가능하고, 사용자입장에서 확장성이 있다.

무엇보다 이뻐서 사용하고 싶었다! 

 

setting.json에서 

  "terminal.integrated.profiles.windows": {
    "Cmder": {
      "path": "${env:windir}\\System32\\cmd.exe",
      "args": ["/k", "C:\\경로\\경로\\cmder\bin\\vscode_init.cmd"]
    }
  },
  "terminal.integrated.defaultProfile.windows": "Cmder",

위의 코드를 추가해주고,

F1버튼 + terminal: select Default Profile 에서 기본 cmd를 cmder로 설정해주면 된다!

 

 


 

 

초초초 기본을 연습해보자

일단 index.html을 만들고

#app 입력하고 탭을 하면 아래처럼 나오는데

vscode가 기본적으로 지원해주는 Emmet 약어를 사용해서 자동완성 할수있고 작업속도를 향상시킬 수 있다 !

적극 활용해보자

 

<div id="app"></div>
<script>
  Vue.createApp()
</script>

스크립트 태그안에 뷰관련 코드를 입력하고 싶은데,

Vue를 인식할 수 있게하려면 관련 라이브러리를 이 파일안에서 사용할 수 있도록 해야하고,

library-cdn을 들고와야 한다.

vue공식 가이드에 있는 Using Vue from CDN을 가져오자

https://vuejs.org/guide/quick-start.html#using-vue-from-cdn

 

Vue.js

Vue.js - The Progressive JavaScript Framework

vuejs.org

 

 

 

 

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<div id="app">{{message}}</div>
<script>
  Vue.createApp({
    data() {
      return {
        message: "hi",
      };
    },
  }).mount("#app");
</script>

기본적인 코드를 작성하고 저장한다

 

 

 

마우스 오른쪽버튼 누르고 Open with Live Server을 클릭하면 

브라우저가 열리면서 그 브라우저에 message로 입력했던 "hi"가 출력되는걸 확인할 수 있다.

  

 

아래 data값에 message를 "hello vue3"로 변경했을때 화면도 함께 바뀌게 되는데

데이터의 변화에 따라서 화면에 UI값이 바뀌게 되는것이 뷰에서 추구하는 리액티비티라고 하는 개념이다 

 

 

 

 

 

 

 

 

 

'FE > Vue.js' 카테고리의 다른 글

[ Vue.js ] 싱글 파일 컴포넌트  (0) 2024.05.08
[ Vue 3 ] Template Syntax  (0) 2024.05.05
[ Vue 3 ] Component, Event Emit  (0) 2024.05.03
[ Vue 3 ] Instance, Methods, Directive(v-for)  (0) 2024.05.03
[ Vue 3 ] Reactivity  (0) 2024.05.02