176만명의 커뮤니티!! 함께 토론해봐요.
해결됨
코어 프런트엔드 UI - Part 1
안녕하세요! 알림 보고 바로 수강신청했습니다 ㅎㅎ 그런데 강의 자료를 열어보니 06_lazyLoading/4_r 이 쓰여지고는 있는데 폴더가 없네요... const LazyImage = dynamic(() => import('@/components/06_lazyLoading/4_r/lazyImage'), { ssr: false }) 실행도 못해보고 터져버린 앱... ㅠㅠ
해결됨
웹 프론트엔드를 위한 자바스크립트 첫걸음
코딩환경설정 강의에서 크롬-> ctrl+shift + I 누르면 저 화면이 나오는데 조금 다릅니다... 강의 화면이랑 똑같은 화면 모습으로 같이 수업을 참여하고 싶은데 어떻게 설명해야 되나요 ?
해결됨
웹 프론트엔드를 위한 자바스크립트 첫걸음
🚨질문 작성법 및 안내사항 질문 작성법 - 몇 섹션의 어떠한 강의에 대한 질문인지 작성해주세요. (ex. 섹션2 조건문에 대한 질문) - 질문은 최대한 구체적으로 작성해주세요. - 비슷한 질문이 올라와있는지 확인해주세요. - 코드가 포함된 질문은 아래와 같이 코드블록을 사용해주세요. console.log("hello world"); 안내사항 - 질문에 대한 답변은 보통 주말, 공휴일을 제외한 평일 오전 시간 에 답변해드립니다. 안녕하세요. Create Sandbox에서 바닐라를 선택하라고 하셨는데요!! 열어보니 바닐라가 없는데 어떡하면 될까요? ? 혹시 몰라 JavaScript로 만들어서 강의 내용대로 점 3개 Preferrence 통해서 설정하려고 하니 점 3개 칸도 안보이네요,,
해결됨
웹 프론트엔드를 위한 자바스크립트 첫걸음
안녕하세요! 강의 너무 잘 보고 있습니다! 그런데 확장 프로그램으로 적용해 보면서 궁금한 점이 생겼는데 그러면 프로젝트를 이렇게 만든 상태에서 적용을 하게 되고 만약에 실제로 쓴다면 검색어가 제가 지정한 링크가 아니라 실제 구글처럼 검색하려는 것을 검색하고 그 검색한 사이트가 보이게 만드는게 가능할까요?
해결됨
웹 프론트엔드를 위한 자바스크립트 첫걸음
🚨질문 작성법 및 안내사항 질문 작성법 - 몇 섹션의 어떠한 강의에 대한 질문인지 작성해주세요. (ex. 섹션2 조건문에 대한 질문) - 질문은 최대한 구체적으로 작성해주세요. - 비슷한 질문이 올라와있는지 확인해주세요. - 코드가 포함된 질문은 아래와 같이 코드블록을 사용해주세요. console.log("hello world"); 안내사항 - 질문에 대한 답변은 보통 주말, 공휴일을 제외한 평일 오전 시간 에 답변해드립니다. 디지털 시계 개발하기에서 5:41초 강의에서 parseInt(number)는 명시적 형변환 아닌가요? 묵시적 형변환이라고 강의에서 말씀하시네요
해결됨
웹 프론트엔드를 위한 자바스크립트 첫걸음
🚨질문 작성법 및 안내사항 질문 작성법 - 몇 섹션의 어떠한 강의에 대한 질문인지 작성해주세요. (ex. 섹션2 조건문에 대한 질문) - 질문은 최대한 구체적으로 작성해주세요. - 비슷한 질문이 올라와있는지 확인해주세요. - 코드가 포함된 질문은 아래와 같이 코드블록을 사용해주세요. console.log("hello world"); 안내사항 - 질문에 대한 답변은 보통 주말, 공휴일을 제외한 평일 오전 시간 에 답변해드립니다. 강의에서 종료 라는 문장을 정말 이 코드가 종료됐을 때 출력하고싶다면, 우리는 콜백함수를 이용해 해당 코드를 인수로 넘겨주어야합니다. 이 부분이 이해가 되지 않습니다. 콜백함수로 왜 넘겨줘야하는지 헷갈립니다. <이렇게는 안되나요> const work = () => { 2 setTimeout(() => { 3 console.log("3초만 기다리세요"); 4 console.log("종료"); 5 }, 3000); 6}; 7 const work = (callback) => { 2 setTimeout(() => { 3 console.log("3초만 기다리세요"); 4 callback(); 5 }, 3000); 6}; 7 8 work(() => { 9 console.log("종료"); 10}); setTimeout(() => { 2 console.log("3초만 기다리세요"); 3}, 3000); 4 5console.log("종료");
미해결
웹 프론트엔드를 위한 자바스크립트 첫걸음
섹션2 - 자바스크립트 코딩 환경 설정 강의를 들으면서 샌드박스에서 회원가입 후 create 를 눌러 vanilla를 생성했는데, 화면이 이렇게만 뜨는데 어떻게 해야하나요?ㅠㅠ 선생님처럼 파일이나 이런 게 뜨는 게 아니라 계속 저런 화면만 뜨네요
해결됨
웹 프론트엔드를 위한 자바스크립트 첫걸음
자바스크립트 코딩 환경 설정 강의 중에서 codesandbox 가입 후 바닐라 선택하여 프로젝트(?) 같은게 만들어지는데, index.htm 파일이 만들어지는데, index.js 파일에서 console.log 테스트 화면이 나와 어떻게 해야 할지 모르겠습니다.
해결됨
웹 프론트엔드를 위한 자바스크립트 첫걸음
콘솔 창엔 Uncaught TypeError: Cannot read property 'addEventListener' of null 오류가 뜨며, enter키를 눌러도 이벤트가 작동하지 않습니다. body태그 밑으로 js링크를 옮겨보아도 콘솔창에 여전히 같은 오류가 나옵니다.
미해결
Do it! HTML+CSS+자바스크립트 웹 표준의 정석
view-apperance-breadcrumbs를 누르시면 표시됩니다.
미해결
Do it! HTML+CSS+자바스크립트 웹 표준의 정석
예제 파일 링크를 못찾아서 출판사 사이트에서 직접 찾았네요. 깃헙 링크: https://github.com/Eun-Sook-Kim/doit_html_css_javascript
해결됨
웹 프론트엔드를 위한 자바스크립트 첫걸음
안녕하세요! 강의 잘 보고있습니다! 에러가 생겨도 찾아서 다 수정 가능했는데 이번 addEventListener 오류는 아무리 찾아봐도 왜 오류가 생기는지 이유를 모르겠어서 질문글 작성해요 ㅠㅠ 제가 어디서 잘못했을까요.. <div class="bookmark-item-add-btn">+ 북마크 추가</div> <div class="bookmark-item-input-form" id="bookmark-item-input-form"> <div class="bookmark-input"> <div class="new-bookmark-name"> <div class="label">이름</div> <input id="new-bookmark-name-input" /> </div> <div class="new-bookmark-url"> <div class="label">주소</div> <input id="new-bookmark-url-input" /> </div> </div> <div class="bookmark-item-input-btn"> <div class="cancel-btn" id="cancel-btn">취소</div> <div class="add-btn" id="add-btn">추가</div> </div> </div> </div> <script src="./js/clock.js"></script> <script src="./js/search.js"></script> <script src="./js/quote.js"></script> <script src="./js/bookmark-toggle.js"></script> <script src="./js/bookmark.js"></script> </body> </html> 아래는 bookmark.js파일이에요 const newBookmarkForm = document.getElementById("bookmark-item-input-form"); let bookmarkList = []; if (localStorage.getItem("bookmarkList")) { bookmarkList = JSON.parse(localStorage.getItem("bookmarkList")); } else { localStorage.setItem("bookmarkList", JSON.stringify(bookmarkList)); } let isAddBtnClick = false; newBookmarkForm.style.display = "none"; const newBookmarkToggle = () => { isAddBtnClick = !isAddBtnClick; isAddBtnClick ? (newBookmarkForm.style.display = "block") : (newBookmarkForm.style.display = "none"); }; document .getElementById("bookmark-item-add-btn") .addEventListener("click", newBookmarkToggle);
해결됨
웹 프론트엔드를 위한 자바스크립트 첫걸음
아래 부분 전까지는 잘 되었는데요, 거의 마지막에서 막히네요.... [북마크 추가하기] 강의에서 처음에 한 "+북마크추가"버튼을 클릭하면 아래 입력하는 부분이 나오고 다시 클릭하면 안보이게 하는 처음 코딩부분에서 동작이 되지 않고 아래처럼 에러가 뜹니다. 처음에는 안보여야 하는데 보이기도 하구요, 소스는 여러번 확인했는데...혹시 뭐를 틀렸을지요??? const newBookmarkForm = document.getElementById("bookmark-item-input-form"); const addBookmarkBtn = document.getElementById("bookmark-item-add-btn"); // 01-한번 추가한 북마크는 재접속할때 추가한 상태여야 하기 때문에 로컬스토리지에 저장해야 함 let bookmarkList = []; if(localStorage.getItem("bookmarkList")){ bookmarkList = JSON.parse(localStorage.getItem("bookmarkList")); }else{ localStorage.setItem("bookmarkList",JSON.stringify(bookmarkList)); } let isAddBtnClick = false; newBookmarkForm.style.display = "none"; const newBookmarkToggle = () => { isAddBtnClick = !isAddBtnClick; isAddBtnClick ? (newBookmarkForm.style.display = "block") : (newBookmarkForm.style.display = "none"); } addBookmarkBtn.addEventListener("click", newBookmarkToggle);
해결됨
웹 프론트엔드를 위한 자바스크립트 첫걸음
효빈님, 안녕하세요. 강의를 들으면서 궁금한 점이 있어서 질문 드립니다. 북마크 아이템 추가하기 강의에서 setBookmarkItem 함수 내에서 deleteBookmarkItem 함수를 선언할 때 애로우펑션을 사용하는 이유가 있을까요? 그냥 함수를 호출하면 안되는건지 궁금해서요.. 애로우펑션을 사용했을 때의 이점이 어떤건지 간략하게나마 알 수 있을까요? // 예제 코드 bookmarkDelBtn.addEventListener("click",()=>{ deleteBookmarkItem(item.createAt); }); // 궁금한 코드 bookmarkDelBtn.addEventListener("click", deleteBookmarkItem(item.createAt));
해결됨
웹 프론트엔드를 위한 자바스크립트 첫걸음
querySelectorAll은 nodelist를 리턴값으로 받아서 Foreach로 선언해서 해당 dom을 event handling 한다고 배웠는데 getElementsByClassName도 querySelectorAll과 같이nodelist를 리턴 받아 forEach형태로 event handling을 할 수 있는 지 답변 부탁드립니다.
해결됨
웹 프론트엔드를 위한 자바스크립트 첫걸음
요소를 생성하고 추가할때 const parent = document.querySelector("div.today-info"); parent.appendChild(seasonElement); querySelector로하면 잘돌아가는데 const parent = document.getElementByClassName("today-info"); parent.appendChild(seasonElement); className 으로하면 appendChild에서 에러가 생기는 이유가 궁금합니다. 둘다 className을 반환하는것 아닌가요?
해결됨
웹 프론트엔드를 위한 자바스크립트 첫걸음
혹시 책 출판 예정일이 언제쯤인지 물어봐도 되나요??? 미예정인가요?? 아니면 어느 정도 나올 시기가 정해졌나요??
미해결
DOM 인터랙션
소스코드 링크 알려주세요.. 같은글2번정도올렸었는데 답글 없으셔서 한번더 올립니다..
해결됨
[리뉴얼] 코딩자율학습 제로초의 자바스크립트 입문
안녕하세요~ 제로초님 다름이 아니라, DOM에서 event를 선택하는 문제에 관해 질문이 있어서 글을 남기게 됐습니다. click이나 scroll, submit 같이 명확한 이벤트가 아니라면, 특정한 기능을 구현하기 위해 어떤 이벤트를 사용하는게 좋은지 모를 때가 많은데요. 예를 들어, input 태그의 input 이벤트를 사용하면, 유저가 타입하는 값의 변화를 매번 감지할 수 있는데, input 이벤트의 존재를 몰라서, keypress, keyup, keydown 이벤트를 사용해서 꾸역꾸역 그 기능을 구현한 경험이 있습니다. 그러다가 input 이벤트로 너무나 쉽게 원하는 기능이 구현되는 걸 보고 많이 허탈했는데요... 이 일을 계기로 궁금점이 하나 생겼습니다. ------------------------- Q. 어떤 기능들은 여러 이벤트들을 조합해야만 구현할 수 있고, 어떤 기능은 특정 이벤트 하나만으로 모든 문제를 해결할 수있다보니 특정 기능을 구현할 때, 거기에 알맞는 최적의 이벤트를 알아내는 방법이 궁금합니다. 제가 모든 이벤트들을 잘 알고 있다면, 이런 고민을 할 필요가 없겠지만, 이벤트의 종류도 많고, 제가 존재하는 지도 몰랐던 이벤트가 알고보니, 그 이벤트를 사용하면, 일이 너무나 쉽게 해결되는 경우가 있다보니... 제로초님은 이 문제를 어떻게 접근하시는지 궁금합니다. 혼자 어떻게든, 제 고민에 대한 해답을 찾아보려고 했는데, 잘 나오지 않아서, 제로초님께 좋은 가르침 부탁드립니다. 감사합니다.
미해결
자바스크립트 비기너: 튼튼한 기본 만들기
중고급 과정을 듣고 나서 다시 한 번 정리하였습니다. const test = ["<ul>"]; for(var i = 1; i <= 10; i++) { test.push(`<li id=id${i}>id${i}</li>`); } test.push("</ul>"); document.body.innerHTML = test.join(""); 우선 코딩시간에 나와있는 배열 사용의 예제풀이 입니다. 텍스트로 덧붙이는 형태라 DOM 구조를 이해하는게 아닌 듯한 느낌이 들었습니다. 따라서 Tag요소부터 만들어 나가는 형태로 반복문을 진행해보았습니다. const newUl = document.createElement('ul'); document.body.append(newUl); const Ul = document.querySelector('ul'); for(var i = 0; i < 10; i++) { const newLi = document.createElement('li'); Ul.append(newLi); const Li = document.querySelectorAll('li')[i]; Li.id = `id${i+1}`; Li.textContent = `id${i+1}`; } 보완할 요소가 더 있을 거 같은데 도통 떠오르질 않네요. 배열 구조로 한꺼번에 추가하는 형식으로 트리를 만들어가는 건 어려울 거 같아 질문드려요.
