22,000원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 해결됨[코드캠프] 훈훈한 Javascript
for of, for in 강의에서
19분 45초쯤 starter 함수에서 counterMaker()을 적는 코드가 있는데 counterMaker함수에서 return을 하지 않았는데 저렇게 사용해도 괜찮은 건가요?
- 해결됨[코드캠프] 훈훈한 Javascript
선생님 remaining 질문입니다.
제가 타이머 수업 들으면서 const remaining을 const reamaining이라고 입력했는데 오류가 떠서 넘어가지 않던데 const 뒤에 변수명을 입력하는거니까 굳이 remaining이 아니어도 상관 없는거 아닌가요?왜 오류가 뜨는건지 궁금합니다.
- 해결됨[코드캠프] 훈훈한 Javascript
ppt 제공
혹시 이 강의 대한 ppt자료 제공은 안하시나요 ?
- 해결됨[코드캠프] 훈훈한 Javascript
혹시 프론트, 백엔드 코스랑 강의가 겹치나요?
안녕하세요?혹시 프론트, 백엔드 코스 구매하면앞부분에 강의가 겹치는지 문의드려요
- 해결됨[코드캠프] 훈훈한 Javascript
display:flex의 의미
제가 섹션4까지 듣고 카운트다운 코드를 다시 보며 복습하고 있는데 style.display = flex가 이 섹션 4까지의 코드에서 어떤 맥락으로 사용됐는지가 이해가 잘 가지 않아 이 부분을 여쭤보고 싶습니다. 자바 스트립트 관련 여러 문서들을 참고하니 자바스크립트에서 flex의 의미는 css에서와 크게 다르지 않게 요소의 display 속성(인라인or블록 요소인지 등등)을 설정한다는 것을 이해했습니다. 그러나 아래의 코드 부분을 보다가 의문이 생겼습니다. if (remaining <= 0) { container.style.display = 'none'; messageContainer.innerHTML = '<h3>타이머가 종료되었습니다.</h3>'; messageContainer.style.display = 'flex'; setClearInterval(); return; } else if (isNaN(remaining)) { container.style.display = 'none'; messageContainer.innerHTML = '<h3>유효한 시간대가 아닙니다.</h3>'; messageContainer.style.display = 'flex'; setClearInterval(); return; }display:none은 요소를 숨겨준다는 의미로 이해하기 쉬웠지만 display = flex의 뜻을 알고 보니 messageContainer.style.display = flex는 어떤 의미로 사용된 것인지 감이 잘 안 잡힙니다 ㅠㅜ. 위에 innerHTML에 값을 할당한 것으로 충분하다고 생각했는데 왜 flex가 선언되는지 이유를 알고 싶습니다!
- 해결됨[코드캠프] 훈훈한 Javascript
반복문을 활용한 날짜 데이터 리팩토링
강의 8:18 부분에서 강사님 코드 49번째 줄 말고 이렇게 작성하면 왜 안되나요?console.log(documentobj[docKeys][i]);
- 해결됨[코드캠프] 훈훈한 Javascript
JS로 HTML. CSS 조작
18:00 부분에서 왜 변수로 안하고 객체로 하는 게 더 효율성이 좋은 건가요? 유지보수 때문인가여...???
- 해결됨[코드캠프] 훈훈한 Javascript
조건에 따른 메시지 출력 강의
7:49 부분에 강사님은 NaN이 한 번만 출력되는데 저는 NaN NaN NaN NaN 총 네 번이 출력되는데 괜찮나요...? <!DOCTYPE html> <html lang="ko"> <head> <title>D-Day</title> <link rel="stylesheet" href="./style.css" /> <script> const dateForMaker = function () { // HTML에서 입력된 연도 값을 가져와서 inputYear 변수에 저장 const inputYear = document.querySelector("#target-year-input").value; // HTML에서 입력된 월 값을 가져와서 inputMonth 변수에 저장 const inputMonth = document.querySelector("#target-month-input").value; // HTML에서 입력된 날짜 값을 가져와서 inputDate 변수에 저장 const inputDate = document.querySelector("#target-date-input").value; // 연도, 월, 날짜를 하이픈으로 연결하여 날짜 형식 문자열 생성 // const dateFormat = inputYear + "-" + inputMonth + "-" + inputDate; const dateFormat = `${inputYear}-${inputMonth}-${inputDate}`; // 생성된 날짜 형식 문자열을 반환 return dateFormat; // console.log(inputYear, inputMonth, inputDate); }; const counterMaker = function () { const targeDateInput = dateForMaker(); // 현재 시간 const nowDate = new Date(); // 대상 날짜를 생성하고 시, 분, 초, 밀리초를 0으로 설정 const targetDate = new Date(targeDateInput).setHours(0, 0, 0, 0); // emaining = 남은 시간을 초로 환산 // 밀리초를 초로 변환하기 위해 1000을 나눔 const remaining = (targetDate - nowDate) / 1000; console.log(targetDate); // remaining이 0보다 작으면 즉, 타이머가 종료된다면 if (remaining <= 0) { // "타이머가 종료되었습니다." 출력 console.log("타이머가 종료되었습니다."); // 만약 잘못된 날짜가 들어왔다면 "유효한 시간대가 아닙니다." 출력 } else if (remaining === NaN) { console.log("유효한 시간대가 아닙니다."); } // 'remaining' 값을 3600(초당 시간)과 24(시간당 일)로 나눈 후 정수 부분을 남은 일수로 저장 const remainingDate = Math.floor(remaining / 3600 / 24); // 'remaining' 값을 3600(초당 시간)으로 나눈 후 24(시간)로 나눈 나머지를 남은 시간(시)으로 저장 const remainingHours = Math.floor(remaining / 3600) % 24; // 'remaining' 값을 60(초당 분)으로 나눈 후 60(분)으로 나눈 나머지를 남은 분으로 저장 const remainingMin = Math.floor(remaining / 60) % 60; // 'remaining' 값을 60(초)으로 나눈 후 60(초)으로 나눈 나머지를 남은 초로 저장 const remainingSec = Math.floor(remaining) % 60; // 남은 일, 시간, 분, 초를 콘솔에 출력 console.log(remainingDate, remainingHours, remainingMin, remainingSec); }; </script> </head> <body> <h1>D-Day</h1> <div id="d-day-container"> <div class="d-day-child-container"> <span id="days">0</span> <span>일</span> </div> <div class="d-day-child-container"> <span id="hours">0</span> <span>시간</span> </div> <div class="d-day-child-container"> <span id="min">0</span> <span>분</span> </div> <div class="d-day-child-container"> <span id="sec">0</span> <span>초</span> </div> </div> <div id="target-selector"> <!-- 연도를 입력받는 입력란. 'id'는 "target-year-input"이며 CSS 클래스는 "target-input"입니다. --> <input id="target-year-input" class="target-input" size="5" /> - <!-- 월을 입력받는 입력란. 'id'는 "target-month-input"이며 CSS 클래스는 "target-input"입니다. --> <input id="target-month-input" class="target-input" size="5" /> - <!-- 날짜를 입력받는 입력란. 'id'는 "target-date-input"이며 CSS 클래스는 "target-input"입니다. --> <input id="target-date-input" class="target-input" size="5" /> </div> <button onclick="counterMaker()" id="start-btn">카운트다운 시작</button> </body> </html>
- 해결됨[코드캠프] 훈훈한 Javascript
locallhost
제 창 주소는 이렇게 뜨는데 왜 강사님은 다르게 뜨는 건가요 로컬호스트 강의 0:40 부분
- 해결됨[코드캠프] 훈훈한 Javascript
객체 속성 접근시 브라켓 이용(vs. 닷 오퍼레이터)
<JS로 HTML, CSS 조작> 강의편에서 객체와 속성 코드 적으실 때 hours.textContent = remainingObj["remainingHours"]; 와 같이 브라켓을 이용해서 속성에 접근하셨는데, 객체 속성 접근할 때 닷 오퍼레이터말고 브라켓을 이용하신 이유가 있나요? 아니면 단순한 개인의 취향 문제인지요 ㅎㅎ 이번 강의에서 처음 알게된 내용이라 궁금해서 여쭤봅니다 :)
- 해결됨[코드캠프] 훈훈한 Javascript
interval에 대한 질문입니다.
let intervalId; let countdownStart = function () { messageContainer.style.display = "none"; ddayContainer.style.display = "flex"; counterMaker(); intervalId = setInterval(counterMaker, 1000); console.log(intervalId); }; let countdownReset = function () { ddayContainer.style.display = "none"; messageContainer.style.display = "flex"; messageContainer.innerHTML = "<h3>D-day를 입력해 주세요</h3>"; console.log("reset >> " + intervalId); clearInterval(intervalId); }; intervalId을 전역 변수로 선언해 놓은 후 전역변수 intervalId에 setInterval(counterMaker, 1000) 값을 담은 후에 마지막으로 저장된 intervalId값을 이용해서 clearInterval(intervalId)을 실행 시켜서 타이머를 중지 시키는 방법은 문제가 있는건가요? 정상 작동 하는 것 처럼 실행이 되긴합니다. ** 마지막으로 동작된 intervalId를 사용하지 않고 동작한 모든 intervalId를 intervalIdArr배열에 담아서 배열 전부를 반복문을 이용해 clearInterval을 하는 이유가 궁금합니다 **
- 해결됨[코드캠프] 훈훈한 Javascript
반복문 실습에서 while문 질문 있습니다.
let i = 0;while(i<10){console.log(i)i = i + 1}이렇게 코드 작성 했을 때0부터 10까지 출력되던데,i = 9일 때, console.log(9) -> '9' 출력i = 9 + 1 -> i = 10 이 되고다시 while 문으로 진입하려고 했을 때 i = 10이 되니까 9까지만 찍히는게 맞지 않나요..?이 부분이 이해가 안되어 질문 드립니다!
- 해결됨[코드캠프] 훈훈한 Javascript
이해가 안되는 부분..
헷갈려서 질문이 조금 많은데요ㅠㅠ[1] 5:29 대에서숫자 0이 i에 들어가고0 번째 인덱스 값을 가진 요소 1을 갖고 올 수 있고,코드 실행해주고 i(0)이 1 증가되니arr.length = 길이가 5 니까i < 5 를 조건식으로 해석해서i[0] ~ i[4] 까지 인덱스를 기준으로 출력하므로1,2,3,4,5 가 출력 되는게 제가 맞게 이해한 걸까요? [2] for ( let i = 0; i < timeKeys.length; i = i + 1 ) { console.log (timeKeys[i])} 에서 timekeys도 배열이고 똑같이 길이(length) 갖고 있으니까, 길이만큼 반복 하는 거니까 ( 길이 =4 ),timeKeys[0]timeKeys[1]timeKeys[2]timeKeys[3]이렇게 돼서 인덱스 0 부터 인덱스 3까지 출력되는거니까배열의 요소인 remainingDate (인덱스 0) ~ remainingSec (인덱스3) 까지 출력되는게 맞나요? 살짝 헷갈리니 제대로 이해했는지 모르겠어요..ㅠㅠ [3] 객체 접근할 때 쓰는 브라켓 노테이션 원리는 알겠는데console.log(documentObj[docKeys[i]]);이 부분이 잘 이해가 안돼요documentObj 라는 객체를 출력하기 위해 브라켓 노테이션을 사용해서 태그를 접근한 것 같은데,[docKeys[i]] 를 사용한 원리와,documentObj[docKeys[i]] 자체가 태그가 되는 이유를 모르겠어요.. 자세하고 쉽게 알려주시면 감사하겠습니다!
- 해결됨[코드캠프] 훈훈한 Javascript
강의 보며 작업한 코드를
혹시 강의를 보며 작업한 코드를 깃허브 레포에 공개로 올려도 되나요?
- 해결됨[코드캠프] 훈훈한 Javascript
제대로 이해한건지 모르겠어요..
8분대 코드이고 const counterMaker = function () { const targetDateInput = dateForMaker(); console.log(targetDateInput);이 부분에서 console.log(dateForMaker()); 을 사용함으로서 dateFormat 데이터를 호출했는데, 왜 괄호안에 변수명(dateFormat)을 쓰지않고 함수명(dateForMaker)을 적어준 것이 헷갈려요.. 원래 return 시킨 변수명을 쓰는게 아니라 함수명을 적는건가요?
- 해결됨[코드캠프] 훈훈한 Javascript
강의자료 부탁드립니다.
안녕하세요.강의 자료가 어디에 있는지 알려 주세요.감사합니다.
- 해결됨[코드캠프] 훈훈한 Javascript
Uncaught TypeError: Cannot set properties of null (setting 'textContent')
let i = 0; for( let tag of documentArr) { document.getElementById(tag).textContent= remainingObj[timeKeys[i]] i++; } }; 강사님과 똑같이 코딩 중인데 저기 remainingObj[timeKeys[i]] 부분에 제목 같이 에러가 떴다고 나오고 강사님처럼 작동하지 않습니다 ㅜㅜ 뭐가 문제인지 모르겠어요
- 해결됨[코드캠프] 훈훈한 Javascript
openweather api 2.5 관련 질문드립니다
안녕하세요 수업 잘따라 가고있었습니다만2.5 버전 사용시에 계속 400 에러가 떠서 질문드립니다.질문글들을 저보다 빨리 수강을 하신분들은 잘되시는것같은데요.저는 계정을 생성한지 이틀을 기다려도 계속 400 에러가떠서 구글링을 좀해보니 더이상 새로 생성된 계정에는 2.5버전 api 키를 주지않는것같더라구요.3.0버전은 구독제이기때문에 구독하지않은 계정에서는 작동 하지않구요 ㅠ마지막 강의만 남았는데 여기서 진행이 막히니 슬프네요 ㅠ 혹시 대안방안 같은건 있을까요?
- 해결됨[코드캠프] 훈훈한 Javascript
openweather 401에러
다른 분이 질문글에 공유해주신 대로 openweather사이트에 나와있는 코드(2.5버젼)를 입력했는데, 계속 오류가 뜹니다.가입한지 얼마 안 됐으면 몇 시간 지난 후에 api 키를 사용할 수 있다고 해서 기다렸는데도 계속 같은 오류가 뜨네요..혹시 왜 이럴까요..?
- 해결됨[코드캠프] 훈훈한 Javascript
createTodo함수 안에 매개변수
createTodo 함수 안에 매개변수인 storageData를 넣어줬는데keyCodeCheck 함수 안에 createTodo함수를 넣어줄 때는 전달인자를 안 넣어줘도 되는건지 알고 싶습니다.매개변수가 정의되면 그 함수를 호출할 때 전달인자를 넣어줘야하는게 아닌가요?const createTodo = function (storageData) { let todoContents = todoInput.value; if (storageData) { todoContents = storageData.contents; } const newLi = document.createElement("li"); //괄호 안에는 생성할 태그 이름 const newSpan = document.createElement("span"); const newBtn = document.createElement("button"); newBtn.addEventListener("click", () => { newLi.classList.toggle("complete"); //새로 생성된 li에 새로운 클래스 속성 추가해줌 saveItemsFn(); }); newLi.addEventListener("dblclick", () => { newLi.remove(); }); newSpan.textContent = todoContents; newLi.appendChild(newBtn); newLi.appendChild(newSpan); todoList.appendChild(newLi); todoInput.value = ""; saveItemsFn(); }; const KeyCodeCheck = function () { if (window.event.keyCode === 13 && todoInput.value != "") { createTodo(); } };