※ 이 글에서 다룬 기반기술, 프론트엔드, 백엔드, 데브옵스 등 풀스택 개발 지식은 모두 한화시스템 Beyond SW Camp 12기에서 배운 내용을 복습한 것입니다.
Vue.js : 프론트엔드 프레임워크
Vue.js를 쓰는 이유
Angular1 개발자들이 Angular2로 쉽게 전환을 못한 이유는 학습 곡선이 너무 가파르다. 개발 환경 설정에 필요한 패키지들이 지나치게 많고 TypeScript, Webpack, Gulp와 같은 번들링 툴이나 태스크 러너 등 알아야 할 기술이 너무 많다
React도 ECMAScript6를 배워야하고 JavaScript, Webpack도 알아야 한다.
Vue.js는 웹 퍼블리셔가 작성한 템플릿을 최대한 활용할 수 있으므로 이식성과 생산성이 높다. HTML코드만 확보하고 있으면 쉽게 Vue.js 코드로 변경이 가능하다.
MVVM 패턴 (Model - View - ViewModel)
MVVM 패턴은 애플리케이션 로직과 UI의 분리를 위해 설계된 패턴
View는 HTML과 CSS로 작성
ViewModel은 View의 실제 논리 및 데이터 흐름을 담당
View는 ViewModel만 알고 있으면 된다.
비즈니스 로직에서는 ViewModel의 상태 데이터만 변경하면 즉시 View에 반영된다.
Model의 데이터를 이용해 View라는 UI 생성
Model의 데이터가 변경되면 View의 화면이 다시 그려짐
View Model은 Model의 데이터 변경 사실에 대한 알림을 받고 바인딩 기법을 통해 미리 정해진 템플릿의 규칙에 따라 View를 다시 그려낸다.
가상 DOM은 브라우저 메모리에서 관리되는 DOM에 대한 추상 객체이다.
가상 DOM에 대한 업데이트는 브라우저 DOM보다 훨씬 빠르게 수행된다.
브라우저 DOM은 화면에 직접 그리는 작업을 수행해야하지만 가상 DOM은 변경된 부분을 탐지하는 것이 목적
가상 DOM을 사용하는 것이 절대적으로 빠른 건 아님. 가상 DOM을 사용하는 것은 메모리를 추가적으로 더 사용하는 것
일반적으로 기존 화면의 일부분을 갱신하는 경우 더 좋은 성능
개발 환경 설정
1. Node.js 설치
Node.js : 서버 측 자바스크립트 언어이자 플랫폼
Node.js와 함께 설치되는 npm을 이용해 Vue.js 관련 도구를 설치하고 앱의 의존성 라이브러리 관리하게 됨.
Node.js — 어디서든 JavaScript를 실행하세요
Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.
nodejs.org
모두 기본 설정으로 설치 후 명령창에서 아래의 명령어 실행해 npm을 최신 버전으로 업그레이드
npm install -g npm
2. VSCode
VSCode도 모두 기본값으로 설치 후 확장 프로그램 설치 (반드시 해야하는 건 아니지만 편리한 개발 가능)
Korean Language Pack for Visual Studio Code : 메뉴명과 같은 것들을 모두 한글로 설정
Vue - Official : Vue.js 코드에 문법 강조. 코드 자동완성 기능 등 제공
view-in-browser : 웹 서버 없이 HTML 페이지를 바로 브라우저로 보여줄 수 있는 도구
Vue VSCode Snippets : vue 언어용 코드 조각 모음을 제공
ESLint : 자바스크립트 코드 스타일, 문법 체크 기능 제공
3. Chrome 웹 스토어에서 Vue.js Devtools 설치
Vue.js devtools 찾은 후 세부 정보 클릭
4. Vue.js 애플리케이션
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<h2>{{message}}</h2>
</div>
<script type = "text/javascript" src="https://unpkg.com/vue"></script>
<script type = "text/javascript">
var model = {message:"Hellow Vue3!"};
var vm = Vue.createApp({
name: "App",
data() {
return model;
}
}).mount('#app')
</script>
</body>
</html>예제 파일
View in Other Browser를 실행해 크롬 브라우저로 확인해보기
변수 값을 변경해보니 화면이 바뀌는 것을 확인할 수 있다.
데이터를 변경하니 UI가 바뀐다. 이것이 MVVM 패턴이다.
단일 파일 컴포넌트(Single File Component)
컴포넌트 하나를 .vue 파일 하나에 작성하기 때문
한 파일에 컴포넌트 구성을 위해 필요한 템플릿, 스크립트, 스타일 정보 모두 포함하기에 컴포넌트 단위로 관심사 분리 시킬 수 있다.
webpack
설정이 복잡하다.
호환성이 좋다.
vite
vue 공식으로 추천
설정이 편하다, 빠르다
호환성이 안좋다
오래된 브라우저 지원 x
Vite를 이용한 프로젝트 생성
//vite를 직접 이용해 프로젝트 생성
npm init vite [프로젝트명] -- --template vue
vite를 이용해 vite_test라는 이름의 프로젝트를 생성했다.
cd [프로젝트명]
npm install
npm run dev
개발 서버 시작 명령어를 실행한 후 해당 주소로 접속을 해보겠다.
- .gitignore : Git이 무시해야 할 파일/디렉터리를 지정하는 파일
- node_modules : Node.js 프로젝트에서 사용하는 외부 라이브러리와 종속성이 저장되는 디렉터리
- package.json : 프로젝트의 패키지 관리 파일
- vite.config.js : vite 설정 파일, 거의 건들 일이 없다.
- index.html : 메인 html 파일
'한화시스템 Beyond SW Camp > 프론트엔드' 카테고리의 다른 글
| [Vue.js] ref, reactive, v-if, v-for (0) | 2024.12.26 |
|---|---|
| [Vue.js] Vue-router (0) | 2024.12.23 |
| [JavaScript] 기본 문법 (DOM : Document Object Model, Class 속성 추가/삭제) (0) | 2024.12.17 |
| [JavaScript] 기본 문법 (변수와 상수, 데이터 타입과 연산자, 조건문과 반복문, 함수) (0) | 2024.12.16 |
