coding AtoZ

Vue만의 특별한 문법

Vue의 특별한 문법이 몇가지 존재하는데, 저번 포스팅에서 봤던 v-bind(데이터 바인딩)과 더불어
v-for, v-if와 같은 많이 쓰는 반복문과 조건문이 있습니다. 
해당 문법은 Vue를 사용하는데 편의성을 높여줍니다. 사용법은 아래에서 설명하겠습니다.

v-for 

html 태그 속성부분에서 사용하는 반복문 입니다.

사용법은 다음과 같습니다. 

<template>
    <div v-for="(item, index) in Array" :key="index(unique)" class="c1"> 
    	반복해서 보여줄 곳
    </div>
</template>

내부 값들은 각각
item : Array의 요소를 index 순서로 가져옴 ( for each 문과 비슷한 역할)
index : item 과는 별개로 for문이 한번 돌때마다 1씩 증가하는 Number 값 (초기는 0)
Array : 반복문을 몇번 실행할지 결정하는 요소. (Array 값이 오면 해당 Array의 크기 만큼 실행하고, 원하는 만큼 정수를 할당해 줘도 됩니다.) ex) 1, 2, 3
:key="index(unique)" -> v-for문을 사용하기 위해선 key 값을 지정해 줘야 합니다. key 값은 유니크 값으로 해주는 것이 좋으며, 나중에 추적하는데 도움이 될 수 있습니다. key값은 index를 할당해도 되고, item의 요소를 할당해도 됩니다. 

v-if

v-for와 마찬가지로 template 내에 html 태그의 속성 부분에서 사용됩니다.

사용법은 다음과 같습니다.

<template>
    <div v-if="step==1">
    	첫번째 div
    </div>
    
    <div v-if="step==2">
    	두번째 div
    </div>
    
</template>

위 예시 코드는 step의 값에 따라 div를 보여주는 코드입니다.
일반적인 if문과 같이 특정 조건이 만족하면 true = 태그를 활성화 시키고, 만족하지 않으면 false = 태그를 보여주지 않습니다. 

v-if문은 v-for와 비교했을때 특별한 요소가 없어서 사용하기 쉽습니다.

Vue의 기본적인 구성

<template>
  	HTML 작성하는 곳
</template>

<script>
export default {
	JavaScript 작성 및 데이터, 메소드 등 처리하는 곳
}
</script>

<style>
	CSS 작성하는 곳
</style>

Vue의 기본적인 틀은 위와 같이 template, script, style 크게 세 색션으로 나뉩니다.
Vue의 특징은 JavaScript를 사용하면서, Vue만의 독자적인 문법을 가진다는 것입니다.

Vue의 데이터 보관함

Vue는 데이터 바인딩 이라는 방법으로 HTML 태그 속성값과 데이터 값을 유동적으로 변경할 수 있는데,
이를 위해서는 변경되는 데이터를 어딘가에 저장해 둬야합니다. 그 데이터를 저장하는 곳을 데이터 보관함이라고 부릅니다.

데이터 보관함의 경우 script 태그 속에 다음과 같이 생성합니다.

<script>
	export default{
    	
        data() {
        	return{
        	//데이터가 보관되는 장소
                //Object 형식으로 저장
                데이터 명 : 데이터 값(Number, String, Array 등)
            
            }
       	}
    }
</script>

data() 내에 데이터를 Object 형식으로 key : value 값으로 정의합니다.
※ return 은 반드시 작성해 줘야함
※ data가 여러개일 경우 꼭 value 값 후에 ,(쉼표)를 찍어줘야함

데이터 바인딩

이제 데이터 보관함에 데이터를 저장했으니, HTML 속성이나 JavaScript를 작성할때 사용하면 됩니다.
사용하는 방법은 데이터 보관함의 key 값을 중괄호 두 개로 감싸면 됩니다.

=> {{ 데이터명(key) }} 이런식으로요.

일반적인 데이터 값을 출력할 경우 {{ 데이터명(key) }}  만 사용하면 되지만,
HTML 태그 내의 속성 값을 데이터 바인딩하고 싶다면 문법이 조금 다릅니다.

=> :속성 = "데이터 바인딩 속성" 

일반적인 데이터 바인딩과 다른 점은
속성 값 앞에 ':' 가 추가된 점과 '{{ }}' 기호를 사용하지 않는다는 점입니다.

<p :style = "스타일"> {{ 바인딩출력 }} </p>

...

data(){
	return{
    	스타일 : "color:blue",
        바인딩출력 : "변경되는 값",
    }
}

...

위와 같이 데이터 바인딩을 두 곳에서 진행된 것을 실행시켜 보면,

제대로 출력되는 것을 볼 수 있습니다. 

데이터 바인딩을 사용하지 않고, 하드코딩하는 것이 더 간단해 보이는데 굳이 왜 사용하는 것일까요?

여러가지 이유가 있겠지만, 예시와 다르게 큰 규모의 작업을 진행하면 같은 데이터가 여러 곳에 쓰이는 일이 빈번할 것입니다.
만약 그 동일한 값을 변경해야 하는데, 하드코딩으로 소스가 짜여졌다면?
사용된 모든 곳을 찾아 변경해야하는 번거로움이 발생합니다.
하지만 이럴때 데이터 바인딩을 사용했다면?
데이터 보관소의 value 값만 변경하는 것으로 원하는 작업을 일괄적으로 처리할 수 있게 됩니다.

이게 데이터 바인딩을 사용하는 가장 큰 이유가 아닐까 생각합니다. 

시작하며

창업에 뜻이 있어 이것 저것 준비하면서 시간을 많이 그쪽에 투자했었습니다.  그러다 보니 개발공부를 하기엔 어려움이 있다고 판단되었습니다. 

그래서 과감히 공부는 잠시 접어두고 창업 기반을 다지는데 몰두했었습니다. 하지만 창업 아이템의 개발에 있어 웹의 개발도 필요하고, 그렇다고 인력을 충원하기에는 그럴 형편이 안되는 완전 초기 스타트업이기에 '웹 개발의 경험을 살려 공부해서 직접 만들어야겠다' 라는 생각에 다시 개발공부를 시작하게 되었습니다. 

이번에는 Vue를 공부해서 써먹으려고 다짐했습니다. 공부하면서 다시 블로그도 시작해 보려고 합니다. 공유하면서 실력이 늘어가는 것은 경험으로 많이 느꼈으니까요 :)  많은 분들이 찾아 주셨으면 합니다.

Vue.js 

Vue는 사용자 인터페이스를 만들기 위한 프로그레시브 프레임워크입니다. 쉽게 말해서 웹 프론트개발을 기존보다 쉽게 할 수 있게 도와주는 프레임워크입니다.

Vue를 선택하게 된 이유

웹을 개발하기 위해 React 와 Vue 둘중 선택해야 했습니다. React는 커뮤니티가 활성화 되어있다는 장점이 있었지만, Vue의 접근성이 상대적으로 낮다고 판단되었고, + 지인의 추천으로 시작하게 되었습니다.

Vue 개발 셋팅

저는 VScode를 쭉 사용해 왔기에 이번에도 VScode를 사용하여 개발을 하려고 합니다.

1. VScode ( Extensions : Color Highlight, HTML CSS Support, Vetur, Vue 3 Snippets 등)

2. Node.JS (최신버전)

3. npm(Node Packaged Manager)

기본적으로 위의 것을 준비했습니다. 셋팅 관련 포스팅은 후에 자세히 뜯어보려고 합니다.