Vue 기초 지식

 

vue로 간단한 UI를 만들어보면서, 본인을 기준으로 알아두면 좋을 기초 지식들을 정리해 보았다.

 

01. Vue 구조
02. v-bind
03. v-on
04. v-for
05. v-if / v-show
06. 이미지 삽입

 

 

---

 

 

01. Vue 구조

대뜸 생성해버린 프로젝트가 어떤 생김새로 이루어진건지 간단히 알아볼 필요가 있다. 기본 생성 파일 중 앞으로 주의깊게 다룰 파일은 main.js와 App.vue가 아닌가 싶다.  

 

① main.js

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app');

해당 프로젝트가 실행되면 기본으로 app.vue파일을 호출하는 것으로 해석된다.

 

 

---

 

 

② App.vue

안에 기본으로 작성되어 있던 부분은 <template>, <script>, <style>태그 외에 전부 삭제한 후, vue파일에 정의할 수 있는 내용들을 정리해보았다. 아래에서 언급하는 "컴포넌트"는 vue파일을 의미한다.

<!-- 1. 실제 출력될 HTML 태그가 들어가는 <template> -->
<template>
	<div>
        <h1>{{test}}</h1>
    	<%-- 하위컴포넌트가 될 vue파일을 불러내어 사용 가능하다. --%>
		<ChildTest(import한 컴포넌트명) />
	</div>
</template>

<!-- 2. 해당 컴포넌트에 활용될 스크립트를 정의하는 부분 -->
<script>
	import ChildTest from "컴포넌트 경로" //다른 컴포넌트를 불러내어 <template>내부에서 사용할 수 있다.
	
	export default{ //이 부분을 통해 외부에서 내부에 정의된 내용을 활용할 수 있게 된다. (vue내부에서 사용되는 model)
		name: 'example', //해당 컴포넌트의 이름, 다른 파일에서 이 이름을 통해 해당 파일을 참조할 수 있다.
		data() {// 해당 뷰에서 사용할 데이터를 지님, <template>내에서 {{test(변수명)}}으로 호출 가능
			return { 
				test: "메로나",
				test2: ['0', '1'],
				test3: 400
			} 
		}, 
		components: { //해당 영역 내부에 참조된 components를 하위 components로 사용
			ChildTest 
		}, 
		prop(s): { //하위 컨포넌트의 템플릿에서 상위 컨포넌트의 데이터를 전달받을 수 있도록 변수를 정의하는 곳(해당 모듈의 인자 타입을 정의)
			inputMsg: String
		}, 
		created() { //DOM이 만들어 지기 전 실행 되는 곳, Data를 사전에 준비할 경우 사용된다.

		}, 
		mounted() { //DOM에 해당 .vue가 들어가게 되면 실행 되는 곳(onload 상태와 동일)

		}, 
		computed: { //methods와 비슷하지만, cache로 남는다는 차이가 있음

		}, 
		method(s): { // .vue 내부에서 이벤트에 따라 실행하거나, 내부적으로 사용될 함수들을 정의한다. 
			함수명: function() {
				console.log("올때 "+this.test) //this.정의했던 변수명으로 해당 변수값에 접근 가능
			},
		} 
	}
</script>

<style>
	/* 해당 모듈의 스타일을 정의하는 부분 */
</style>

 

---

 

 

02. v-bind

이 개념은 html의 속성인 id, class, style등에 대해 model 데이터를 연결할때 사용된다. 전달 인자로 연결하려는 속성을 지정해주는 방식으로 사용 가능하다.

 

쉽게 말하자면, 아래와 같은 상황에서 this.test에 정의된 변수값을 html태그의 속성값으로 적용하기 위해서는 별도의 조치가 필요한데, 그 기능을 v-bind가 해줄 수 있다는 의미이다.

<template>
	<div>
        <a src="this.test 혹은 {{test}}">테스트</a> <!-- 링크 진입 당연히 안됨, 큰 따옴표를 없애도 오류 발생 -->
	</div>
</template>

<script>
	export default{
		name: 'example',
		data() {
			return { 
				test: "http://www.naver.com/"
			} 
		}, 
		method(s): { // .vue 내부에서 이벤트에 따라 실행하거나, 내부적으로 사용될 함수들을 정의한다. 
			함수명: function() {
				console.log("올때 "+this.test) //this.정의했던 변수명으로 해당 변수값에 접근 가능
			},
		} 
	}
</script>

<style>
	/* 해당 모듈의 스타일을 정의하는 부분 */
</style>

 

 

사용 방식은 아래처럼 간단하다.

<!-- 방법1 -->
<태그명 v-bind:속성명="사용할 변수명" />

<!-- 방법2 -->
<태그명 :속성명="사용할 변수명" />

 

 

위의 예시에서 원하는 바를 구현하기 위해서는 아래와 같이 정리할 수 있겠다.

<template>
	<div>
		<a v-bind:src="test">테스트</a>
	</div>
</template>

 

 

해당 게시글에서는 아주 가벼히 설명을 진행할 예정이기 때문에 v-bind에 대해 더 자세히 알고싶다면 아래 링크를 참고할 수 있다.

https://goodteacher.tistory.com/532

[vue 3]v-bind를 통한 속성 처리

 

 

---

 

 

03. v-on

이름으로부터 느낌이 빡 오는데, 해당 속성을 통해 DOM의 이벤트를 청취하고, 트리거 될 때 JS를 실행할 수 있도록 하는 이벤트 핸들러이다. 사용방식은 아래와 같다.

<html태그명 v-on:이벤트속성="발생할 이벤트" />

 

 

사용 예시를 한 번 들어보자. 직접 이벤트로 인해 수행될 내용을 정의할 수 있으며,

<template>
	<div>
        <button v-on:click="console.log('췤')">버튼임</button>
	</div>
</template>

<script>
	export default{
		name: 'example',
	}
</script>

<style>
	/* 해당 모듈의 스타일을 정의하는 부분 */
</style>

 

 

보편적으로 사용되는 예시를 들어보면, 수행할 행동을 메서드로 정의하고, 해당 메서드를 호출하도록 하기도 한다.

<template>
	<div>
        <button v-on:click="check">버튼임</button>
	</div>
</template>

<script>
	export default{
		name: 'example',
		methods: {
			check: function(){
				console.log("췤")
 			}
		}
	}
</script>

<style>
	/* 해당 모듈의 스타일을 정의하는 부분 */
</style>

 

 

 

이벤트의 종류는 엄청 많고, 혹시 그에 대한 정보가 필요하다면 아래 블로그 링크를 확인해볼 수 있겠다.

https://jm-web.tistory.com/31

[JS] JS윈도우 이벤트 종류

 

이벤트 핸들링에 대한 설명이 부족하다면 아래 게시글을 확인해볼 수 있겠다.

https://velog.io/@ohmy0418/%EC%9D%B4%EB%B2%A4%ED%8A%B8-%ED%95%B8%EB%93%A4%EB%A7%81v-on

이벤트 핸들링(v-on)

 

---

 

04. v-for

 

반복문이라는 설명 외에 더 필요한 것은 없을 것 같다. 바로 예시부터 살펴보면 좋겠다.

See the Pen vue테스트 by HamJeong (@HamJeong) on CodePen.

 

이때 호출되는 배열의 index를 함께 출력할수도 있는데 그 방법은 아래와 같다.

See the Pen v-for02 by HamJeong (@HamJeong) on CodePen.

 

배열뿐아니라 객체또한 같은 방식으로 작업할 수 있다.

See the Pen v-for02 by HamJeong (@HamJeong) on CodePen.

 

작업 중 간혹 v-for을 활용할때 정상적으로 렌더링이 이루어지지 않아, 아래 블로그를 참조하여 해결을 한 경험이 있다. v-for을 활용할 예정이 있다면 참고해보는 것도 좋을 것 같다.

https://icerabbit.tistory.com/119

[Vue] 렌더링에서 key의 역할

 

---

 

05. v-if / v-show

두 디렉티브는 모두 조건문을 구현하기 위해 사용되며, 각각 어떤 특성으로 사용되는지 정리해보았다.

 

 

① v-if

설정되는 조건에 따라 해당 블럭이 만들어질지 말지 결정되어 생성/제거되며, 여느 if문과 마찬가지로 v-else-if, v-else블록 또한 사용할 수 있다. 예시는 아래와 같다.

<div v-if="type === 'A'">
    A
</div>
<div v-else-if="type === 'B'">
    B
</div>
<div v-else-if="type === 'C'">
    C
</div>
<div v-else>
    Not A/B/C
</div>

 

---

 

② v-show

마찬가지로 해당 디렉티브에 정의된 조건에 해당되면 블럭이 표출되거나 표출되지 않도록 할 수 있다. v-if와의 차이점은 해당 디렉티브 사용의 경우 렌더링은 우선적으로 되며 CSS속성으로 감춰지고 보여지는 동작이 수행된다.

사용 예시는 아래와 같다.

<div v-show="false">
  이 요소는 숨겨져요
</div>

 

해당 요소를 아래와 같이 활용할 수도 있겠다.

See the Pen v-show01 by HamJeong (@HamJeong) on CodePen.

 

---

 

06. 이미지 삽입

이미지 삽입을 위해서 프로젝트의 src하위에 디렉토리를 하나 추가한 후, 해당 디렉토리에 저장된 이미지 파일을 불러오는 식으로 진행된다. 본인의 경우 "assets"라는 이름으로 폴더를 추가하였다는 가정하에 설명을 진행하도록 하겠다.

구조 예시

 

 

위와 같은 상황에서 이미지를 호출할때, 

<img src="../asstes/logo.png" alt="사진" />

이미지파일의 경로나 확장자가 문제없이 잘 입력 되었음에도 서버에서 이미지 파일을 제공하지 못하는 문제가 발생했는데, 아래와 같이 수정하니 정상적으로 조회가 되는 것을 확인하였다.

<img :src="require('@/assets/logo.png')" alt="사진" />

 

두 방식은 수행 결과는 동일하나 번들링하는 과정에서 이미지 처리 방식이 다르다고 한다. 'require'를 사용하면 번들러가 빌드 시간에 이미지 파일을 처리하여, 번들링된 파일 안에 이미지를 inline화 하게 되고, 이는 브라우저가 이미지를 요청하지 않아도 빠르게 로드될 수 있게 해준다. 하지만 'img'태그로 이미지를 가져오면 이미지 파일을 서버에서 요청하게 된다고 한다.

 

그렇기 때문에 이미지파일의 크기가 작고 적은 수인 경우 'img'태그를 사용하여 이미지를 가져오는것이 소스가 비교적 짧기 때문에 편리하지만, 그렇지 않은 경우는 'require'를 활용하는 것이 바람직 하다고 할 수 있다.

 

 

 

---