[카드 뒤집기 미션 - 2단계] 이수진 미션 제출합니다. #11
Conversation
css 깨짐 현상이 발생합니다 |
|
이미 뒤집은 카드를 다시 클릭하거나 게임이 종료되었을 때 카드를 추가로 클릭해도 이벤트가 작동합니다. |
|
시안에 맞게 재시작 버튼 css를 수정해주세요! absolute를 사용해주시면 되겠습니다 |
|
재시작 버튼을 누를 시 |
index.css
Outdated
| margin-top: 10px; | ||
| margin-left: auto; | ||
| margin-right: auto; |
There was a problem hiding this comment.
margin 속성 값으로 하나로 축약해서 나타낼 수 있습니다!
src/CardGame.js
Outdated
| start() { | ||
| this.cards.forEach((card) => { | ||
| card.element.addEventListener('click', () => { | ||
| card.handleCardClick(this.resultContainer); |
There was a problem hiding this comment.
handleCardClick에는 인자가없는데 this.resultContainer를 사용한 이유가 있을까요?
There was a problem hiding this comment.
아마 클릭 시 당첨 / 꽝이라는 글자가 카드에 생겨나야 하기 때문에 해당 인자를 전달해야 하는 것으로 잘못 착각한 것 같습니다. 수정하였습니다
src/CardGame.js
Outdated
| this.cards.forEach((card) => { | ||
| card.element.removeEventListener('click', card.handleCardClick); |
There was a problem hiding this comment.
해당 함수는 제대로 동작하지 않을겁니다!
removeEventListener 의 인자로는 addEventListener와 같은 함수를 전달해야 이벤트를 제거할 수 있는데
bind함수는 매번 새로운 함수를 생성하기 때문입니다
예를 들어
const f1 = method.bind(this);
const f2 = method.bind(this);
f1, f2은 서로 다른 함수라고 할 수 있습니다
src/CardGame.js
Outdated
|
|
||
| createCards(game) { | ||
| const cards = []; | ||
| const winnerLocation = Math.floor(Math.random() * 3); |
There was a problem hiding this comment.
카드는 4개로 추가되었는데 랜덤값은 수정이 되어있지 않네요ㅜㅠ
|
commit할 때 '저장 및 commit 하시겠습니까?' 이 팝업창에 yes를 클릭했더니 Card.js와 CardGame.js가 실수로 같이 커밋되어서 뒤집은 카드를 다시 클릭하거나 게임이 종료되었을 때 카드를 추가로 클릭해도 이벤트가 작동하는 부분 개선한 것과 Card.js 부분 개선한 것이 같이 푸시되었습니다 ㅠㅠ..! |
No description provided.