vue.js의 vue파일 구조에 대해서 알아보겠습니다. 이전에 vue-router에서도 HelloWorld.vue에 대해서 간단히 살펴보았지만, 렌더링 되는 vue페이지는 한개의 파일에서 모든것을 처리하는 구조로 구현이 가능합니다. 이 말은... 한개의 파일로 한개의 화면을 위한 application제작이 가능하다는 말 입니다.
이것이 SFC(Single File Components)의 간단한 설명이라고 볼 수 있습니다. 그렇다면, 이해는 뒤로하고 실질적으로 한개의 추가 페이지를 제작해서 눈으로 확인해 보겠습니다.
SFC의 구조는 크게 3가지로 구분이 됩니다.
- template - 직접적으로 화면에 표시할 내용의 코드가 들어가는 부분입니다. 흔히 알고 있는 HTML Tag가 들어가며, vue의 데이터 바인딩이 추가되게 됩니다.
- script - vue components의 내용이 정의되는 영역입니다. v-dom에 대한 생태(life cycle)개념이 추가됩니다. 그말은 create/mounted/destroyed 등의 내용이 들어가며, 내부에서 사용할 data들과 method(함수)가 정의 됩니다.
- style - template에서 구성한 html에 대한 CSS 스타일을 정의하는 영역입니다.
우리는 그저... 해당되는 영역에 해당되는 코드를 채워가면 원하는 결과를 얻을 수 있습니다. 오늘은 아주 기본적인 구성에 대해서 이해만 해보도록 하겠습니다.
1. 새로운 vue 파일 생성하기
우선 디테일한 폴더구조는 뒤로하고, components폴더안에 HelloWorld.vue파일의 친구를 만들어 줍니다.
[CorpInfo.vue]
<template>
<div>
<h1>{{text}}</h1
</div>
</template>
<script>
export default{
data(){
return{
text: 'Welcome to AyoteraLab
};
},
};
</script>
<style>
</style>위에서 알아본 SFC의 구조에 원하는 부분만 몇개 추가하였습니다. 데이터 바인딩만 살짝 들어가있습니다.
간단하게 script에 data( ){ }에 원하는 변수와 그에 해당하는 값을 할당하고... template에는 해당 data를 사용하기 위해서 {{ 변수명 }}으로 코딩해주면 화면에 변수값을 바인딩해서 보여주게 됩니다.
2. vue-router 설정
기존에 path는 '/' root path만 지정이 되어 있습니다. 연습겸 추가의 path를 더 넣어보겠습니다.
[router/index.js]
import Vue from 'vue';
import Router from 'vue-router';
import HelloWorld from '@/components/HelloWorld';
import CorpInfo from '@/components/CorpInfo';
Vue.use(Router);
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld,
},
{
path: '/corp',
name: 'CorpInfo',
component: CorpInfo,
},
],
});
이제 원하는 페이지를 원하는 path를 입력하여 호출할 준비가 되었습니다. 은근 간단해 보이지 않나요???
3. npm run build
이제 과감하게 build를 수행합니다. 아참!! 이제 앞으로 vue 파일을 생성하다보면... build시 엄청난 오류를 마주하게 될 것입니다. 익숙하면 괜찮지만... 초창기에는 eslint를 통해서 분석된 코드의 문제점이 엄청나게 나올 것 입니다. 제가 그때그때 진행하면서 발견되는 tip은 기재해 보겠습니다.
[eslint]
기억하실지 모르겠지만 vue-cli를 통해서 신규 프로젝트를 생성할때 eslint에 대해서 질문이 있습니다. 우리는 꺼리낌없이 yes를 선택한 상태로... 당연히 build를 수행할때 eslint의 분석에 대해서 적용을 받습니다. eslint에 대해서 간단히 소개를 한다면.... 코드에서 발견되는 문제점 혹은 문제패턴을 식별하기위한 코드분석 도구입니다. 코드의 품질이나 코딩의 스타일에 대한 부분을 터치합니다.
빌드를 해보았더니... 다음과 같이 error가 발생했습니다. 뭐 이해하기 쉽게 표현을 해주네요 ㅎㅎ string value를 입력할때, 따옴표를 열고 닫지를 않았습니다. 그렇다면... CorpInfo.vue로 가서 닫아줍니다.
다시 빌드를 해주면....
엄청난 error는 있지만 코드품질이 엉망이라고 안돌아가는 코드는 아니기 때문에 build는 무사히 됩니다. JAVA에서도 PMD ruleset을 돌려서 많은 결함이 발생하지만 동작은 잘 되는 것과 동일하다고 생각하시면 됩니다. 33개에 대한 문제는 뒤에 기술해 보고 build가 되었으니 시험을 해보겠습니다.
4. vue page 확인
http://localhost:8080/#/corp
원하는 대로 데이터가 정확히 바인딩되서 화면에 표시되었습니다.
5. eslint 해결
[expected linebreaks to be 'LF' but found 'CRLF']
LF(Line Feed)와 CR(Carriage Return) 의 용어의 조합들은 줄바꿈에 대한 정의입니다. CR은 커서를 맨앞으로 옮기는 동작을... LF는 신규줄을 그 자리를 유지하고 생성하는 동작을 합니다. 이 방식에 대한 차이는 os의 차이에서 비롯됩니다.
Windows - CRLF를 수행 (새로운줄을 만들고 커서를 맨앞으로 이동)
Unix/Linux - LF만 수행 (새로운줄을 만들고 현재 커서위치로 이동)
현재 error는 LF를 해야하는데 CRLF를 적용하고 있다는 말 입니다. 그렇다면 어떠한 세팅에 Windows방식이 적용되어 있다는 것 이겠죠?? 우리는 eclipse에서 코딩을 수행하고 있기때문에, 현재 방식에 대해서 확인을 해봅니다.
Eclipse > Menu > Window > Preferences > General > Workspace 선택
보면 New text file line delimiter에 Default (Windows)로 설정이 되어있습니다. 우리는 이것을 Unix로 바꿔주면 해결되겠습니다.
[Expected indentation of 0 spaces but found 2]
들여쓰기도 참으로 문제가 됩니다. template영역과 style에서 사용하는 들여쓰기와, script에서는 약간 다릅니다. script안에는 시작되는 export default는 들여쓰기가 없으며, 그 다음 부터 indent가 2칸이 들어가게 됩니다. 따라서 처음부터 2자리를 들여썼다면... 그 이후부터는 추가로 2개씩 error가 늘어납니다. 예를들면, Expected indentation of 2 spaces but found 4 처럼 말이죠. 다른 언어처럼 tab이나 space를 4개 넣는다면 이또한 동일한 유형의 오류를 발생시킬 것 입니다.
[Missing space before opening brace]
대 괄호를 열때는 앞에 space가 필요합니다. 따라서 아래의 코드처럼 수정해 줍니다.
<script>
export default{
data(){
return{
text: 'Welcome to AyoteraLab',
};
},
};
</script>
=========================================
<script>
export default{
data() {
return {
text: 'Welcome to AyoteraLab',
};
},
};
</script>
[Expected space(s) after "return"]
여기도 return 뒤에 space가 필요하다고 하니... 넣어줍니다. (위에 코드에 함께 적용했습니다.)
[Newline required at end of file but not found]
파일의 끝에는 newline이 필요하다고 합니다. 현재 style tag의 태크 뒤에는 신규로 newline이 없기때문에 enter를 쳐주도록 합니다.
하나하나 알아가면 지키기 쉬운 아이들 입니다. 이 모든것을 적용해서 build를 수행하면 아래와 같습니다.
아주 깨끗하게 적용이 되었습니다. 상당히 뿌듯하네요...ㅎㅎ
- Ayotera Lab -
댓글