2024.01.15 TIL

프로젝트 트러블 슈팅

페이지를 로드할 때 데이터를 불러와 리뷰를 추가하는 함수와 리뷰 등록 버튼을 눌렀을 때 해당 리뷰를 추가하는 함수 두 가지 스크립트가 존재했다.

첫 번째 함수에서는 페이지 로드 시에 작성된 리뷰가 없는 경우, 이를 사용자에게 알리기 위해 HTML 요소를 동적으로 추가하는 함수가 포함되어 있었다. 그러나 문제는 두 번째 함수를 실행할 때, 첫 번째 함수에서 추가한 HTML 요소가 DOM 로드 순서 때문에 null로 반환되는 현상이 발생했다. 이로 인해 개발자 도구에서는 올바르게 나타나지만 스크립트에서는 null로 판단되어 사용할 수 없는 상황이었다.

이 문제를 해결하기 위해 리뷰 등록 버튼을 눌렀을 때 HTML 요소를 직접 불러오도록 코드를 변경하여 정확한 시점에 필요한 HTML 요소를 불러오도록 하였다. 이러한 수정으로 브라우저가 스크립트를 실행하는 순서에 따른 예기치 못한 문제를 효과적으로 해결할 수 있었다.

css

min-height: 최소 높이를 설정함으로써 요소 늘어나면 자동으로 늘어나게 하기