[프로젝트] 데이터 undefined일 때 화면을 그리지 못하는 문제

✅ 문제 상황

• 개발서버에서 문제없이 렌더링 되던 화면이 운영서버에서 일부만 그려지고 일부는 그려지지 않는 문제가 발생.
• 윗부분: '텍스트', 아랫부분: '서브메뉴바 + WEBGL' 로 나뉘는 화면.
• 그려지지 않고 있는 부분은 아랫부분의 서브메뉴바.

✅ 원인

• 화면의 윗부분인 텍스트는 서버에서 데이터를 받아와 뿌려주고 있다.
• 운영서버에 아직 데이터가 없다보니 서버에서 받아온 데이터가 undefined 였고,
• 렌더링 중 undefined를 발견하고 화면 그리는 것을 멈춘것.
• 즉, 값이 없는데(=undefined) 렌더링 하려고 해서 오류가 났던 것이다.
  

✅ 해결방안

• 👉🏻 방어코드추가: 서버에서 받아오는 데이터가 있을 때만 화면을 그리게 만들어주면 된다.

      <div
        class="textContent"
        v-if="state.titleContent"
      >
		... 코드생략
      </div>

✅ 또 다른 마주한 문제

• 방어코드를 추가하니 첫 화면 진입시 데이터를 받아오기 전과 후로 화면이 2번 바뀌었다.
• 처음 state.titleContent을 빈 객체(={})로 설정을 해놔서 빈 객체일 때도 화면을 보여주고,
  데이터 가져온 후 렌더링 되면서 화면이 변하게 되는 것!

✅ 해결방안

👉🏻 Object.keys()로 객체 안에 데이터가 있는 경우 key만 뽑고, 해당 key들의 길이가 0보다 클 때만 화면에 보이도록 수정했다.

      <div
        class="textContent"
        v-if="Object.keys(state.titleContent).length > 0"
      >
		... 코드생략
      </div>

👏🏻 배우게 된 점

배우게된 점 1. 에러코드 마주하는 법!

• 처음 화면이 그려지지 않는 문제를 마주했을 때 어떤 문제가 있는지 전혀 예상하지 못했다.
• 화면이 그려지지 않을거면 다 안그려져야지..!!!!
• 어느부분은 그려지고, 어느부분은 그려지지 않고 이게 뭐지??? 😵‍💫 라는 혼란속에 콘솔에 찍힌 에러를 제대로 보지 못했던 나의 실수!!
  
• 결국 선임이 와서 문제를 해결해주셨는데, 문제를 어떻게 찾아나가는지 한 번 보여주셨다.
• 에러코드 확인하고, 위 이미지에 표시해둔 부분을 누르면 코드상 어느부분에서 에러가 나고 있는지 아래 이미지처럼 알려준다.
  
• 그러니 문제가 생겼을 때 꼭 콘솔창으로 에러가 있는지 먼저 확인해보는 습관을 가져야겠다.

배우게된 점 2. 방어코드는 중요해! ( + 백엔드분들과의 소통도 중요해! )

• 이 문제를 마주하면서 방어코드의 중요성을 알았다.
• 데이터를 받아오는 상황속에 데이터가 undefined으로 올 수도 있는 사실을 늘 인지하고 있어야겠다.
• 또 백엔드분께 물어보면서 값이 undefined이나 null로 올 수 있냐고 여쭤보는 것도 중요한거 같다!

배우게된 점 3. false인 값

• false인 값을 잘 알고 있다고 생각했지만 v-if문에 빈객체를 넣었을 때 화면이 그려진다는걸 모르고 있었다. 그 말은 false값이 뭔지 제대로 몰랐단 거겠지!

  • false값은 false, Nan, undefined, null, 0, ''(빈 문자열)

• 빈 객체, 빈 배열은 v-if문에 들어갔을 때 true가 된다.

• 그러니 빈 객체나 빈 배열을 check해야할 때는 길이로 확인을 하자!

---

➕ Level up(1)
블로그 정리하면서 내가 알았던거 몰랐던거 다시 정리할 수 있어서 참 좋다.
블로그가 나의 오답노트같은 느낌이랄까! ㅎㅎ