퀴즈 풀이
- 첫 번째 할일 항목의 '위로' 버튼을 눌렀을 때 해당 항목이 맨 아래쪽으로 이동합니다. 이 버그가 발생하는 이유에 대해서 간단히 서술해주세요.
Node.previousSibling - null if the specified node is the first in that list.
insertBefore - If referenceNode is null, the newNode is inserted at the end of the list of child nodes. 즉, appendChild 와 똑같이 동작한다.
그렇다면 어떻게 이 에러를 고칠 수 있을 까?
null 이 아니면 코드를 실행하고, null 이면 아무 것도 안하게 하자!
- 마지막 할일 항목의 '아래로' 버튼을 누르면 콘솔에서 에러가 발생하는 것을 관찰할 수 있습니다. 이 에러가 발생하는 이유에 대해서 간단히 서술해주세요.
todoItemEl.nextElementSibling.nextElementSibling 맨 마지막에 있는 li 에 nextElementSibling 은 null 을 반환하기 때문에, 그것의 nextElementSibling 을 가져올 수 없기 때문에 에러가 난다.
- mouseover / mouseout 이벤트와, mouseenter / mouseleave 이벤트의 차이점에 대해 간단히 서술해주세요.
mouseover, mouseout - 버블링이 일어나기 때문에 밑의 현상이 발생한다.
- mouseover - 자식 요소 경계선을 지나쳐도 부모 요소의 이벤트리스너가 호출된다.
- mouseout - 여기서도 역시 자식요소에 대해서도 부모 요소의 이벤트리스너가 호출된다.
mouseeneter, mouseleave - 버블링이 일어나지 않기 때문에 밑의 현상이 발생한다.
- mouseenter - 자식요소에 관한 아무 현상이 발생하지 않는다.
- mouseleave - 역시 자식요소에 관한 아무 현상이 발생하지 않는다.
insertBefore(element, null) = appendChild()
modal 화면을 만드는 방법에는 2 가지가 있다.
- DOM 객체를 만들어서 넣는 방법.
- 리액트에서 많이 쓰이는 방법!
- 할 일 만들기 같은 것에서 클래스를 즉시 추가, 제거 할 때에 많이 쓰인다.
- 스타일을 다르게 지정해줘, 숨겼다가 나타냈다가 할 수 있다.
- 내가 코드 작성 시에 무엇을 만들지 알고있을 경우.
/* css 클래스 선택 시 둘의 간격이 없이 붙어 있다면 and의 의미로 wrong-modal도 가지고 있고 open도 가지고 있을 때를 가리킨다. */
.wrong-mdoal.open {
display: block;
}색을 바꾸는 시점
- 넥스트 버튼을 눌렀거나 플레이어게인을 눌렀을 때 색이 바뀌게 하고 싶다!
document.querySelectorAll(".option").forEach((optionEl, index) => {
optionEl.addEventListener("click", e => {
if (answer === index) {
score++;
} else {
score = 0;
}
document.querySelector(".score").textContent = score;
// 이 nextStage가 빠져야 한다!!
newStage();
});
});querySelector의 사용을 줄이는 것이 좋다! 성능의 개선
수정 전 코드
let answer;
let score = 0;
function randomColor() {
const r = Math.floor(Math.random() * 256);
const g = Math.floor(Math.random() * 256);
const b = Math.floor(Math.random() * 256);
return `rgb(${r}, ${g}, ${b})`;
}
// 박스 안에 들어갈 칼러 값들
document.querySelectorAll(".option").forEach((optionEl, index) => {
optionEl.addEventListener("click", e => {
if (answer === index) {
score++;
// 정답이라면 right-modal을 나타나게!
document.querySelector(".right-modal").classList.add("open");
} else {
// 틀렸으면 wrong-modal을 나타나게! 그리고 최종 점수도 표현해주어야 한다.
document.querySelector(".score-in-modal").textContent = score;
score = 0;
document.querySelector(".wrong-modal").classList.add("open");
}
document.querySelector(".score").textContent = score;
});
});
function newStage() {
// rgb color 값을 재사용하기 위한 변수 생성
const options = [randomColor(), randomColor(), randomColor()];
document.querySelectorAll(".option").forEach((optionEl, index) => {
optionEl.style.backgroundColor = options[index];
});
answer = Math.floor(Math.random() * 3);
// 텍스트로 표기할 정답 칼러 값 - 배열 3개 안에 들어있는 것들 중 하나를 랜덤하게 정해주어야 하니까
document.querySelector(".color-text").textContent = options[answer];
}
newStage();
// 이벤트 리스너는 한번만 실행되어야 하기 때문에 밖으로 빼서 작성
// 버튼만들기 : next-stage
document.querySelector(".next-stage").addEventListener("click", e => {
newStage();
document.querySelector(".right-modal").classList.remove("open");
});
// 버튼만들기 : play-again
document.querySelector(".play-again").addEventListener("click", e => {
newStage();
document.querySelector(".wrong-modal").classList.remove("open");
});수정 후 : const rightModalEl = document.querySelector(".right-modal");, const wrongModalEl = document.querySelector(".wrong-modal");의 따로 생성.
let answer;
let score = 0;
// 이것이 동적으로 생성이 가능한 이유는 html에 이미 생성되어 있기 때문이다. html에 생성되어 있는 요소들은 밑과 같이 생성해놓고 사용할 수 있다.
const rightModalEl = document.querySelector(".right-modal");
const wrongModalEl = document.querySelector(".wrong-modal");
function randomColor() {
const r = Math.floor(Math.random() * 256);
const g = Math.floor(Math.random() * 256);
const b = Math.floor(Math.random() * 256);
return `rgb(${r}, ${g}, ${b})`;
}
// 박스 안에 들어갈 칼러 값들
document.querySelectorAll(".option").forEach((optionEl, index) => {
optionEl.addEventListener("click", e => {
if (answer === index) {
score++;
// 정답이라면 right-modal을 나타나게!
rightModalEl.classList.add("open");
} else {
// 틀렸으면 wrong-modal을 나타나게! 그리고 최종 점수도 표현해주어야 한다.
document.querySelector(".score-in-modal").textContent = score;
score = 0;
wrongModalEl.classList.add("open");
}
document.querySelector(".score").textContent = score;
});
});
function newStage() {
// rgb color 값을 재사용하기 위한 변수 생성
const options = [randomColor(), randomColor(), randomColor()];
document.querySelectorAll(".option").forEach((optionEl, index) => {
optionEl.style.backgroundColor = options[index];
});
answer = Math.floor(Math.random() * 3);
// 텍스트로 표기할 정답 칼러 값 - 배열 3개 안에 들어있는 것들 중 하나를 랜덤하게 정해주어야 하니까
document.querySelector(".color-text").textContent = options[answer];
}
newStage();
// 이벤트 리스너는 한번만 실행되어야 하기 때문에 밖으로 빼서 작성
// 버튼만들기 : next-stage
document.querySelector(".next-stage").addEventListener("click", e => {
newStage();
rightModalEl.classList.remove("open");
});
// 버튼만들기 : play-again
document.querySelector(".play-again").addEventListener("click", e => {
newStage();
wrongModalEl.classList.remove("open");
});게임 만들기, 혹은 리액트 사용 시 쓰이는 생각 과정
사용자가 입력 - 그에 따라서 다른 화면을 보여준다.
화면이 있을 때, 사용자 입력 혹은 시간이 경과하면 화면을 다시 그려주어야 한다. 하지만, 화면을 다시 그릴 수는 없기 때문에 이미 기억하고 있는 것에서 불러오게 된다. 이를 상태(state)라고 부른다.
사용자가 맞거나 틀린 것(사용자의 입력의 발생)을 선택하면 상태가 변경이 된다. 이 상태를 기반으로 다시 화면을 그리게 된다. 이것의 반복이 계속된다고 보면 된다. 그래서 게임을 만들거나 프론트엔드 웹사이트를 만들 때, 이 상태에 관해 생각해보아야 한다.
그래서 우리가 실습한 코드(뒤죽박죽의)를 위에서 생각한대로 화면 -> 상태(상태의 변경 혹은 시간의 경과) -> 그리기 -> 화면 이라는 정돈된 코딩을 가능하게 해주는 것이 리액트이다.
사이트의 분석을 하고 미션을 진행하던지 하자.
과제! 브레이크 위크동안 rgb challenge 동작을 똑같이하게 만들어보기!
auto crlf 기능!!! 검색해보기!!! 개행 관련 문제에 관하여
윈도우 사용자는 git config --global core.autocrlf를 해당 영역 디렉토리에서 실행해주면 된다.
게임 해커톤은 한명이 저장소를 만들고 (본인 계정), 그 계정에다가 접근권한을 팀원들에게 줘서 그 계정에다가 푸시할 수 있도록.