Github: https://github.com/sunnysideup0w0v/makeCardGame
새로 알게 된 개념1
: createElement는 새로운 element 요소를 만들 때 마다 새롭게 작성해줘야 한다.
=> 맨 처음 createElement를 사용 할 때 for문 밖에 작성 했었다. 그러나.. element가 하나밖에 생성되지 않았고, 평소 스터디를 도와주시던 선생님께 여쭤보았다.
"선생님 이거 li가 하나밖에 생성되지 않아요.. 왜그럴까요?"
"글쎄요 저는 리액트로 작성해서 이런식으로 코드 작성은 잘 하지 않아서.."
진짜 눈물이 나는 것이었다.
한 30분에서 1시간을 이 문제로 골머리를 앓았는데.
그런데 말씀주시는게
"변수가 하나만 밖에 지정이 되어있어 이미 생성되었다고 파악, 여러개로 생성되지 않는게 아닐까 싶어요."
진짜였다.
계속해서 변수를 재선언하듯 불러주니 그제서야 5개고 10개고 생성되는 li들..
새로운 li를 생성하라는 것으로 인식하는게 아니라 그저 변수로 선언된 li만 생성하라고 인지하는 것 같았다.
덕분에 문제 하나를 해겼했다.
생성된 li들은 appendChild를 이용해서 각 ul태그에 달아주었다.
새로 알게 된 개념2
: append와 appendChild의 차이?
=> ParentNode.append()는 DOMString 객체도 추가할 수 있다. 한편 Node.appendChild()는 오직 Node 객체만 허용한다.
=> ParentNode.append()는 반환하는 값이 없다. 한편 Node.appendChild()는 추가한 Node 객체를 반환한다.
=> ParentNode.append()는 여러 개 노드와 문자를 추가할 수 있다. 한편 Node.appendChild()는 오직 노드 하나만 추가할 수 있다.
결국 li 요소를 만들어서 붙이려면 appendChild로 사용해야한다는 것..!
헷갈리는 개념은 아니었지만, 순간 append와 appendChild가 동시에 뜨는 걸 보고 무슨 차이지? 하고 생각하게 되어 작성하게 되었다.
새로 알게 된 점
setTimeout을 사용 할 땐 주의를 많이많이 하기!
카드를 모두 뒤집은 후, 생성된 카드의 개수와 뒤집힌 카드의 개수가 서로 일치하면 alert이 뜨게 코드를 구현해 뒀었다.
그러나 치명적 단점이 있었다 그것은 바로 왜인지 클릭을 한 번 더 해야 alert이 뜬다는 단점.
처음에는 eventlistner로 걸어둬서 그런건가 했었다.
그런데 순차적으로 이루어지는 걸 생각하면 또 그건 아니고..
문제는 setTimeout에 있었다.
처음에 alert를 setTimeout 밖에 작성했었는데, 그 시간 차 때문에 클릭을 해야 진행이 되는 것 처럼 착각 한 것...!
setTimeout 안으로 넣으니 해결되는 문제였다.
예전에도 비슷한 문제로 헤맸던 기억이 있는데 역시 인간은 망각의 동물...ㅇ
2주차도 위코드 13기 위스터디 구글참조팀 넘 고생했어요^3^
