176만명의 커뮤니티!! 함께 토론해봐요.
해결됨
DOM에서 픽셀까지, 브라우저 렌더링과 CRP 완전 정복 - [DOM 완전 정복 Part 3]
Composition(합성)단계에서는 여러 Layer를 가지고 하나의 화면에 합성시킵니다. 그런데... 그 여러개의 Layer들은 누가 만드는건가요? Layout > Painting > Composition 단계에서 갑자기 여러개의 Layer가 나타나니까 혼란스럽네요. 요약하면... Layer 여러개는 어떤 단계에서 생성되는건지? 혹시, 렌더트리 여러개가 Layer 여러개인건지?
해결됨
한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지
https://one-go-js.hyobb.com/ 위 링크 접속했는데 404 에러뜨고 있어 확인이 불가합니다 ㅠ
미해결
한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지
선생님 공유해주신 핸드북에 링크가 몇개 잘못되었어요 8.호이스팅 , 17. spread와 rest 두개가 에러가 나네요 나오지 않습니다. ㅠㅠㅠ
해결됨
이벤트부터 SPA까지, 상호작용 웹의 필수 엔진 - [DOM 완전 정복 Part 2]
안녕하세요? 강의를 듣다가 궁금한 것이 있어서 글을 남깁니다. 섹션 5에서 stopPropagation() 설명이 나올때 상위로 전파 차단이 라고 설명을 주셨는데, 강의를 모두 듣고 보면 상위로 전파 차단 뿐만이 아니라 즉 캡쳐링 뿐만 아니라 버블링도 차단 해주는 걸로 이해가 되고 있습니다. 혹시 상위로 전파 차단이란 것이 캡쳐링이 아닌 다른 의미로 쓰인건지 궁금합니다. 상위로 전파 차단이 혹사 다른 의미로 쓰였다면 그 의미에 대해서 알 수 있을까요?
해결됨
DOM에서 픽셀까지, 브라우저 렌더링과 CRP 완전 정복 - [DOM 완전 정복 Part 3]
안녕하세요? 수업을 듣다 질문이 있어서 남기게 됐습니다! 브라우저가 렌더링 과정이 DOM & CSSOM -> Render Tree -> layout 단계 -> Paint -> Compositing 단계 순서로 이해하고 있습니다. 이번 수업에서는 <script src="url"></script>를 발견하면 DOM 파싱을 멈추고 script 파일을 다운 후에 script가 먼저 실행한 다음 DOM을 다시 파싱 하는 걸로 이해했습니다. 여기서 궁금한게 생겼는데요. <body> 끝에 script 태그가 있고, script 코드 내용에서 DOM에 접근해서 한 요소의 widht, height, background를 변경하는 코드가 있어 먼저 실행 되었다면 브라우저 렌더링 어느 부분에 영향을 미치는지 궁금합니다. 제가 생각하기에는 script가 먼저 실행되고 나머지 파싱이 되는거라는 수업 내용에 따르면 DOM & CSSOM에서 적용이 된 후 다음 단계들을 따를 것 같습니다. 이 수업을 듣기 전에는 리플로우, 리페인트 과정이 있을 거라고 생각했으나 리플로우, 리페인트 과정이 없겠다는 생각이 들어 질문하게 되었습니다. 감사합니다.
해결됨
한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지
export default function CityList({ $app, intialState, handleLoadMore }) { this.state = intialState; this.$target = document.createElement("div"); this.$target.className = "city-list"; this.handleLoadMore = handleLoadMore; $app.appendChild(this.$target); this.template = () => { let temp = `<div class="city-items-container">`; if (this.state) { this.state.cities.forEach((elm) => { temp += ` <div class="city-item" id=${elm.id}> <img src=${elm.image}></img> <div class="city-item-info">${elm.city},${elm.country}</div> <div class="city-item-score">❤️${elm.total}</div> </div> `; }); } temp += `</div>`; return temp; }; this.render = () => { this.$target.innerHTML = this.template(); if (!this.state.isEnd) { const $loadMoreBtn = document.createElement("button"); $loadMoreBtn.className = "add-items-btn"; $loadMoreBtn.textContent = "더보기"; this.$target.appendChild($loadMoreBtn); $loadMoreBtn.addEventListener("click", this.handleLoadMore); } }; this.setState = (newState) => { this.state = newState; this.render(); }; this.render(); } 이 코드에서 this . handleLoadMore = handleLoadMore ; 이부분이 왜 필요한지 이해가 되지 않아서 질문드립니다. 콜백 함수를 이벤트 리스너에 등록 해도 되지 않나요? this로 메서드 등록해서 사용하는 이유가 궁금합니다. 추가적으로 바닐라 js 로 spa 구현하는 개념들이 매우 어렵고 복잡하게 느껴지는데 바닐라 js로 spa를 구현해보는 프로젝트를 해보고 프레임워크로 넘어가야 하는것일까요..
미해결
웹 프론트엔드를 위한 자바스크립트 첫걸음
⚠ 질문 작성법 - 몇 섹션의 어떠한 강의에 대한 질문인지 작성해주세요. (ex. 섹션2 조건문에 대한 질문) - 질문은 최대한 구체적으로 작성해주세요. - 비슷한 질문이 올라와있는지 확인해주세요. - 코드가 포함된 질문은 아래와 같이 코드블록을 사용해주세요. console.log("hello world"); 안내사항 - 질문에 대한 답변은 보통 주말, 공휴일을 제외한 평일 오전 시간 에 답변해드립니다. - '질문 해결'은 답변 작성일 기준 1일 이후에 설정됩니다. 추가: 아래 환경 외에도 윈도우 크롬브라우져 환경에서도 폰트관련 css등이 전혀 동작하지 않고 있습니다. 확인 바랍니다. ========================== 섹션7 33.[안내] 프로젝트 코드 주소 에서 소스 다운받고 index.html파일을 Linux firefox브라우져에서 열어보면 제대로 표시되지 않습니다. 브라우져상관 없이 정상 실행 되도록 하려면 어떻게 해야 하나요?
해결됨
한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지
취업준비를 위해 react, next 강의를 듣기전에 프레임워크에 대한 깊은 이해를 위해 바닐라js로 spa + csr방식을 체득하기 위해 이 강의를 듣고 있습니다. spa + ssr방식 또한 react,next에서도 사용한다고 알고 있는데 현재 강의에서 spa + csr방식만 잘 체득하고 프레임워크에 대한 공부를 해도 충분할지 제대로 이해하려면 바닐라 js로 spa + ssr방식도 이해하고 직접 구현 해보면서 체득하고 넘어가야지 프레임워크에 대한 깊은 이해가 가능할지가 궁금합니다..
해결됨
웹 프론트엔드를 위한 자바스크립트 첫걸음
⚠ 질문 작성법 - 몇 섹션의 어떠한 강의에 대한 질문인지 작성해주세요. (ex. 섹션2 조건문에 대한 질문) - 질문은 최대한 구체적으로 작성해주세요. - 비슷한 질문이 올라와있는지 확인해주세요. - 코드가 포함된 질문은 아래와 같이 코드블록을 사용해주세요. console.log("hello world"); 안내사항 - 질문에 대한 답변은 보통 주말, 공휴일을 제외한 평일 오전 시간 에 답변해드립니다. - '질문 해결'은 답변 작성일 기준 1일 이후에 설정됩니다. 섹션4 23 Promise객체 강의에서 12:05시간에 아래와 같은 예제를 설명하는데, const executor = (resolve, reject) => { setTimeout( () => { reject("실패"); }, 3000); }; const promise = new Promise(executor); promise .then((res) => { console.log(res); }) .catch((err) =>{ console.log(err); }); 코드 아래에서 promise.then(...).catch(...); 와 같은 형식으로 사용될 수 있는 이유를 알려주세요. then과 catch는 property라고 했는데, 이와 같이 초기화 하는 내용은 강의에서 못들은것 같고, Promise chaining으로 넘겨짚기에는 각 함수에서 객체를 리턴하지도 않고... 모르겠네요.
해결됨
한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지
안녕하세요. 아래 혼동을 줄수 있는 설명에 대해 문의드립니다. 아래 캡춰 설명에서 a: 다음 b: 이전 이 설명이 오해의 소지가 있어보입니다. 오히려 거꾸로 설명해야 맞는거 같습니다. 이 설명에서 a: 이전 b: 다음 이렇게 옆 설명 멘트를 수정해야 맞는거 같습니다.
해결됨
한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지
크롬 개발자 도구에 있는 Elements 탭이 DOM 트리라고 봐도 되나요?
미해결
React 비기너: 튼튼한 기본 만들기
"html이 어플레이케이션 중심으로 전환되었다"는 뜻이 html5 에서는 이전과는 달리, 단순 줄글 텍스트 데이터 형식으로 콘텐츠를 표현하는 것이 아니라, canvas나 video와 같이 텍스트 형식을 벗어난 엘리먼트들로 콘텐츠를 표현한다는 의미일까요? 그리고 여기서 정확히 "애플리케이션"이 의미하는 바가 무엇인지 궁금합니다. canvas, video와 같은 엘리먼트의 구현체(?)가 DOM에 객체를 추가하기 위해 계산등을 처리해주기에 이들이 "애플리케이션"으로써 분류된걸까요? 그리고 "마크업"이라는 것을 텍스트 형식으로 표시된 의미론적으로 분류된 텍스트라고 이해해도 될까요? 그렇다면 canvas도 마크업으로써 콘텐츠를 표현하는 것이지만, html 이 parse되어 DOM 으로 만들어질때, 즉 메모리에 객체 형태로 올라갈 때 그 형식이 텍스트가 아닌 다른 무언가이기에 "어플리케이션"이라는 표현이 사용되는 것일까요? 그렇다면 XHTML와 그 이전 버전에서는 canvas, video같은 앨리먼트 없이 오로지 텍스트를 표현하는 태그들만 사용되었던건가요? 좋은 강의 늘 감사합니다.
해결됨
웹 프론트엔드를 위한 자바스크립트 첫걸음
선생님 강의에 보면 getElementById로 <div class="bookmark-item-add-btn"> 이 부분 가져오는데, 강의를 여러번 돌려봐도 아이디는 없고 클래스만 설정했는데 어떻게 코드가 강의에선 잘 돌아가는지 모르겠어요 ㅠㅠ 똑같이 따라하려는데 안되네요 ㅠㅠ
해결됨
이벤트부터 SPA까지, 상호작용 웹의 필수 엔진 - [DOM 완전 정복 Part 2]
11강에서는 removeEventListener 함수로 리스너를 명시적으로 제거하지 않는 한 요소가 사라지더라도 메모리에 계속 남아 있다고 설명하셨는데요. 12강에서는 요소를 제거하는 방식으로도 리스너를 제거할 수 있다고 해서 내용이 충돌하는 것 같아요.
해결됨
구조 탐색과 조작의 모든 것 - [DOM 완전 정복 Part 1]
안녕하세요. 좋은 강의 감사합니다! 26. 클래스와 스타일을 다루는 가장 강력한 방법 – classList, style, 그리고 리플로우까지 에서 인라인 스타일로 스타일을 바꾸면 리플로우/리페인트가 자주 발생할 수 있어 성능에도 안 좋을 수 있다고 설명하셨는데요. 예시로 들어주신 코드에서는 어차피 자바스크립트 엔진이 싱글 스레드라 클래스든 인라인 스타일이든 모두 반영된 후에, 리플로우/리페인트가 발생하기 때문에 성능적으로는 유의미한 차이가 없을 것 같은데요. 좀 더 구체적인 설명을 해주실 수 있을까요? ChatGPT 답변도 같이 첨부합니다. https://chatgpt.com/share/69181628-34d0-8007-8e81-02401c649370
해결됨
웹 프론트엔드를 위한 자바스크립트 첫걸음
강의를 완강하고 복습하려고 다시 해봤는데요, 강의내에 있는 unspalsh 의 랜덤이미지가 없어진거 같아서요. 비슷한 기능으로 다른거로 대체할수 있는게 있을까요...???
해결됨
한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지
선생님 이 강의로 자스 입문하려고 하는데요 바닐라 자바스크립트나 그냥 자바스크립트나 똑같은 건가요? 다르다면 바닐라 자바스크립트는 배경지식이 필요한건가요..? 얘부터 해도 될까요
해결됨
DOM에서 픽셀까지, 브라우저 렌더링과 CRP 완전 정복 - [DOM 완전 정복 Part 3]
지금 이 화면에서 뭘로 fps를 알 수 있나요?
해결됨
한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지
const API_URL = "https://animal-api-two.vercel.app/"; const getData = async () => { let res = await fetch(API_URL); try { if (res) { let data = await res.json(); console.log(data); } } catch (err) { console.log(err); } }; getData(); (확대) 다음과 같은 오류가 발생해서 강의 진행이 어렵습니다 이래저래 찾아봤는데 해결방법을 모르겠습니다 ㅜㅜ 답변 부탁드리겠습니다 감사합니다.
해결됨
한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지
코드 관련 질문은 아래와 같이 '코드블럭' 기능을 이용해주세요! + 오류 메세지도 함께 올려주시면 좋아요 🙂 안녕하세요 강의에 따라 그림이 로드 되는 것까지는 성공했지만 이후 handleLoadMore를 넣고 배열이 나오지 않아요... 그리고 handleLoadMore함수가 어떻게 실행까지 이어지는지 알려주세요 예) handleLoadMore가 new CityList의 인수로 지정되고 cityList 함수에 부여되어 00줄 console.log함수로 출력 추가한 코드만 넣었습니다...! 주석 단 부분으로 확인해보니 이렇게 작동됨은 확인했습니다! const cityList = new CityList({ $app, initialState: this.state.cities, handleLoadMore: async () => { const newStartIdx = this.state.startIdx + 40; const newCities = await request(newStartIdx, this.state.region, this.state.sortBy, this.state.searchWord); } }); //console.log(cityList) ⚠ 답변은 평일 오전 10시에 순차적으로 작성해드립니다. ⚠ '질문 해결'은 답변 작성일 기준 1일 이후에 적용됩니다.
