도쿄사는 외노자

Key-Break 본문

Tech/React.js

Key-Break

Enrai 2017. 4. 27. 10:01

@markdown


# Key-Break


DB에서 습득하는 데이터를 그 내용에 따라 분류하여 출력하기


-   데이터는 다음의 세 테이블 (Users, Authorities, User-Authority)에서 습득

-   User는 복수의 Authority를 가질 수 있음.

    -   Authority가 복수인 유저의 경우, main key인 user.id가 중복됨

    -   데이터를 출력할 테이블은 user.id를 key로 가지므로, id가 중복되는 경우 에러가 발생.

    -   두 데이터를 하나로 합치고, 테이블에 표시되는 Auth에는 Authority.name을 ,로 연결하여 출력할 것. ex) "Admin, User"

-   각 User의 Authority 데이터는 다른 화면에서 사용되므로, 따로 Json Object로 만들어 Users State에 함께 보관할 것.


### 데이터 습득


```javascript

handleSearch = async () => {

  const {

    username,

  } = this.state.search;


  let url = '';

  if (username.length > 0) {

    url = `/api/users?username=${username}`;

  } else {

    url = '/api/users';

  }

  await this.axios.get(url)

  .then((res) => {

    this.createTable(res.data);

  })

  .catch((err) => {

    this.notice(err.response.data.message, 'error');

    return;

  });

}

```


### 데이터 정렬, 가공, 테이블 작성


-   정렬 및 setState를 통해 테이블 출력


```javascript

createTable = (data) => {

  if (!data.length > 0) this.notice(Message.validate.noData, 'warning');

  data.sort((a, b) => {

    const aValue = a.id;

    const bValue = b.id;

    if (aValue < bValue) return -1;

    if (aValue > bValue) return 1;

    return 0;

  });

  const adjustedData = this.checkMultiAuth(data);

  const tableData = this.makeTableData(adjustedData);

  this.setState(

    assign(this.state.tableData, { rows: tableData })

  );

}

```


-   Key-Break 실시


```javascript

checkMultiAuth = (rows) => {

  const adjustedData = [];  // 가공한 데이터 보존 및 Return

  let stockId = null;       // 이전 id 저장

  let stockObject = null;   // 이전 object 저장

  let stockAuthObject = []; // authority object 저장


  rows.forEach((row, index) => {

    // 첫 Row는 바로 Stock에 넣는다.

    if (index === 0) {

      stockId = row.id;

      stockObject = row;

      stockAuthObject.push({

        authorities_id: row.authorities_id,

        authorities_authority: row.authorities_authority,

        authorities_name: row.authorities_name,

      });

      return;

    }

    // 2번째 row 이후부터는 id가 중복되는지 분별

    if (row.id === stockId) {

      // row의 id가 이전과 동일할 경우, auth object를 추가하고 다음 row로

      stockAuthObject.push({

        authorities_id: row.authorities_id,

        authorities_authority: row.authorities_authority,

        authorities_name: row.authorities_name,

      });

    } else {

      // id가 이전 row와 다를 경우, stock에 넣어 두었던 데이터를 전부 adjustedData에 저장

      stockAuthObject.sort((a, b) => {

        const aValue = a.authorities_id;

        const bValue = b.authorities_id;

        if (aValue < bValue) return -1;

        if (aValue > bValue) return 1;

        return 0;

      });

      assign(stockObject, { auths: stockAuthObject });

      adjustedData.push(stockObject);


      // stock을 지금의 row로 재설정

      stockAuthObject = [];

      stockId = row.id;

      stockObject = row;

      stockAuthObject.push({

        authorities_id: row.authorities_id,

        authorities_authority: row.authorities_authority,

        authorities_name: row.authorities_name,

      });

    }

    // 현재의 row가 마지막 row일 경우, stock을 전부 adjustedData에 저장하고 작업 종료

    if (index === rows.length - 1) {

      stockAuthObject.sort((a, b) => {

        const aValue = a.authorities_id;

        const bValue = b.authorities_id;

        if (aValue < bValue) return -1;

        if (aValue > bValue) return 1;

        return 0;

      });

      assign(stockObject, { auths: stockAuthObject });

      adjustedData.push(stockObject);

    }

    return;

  });

  return adjustedData;


}

```


-   각 row에 넣었던 auth object 내부 정렬 및 테이블 출력용 데이터 가공


```javascript

makeTableData = (rows) => {

  const tableData = [];

  rows.forEach((row) => {

    let authorityName = '';

    if (row.auths.length > 1) {

      row.auths.forEach((auth, index) => {

        if (index > 0) authorityName = `${authorityName}、`;

        authorityName = `${authorityName}${auth.authorities_name}`;

      });

    } else {

      authorityName = row.authorities_name;

    }


    // 그외


    const lastAccountLockedTime = row.last_account_locked_time ?

      moment(row.last_account_locked_time).format('YYYY-MM-DD HH:mm:ss') : row.last_account_locked_time;


    const newRow = {

      id: row.id,

      username: row.username,

      authority: row.auths,

      authorities_name: authorityName,


    // 그외


      last_account_locked_time: lastAccountLockedTime,

    };

    tableData.push(newRow);

  });

  return tableData;

}

```