Vue 입문하기 1. Vue 란?

 약 두달 동안의 vue.js 를 사용한 웹 개발을 해오면서

계속해서 아쉬웠던 뷰의 기초, 응용 이론 공부를 조금 해보자ㅏㅏㅏ

먼저, 내가 뷰를 사용하게 된 계기는

프론트 개발에 있어서 러닝커브가 비교적 낮으면서, 추후에 비슷한 프레임워크인 리액트로의 기술적 확장이 가능할 것 같아서였다. (사실 리액트를 먼저 시작했다가 이건 뭐지 저건 뭐지 난해했던....)

뷰는 jsp 개발 경험이 있던 내가 바로 개발 할 수 있을 정도의 난이도였다. ( 하지만 스스로 잘 만들었다고는 못하겠... ㅜ )

나의 경우, 뷰를 사용해서 기능과 화면 구현은 어느정도 가능했으나..

기획과 동시에 코드를 짜다보니, 코드의 가독성, 그리고 컴포넌트 구성에서 뭔가 잘못되었다는 생각이 자주 들었다.

그래서 사비를 들여 강의를 구입했고, 다시 강좌를 차근히 들으며 복습하는 시간을 가지려고 한다ㅏㅏ

혹시나 나처럼 실무에서 바로 뷰 개발을 해야하는 사람이 있다면 이 글 가장 아래의 강의 링크를 참고하시길..

 

Vue.js 란?

•  JavaScript 기반의 프레임워크

1. CDN 방식으로 이미 개발되어 있는 기존 코드에 아래와 같은 스크립트를 붙여넣어 사용하는 방식과

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

2. Vue CLI를 사용한 완전한 단일 페이지 애플리케이션(SPA) 작성방식이 있다.

(나는 Vue Cli를 사용했다ㅏㅏ)

 

Vue는 사전에 필요한 요구사항 몇 가지가 있는데,

1. HTML, CSS 및 JavaScript 에 대한 사전 지식

2. node.js 와 npm이 설치된 터미널 ( node.js에 npm이 내장되어있다 )

이 필요하다.

 

html과 css, javascript가 처음이라면, 웹 개발 도서나 강의 등을 통해 따로 공부를 하고,

노드는 아래 공식 홈페이지 링크에서 다운로드 받으면 된다.

Node.js

 

node.js 설치가 완료되었다면, cmd 창이나 git bash 등의 터미널을 열고, 아래를 치고 엔터해주면

npm install --global @vue/cli

vue-cli가 설치된다.

 

설치가 끝나면, 프로젝트용 폴더를 하나 만들어주고, 그곳 디렉토리에서 터미널을 열어 아래를 쳐준다.

vue create <프로젝트 이름>

이렇게 하면 vue-cli 설정이 몇가지 나오는데

거기서 원하는 vue 버전과 웹팩 등을 결정하고 나면, vue-cli 환경이 구축된다.

다 끝나면 터미널에서 cd 명령어로 프로젝트 폴더에 접근한 뒤,

npm run serve

로 로컬에서 잘 실행되는지까지 확인하자ㅏㅏ

 

완성된 프로젝트 구조를 살펴보면 이렇다.

• .eslintrc.js: eslint의 config 파일, linting 규칙을 이 파일에서 관리할 수 있다.
  
  
• babel.config.js: Babel의 config 파일, Babel은 개발용으로 사용하는 최신 JavaScript 기능을 상용 브라우저 호환이
  가능하도록 구버전으로 번역하는 역할을 한다.
  
  대표적으로, ECMA Script 2015(비공식적으로 ES6라고도 불림)로 작성된 코드를 ES5로 변환해 IE 등의 브라우저에서
  동작할 수 있도록 해주는 것이 Babel이 하는 일이다.
  이 파일에 부가적인 babel 플러그인을 등록할 수 있다.
  
  
• .browserslistrc: Browserslist의 config 파일,
  
  우리가 사용하는 도구를 어떤 브라우저에 최적화할지 이 파일에 정의할 수 있다.
  
  
• public: public 디렉토리는 Webpack의 처리를 받지 않고 퍼블리싱되는 정적 자산(static assets)을 포함한다.
  ( 단, index.html의 경우 일부 Webpack의 처리를 받는다 )
  
  • favicon.ico: 앱의 대표 favicon 파일, 기본값으로 Vue 로고가 들어가 있다.
    
    
  • index.html: 앱의 템플릿 파일, 우리의 Vue 앱은 이 HTML 페이지로부터 실행된다.
    
    lodash 템플릿 구문을 사용해 보간법으로 값을 지정할 수 있다.

위에 적힌 파일들은 왠만하면 직접 편집할 일이 없기 때문에 건드리지말자!

• src: 우리의 Vue 애플리케이션의 핵심 내용을 포함하게 될 디렉토리
  • main.js: 이 파일은 애플리케이션의 진입점이다.
    
    현재 이 파일은 Vue 앱을 초기화하고 index.html 파일에서 어떤 HTML 엘리멘트를 앱에 붙여야 하는지
    (예제 프로젝트에서는 #app 엘리멘트) 나타낸다.
    
    이 파일에 전역 컴포넌트나 부가적인 Vue 라이브러리를 등록하는 경우가 많다. 
    
    
  • App.vue: Vue 애플리케이션의 최상위 컴포넌트
    
    Vue 컴포넌트에 대한 자세한 내용은 아래를 참조
  • components: 우리가 앞으로 만들 Vue 컴포넌트를 저장할 디렉토리
    
    지금은 한 개의 예시 컴포넌트만을 포함하고 있습니다.
  • assets: CSS나 이미지 등의 정적 자산(static assets)을 저장하는 디렉토리
    
    이 파일들은 src 디렉토리에 포함되어 있기 때문에 Webpack의 처리를 받는다.
    
    즉, Sass/SCSS나 Stylus와 같은 전처리 도구를 사용할 수 있다.

새로운 프로젝트를 생성할 때 어떤 옵션을 선택했는지에 따라, 위에 소개되지 않은 디렉토리가 생길 수도 있다.
예를 들어 router 옵션을 선택했다면 views가 생성된다. ( 나는 옵션으로 router를 선택했다ㅏㅏ )

여기까지 되었다면, vue 개발 준비가 다 되었다ㅏㅏ
더 궁금한 사항은 해당 글을 쓰는데 도움이 되었던 아래 사이트의 링크로 들어가보시면 좋겠습니당!

Vue 시작하기 - Web 개발 학습하기 | MDN

Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 개념 - 인프런 | 강의