[Vue.js, Node.js] Vue 파일구조 이해하기, template 사용하기

 

 

여는 글

---

 

Vue 파일구조 이해하느라 하루가 꼬박 걸렸고 html에서 많이 막혔다.

 

그냥 돼야 정상인데 왜 여기서만 안되는 지... 

 

결국엔 <template>을 이해하는 계기가 되긴 했다.

 

아 그리고 참고한 블로그들이 있는데 크롬에 고정시켜둔 페이지가 다 날라갔다.

 

작년에도 이랬던 적이 있는데 1년에 한 번씩은 꼭 이러는 듯...

 

 

Vue 파일 구조

---

 

 

먼저 나는 frontend는 vue, backend는 node.js를 사용하므로 둘을 연동해놨다. (이것도 참고한 블로그 날아감) 구글링하면 많이 나와있다.

 

일단 둘다 cmd에서 설치하고 그 경로에서 vscode로 열면 아래처럼 되어 있다.

 

 

나는 이미 메인페이지까지는 만들어둔 상태라 좀 더 파일이 많지만 네모박스만 집중해서 보면 된다.

 

components는 이해하기 쉽게 표현하자면 플러그인이다. 별도의 파일로 만들어놓고(html, css, javascript) views 아래에 있는 서브페이지들에 끼워넣는 식이다.

 

이게 Vue가 권장하는 개발 방식이라고 한다.

 

 예를 들어, 어떤 웹 페이지에 왼쪽 상단 브랜드 로고가 있다. 이 브랜드 로고는 어느 서브페이지를 가던 상단에 항상 떠있어야 한다.

 

근데 그걸 모든 서브페이지에 따로 코드를 작성하는 것이 귀찮기도 하고 코드가 길어진다.

 

이때 components에 상단 로고를 화면에 출력하는 html, css 코드를 작성했고 이 component 이름이 Logo라고 하면, 모든 서브페이지들에는 <Logo></Logo> 이것만 넣어주면 끝이다.

 

앞서 설명했듯이 views는 페이지들이 있는 폴더고 그 안에 있는 Home.vue는 html로 말하면 index.html이다. 

 

이 메인페이지에 Logo를 넣고 싶다면 <template> 안에 넣어주면 된다.

 

App.vue는 최상위 틀이라고 보면 된다. 결국에는 Home.vue도 여기에 속해있다.

 

이런 구조를 이해한다면 개발하는데 큰 무리는 없다.

 

 

Template 사용하기

---

 

나는 template를 사용해본 기억이 없다. 

 

눈치껏 html 태그들을 넣으면 되는 건가? 하고 넣었다가 html처럼 내가 원하는대로 안되길래 열심히 구글링해서, 아직도 완벽히 이해한 것 같지는 않지만 아는 만큼 설명해보기로 한다.

 

리스트를 작성하면 html에서는 단순히 <ul>, <li> 태그들을 사용하면 된다.

 

근데 vue 공식 사이트에서는 v-for 사용을 권장한다. 

 

처음에는 단순 list 출력하는 건데 함수까지 써야해, 라는 거부감이 들어서 안 쓰려고 했는데 결국엔 쓰게 됐다...

 

내 생각에는 vue의 template는 단순 html처럼 쓰는 게 아닌 것 같다.

 

링크를 걸때도 <a>에다가 v-bind를 사용한다.

 

예를 들어, components 에서 메인으로 가는 링크가 있는 컴포넌트를 작성한다고 가정해보자.

 

    <template>
    	<div>
    		<a v-bind:href="main.url">{{main.message}}</a>
        </div>
    </template>
    
    <script>

export default {
  name: "Header",
  data () {
    return {
    main : {
     message : '올랑올랑', 
     url:'/'  ,
    },

    }
  }
};


</script>

 

이렇게 쓴다. 계속 쓰다보면 익숙해지기도 하고 그러려니 하고 쓸 것 같긴 하다...

 

이것 외에도 많은 태그들이 있다. <router-link> (페이지 이동) 등. 공부해야 할 것이 꽤 있다.

 

++지금 생각해보니 컴포넌트라 템플릿 내 코드 깔끔 + 재사용이 쉽도록 하기 위한 목적인 것 같기도 하다. 특히 v-for 같은 경우에는 재사용 시 html 요소는 그대로 두고 함수 message만 바꿔주면 되니까 더 편한 것 같기도 하다. 

 

 

닫는 글

---

 

React와 Vue가 많이 비교되는 데 둘 다 써본 내 입장에서는

 

React는 진입 장벽이 낮은 것이 장점, 코드가 깔끔하지 않다는 것이 단점(마찬가지로 메인 코드는 깔끔한데 component를 별도 파일로 분리하지 않으므로)인 것 같다.

 

Vue는 코드가 깔끔한 것이 장점, 단점은 처음에 알아야 할 것이 많다는 것이다.

 

어떻게 표현할 지 생각해봤는데 이렇게 정의할 수 있겠다.

 

내가 개발할 때는 React, 누군가 짜놓은 코드를 봐야할 때는 Vue 구조가 좋다.