티스토리 뷰
퀴즈를 풀다가 생긴 의문점을 남겨본다.
과제 유출을 하지말라는 당부가 계셔서 어디서 나온 퀴즈인지는 비밀. (혹시나 그래도 문제가 된다면 알려주세요..)
👀 왜 안되지
창 사이즈에 반응해 배경 컬러가 변하는 코드를 짰다.
스스로 생각해서 코드를 짜는게 익숙하지 않아서
사고의 과정 그대로 코드를 작성하고, 하나하나 수정해 나가는 식으로 해보는 중이다.
const background = document.querySelector("body");
const windowWidth = window.innerWidth;
function colorChange() {
if (windowWidth > 1200) {
background.classList.add("red");
} else if (windowWidth < 600) {
background.classList.remove("red");
background.classList.add("blue");
} else {
background.classList.remove("red", "blue");
}
}
window.addEventListener("resize", colorChange);
그래서 windowWidth
를 먼저 선언한다음 나머지 코드를 짰더니, 원하는 사이즈로 변동시킨다음 새로고침을 하고, 다시 창 크기를 변화시켜야만 제대로 작동을 했다.
👀 왜 되는거지???
이래저래 고쳐보는 중 어쩌다 windowWidth
를 함수 안으로 집어 넣었는데.. 갑자기 원하는대로 작동이 되었따!!
const background = document.querySelector("body");
function colorChange() {
const windowWidth = window.innerWidth;
if (windowWidth > 1200) {
background.classList.add("red");
} else if (windowWidth < 600) {
background.classList.remove("red");
background.classList.add("blue");
} else {
background.classList.remove("red", "blue");
}
}
window.addEventListener("resize", colorChange);
windowWidth
를 함수 안으로 넣었더니 해결된 것인데, 왜 그런지 알수가 없어서 고민하다가 오픈챗방에 질문을 드렸다.
✏️ 해결!
처음에 제대로 작동이 안되었던 이유는 역시나
window의 width값을 확인해주는 windowWidth
가 함수 밖에 있었기 때문.
이벤트리스너가 작동하며 함수를 실행시킬 때 마다,windowWidth
가 새로 확인될 필요가 있었기 때문이다.
후 밤늦게 도와주셔서 감사합니다 익명의 슨생님 ㅠㅠ
항상 답을 듣고나면 상식적(?)인 것들인데 왜 혼란스러웠을까 싶다.
어쨌든 이렇게 가벼운 것들이라도 만들어보고, 실행하고, 해결하는 것에서 기쁨을 느끼는 중!
https://codesandbox.io/s/empty-blueprint-forked-qwomd?file=/src/index.js
'TIL' 카테고리의 다른 글
[TIL] 자바스크립트로 애플갬성 스크롤 애니메이션 만들기 (너무 뿌듯해서 남기는 글) (0) | 2021.12.28 |
---|---|
[TIL] addEventListener 호출함수에 argument 넣기 (익명함수) (0) | 2021.12.26 |
[TIL] Github Pages로 프로젝트 사이트 만들기 (0) | 2021.12.26 |
[TIL] 프로젝트 셋팅 - Hacker News Client with JS (0) | 2021.12.26 |
[TIL] 안다고 생각하는 것과 진짜 아는 것 구분하기 (0) | 2021.12.24 |
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
- Total
- Today
- Yesterday
링크
TAG
- CSS
- Synchronous
- Ternary
- ES6
- Prettier
- destructuring
- 생각정리
- Callback
- VSCode
- 타입스크립트
- 리액트
- 개념정리
- typescript
- JSX
- promise
- 조건부삼항연산자
- Prototype
- Asynchronous
- 다중조건삼항연산자
- scrollEvent
- callsignature
- DOM
- class
- JS
- javascript
- JQuery
- 구조분해할당
- 삼항조건연산자중복사용
- Til
- notworking
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
글 보관함