테이블 데이터 변환 및 형식 지정 | 프론트엔드 개발 튜토리얼

소개

이 프로젝트에서는 테이블 데이터를 사용자 친화적인 방식으로 표시하기 위해 변환하고 서식을 지정하는 방법을 배우게 됩니다. 이는 백엔드에서 데이터를 다룰 때 프론트엔드 개발자가 자주 직면하는 일반적인 작업입니다.

👀 미리보기

최종 서식 지정된 테이블 미리보기

🎯 과제

이 프로젝트에서 다음을 배우게 됩니다:

JSON 파일에서 데이터를 가져오기 위해 HTTP 요청을 보내는 방법
표시를 위해 필요한 형식에 맞게 데이터를 서식 지정하는 방법
Vue.js 및 Element UI 를 사용하여 서식 지정된 데이터를 HTML 테이블로 렌더링하는 방법

🏆 성과

이 프로젝트를 완료하면 다음을 수행할 수 있습니다:

axios를 사용하여 HTTP 요청을 보내고 데이터를 가져올 수 있습니다.
데이터를 원하는 형식으로 조작하고 변환할 수 있습니다.
Vue.js 및 Element UI 를 통합하여 반응형 (responsive) 하고 시각적으로 매력적인 테이블 컴포넌트를 만들 수 있습니다.

프로젝트 구조 설정

이 단계에서는 프로젝트 파일과 구조를 설정합니다. 이 단계를 완료하려면 아래 단계를 따르세요.

프로젝트 폴더를 엽니다. 디렉토리 구조는 다음과 같습니다:

├── axios.min.js
├── element-ui.css
├── element-ui.js
├── fetchTableData.json
├── index.html
└── vue.js

WebIDE 의 오른쪽 하단 모서리에 있는 Go Live 버튼을 클릭하여 프로젝트를 실행합니다.

다음으로, VM 상단의 "Web 8080"을 열고 수동으로 새로 고치면 페이지가 표시됩니다.

데이터를 가져오기 위한 요청 전송

이 단계에서는 fetchTableData.json 파일에서 데이터를 가져오기 위해 HTTP 요청을 보내는 방법을 배우게 됩니다.

코드 편집기에서 index.html 파일을 엽니다.
<script> 섹션에서 Vue 인스턴스의 methods에 새로운 getTableData() 메서드를 추가합니다.
getTableData() 메서드 내부에서 axios.get() 함수를 사용하여 fetchTableData.json 파일에 GET 요청을 보냅니다:

methods: {
  getTableData() {
    axios.get("./fetchTableData.json").then((response) => {
      // TODO: Format the data and assign it to tableData
    });
  }
}

Vue 인스턴스의 mounted에서 getTableData 함수를 호출합니다.

mounted() {
  this.getTableData();
},

데이터 형식 지정

이 단계에서는 데이터를 필요한 형식으로 지정하고 tableData 속성에 할당하는 방법을 배우게 됩니다.

코드 편집기에서 index.html 파일을 엽니다.
<script> 섹션에서 Vue 인스턴스 내의 getTableData() 메서드를 찾습니다.
getTableData() 함수 내의 then() 메서드의 성공 콜백 내에서 응답 객체에서 data 속성을 가져옵니다:

getTableData() {
   axios.get("./fetchTableData.json").then((response) => {
      let resData = response.data.data;
   });
}

resData 배열을 반복하고 요구 사항에 따라 데이터를 형식 지정합니다:

datetime 필드의 경우 형식을 YYYYMMDD에서 YYYY-MM-DD로 변환합니다.
sex 필드의 경우 값을 1에서 "Man"으로, 0에서 "Woman"으로 변환합니다.
vip 필드의 경우 값을 1에서 "Yes"로, 0에서 "No"로 변환합니다.

다음은 데이터를 형식 지정하는 코드입니다:

getTableData() {
   axios.get("./fetchTableData.json").then((response) => {
      let resData = response.data.data;
      resData.forEach((item) => {
         item.datetime = `${item.datetime.substring(0, 4)}-${item.datetime.substring(4, 6)}-${item.datetime.substring(6)}`;
         item.sex = item.sex ? "Man" : "Woman";
         item.vip = item.vip ? "Yes" : "No";
      });
   });
}

데이터를 형식 지정한 후 resData 배열을 tableData 속성에 할당합니다:

getTableData() {
   axios.get("./fetchTableData.json").then((response) => {
      // ...
      this.tableData = resData;
   });
}

이제 데이터가 형식 지정되어 tableData 속성에 할당되었으며, 이 속성은 HTML 에서 테이블을 렌더링하는 데 사용됩니다.

최종 결과는 다음과 같습니다:

Format the data

요약

축하합니다! 이 프로젝트를 완료했습니다. LabEx 에서 더 많은 랩을 연습하여 기술을 향상시킬 수 있습니다.

Vue.js 를 이용한 데이터 형식 지정 및 시각화

소개