묻고 답해요
131만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨웹 프론트엔드를 위한 자바스크립트 첫걸음
코드샌드박스 환경 설정 부분 질문 있습니다
섹션2 - 자바스크립트 코딩 환경 설정 강의를 들으면서 샌드박스에서 회원가입 후 create 를 눌러 vanilla를 생성했는데, 화면이 이렇게만 뜨는데 어떻게 해야하나요?ㅠㅠ 선생님처럼 파일이나 이런 게 뜨는 게 아니라 계속 저런 화면만 뜨네요
-
해결됨웹 프론트엔드를 위한 자바스크립트 첫걸음
[환경설정] codesandbox 에서 질문이 있습니다.
자바스크립트 코딩 환경 설정 강의 중에서 codesandbox 가입 후 바닐라 선택하여 프로젝트(?) 같은게 만들어지는데, index.htm 파일이 만들어지는데, index.js 파일에서 console.log 테스트 화면이 나와 어떻게 해야 할지 모르겠습니다.
-
해결됨웹 프론트엔드를 위한 자바스크립트 첫걸음
서치 기능에 오류가 생겼어요
콘솔 창엔 Uncaught TypeError: Cannot read property 'addEventListener' of null 오류가 뜨며,enter키를 눌러도 이벤트가 작동하지 않습니다. body태그 밑으로 js링크를 옮겨보아도 콘솔창에 여전히 같은 오류가 나옵니다.
-
미해결Do it! HTML+CSS+자바스크립트 웹 표준의 정석
만약 13:20초에 설명하시는 부분이 안보인다면
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 함수 선언 방식에 대하여
효빈님, 안녕하세요. 강의를 들으면서 궁금한 점이 있어서 질문 드립니다.북마크 아이템 추가하기 강의에서 setBookmarkItem 함수 내에서 deleteBookmarkItem 함수를 선언할 때 애로우펑션을 사용하는 이유가 있을까요? 그냥 함수를 호출하면 안되는건지 궁금해서요..애로우펑션을 사용했을 때의 이점이 어떤건지 간략하게나마 알 수 있을까요? // 예제 코드 bookmarkDelBtn.addEventListener("click",()=>{ deleteBookmarkItem(item.createAt); }); // 궁금한 코드 bookmarkDelBtn.addEventListener("click", deleteBookmarkItem(item.createAt));
-
해결됨웹 프론트엔드를 위한 자바스크립트 첫걸음
getElementsByClassName 리턴값 질문
querySelectorAll은 nodelist를 리턴값으로 받아서 Foreach로 선언해서 해당 dom을 event handling 한다고 배웠는데 getElementsByClassName도 querySelectorAll과 같이nodelist를 리턴 받아 forEach형태로 event handling을 할 수 있는 지 답변 부탁드립니다.
-
해결됨웹 프론트엔드를 위한 자바스크립트 첫걸음
getElementBYId/ClassName과 querySelector의 차이점
요소를 생성하고 추가할때 const parent = document.querySelector("div.today-info");parent.appendChild(seasonElement);querySelector로하면 잘돌아가는데 const parent = document.getElementByClassName("today-info");parent.appendChild(seasonElement);className 으로하면 appendChild에서 에러가 생기는 이유가 궁금합니다. 둘다 className을 반환하는것 아닌가요?
-
해결됨웹 프론트엔드를 위한 자바스크립트 첫걸음
책 출판 예정???
혹시 책 출판 예정일이 언제쯤인지 물어봐도 되나요???미예정인가요?? 아니면 어느 정도 나올 시기가 정해졌나요??
-
미해결DOM 인터랙션
github 좀 알려주세요...
소스코드 링크 알려주세요..같은글2번정도올렸었는데 답글 없으셔서 한번더 올립니다..
-
해결됨[리뉴얼] 코딩자율학습 제로초의 자바스크립트 입문
기능 구현을 위한 최적의 event를 찾는 법이 궁금합니다.
안녕하세요~ 제로초님 다름이 아니라, 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}`; } 보완할 요소가 더 있을 거 같은데 도통 떠오르질 않네요. 배열 구조로 한꺼번에 추가하는 형식으로 트리를 만들어가는 건 어려울 거 같아 질문드려요.
-
해결됨웹 개발자와 정보보안 입문자가 꼭 알아야 할 웹 해킹 & 시큐어 코딩
dom 과 reflected의 차이
1. dom 과 reflected 의 차이가 웹서버 응답값에서의 악성스크립트 유무 차이로 이해를 했습니다. 웹서버가 요청값을 받고 응답을 해줄 때 자바 스크립트로 작성된 dom api를 사용한 url일 경우 악성스크립트가 반영되지 않는게 맞나요? 2. reflected 공격시 url에서도 document.cookie 처럼 dom을 사용한거 아닌가요? 3. dom api를 사용한다는게 dom.php 처럼 자바스크립트만으로 작성된것을 이용한다는건 가요? 4. 3번이 맞다면 자바스크립트로만 작성된 php면 dom-based 기법을 사용할 수 있는 건가요?