Vue.js 기초와 실습

1. Vue.js 란?

· 대표적인 프론트엔드 개발 프레임워크(오픈 소스 자바스크립트)
· 가벼운 크기와 직관적인 문법으로 SPA 개발에 매우 적합한 프레임워크

· Vue.js는 json 형태로 데이터를 읽기 때문에 페이지 로딩 없이 진행
· 장점: 뛰어난 내장 응용 프로그램, 유연하고 다양한 개발 환경
· 단점: 부적절한 확장성(대규모 프로젝트에 부적합), 코드 극도의 유연성으로 불일치 및 코딩 실수 증가시킴

 ※ SPA란? Single Page Application의 약자로 단일 페이지 애플리케이션을 의미

 

2. Package Manager 란?

· 패키지를 관리하는 작업을 자동화, 안전처리하기 위해 사용되는 도구, 즉 설치된 프로그램을 관리하는 것
· Node.js: npm, yarn / Python: pip / Java: Maven 등 각자의 패키지 매니저들이 존재
· npm(Node Package Manager): node.js 설치할 때 자동으로 설치됨
· yarn: npm의 부족한 부분들을 개선하기 위해 개발됨

 

3. Vue.js 실습을 위한 기본 설정

· C:\himedia 위치에 vue 폴더 생성

1) npm 설치
· vue를 사용할 수 있도록 설치하기 위해 터미널에 아래 명령어 입력

 

 

 

 

 

→ npm 혹은 yarn 두 가지의 방식을 통해 module 설치 진행

→ npm install -g @vue/cli

→ 우측 사진과 같이 module 설치됨

 

 

 

 

 

 

2) yarn 설치
· 명령어 입력: npm install -g yarn
· 버전 확인: yarn --version

 

4. Vue.js 프로젝트 생성 및 실행

1) 확장팩 설치

· Vetur: 쉽게 코딩할 수 있는 기능 제공
· Vue 3 Snippets: 코드 구조를 만들어주는 기능
· Vue - Official

 

2) 프로젝트 생성

· 설치 완료 후 명령어를 통해 프로젝트 생성: vue create (프로젝트명)  /  version 3 선택
· 정상적으로 생성되면 좌측에 프로젝트명과 json파일 등등 다양한 파일이 생성됨

 ※ 프로젝트 생성 혹은 yarn 오류 발생 시!!

· Windows PowerShell 관리자로 실행
· 명령어 입력: Get-ExecutionPolicy → Restricted 출력 → Set-ExecutionPolicy → y 입력 후 정상이면 VS Code 재실행

 

 

3) 프로젝트 실행

· 해당 프로젝트 폴더로 이동하는 명령어 입력: cd .\vuedongsan
· 프로젝트 실행 명령어: npm run serve 또는 yarn serve
· 정상 실행되면 ctrl+url 클릭, Welcome to Your Vue.js App 화면 나오면 정상!

5. Vue.js 프로젝트 기본 구조

1) package-lock.json, package.json: 해당 프로젝트에 대한 모든 정보(라이브러리 버전, 프로젝트 설정 기록 등)
2) gitignore: git과 연동할 때, public의 경우 중요한 내용이 노출될 수 있기 때문에

  이를 방지하기 위해 git 버전 관리에서 제외할 파일 목록을 지정하는 파일 

3) src 폴더
· assets: font, icons, images, css 등 어플리케이션에서 사용되는 정적 파일이 모여있는 디렉터리
· main.js: npm run serve 명령어를 통해 뷰를 실행시켰을 때, 가장 먼저 실행되는 파일

· componets: 실제 동작하는 코드를 보유한 vue 파일, import하여 사용될 문서의 집합소

  component 명명 규칙: PascalCase와 KebabCase 형태로 사용, ex) MyComponent, my-component

  component 파일: <template>, <script>, <style>로 구성되며, <template>는 html과 같은 역할, <style>은 css 기재

 

 ※ ① import > ② 등록 >③ 사용, 3개 중 하나라도 누락되거나 안 맞으면 오류 발생!

     ② components의 이름은 두 개 이상의 단어를 조합해야 오류가 발생하지 않음