기존에 Vue를 활용하여 작업한 프로젝트의 버전관리 작업을 담당하게 됨에 따라,
Vue에 대한 기본적인 내용을 파악 및 기록할 목적으로 작성하였다.
OS는 window, IDE는 intelliJ로 작업하였다.
목차는 아래와 같다.
1. Vue에 대하여
01) Vue란?
02) React와의 차이점
2. 설치 및 실행
01) 설치
02) 프로젝트 생성
1. Vue에 대하여
Vue를 설치하고, 프로젝트 기본 구성을 알아보기에 앞서 Vue가 무엇인지에 대한 내용을 우선적으로 알아보려 한다.
01) Vue란?
- 프론트엔드 개발을 쉽게하기 위한 react와 함께 대중적인 오픈소스 javascript 프레임워크
- MVVM패턴의 ViewModel에 해당하여, UI코드와 데이터제어 제어 로직을 분리
- SPA(Single Page Application)를 구축하는데 이용 가능. 때문에 자연스레 CSR(Client Side Rendering)이다. 하지만 많은 경우에 REST API프로젝트를 별도로 생성하여 서버 프로젝트를 구축한다. 이때, 정적 빌드 폴더가 서버 프로젝트 측으로 업로드 되도록 한다. 즉 서버가 렌더링 한 html을 웹에 표출하도록 한다. 이런 방식을 통해 SPA이면서 SSR인 웹사이트를 구축하는 방향이 많이 보이는 추세라고 한다.
02) React와의 차이점
두 서비스 다 프론트엔드 작업을 더 용이하게 할 목적으로 파생된 것은 맞으나, 특징은 분명히 다르다.
그 중 각 특징을 명확히 할 수 있는 차이는 라이브러리인가, 프레임워크인가에 대한 내용이라고 판단하였으며 그 내용에 대해 초점을 맞추어 차이점을 아주 간략히 정리해보았다.
| React : 라이브러리 | Vue : 프레임워크 |
| - 사용자가 필요에 의해 제공되는 서비스를 사용하므로 자율적이다. - 하나의 문장을 서술하는 방식이 다양하다. - 협업 시, 작업자마다의 스타일이 있으므로 가시성이 비교적 낮다. |
- 프레임워크가 제공하는 틀을 이용하므로 제한적이다. - 하나의 문장을 서술하는 방식은 정해져있다. - 협업 시, 코드 작성 방식이 제한적이므로 비교적 가시성이 높다. |
2. 설치 및 실행
타 포스팅들을 찾아보니, 터미널을 활용하여 npm을 설치하는 방향으로 작업하였으나 본인의 경우 다른 방식을 사용하여 vue프로젝트를 생성할 환경을 구성하였다.
01) 설치
필요 리소스 설치에 대하여 ㉮설치, ㉯환경변수 설정, ㉰최종 확인 이렇게 3가지 단계로 작업을 진행 하였다.
㉮설치
아래 링크에 접속하여 node.js를 설치할 수 있다.
Node.js
Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.
nodejs.org
msi형식의 파일 다운이 완료되면 해당 파일을 실행시켜 node.js를 정상적으로 설치한다.
특별히 설치 디렉토리를 변경하지 않았다면 기본적으로 아래와 동일한 디렉토리에서 이미지와 같은 파일들을 확인할 수 있다.
C:\Program Files\nodejs
㉯환경변수 설정
window + R로 실행창을 연 후 시스템 이미지와 같은 명령어(sysdm.cpl)를 입력하여 시스템 속성 창을 연다.
[고급]탭의 [환경변수]를 클릭하여 시스템 변수 항목의 [새로 만들기]를 선택한다.
변수이름을 아래와 같이 설정하고, node.exe가 설치된 디렉토리 경로를 입력한다.
사용자 변수 항목의 [편집]탭을 클릭하여 환경변수(%NODE_HOME%)를 추가한다.
㉰최종 확인
window + R로 실행창을 연 후 시스템 이미지와 같은 명령어(cmd)를 입력하여 시스템 속성 창을 연다.
버전 조회 명령어를 통해 node와 npm가 정상적으로 설치 되었는지 확인한다.
$ node -v
$ npm -v
02) 프로젝트 생성
프로젝트 ㉮생성, ㉯실행 이렇게 2가지 단계로 실행 작업을 진행하였다.
㉮ 생성
npm이 정상적으로 설치 되었다면 New Project탭에서 빨간 박스로 표시된 항목이 확인될 것이다.
표시 항목을 누르고 프로젝트 이름을 설정하면 생성 작업은 완료된다.
㉯ 실행
아래 이미지를 참조하여 설명하였다. 1번 박스에 해당하는 Run 뷰를 띄운 후, 2번 박스에 해당하는 Done이라는 안내 문구가 뜰 때까지 대기한다. 아직 내부 작업이 진행중이라면 3번 박스 영역에 로딩바가 존재하게 될텐데 위 이미지처럼 아무 표시가 없어지게 될 때까지 마찬가지로 대기한다.
runtime이 완료되었다면, Terminal 탭으로 이동하여 현재 생성한 프로젝트의 디렉토리 내에 영역이 설정되어있는지 확인한다. intellij의 경우 일반적으로 자동설정 되어있다.
디렉토리 위치를 확인했다면, 맨 첫번째 이미지에 나와있는 4번 박스 즉, 실행을 위해 입력하라는 명령어를 입력한다.
명령어를 통해 프로젝트가 실행되고, 실행된 프로젝트의 웹뷰는 아래의 링크를 통해 총 두 가지 주소로 확인할 수 있다.
Local항목의 클릭을 통해 실행된 웹뷰 화면은 아래와 같다.
이 게시글은 아래의 게시글들을 참조하여 작성되었다.
https://happy-jjang-a.tistory.com/m/114
Vue.js란 무엇인가? - Hello World
Vue.js 프론트엔드 개발을 쉽게하기 위한 react와 함께 대중적인 오픈소스 javascript 프레임워크 MVVM패턴의 ViewModel에 해당하여, UI코드와 데이터제어 제어 로직을 분리 SPA(Single Page Application)를 구축하
happy-jjang-a.tistory.com
'JavaScript > Vue' 카테고리의 다른 글
| Vue 기초 지식 (2) | 2023.03.28 |
|---|---|
| [router] 페이지 링크 (0) | 2023.03.22 |
| [구축] vue & spring boot 연동 (0) | 2023.03.21 |
| [$emit] 모달 컴포넌트(팝업) (2) | 2023.03.13 |
| [clone] Facebook Clone Coding : Front만 (0) | 2023.03.13 |
