프로젝트 생성 및 실행


1. 생성

설치 옵션 중 webpack-simple는 웹팩의 최소 기능만을 활용하여 프로젝트를 구성한다. 프로젝트명은 적어도 되고 안적어도 된다. 


1
2
3
4
5
6
7
8
9
10
11
vue init webpack-simple {프로젝트명}

? Project name {프로젝트명}
? Project description {프로젝트 설명}
? Author {개발자}
? License MIT 
? Use sass? {Y/N}

// 프로젝트 폴더로 이동
npm install // vue 프로젝트에 필요한 모듈을 node_modules에 다운받는다.
npm run dev

개발자도구의 audits 탭을 통해 모바일 버전, 웹 버전의 퍼포먼스를 비교해가며 볼 수 있다.




2. 파일

  • assets : css나 이미지 등의 웹 자원이 들어간다.
  • components : 컴포넌트들은 app.vue와 같은 경로에 components 폴더를 만들어 그곳에 모아놓고 관리한다.
  • app.vue : 가장 최상위 컴포넌트이다. 하향식으로 데이터를 전달할 수는 있지만, 상향식으로 데이터를 전달할 수는 없다.
  • main.js : vue 객체를 생성한다.
  • index.html : 컴포넌트들이 main.js를 통해 마운트되어 렌더링된다.

※ 프로젝트 폴더 구조 참고 : 실무에서는 가장 간단한 구조에서 필요한 기능을 하나씩 덧붙여 간다. + 참고2




  • #3 : index.html에서 어느 요소에 vue를 적용할 지 정한다.
  • #2 : app.vue에서 해당 요소를 어떻게 다룰지 작성한다.
  • #1 : Vue객체를 html 요소에 마운트한다.




JSON 데이터를 읽고 리스트로 출력하기

1. assets/data/users.json


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{
    "users":[
        {
            "id":1,
            "name": "roseline",
            "phone_number":"010-0000-0000",
            "created_date":"2019-07-26 12:10:43.254915+09",
        },
        {
            "id":2,
            "name": "songsong",
            "phone_number":"010-1111-1111",
            "created_date":"2019-07-26 12:11:43.254915+09",
        }
    ]
}


2. json 파일 읽기

app.vue와 연결시킬 컴포넌트를 만들고, json 파일을 읽는다.
읽어낸 데이터는 userList라는 변수에 담는다. 


1
2
3
4
5
6
7
<script>
import userList from "../assets/data/users.json";

export default {
    // 컴포넌트 구현
};
</script>


3. 읽은 데이터를 가공해서 템플릿으로 보내기

  • #1 : 컴포넌트에서는 data를 users()와 같이 함수로 적어야 한다. 그리고 템플릿으로 보낼 데이터를 return 하면된다.
  • #2 : map()은 userList.users 안의 데이터를 차례로 읽어 #3을 실행한다.
  • #3 : users내의 created_date라는 항목을 Date 형식으로 바꾼 뒤 시간과 분만 뽑아내어 다시 created_date에 저장한다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<script>
import userList from "../assets/data/users.json";

export default {
  name: "UserList",
  computed: {
    users() { // #1
      return userList.users.map((items) => { // #2
        // #3 
          let c = new Date(items["created_date"]); 
          let created_date = c.getHours()+"시 "+c.getMinutes()+"분"; 

          items["created_date"] = created_date;
          
        return items;
      })
    },
  }
};
</script>


3. 템플릿에 적용하기

템플릿에 어떻게 적용할 건지 쓴다. 위 #1의 users가 데이터의 이름이 된다.


1
2
3
4
5
6
7
8
9
10
11
<template>
  <div>
    <h1>사용자</h1>

    <ul v-for="item in users">
        <li>이름 : {{ item.name}}</li>
        <li>전화번호 : {{ item.phone_number}}</li>
        <li>등록 시간 : {{ item.created_date}}</li>
    </ul>    
  </div>
</template>


4. 확인

http://localhost:8080에서 확인한다.