삽질시리즈 prettier

빠른요약

Unexpected closing tag "body". It may happen when the tag has already been closed by another tag.

  • body 태그에 문제가 있다고 log에 뜬다면? body 태그뿐 아니라 종속되어 있는 태그에도 문제가 있는지 체크해봐야 한다.

1. 이슈

  • 어느순간부터 prettier의 기능이 작동을 하지 않음 로그를 확인 해보니?
["ERROR" - 오후 1:47:02] Error formatting document.
["ERROR" - 오후 1:47:02] Unexpected closing tag "body". It may happen when the tag has already been closed by another tag. For more info see https://www.w3.org/TR/html5/syntax.html#closing-elements-that-have-implied-end-tags (302:3)
  300 |       });
  301 |     </script>
> 302 |   </body>
      |   ^^^^^^^
  303 | </html>
  304 |

body 태그가 잘못되어 있다고 발견됨

2. 해결과정

  1. body 태그를 확인했지만 아무 이상이 없음.. 다른 파일은 prettier 적용이 잘 되는 것을 확인한 후에 확실히 이 파일 내의 문제라고만 인지!
  2. 구글신에게 물어봄

https://www.inflearn.com/questions/233793

언급된 해결책 : log에서 언급한 태그 잘못이 되어있기 때문에 그 태그를 수정을 하면 된다

하지만 로그가 지목한 내 body 태그는 문제가 없음

근데 왜 작동은 문제없이 될까

아무리 구글링 해도 너무 가벼운 이슈같아 찾기가 어려움

3. 개발자 단톡에 문의

답변 "정확하진 않은데 혹시 바디 태그 안에 있는 태그 중 안닫히거나 안열린 태그가 있어서 그런거 아닌가요? "
이 말을 듣고 처음부터 끝까지 영역이 큰 태그부터 작은 태그 순으로 태그한쌍이 제대로 되어있는지 확인 → html에 숨겨져 있던 오타를 발견... 어이없게 해결 (html 잘못이라 큰 이상함을 눈치채지 못했구나ㅋ..)

3. 회고

  • react와 js에서는 로그에서 정확하게 어떤 녀석이 문제를 일으키는지 지목해서 말해줬는데 html은 애매하게 말해주는 모습을 보았음 body 이야기 했다고 정말 body만 잘못된줄 알고 검색하다보니 애꿏은 dom을 조지고 있었음...
  • 그냥 처음부터 쭉 코드를 보았으면 삽질을 덜했을수도 있었을 건데 코드가 천줄이 넘으니 귀차니즘이 시작되서 오히려 더 많은 시간을 낭비함

결론 오늘도 결국 잘못한건 게으른난데 또 정직한 에디터를 의심하였음

좋은 웹페이지 즐겨찾기