221014 삽질

👷‍♂️ hasOwnProperty 못읽음

Response data에 url 속성이 있는데.. 왜 콘솔로 찍어도 안나오고 hasOwnProperty로 안 읽힐까

console.log(data.url); // undefined
console.log(data.hasOwnProperty('url')); // false
if (data.hasOwnProperty('url')) { // if문 안으로 안들어옴
    history.push(data.url);

filename도 마찬가지로 잡히지 않는다 흠 데이터의 키 값들 받아오기 위해 Object.keys() 메서드를 사용해보았다.

console.log("키 값들", Object.keys(data));

헉... data가 안에 또 있었다 이 안에 url이 있는 것 같다.

console.log("url : ", data.data.url);

🔨 요렇게 다시 찍어보면 잘 찍힌다!

---

👷‍♂️ 파일 다운로드 링크로 이동

이제 이 링크로 이동해서 엑셀 파일을 다운로드할 수 있게 해야하는데... 기존 페이지 이동 방식인 history.push(path)를 사용하니 버튼을 클릭하면 스터디 페이지로 돌아온다 잉?!

🔨 링크 이동을 link.href와 a 태그를 이용해 하면 파일 다운로드 팝업창이 뜨게 된다!

if (data.data.hasOwnProperty('url')) {
  const url = data.data.url;
  const link = document.createElement('a');
  link.href = url;
  link.setAttribute('download',`${data.data.filename}$.xml`);
  link.style.cssText = 'display:none';
  document.body.appendChild(link);
  link.click();
  link.remove();
}

---

👷‍♂️ AUI Grid 맨 끝행으로 드래그 앤 드랍이 안됨

첫번째 행을 세번째 행 밑으로 내리고 싶은데 안돼서 AUI Grid 공식 데모를 보니 가능하단다 뭐가 다른지 살펴보장..
정상적으로 작동하는 그리드의 속성을 먼저 보면

// 정상 작동
var gridPros = {
    selectionMode: "multipleCells",
    // 드래깅 행 이동 가능 여부 (기본값 : false)
    enableDrag: true,
    // 다수의 행을 한번에 이동 가능 여부(기본값 : true)
	enableMultipleDrag: true,
	// 셀에서 바로  드래깅 해 이동 가능 여부 (기본값 : false) - enableDrag=true 설정이 선행 
	enableDragByCellDrag: true,
	// 드랍 가능 여부 (기본값 : true)
	enableDrop: true,
	editable: true
};

지금 비정상적으로 작동하는 그리드의 속성은 아래와 같다

// 비정상 작동
const auiGridProps = {
  showRowNumColumn: true,  // no 표시
  wrapSelectionMove: true,
  enableSorting: false,
  editable: lock !== 2,
  wordWrap: true,
  height: gridHeight,

  enableDrag: true,
  enableDragByCellDrag: true,
  enableDrop: true
};

다른 것들만 정리해보면

• selectionMode : 셀 선택모드를 지정합니다. 유효 속성값은 다음과 같습니다. (singleCell, singleRow, multipleCells, multipleRows, none) → 기능에 지장 없음
• enableMultipleDrag : 다수의 행을 한번에 드래깅 가능 여부를 지정합니다. selectionMode 를 "multipleCells" 또는 "multipleRows" 인 경우 유효합니다. 또한 속성 enableDrag=true 설정이 선행되어야 합니다. → 기능에 지장 없음
• showRowNumColumn : 행 줄번호(로우 넘버링) 칼럼의 출력 여부를 지정합니다. 이 속성 값이 true 이면 최좌측에 행번호 칼럼이 생성됩니다. → 기능에 지장 없음
• wrapSelectionMove : 마지막 칼럼에서 오른쪽 화살표 키 또는 Tab 키를 누른 경우 다음 행의 시작 칼럼으로 이동할지 여부를 나타냅니다. 반대로 시작 칼럼에서 왼쪽 화살표 키 또는 Shift+Tab 키를 누른 경우 이전 행의 마지막 칼럼으로 이동 여부입니다. → 기능에 지장 없음
• enableSorting : 정렬 가능 여부를 지정합니다. → 기능에 지장 없음
• wordWrap : 이 속성값이 true 인 경우 자동 word-wrap 이 발생하며 각 행의 높이가 설정한 텍스트에 맞게 가변적으로 렌더링됩니다. → 기능에 지장 없음

속성 문제는 아닌 듯하다..😓

- AUIGrid.js
- 문제가 되는 그리드 컴포넌트

다 뒤져봤는데 뭐가 문제인건지 흠.. 이 화면 말고 다른 페이지에서도 같은 문제가 발생하는 거 보면 AUI Grid가 문제인 것 같다.