22,000원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 해결됨[코드캠프] 훈훈한 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(); } };
- 해결됨[코드캠프] 훈훈한 Javascript
contents : complete : 가 무슨뜻인가요?
constents:complete: 가 무슨 뜻인가요?const todoObj = { contents: todoList.children[i].querySelector("span").textContent, complete: todoList.children[i].classList.contains("complete"), };
- 해결됨[코드캠프] 훈훈한 Javascript
Javascript Exercise 깃허브에 푸쉬
Javascript Exercise 에 나오는 알고리즘 문제들 리드미에 출처 적고 풀어서 깃허브에 올려도 될까요?
- 해결됨[코드캠프] 훈훈한 Javascript
savedWeatherData 조건문
안녕하세요. 마지막 강의까지 잘 듣고 있습니다.강의 중 조건문에서 savedWeatherData 사용하셨는데, 그 전에 변수로 선언해준적이 없어서 에러가 나고 있어요어디부분에 선언을 하면 되는건지 궁금합니다.
- 해결됨[코드캠프] 훈훈한 Javascript
css 연결 오류..?
안녕하세요! link 태그로 css를 연결하면 script코드가 웹에 그대로 출력됩니다이런식으로요.. <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="./style.css"> <script> const dateFormMaker = function () { const inputYear = document.querySelector('#targetYear').value; const inputMonth = document.querySelector('#targetMonth').value; const inputDay = document.querySelector('#targetDay').value; // const dateFormat = `${inputYear}-${inputMonth}-${inputDay}`; const dateFormat = inputYear + '-' + inputMonth + '-' + inputDay // console.log(inputYear, inputMonth, inputDay); return dateFormat; } const counterMaker = function () { const targetDateInput = dateFormMaker(); const today = new Date(); const targetDate = new Date(targetDateInput).setHours(0,0,0,0); const left = (targetDate - today) / 1000; const leftDay = Math.floor(left / 3600 / 24); const leftHour = Math.floor(left / 3600) % 24; const leftMin = Math.floor(left / 60) % 60; const leftSec = Math.floor(left) % 60; console.log(leftDay, leftHour, leftMin, leftSec) }; </script> </head> <body> <h1>D-Day</h1> <div id="D-day-container"> <div class="inner"> <span id="days">0</span> <span>일</span> </div> <div class="inner"> <span id="hours">0</span> <span>시</span> </div> <div class="inner"> <span id="min">0</span> <span>분</span> </div> <div class="inner"> <span id="sec">0</span> <span>초</span> </div> </div> </div> <div id="inputbox"> <input id="targetYear" class="targetInput" />년 <input id="targetMonth" class="targetInput" />월 <input id="targetDay" class="targetInput" />일 </div> <button onclick= "counterMaker()">날짜설정</button> </body> </html>혹시나 바디태그 끝으로 script 태그를 옮겨봤는데도 똑같아요... 왜 그럴까요
- 해결됨[코드캠프] 훈훈한 Javascript
개인 블로그 업로드
강의 잘 듣고있습니다!강의듣고 개인블로그에 정리하고 있는데 공개로 업로드해도 될까요? 수익창출은 하지않고있습니다!
- 해결됨[코드캠프] 훈훈한 Javascript
섹션7-newSpan.textContent = todoContents; 에 관해
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"); saveItemsFn(); }); newLi.addEventListener("dblclick", () => { newLi.remove(); saveItemsFn(); }); if (storageData?.complete) { newLi.classList.add("complete"); } newSpan.textContent = todoContents; newLi.appendChild(newBtn); newLi.appendChild(newSpan); todoList.appendChild(newLi); todoInput.value = ""; saveItemsFn(); };잘 이해가 되지않는 부분이 있어 질문남깁니다!newSpan.textContent = todoContents;이곳에서 todoContents대신 todoInput.value로 할당했을 때 localstorage의 content에 값이 정상적으로 전달되지않고 ""로 빈 값이 저장되는 지 궁금합니다.
- 해결됨[코드캠프] 훈훈한 Javascript
제공해주신 노션 사이트 자료를 개인 노션에 사용해도 되나요?
다른사람에게 공개는 안하고개인적으로 정리해서 공부하려고 하는데 이미지 같은 자료들을 제 노션에 사용해도 되는지 알고 싶습니다!
- 해결됨[코드캠프] 훈훈한 Javascript
동기와 비동기, undefined 질문입니다.
안녕하세요. 섹션 8 데이터 통신에서 동기와 비동기 실습을 하며 모르는 것이 있어 질문드립니다.setTimeout(() => { console.log("setTimeout call") }) const func3 = function() { console.log("func3 call") } const func2 = function() { func3() console.log("func2 call") } const func1 = function() { func2() console.log("func1 call") } func1()이 코드를 실행하였는데 console 창에 setTimeout call 위에 undefined가 뜬게 이해가 안갑니다. 어느 부분을 실행하였을 때 나온 undefined인지 설명 부탁드립니다!
- 해결됨[코드캠프] 훈훈한 Javascript
timer 기준일자를 추가하고싶습니다
인풋에 입력한 값이 dataFormMaker()의 결과로 나온다는것 까진 알겠는데 이리저리 썼다지웠다 수를 써봐도 기준일자로 화면에 표현해내질 못하고있습니다...ㅠㅠ 알려주실수 있나요..? 타이머 아래에 기준일자를 나오게 하고싶어서 html은 만들어놓았습니다ㅠ
- 해결됨[코드캠프] 훈훈한 Javascript
API....400 (Bad Request) 오류...
해결방법을 모두 찾아서 적용하고 수정해봐도..안됩니다 ㅠㅠㅠ400 (Bad Request) 에러가 계속 떠요...저와 같은 에러 뜨시는분들 없으실까요.....ㅠㅠ
- 해결됨[코드캠프] 훈훈한 Javascript
localstorage 질문입니다
localStorage에 저장을 하려면 숫자, 문자로 변환해야 저장할 수 있습니다. 하지만, 배열은 string함수를 써서 문자로 변환할 수가 없어서 JSON 함수를 활용하여 문자로 저장한다고 하셨는데,왜 배열은 문자로 변환할 수 없나요? 구글링 해보니깐 tostring은 문자를 변환할 수 있다고 하고... 이해가 잘 안갑니다.
- 해결됨[코드캠프] 훈훈한 Javascript
원시 타입 변수에 값을 재할당 해주었을때,
원래 "abc" 라는 문자열이 들어있던 box라는 변수에 "def"를 재할당 해주면101번 주소를 가진 메모리에는 계속 "abc"가 살아있는건가요?그렇다면 변수에 재할당을 여러번 하게되면 메모리가 낭비되는게 아닌가 해서 궁금해서요.
- 해결됨[코드캠프] 훈훈한 Javascript
함수 관련 질문 입니다.
<!DOCTYPE html> <html lang="ko"> <head> <title>D-day</title> <script> const dateFormMaker = function () { const inputYear = document.querySelector('#target-year-input').value; const inputMonth = document.querySelector('#target-month-input').value; 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 targetDateInput = dateFormMaker(); //console.log(targetDateInput); const nowDate = new Date(); console.log('nowDate!!!!', nowDate); const targetDate = new Date(targetDateInput).setHours(0, 0, 0, 0); const remaining = (targetDate - nowDate) / 1000; 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()" class="btn">버튼</button> </body> </html> '함수의 리턴' 강의 영상에서위와 같은 코드로 디데이 카운터를 만들었는데요.제 생각에는 dateFormMaker 함수안에 있는 내용들을 굳이 왜 함수로 묶어야 할까 싶어서<!DOCTYPE html> <html lang="ko"> <head> <title>D-day</title> <script> const inputYear = document.querySelector('#target-year-input').value; const inputMonth = document.querySelector('#target-month-input').value; const inputDate = document.querySelector('#target-date-input').value; const dateFormat = `${inputYear}-${inputMonth}-${inputDate}`; const counterMaker = function () { const nowDate = new Date(); console.log('nowDate!!!!', nowDate); const targetDate = new Date(dateFormat).setHours(0, 0, 0, 0); const remaining = (targetDate - nowDate) / 1000; 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()" class="btn">버튼</button> </body> </html>이렇게 만들고 실행시켜보니콘솔 창에 아래와 같이 뜨더라구요함수안에 넣지 않았으니까 index 파일이 실행되자마자const inputYear = document.querySelector('#target-year-input').value; const inputMonth = document.querySelector('#target-month-input').value; const inputDate = document.querySelector('#target-date-input').value;위 부분이 실행이 된 것이고, 그래서 input 창에 아직 내용을 입력을 하지 않았으니 value 값을 읽을 수 없다고 뜨나보다 라고 생각하고input 창에 값을 입력하고 버튼을 눌러보니counterMaker is not defined이런 오류가 뜨는데, counterMaker 함수는 정의되어 있는데 왜 정의되어 있지 않다고 뜨는 것인지 궁금합니다.
- 해결됨[코드캠프] 훈훈한 Javascript
함수의 리턴에 대해서 질문드립니다.
함수 안에 return을 써주면 함수가 종료된다고 하셨는데,그럼 반대로 return을 써주지 않은 함수는 종료가 되지 않고 계속 실행 중인 건가요?(캡처에 있는 dateFormMaker, counterMaker 함수같이 return이 없을 경우에요)함수가 종료된 것과 종료되지 않은 것의 차이가 뭔지 잘 모르겠어요.
- 해결됨[코드캠프] 훈훈한 Javascript
Object.keys 에 대해서 질문 드립니다.
Object.keys(userData);console.log(Object.keys(userData));두개의 결과가 같은 이유가 뭘까요??굳이 console.log 로 찍지 않아도 결과가 찍히네요.
- 해결됨[코드캠프] 훈훈한 Javascript
비동기 관련 질문있습니다
안녕하세요! 강의에서 callback queue에 쌓인 비동기 함수들은 call stack이 비워져 있다면, 그 때 call stack으로 하나씩 옮겨진다고 하셨는데 궁금한 점이 생겨 질문드립니다. 만약에 setTimeout함수로 정해준 지연시간이 지났음에도 call stack에 있는 함수들이 모두 실행되고 call stack이 비워져야 setTimeout함수가 실행될 수 있는 것인지, 아니면 call stack이 비워져 있지 않더라도 setTimeout함수로 정해준 지연시간이 지나면 call stack으로 옮겨져서 실행될 수 있는 것인지 궁금합니다!
- 해결됨[코드캠프] 훈훈한 Javascript
메모리 관련하여 질문 드립니다.
안녕하세요 강의 듣고 있는 학생입니다.제가 메모리에 관하여 블로그도 보면서 정리하였는데, 잘 이해했는지 궁금하여 여쭤봅니다.이런 식으로 이해하면 잘 이해한 건가요?
- 해결됨[코드캠프] 훈훈한 Javascript
setInterval 질문입니다.
안녕하세요. setInterval강의에서 setInterval(counerMaker, 1000)을 하면 1초 뒤에 실행이 되기 때문에 0일 0시간 0분 0초가 1초 실행되고 그다음에 제대로 실행이 되는데,이것을 고치기 위해서 counterMaker함수를 자체적으로 한번 실행한다.. 하셨는데 왜 자체적으로 한번 실행해야 고쳐지는지 설명해주실 수 있을까요?
- 해결됨[코드캠프] 훈훈한 Javascript
openWeatherMap API 에러발생 시 대처방법 공유
섹션8.데이터통신 > openWeatherMap API 과정에서 강사님께 말씀해주신 방법으로 진행 시, console창에 데이터 접속이 안된다고 계속 노출이 됩니다.해당 문구를 살펴보니, 예전 2.5버전에는 무료사용이었던 것 같은데, 현재 3.0버전에서는 유료화가 된 것 같더라구요. 그래서 아마 강사님께서도 API 연동 URL에서 3.0을 2.5로 바꾸라고 말씀하신 것 같구요. 그런데도 이게 계속 접속이 안된다고 나오길래 해당 사이트에서 찾아보았습니다.아래 URL에 가보면, 3.0과 2.5버전이 접속하는 URL이 살짝 다르다는걸 확인했습니다.https://openweathermap.org/current#geo<상기 이미지가 3.0 버전의 API 연동 URL><상기 이미지가 2.5 버전의 API 연동 URL>상기 내용확인 후 강사님께서 말씀해주신 내용을 기반으로 수정해보니 정상적으로 작동하였습니다. 혹시나 하는 마음에 공유해봅니다. 항상 강의 열강중입니다! 감사합니다. :D