codestates / codestates/aneun-dongne
[ Error Handling Log ] DOM트리를 구성하는 단계에서 div태그가 생성되기 전, document.getElementById("map")를 참조하면서 발생하는 에러 / 1212 / 류준열
- Dominant language
- JavaScript
- Stars
- 6
- Forks
- 7
- PR merge metrics
- No merged PRs in 30d
Description
> ### 어떤 에러인가요?
> DOM트리를 구성하는 단계에서 `< div id="map" />` 가 아직 생성되지 않았는데
> 아래에서 `document.getElementById("map")`를 참조하려 하기때문에 발생하는 에러
```js
const container = document.getElementById("map"); //
.. 생략..
console.log(container); // null이다가
// 여기서 < div id="map" /> 가 생성되기 전, container가 null일때 참조해버리자 에러가 난다.
const map = new kakao.maps.Map(container, options);
```
> ### 에러 메시지
>
> ### 에러 핸들링 방법
> * 핸들링 방법에 대해서 간단하게 기록해보세요.
> 구글링을 해보니 많은 사람들이 겪은 에러였다. 다행히도 바로 해결할 수 있었다.
> console.log(container)를 찍어보니 null이 나왔다.
가볍게 container가 null일때는 패스하도록 만들었다.
- 요약 :
`container = document.getElementById("map")`가 생성되기 전에 `const map = new kakao.maps.Map(container, options);`코드가
`container`를 참조하기 때문에 생긴 에러이다.
`container!==null`일때만 코드가 실행되도록 설정하여 해결
>
> ### 에러 핸들링을 위해 참고한 레퍼런스 링크
> 링크 : https://devtalk.kakao.com/t/api-currentstyle-null/35781/2
Contributor guide
No contributing guide indexed for this repository
Research direction
Start by locating the code that calls document.getElementById("map") and constructs kakao.maps.Map. Check the DOM creation timing and the existing null-handling described in the issue; the work is done when map initialization no longer runs with a missing container and the error is not reproduced.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100