Vue.js 시작하기 (1)

주순태·2024년 5월 25일

vue.js

뷰 | Vue.js

목록 보기

1/2

시작

새로운 프로젝트를 Vue.js 라는 프레임워크로 작성하게 되어서 먼저 Vue.js 라는 프레임워크가 무엇인가 조사하고, 사용법을 정리해 보도록 하겠다.

프레임워크란 무엇인가?

프레임워크 (Framework)

프레임워크(framework)는 소프트웨어 개발에서 사용되는 기본 구조나 골격을 제공하는 추상화된 개념이다. 개발자들이 특정 유형의 소프트웨어를 더 쉽게 만들 수 있도록 기본적인 기능과 구조를 제공한다. 이를 통해 개발 시간과 노력을 절약하고, 코드의 일관성을 유지하며, 유지보수를 쉽게 할 수 있다.

프레임워크의 몇 가지 유형을 알아보자

웹 프레임워크: 웹 애플리케이션을 개발하기 위한 프레임워크
HTTP 서버와 통신, BD연결, 세션관리 등을 처리하기 쉽게 도움을준다.
- Django (파이썬), Ruby on Rails (루비), Spring (자바)...
프론트엔드 프레임워크: UI를 구축하는 데 중점을 둔 프레임워크
클라이언트 측의 상호작용과 화면 구성을 용이하게 함.
- React, Angular, Vue.js...
백엔드 프레임워크: 서버 측 애플리케이션 로직을 개발하는 데 사용되는 프레임워크
DB상호작용, 사용자 인증, 애플리케이션 로직등을 관리하는데 사용됨.
- Express.js (Node.js), Flask (파이썬), ASP.NET (C#)...
모바일 애플리케이션 프레임워크: 모바일 앱 개발을 위한 프레임워크
크로스플랫폼 동작이 가능한 앱 개발을 위해 사용됨.
- React Native, Flutter, Xamarin

프레임워크는 다양한 라이브러리와 도구를 포함하며, 개발자가 필요한 기능들을 미리 구현해 둔 상태로 제공됨

Vue.js란 무엇인가?

Vue는 사용자 인터페이스를 구축하기 위한 JavaScript 프레임워크이다. 이는 표준 HTML, CSS 및 JavaScript를 기반으로 구축되며 복잡한 사용자 인터페이스를 효율적으로 개발하는 데 도움이 되는 선언적 구성 요소 기반 프로그래밍 모델을 제공한다.

선언적 렌더링 : Vue는 JavaScript 상태를 기반으로 HTML 출력을 선언적으로 설명할 수 있는 템플릿 구문으로 표준 HTML을 확장한다.
반응성 : Vue는 JavaScript 상태 변경을 자동으로 추적하고 변경이 발생할 때 DOM을 효율적으로 업데이트한다.

Vue-cli로 새로운 프로젝트 시작하기

Vue CLI(Command Line Interface)는 Vue.js 프로젝트를 빠르고 쉽게 시작할 수 있게 도와주는 도구이다.

1. Node.js 와 npm 설치하기

먼저 Node.js를 설치해야한다
Node.js 공식사이트

설치후에 올바르게 설치가 되어있는지 확인을 위해 터미널에 해당명령어를 입력한다.

$ node -v
$ npm -v

2. Vue CLI 설치

Vue CLI를 로컬 설치하려면 해당 로컬디렉터리에서 터미널을 열고 다음 명령어를 입력한다.

$ npm install -g @vue/cli

mac 설치가 안되는 경우
1. 관리자 권한을 주어 설치하는 방안
$ sudo npm install -g @vue/cli
전역 설치 경로 변경

2.1 npm 전역 디렉토리 생성
mkdir ~/.npm-global
2.2 npm 전역 디렉토리 설정
npm config set prefix '~/.npm-global'
2.3 PATH 환경 변수 업데이트
export PATH=$HOME/.npm-global/bin:$PATH
이후에 터미널을 재시작한다.

2.4 Vue CLI 전역 설치
이제 관리자 권한 없이 설치할 수 있다.
npm install -g @vue/cli