부트캠프 4일차 후기
오늘은 특별히 배운 것이 없다. 하지만 어제 고민하며 적었던 문제가 일단은 해결되어서 간단히 정리하고자 한다.
내가 구현해야하는 기능은 버튼을 눌렀을 경우, 해당 버튼에 매핑된 멤버정보를 보여주는 기능이였다.
이것을 구현하기 위해 나는 처음엔 각 버튼에 특유의 Value 값을 할당하고, 클릭했을 때, 특유의 Value 값을 인덱스로 해서 멤버정보를 가져와 보여주겠다는 형식을 택했다. 하지만 이유가 무엇인지, 아무리 attr, data 등등 구글링을 통해 얻은 정보를 활용해도 value값을 가져올 수가 없었다..
그래서 이번엔 해당 버튼들의 부모 컴포넌트에 접근한 다음, children + toArray을 활용해서 자식 컴포넌트들을 리스트화한 후, forEach를 통해 클릭 이벤트를 추가하는 방식을 택했다. 이전에 JavaScript 책을 읽으면서 forEach에서 두번째 파라미터는 인덱스란 사실이 떠오른 것이 천만다행이었다. 하지만 이 또한 어째서인지 먹히지 않아서 많이 곤란했다.
결국 나는 더 심플한 방식을 택했다. 기존에 JQuery에 고집하던 방식을 버리고 Vanilla JavaScript 방식으로 querySelectorAll을 사용해서 버튼 컴포넌트를 리스트화해서 위의 방식을 택하였고 결과는 성공적이였다.
이것을 통해 알게 된 것은 내가 JQuery를 잘 알지 못한다는 사실이였다. 예로, children을 통해 접근한 컴포넌트는 querySelectorAll로 수집한 컴포넌트는 다른 모양인듯하다. 일단 이로써 팀 프로젝트에서 내가 맡은 파트를 완료하였다.
미니 프로젝트인만큼 그렇게 힘들진 않았지만, 후일 내가 이 문제점들의 원인을 더 공부해야겠다는 생각을 하게 된 시간이였다.