210205_TIL

김재헌·2021년 2월 5일
0

드디어 트위터 목업(Mock-up) 해둔 HTML에 DOM으로 조작해서 기능을 구현해주는 과제를 수행했다. HTML에 하드 코딩해서 만들어준 트윗 리스트를 지우고 JS로 함수를 만들어 DATA.js에 만들어져 있는 배열의 요소를 가져와 트윗 리스트를 생성해 주었다. 이 과정만 거의 2시간이 걸렸다. 그리고 username을 쓰고 comments를 써서 Tweet!을 누르면 새로운 트윗이 생성되도록 작업을 해주었다. 그리고 update button(원 모양 화살표)을 누르면 랜덤으로 정보를 가져와 트윗이 생성되는 작업까지 해주었다. 그런데 이미 생성되어있는 트윗에 username(ex: tim, steve)을 눌러서 그 사람이 쓴 트윗만 보이게끔 하는 기능을 구현하려고 하다가 여태 했던 작업이 전부 꼬이는 상황이 발생했다. 문제는

const listAll = document.querySelector('.list')

를 했을 때 새로 생성된 리스트 태그가 할당되지 않았다. 아무래도 creatElement를 해주는 함수가 완벽하게 제 기능을 하지 못하고 '원래 있던 트윗', 'tweet! 버튼을 눌러 새로 생성된 트윗', 그리고 'update button을 눌러서 생성된 랜덤 트윗'이 하나로 묶여 있지 않고 각자 생성되어 ul에 붙여졌기 때문일 것 같다. (확실하게 문제를 잡지 못했다) 이러한 문제 말고도 문제의 발생 원인은 여러 가지가 있을 것 같았다. 왜냐하면 코드를 수정하는 과정에서 너무 많은 코드가 수정되어 나중에는 코드를 쓴 나도 기억을 못 하는 사태가 벌어졌다. 코드를 깔끔하게 정리하는 습관을 들이는 게 무엇보다 중요하다는 생각이 들었다.

이렇게 단순한 기능을 구현해 내는데도 몇시간씩 걸리고 생각지도 못한 부분에서 막히면서 뭔가를 해냈다는 뿌듯함을 전혀 느낄 수 없었다. 그래서 오늘 그래도 기본적인 기능은 끝내보자는 생각에 Sprint Review(끝난 프로젝트를 리뷰하는 시간)에 막혔던 부분을 질문하고 피드백을 받고 나의 코드를 고쳐나가고 싶었다. 하지만 발표로 인해 내가 원하는 질문은 단 하나도 할 수 없었다. 나보다 잘하고 더 많은 시도를 한 분들께서 발표하고 어떠한 기능을 구현해냈는지 보는 건 정말 도움이 된다. 내가 생각지도 못한 부분을 이렇게 해결했구나 하면서 깨달음을 얻을 수도 있을 것이다. 하지만 그게 수준 차이가 심하면 어떻게 될까. 물론 내가 수강생 약 110명 중 젤 못해서 그런 걸 수도 있다. 어쨌든 나는 동기분들의 발표를 보면서 곱셈을 겨우 배우고 있는 초등학생인 내가 고등학생이 "저는 곱셈 문제를 방정식을 활용해 이러 이러한 방법으로 풀었습니다. 하하"하는 것 같았다. 내가 정규 과정에서 배우지도 못하고 들어보지도 못한 것들을 설명하는데 어떻게 이해 할 수 있겠는가? 정말 나에겐 의미없는 한 시간이 지나갔다. 너무 아쉬워서 이슈 쉐어를 통해 내 생각을 전달할까 고민도 정말 많이 하고 쓰려고 이슈 쉐어 페이지까지 들어갔다가 그냥 껐다. 이슈 쉐어 쓰는 시간도 아까웠다. 나는 아직도 끝내지 못한 과제가 너무 많으니까.

profile
개발자되려고 맥북샀다

0개의 댓글