22,000원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 해결됨[코드캠프] 훈훈한 Javascript
window객체 대신 document객체를 사용해도 되나요?
섹션 6. 키보드 event 체크에서 질문이 있습니다.DOM은 브라우저가 HTML 문서를 파싱하는 과정에서 생겨나는 객체라고 배웠고,window는 가장 높은 최상위 공간에 존재하고 있는 전역객체라고 배웠습니다.그런데, event속성을 사용할 때, 꼭 굳이 window를 사용해야 하는지 여쭤봅니다.어떻게보면 event속성도 크게보면 HTML 문서 내 한 요소이자 영역인 것 같아서요. 혹시 window 객체에서 사용가능한 속성과 document 객체에서 사용가능한 속성이따로 분리되어 각자 사용하기로 약속한게 있는건가요? 이점이 궁금합니다.감사합니다.
- 해결됨[코드캠프] 훈훈한 Javascript
interval 증가 값
궁금한게 있는데요 !clearInterval 하면 intervalId 가 초기화는 안되는 건가요?? 카운트 다운 시작 버튼을 누르고 intervalId 가 1번부터 시작할 때 1씩 증가하고 타이머 초기화 버튼 누르고 다시 시작 누르면 1로 초기화 되지 않고 누적 되는거 같아서요.브라우저를 새로고침 했을 때 1로 초기화 되는데브라우저에 캐싱되는건가요 ??
- 해결됨[코드캠프] 훈훈한 Javascript
새로고침 두번 누를시 카운트다운 초기화
storage 데이터 유무에 따른 조건문까지 들은 학생입니다.로직 다 작성하고 테스트를 하는 과정에서 새로고침(F5)을 한번 눌렀을때는 입력했던 숫자들이 지워지면서 카운트다운이 흘러가고, localStorage에 있는 데이터도 사라지고 그 상태에서 한번 더 새로고침(F5)을 누르게 될 때 카운트다운이 흘러가는게 사라지고 D-Day를 입력해 주세요 가 뜨는데 원래 강의에서 이렇게 동작하게 하려고 했던 로직이 맞는지 궁금합니다!
- 해결됨[코드캠프] 훈훈한 Javascript
input태그 내에서 띄어쓰기 문제가 있어요
todolist 보고있습니다.엔터키를 누르면 새 할 일이 생기는데요,input 태그 안에서 띄어쓰기가 한 칸 생기네요?어째서 이런 문제가 발생하는걸까요..사진에 한칸이, 띄워져서 써져요 저 두 항목이 띄워져서 쓰인겁니다.혹시모르니 코드도 첨부해요*{ box-sizing: border-box; margin: 0px; } html, body{ width: 100%; height: 100%; } body{ background-color: azure; display: flex; flex-direction: column; align-items: center; min-height: 100vh; } .todo-container{ max-width: 100%; width: 400px; } #todo-input{ background-color: lightyellow; border: none; display: block; font-size: 2rem; padding: 0.5rem 2rem 0.5rem 0.5rem; width: 100%; } #todo-list{ background-color: snow; list-style-type: none; padding: 0; } #todo-list li{ border-top: 1px solid rgb(242,242,242); font-size: 1.5rem; user-select: none; } .complete{ color: rgb(155, 155, 155); text-decoration: line-through; } li button{ background-color: mintcream; width: 1.5rem; height: 1.5rem; margin: 0.5rem; border: 2px solid black; border-radius: 8px; cursor: pointer; } li button:active{ border: 2px solid gray; } .delete-btn-wrapper{ margin-top: 1rem; } .delete-btn-wrapper button{ font-weight: bold; background-color: antiquewhite; padding: 0.2rem 1rem; cursor: pointer; }const todoInput = document.querySelector("#todo-input"); const todoList = document.querySelector("#todo-list"); const createTodo = () =>{ const newLi = document.createElement('li'); const newSpan = document.createElement('span'); const newBtn = document.createElement('button'); newBtn.addEventListener('click',()=>{ newLi.classList.toggle('complete'); }); newLi.addEventListener('dblclick',()=>{ newLi.remove() }) newSpan.textContent = todoInput.value; newLi.appendChild(newBtn); newLi.appendChild(newSpan); todoList.appendChild(newLi); todoInput.value = " "; // console.log(todoList.children[0].querySelector('span').textContent) saveItemsFn(); } const keyCodecheck = () => { if (window.event.keyCode===13 && todoInput.value!==""){ createTodo(); } } const deleteAll = () =>{ const liList = document.querySelectorAll('li'); for(let i=0; i<liList.length; i++){ liList[i].remove(); } } const saveItemsFn = () =>{ const saveItems = []; for(let i=0; i<todoList.children.length; i++){ const todoObj = { contents: todoList.children[i].querySelector('span').textContent, complete: todoList.children[i].classList.contains('complete') } saveItems.push(todoObj); } console.log(saveItems); }<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>To-Do List</title> <link rel="stylesheet" href="./index.css"> </head> <body> <h1>To Do</h1> <div class="todo-container"> <input type="text" id="todo-input" onkeydown="keyCodecheck()"> <ul id="todo-list"> </ul> </div> <div class="delete-btn-wrapper"> <button onclick="deleteAll()">Deletel ALL</button> </div> <script src="./index.js"></script> </body> </html>
- 해결됨[코드캠프] 훈훈한 Javascript
노션, 알고리즘 배열 6번 답 수정 부탁드립니다.
알고리즘 배열 6번 문제 안녕하세요, 노션에 올려주신 알고리즘 배열 6번 문제 답이 5번 문제 답이랑 동일한데, 혹시나 수정 가능할까요? 감사합니다.
- 해결됨[코드캠프] 훈훈한 Javascript
return에 대해 질문있습니다!
안녕하세요?return에 대해 질문 있습니다!위는 선생님께서 작성하신 코드인데 마지막에setClearInterval(); return;이 부분을 아래와 같이 써도 되나요?return setClearInterval();
- 해결됨[코드캠프] 훈훈한 Javascript
변수와 객체의 특징
선생님 강의 매우 잘 듣고 있습니다.변수는 실제 값이 아니라 값이 저장되는 임시 메모리의 주소 값을 저장한다고 강의를 통해 배웠습니다.그럼 hello라는 변수에는 문자열 "hello"의 주소 값이 담겨져 있으니 변수 hello === 문자열 "hello"는 false아닌가요?변수 hello에는 문자열 "hello"가 담긴 주소값이 저장되니 사실 좌변은 아래와 같이 쓸 수 있을텐데요문자열 hello의 주소값 === 문자열 "hello" 이게 어떻게 true가 나오는지 이해가 안 됩니다.
- 해결됨[코드캠프] 훈훈한 Javascript
엄격한 비교 연산자 (변수와 배열의 차이)
선생님 노션 내용에서 메모리 주소 부분 설명 가능할까요? 어떤 의미인지 알겠는데 그럼 변수도 메모리 주소 다르니 false 나와야하는것이 아닐까여?엄격한 비교 연산자는 데이터의 메모리 주소를 비교하는 것으로 알고 있는데 변수는 메모리 주소가 다른데 왜 true 반환할까요?
- 해결됨[코드캠프] 훈훈한 Javascript
수업 내용 질문은 아닌데, 테마...
안녕하세요 :)강의 너무 잘 듣고 있습니다.선생님이 쓰시는 vscode 색 테마가 눈도 안 아프고 좋은데 뭔지 알 수 있을까요? 감사합니다!
- 해결됨[코드캠프] 훈훈한 Javascript
함수선언의 종류 강의에서) 매소드랑 함수의 차이
화살표 함수는 메서드에서 많이 사용한다고 말씀하셨는데 함수랑 메서드 차이가 궁금합니다 선생님
- 해결됨[코드캠프] 훈훈한 Javascript
선생님 const로 변수를 할당해도 왜 작동할까요?
<!DOCTYPE html> <html lang="ko"> <head> <title>D-DAY</title> <script> // 전역 변수로 만들어서 모든 함수에서 접근 가능 let dateFormat = null; const dateFormMaker = function () { // 변수 camelCase 작성 -> input 에 작성한 것 (문자열임) const inputYear = document.querySelector("#target-year-input").value; const inputMonth = document.querySelector("#target-month-input").value; const inputDate = document.querySelector("#target-date-input").value; // 데이터 form 만들어 주기 // ex) "2023-03-03" dateFormat = inputYear + "-" + inputMonth + "-" + inputDate; return dateFormat; console.log(inputYear, inputMonth, inputDate); }; const counterMaker = function () { dateFormat = dateFormMaker(); const nowDate = new Date(); // 특정 지정한 날 //const targetDate = new Date("2023-03-03"); // input 창에 입력한 특정 날 // "" 로 쓰면 문자열 데이터로 인식되기 때문에 변수로 써야하기 때문에 dateFormat으로 사용 const targetDate = new Date(dateFormat); // 먼저 빼고 나서 나눗셈 진행 (밀리세컨드 구별) const remaining = (targetDate - nowDate) / 1000; // 1시간 3600초 // 하루 24시간 // 남은 일자 // Math.floor : 소수점 이하를 내림 const remainingDate = Math.floor(remaining / 3600 / 24); // 남은 시간 const remainingHours = Math.floor(remaining / 3600) % 24; // 남은 분 const remainingMin = Math.floor(remaining / 60) % 60; // 남은 초 const remainingSec = Math.floor(remaining) % 60; console.log(remainingDate, remainingHours, remainingMin, remainingSec); }; </script> </head> <body> <input id="target-year-input" class="target-input" /> <input id="target-month-input" class="target-input" /> <input id="target-date-input" class="target-input" /> <button onclick="counterMaker()">버튼</button> </body> </html>
- 해결됨[코드캠프] 훈훈한 Javascript
구조분해할당 관련 질문이요
구조분해할당 강의 보다가 궁금해서 질문드려요..!만약let arr = [1, 2,3] 이라는 배열이 있을때배열[2]은 제외하고배열[1],[3]만 변수로 뽑고싶으면 어떻게 하죠..?let [one, ??? , three] = arr
- 해결됨[코드캠프] 훈훈한 Javascript
수업 코드 업로드
수업 예제 타이머 코드를 볼 수 있는 깃헙 주소는 없을까요?노션 학습 자료 노트에서는 안보여서요..!
- 해결됨[코드캠프] 훈훈한 Javascript
섹션 7 추가 문제에 대한 답안은 없나요??
advanced 문제 답안 보고 싶은데 없어서 질문드립니다🥲
- 해결됨[코드캠프] 훈훈한 Javascript
intervalID가 1이 아닌 5부터 시작해요
강의에서는 1부터 시작하는데저는 intervalID가 5부터 시작합니다원인이 뭘까요ㅜㅜconst starter = function () { container.style.display = "flex"; messageContainer.style.display = "none"; counterMaker(); // setInterval함수가 1초 딜레이가 있기 때문에 counterMaker()를 먼저 실행해서 딜레이 없앰 const intervalID = setInterval(counterMaker, 1000); intervalIdArr.push(intervalID); console.log(intervalIdArr); }; const setClearInterval = function () { for (let i = 0; i < intervalIdArr.length; i++) { clearInterval(intervalIdArr[i]); } };
- 해결됨[코드캠프] 훈훈한 Javascript
수업자료노션
어디에 가야 볼수있나요?
- 해결됨[코드캠프] 훈훈한 Javascript
타이머 새로고침시 오류
함수활용 목차까지 수업 잘 들었습니다. 아직 이해는 완벽히 하지 못했지만 잘 따라 만들어 본것같은데요,새로고침을 해도 로컬스토리지에 데이터가 기억되어있으니 이전 입력했던 카운트다운이 계속해서 진행된다고 하셨는데, 새로고침을 하면 데이터가 사라집니다.그래서 강의 마지막의 82줄에 나오는 setClearInterval 함수 안의 localStorage.removeItem("saved_date");를 resetTimer함수 안으로 옮겨보았더니 새로고침을 했을때 데이터가 사라지지 않고, 초기화를 하면 사라집니다. 이렇게 수정하는것이 맞는지 궁금합니다.
- 해결됨[코드캠프] 훈훈한 Javascript
함수리턴강의 질문
const counterMaker = function () { const targetDateInput = dateFormMaker(); const nowDate = new Date(); const targetDate = new Date(targetDateInput).setHours(0, 0, 0, 0); 위 함수에서 dateFormMaker()의 리턴값을const targetDateInput 로 선언해서 targetDate 를new Date(targetDateInput)로 선언해주셨는데이 경우new Date(dateFormMaker())처럼 리턴값을 바로 이용하는것 과 다른점이 무엇인가요?
- 해결됨[코드캠프] 훈훈한 Javascript
노션 복제 다시 막힌건가요?
강의노트는 원래부터 복제가 불가능한가요..? 매번 사파리 들어가서 봐야해서요
- 해결됨[코드캠프] 훈훈한 Javascript
for 반복문 질문 드립니다.
안녕하세요!알고리즘 21번 문제의 출력을 for 반복문을 사용하는 것으로 변경하고 싶었으나, 함수 사용 결과가 undefined로 출력되어 문의 드립니다.작성코드// 이번달은 며칠? 함수 만들기 function days(month) { if (month === 2) { //console.log(28); } else if (month <= 7 && month % 2 === 1) { //console.log(31); } else if (month >=8 && month % 2 === 0) { //console.log(31); } else { //console.log(30); } } // 1월 ~ 12월은 며칠인지 반복문을 이용하여 출력하기 for(let i = 1; i < 13; i++) { console.log(i + '월은 ' + days(i) + '일'); } 출력결과1월은 undefined일 2월은 undefined일 3월은 undefined일 4월은 undefined일 5월은 undefined일 6월은 undefined일 7월은 undefined일 8월은 undefined일 9월은 undefined일 10월은 undefined일 11월은 undefined일 12월은 undefined일반복문 내 days(i) 함수에 값이 할당되지 않는 것 것 같은데 이유를 알 수 있을까요? 감사합니다! :>