JS로 HTML 컨트롤 하기

오늘은 5시간의 삽질기록이다.

DOM의 개념만 어렴풋이 알고 있고 활용법이 익숙해지지 않은 상태였다.

요즘은 React같은 라이브러리를 사용하니 많이 활용하지 않을 수도 있겠다는 안일한 생각을 가지고

다른 것을 더 집중해서 공부하고 있었다.

JSX의 문법에도 익숙해져해서 개념만 알고 넘어가려 했는데 해결해야 하는 과정 중에 결국 만나고야 말았다.

해결해야하는 것은 <li> 태그의 text 를 클릭시 콘솔창에 그 text와 일치하는 다른 정보를 찍는 것이었다.

지금은 정리가 되어서 이해가 되었지만 처음 그 문제를 보았을 때 무슨 말인지 무엇을 해야하는지

아무것도 떠오르지 않았다. 어렴풋이 설마 DOM인가 하는 생각이 스쳐지나가기만 했었다.

정말 어려웠던 것은 HTML 에는 손을 대지 않고 클릭해야 한다는 것이었다.

생각했던 과정

1. 태그를 만들어서 사용했지만 에러가 났다.
2. text를 새로운 객체의 속성으로 넣으려 했다. 넣어도 쓸모가 없었다.
3. 들어온 정보와 객체의 정보가 일치한지 반복문을 만들어봤다. 들어온 정보가 없다는 것을 알았다.
4. 정보를 어디서 받는지 생각해보니 동작해야 하는 조건을 볼때 클릭시에 얻는 정보가 전부였다.
5. 그럼 클릭은 어떻게 구현하는지를 생각했다.
6. HTML에 onclick은 없었다.
7. 태그를 안건드리고 클릭을 구현하는 방법을 고민했다.
8. 태그 안의 속성을 추가하는 setAttribute를 생각했다.
9. 하지만 그 방법도 HTML 파일을 직접 수정하는 것은 아니어도 태그를 건드리는 방법이었다.
10. 그러다가 생각한 방법이 addEventListener였다.
11. 클릭이 되었는데 정보를 함수에 전달하는 문제가 남았다.
12. 전달하는 과정에서 메소드나 정보들이 정의되지 않는 문제가 생겼다.
13. 위치를 바꿔가면서 키워드들을 정의된 상태로 바꿨다.
14. 반복문에 조건으로 일치여부를 판단해서 그 정보의 객체만 리턴값을 함수에 전달했다.

이렇게 돌고 돌아서 생각대로 해보는데 event, target , textContent 가 정의되지 않았다는

메세지를 보면서 지속적인 수정 끝에 결국은 해결했다.

정의되지 않은 것은 내가 생각한 것보다 내 코드에서 그 키워드가 먼저 요구되었거나 사용할 수 없는 상태이거나

이럴때 나오게 되는 것을 여러번 에러코드를 만나면서 알 수 있었다. 지속적인 콘솔로그로 확인 하는 방법은

정말 큰 도움이 되었다. 그리고 jsfiddle.net 이 사이트에서 연습하는 것이 정말 도움이 되었다.

개념만 익히지 않고 꼭 활용할 수 있게 익혀야겠다.