InnerHTML
🕶선입견
프로젝트를 하면서 InnerHTML를 사용하여 구현했다. 나는 InnerHTML이 하면 보안에 취약하다고 알고 있었기 때문에 좋아하는 방법은 아니었다. 하지만 InnerHTML을 쓰게 된 이유는 프로젝트를 하면서 아직 나에게 맞는 방법을 찾지 못했고 강사님이 알려주신 것을 활용해보고 싶었기 때문에 InnerHTML을 사용하게 됐다. 나중에는 class를 활용해서 구현해보고 싶다.
🗺나의 상황
또한 InnerHTML은 리터럴 문자로 넣는 방식이 하드코딩 같다 생각해 내가 좋아하는 방식이 아니었다. 가독성도 제로..😓 객체로 하면 더 깔끔하고 보기 편할텐데 아직 나에겐 이조차 어려운 과제이다. 또한 데이터가 추가되는 로직을 실행하는 경우 똑같은 리터럴 문자에 추가되는 데이터를 DOM으로 만들어서 추가해야하는것이 처음인 나에게 꽤나 복잡했다. 프로젝트를 할 때 많이 힘들었고 나는 new 객체를 사용해서 컴포넌트를 만들 생각이었지만 new객체만을 사용해서 바닐라JS로 구현하기가 나에겐 벅찼다.
💡해결
그래서 바닐라 JS코딩 하는법을 물어보고 찾으면서 공부해본 결과 InnerHTML이 꽤 괜찮은 방법같았다. 리터럴 내용이 조금 복잡해지고 어려워진다면 함수로 내보내는 방법 사용해보기도 했다. 또한 InnerHTML로 구현할 때 가장 좋았던점?은 addEventListener를 많이 선언하지 않아서 좋았다. 물론 동작이 많아지면 분리해야겠지만 나에겐 충분히 바닐라JS의 매력을 느낄 수 있던 경험이었다.
🚑깨달은 점
제로베이스로 코딩하는 것이 이렇게나 힘들 줄 몰랐다. 항상 react의 hook을 가져다 쓸 줄 알았지 라이브러리없이 하는 것이 많이 어색했다. 하지만 바닐라JS로 구현을 하니 애플리케이션의 로직을 이해하는 경험을 할 수 있어서 뿌듯했다. 물론 모든 기능을 구현한 것은 아니지만 바닐라 JS 코딩의 매력을 느끼게 돼서 좋았다. 얼마나 많은 이벤트가 일어날지 모르겠지만 남은 2일 파이팅!!🤗