묻고 답해요
141만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨[React / VanillaJS] UI 요소 직접 만들기 Part 1
css 만으로 아코디언 애니메이션을 적용할 경우, 다른 libary들은 코드로 그부분들을 해결해주고 있는걸까요?
애니메이션 관련해서 깊이 고민해보지 못한 부분(디테일)들을 발견할 수 있어서 의미있는 강의 였습니다. 강의에서 "item3" classname 을 적용하는 과정 중 얻은 인사이트는 컨텐츠 사이즈에 따라 height가 변경되는 애니메이션을 적용할 경우, 닫히는 아코디언 요소와 열리는 아코디언 요소가 이상하게 동작한다는 내용을 다루셨는데 저도 이상하는 느낌은 들었지만 정확한 원인을 모르겠네요.transition-duration:0.3s 은 같기 때문에 같이 닫히는게 동시에 닫히고 있는게 맞는데 왜 이상하게 느껴질까요?"ease" 가 그런 느낌을 주는 원인이 아닐까하고 그냥 넘어갈까 싶은데 혹시나 모르는 부분이 있을까 질문 남겨봅니다.:)
-
해결됨[React / VanillaJS] UI 요소 직접 만들기 Part 1
보통 GNB가 있는 프로젝트에 이렇게 심혈을 기울여 Routes를 따로 만드나요?
GNB를 구성하는 다양한 방법이 있을 것 같은데혹시 널리알려진 정형화 된 방법이 있을까요? 혹은 관련 지식이 프로젝트에서 알려주신 방법이 마음에 들어서 한번 적용해보려고 합니다. 🙂
-
해결됨[React / VanillaJS] UI 요소 직접 만들기 Part 1
강의 자료 다운받았는데 06_lazyLoading/4_r 폴더가 없어요
안녕하세요! 알림 보고 바로 수강신청했습니다 ㅎㅎ그런데 강의 자료를 열어보니 06_lazyLoading/4_r 이 쓰여지고는 있는데 폴더가 없네요... const LazyImage = dynamic(() => import('@/components/06_lazyLoading/4_r/lazyImage'), { ssr: false }) 실행도 못해보고 터져버린 앱... ㅠㅠ
-
해결됨웹 프론트엔드를 위한 자바스크립트 첫걸음
코딩환경설정 강의 중에서 질문입니다
코딩환경설정 강의에서 크롬-> ctrl+shift + I 누르면 저 화면이 나오는데 조금 다릅니다... 강의 화면이랑 똑같은 화면 모습으로 같이 수업을 참여하고 싶은데 어떻게 설명해야 되나요 ?
-
해결됨웹 프론트엔드를 위한 자바스크립트 첫걸음
codesandbox 설정
🚨질문 작성법 및 안내사항질문 작성법- 몇 섹션의 어떠한 강의에 대한 질문인지 작성해주세요. (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 에서 질문이 있습니다.
자바스크립트 코딩 환경 설정 강의 중에서 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번정도올렸었는데 답글 없으셔서 한번더 올립니다..