Vue.js 뷰 기초

개요

우선 서버와 클라이언트를 간단하게 분류하자면 다음과 같다.

 

서버

1. 사용자 눈에 보이지 않는 곳에서 작동하는 부분
2. 클라이언트에게 정보나 서비스를 제공하는 시스템
3. 클라이언트의 요청을 받으면, 적절한 처리 후 클라이언트에게 응답

클라이언트

1. 사용자 눈에 보이고 상호작용하는 부분
2. 서버를 통해 접속할 수 있는 애플리케이션이나 서비스
3. 서버에게 요청 하면, 서버로부터 응답 을 받는다

Vue.js

JavaScript 프론트엔트 프레임워크, 표준 HTML, CSS, JavaScript를 사용한다.

컴포넌트 단위로 나워서 개발이 가능 하다.

 

장점

HTML에서 변수, 조건문, 반복문 사용이 가능하다, HTML + JavaScript만으로 개발 할 때에 비해 훨씬 쉽다.

화면에 변경사항이 생기면 새로고침 없이 즉각 변경되어 앱처럼 부드러운 웹 개발이 가능하다.

화면 각 부분을 컴포넌트 단위로 나눠서 개발하기에 협업을 하기에 편리하다.

프론트엔드와 백엔드가 서로 다른 프로젝트로 분리된다.

 

단점

최초 로딩속도가 느리고, 검색엔진 최적화가 불편하다.

이를 극복하기 위해 극복하기 위해, 서버사이드 렌더링(SSR) 프레임워크 Nuxt를 사용한다.

 

설치

기존에 Node.js를 사용한 이력이 있다면(Node.js가 설치되어 있다면) npm을 사용하여 쉽게 설치할 수 있다.

만약 Node.js가 설치되지 않은 환경이라면 Node.js 설치가 필요하다.

 

 

npm init vue@3

 

위 명령어를 통해 뷰를 설치할 수 있다.

뷰가 설치된 후엔 프로젝트 명을 입력하여 프로젝트를 생성할 수 있다.

 

vue-project

 

이후 설정에 관한 내용들이 쭉 나오는데 상황에 맞게 세팅해 주면 된다.

나는 실습용으로 Vue Router, Pinia는 Yes, 나머지는 모두 No를 해주었다.

 

 

그럼 해당 디렉토리에 프로젝트 폴더가 생성되었을 것이다.

위 이미지의 하단에 위치한 초록글씨를 그대로 실행해 주면 된다.

 

 

cd를 통해 디렉토리를 프로젝트 폴더로 이동한다.

npm install을 통해 필요한 패키지를 설치해 준다.

 

 

npm run dev를 실행해 주면 프론트엔드 웹 서버가 구동된다.

Local에 기재되어 있는 localhost 주소로 접속해 보면 아래와 같은 화면을 확인할 수 있다.

 

프론트엔드 웹 서버를 구동하는 방법까지 알아보았고, 다른 글을 통해 프론트 엔드 개발 실습을 해볼 예정이다.