안녕하세요 2-6 강의부터 4개- 5개 강의 정도 화면이 검정으로 나오는데저만그런것인지 확인 가능할까요??

(a,b)가 어떤걸 의미하는지 모르겠고-1, 1, 0을 반환했을때 배열내부적으로 어떻게 처리되는지도모르겠습니다. let colors = ["green", "blue", "purple"]; const compare = (a, b) => { if (a > b) return -1; else if (a < b) return 1; else return 0; }; colors.sort(compare); console.log(colors);

 const start2 = async () => { try { let result = await Promise.all([workA(), workB(), workC()]); result.forEach((res) => console.log(res)); } catch { console.log(err); } }; 해당 코드에서 반환된 프로미스 객체는 배열의 형태로 result 변수에 저장되는 건가요?

context를 썻을때는 data length로 체크하면 최대 5개가 넘지 않게 더이상 오픈되지 않거나 가장 밑에 스낵바를 닫아 버린다던가 쉽게 구현을 가능할 것 같은데 portal를 쓰면 컨트롤이 가능한가? 궁금합니다

this.template 메소드를 innerHTML에 할당하는 방식이 아닌 createElement와 appendChild 등으로 해결해도 괜찮나요? 이렇게 하면 변경되지 않은 부분만 체크하여 필요한 부분만 DOM을 다시 추가하는 방식을 사용할 수 있을 것 같은데

App 컴포넌트에서 모든 컴포넌트들의 상태가 관리되는 건가요? 컴포넌트들은 각각의 상태를 관리하고 가 상태를 업데이트하면서 상태관리를 하는게 아닌가요? 이건 모든 상태를 App 컴포넌트에서 관리하고 하위 컴포넌트들은 자신의 상태가 될 데이터를 내려받아서 그냥 render만 해주는 느낌이 들어서요 이렇게 되면 App 컴포넌트에서 관리해야 할 상태들이 너무 많아지고 App 컴포넌트가 복잡해지는 거 아닌가요..? 각 컴포넌트에서 독립적으로 본인의 상태를 관리하고 필요에 따라 상위 컴포넌트에서 상태를 전달받아 render 한다..? 이렇게 이해했는데.. 컴포넌트 단위로 개발하는 spa 개발 개념이 좀 부족한건지 이해가 잘 안되네요

$tabBar.forEach((elm) => { elm.addEventListener('click', () => { onClick(elm.id); }); }); 이 onClick 함수 this.onClick으로 호출하지 않았는데,이러면 TabBar 인스턴스의 onClick 메소드는 쓰지 않는 거 아닌가요? 

안녕하세요 선생님 제가 설정이 뭔가 틀어졌는지consol.log하면 선생님처럼 console창이 안뜨고이렇게 뜨는데 어떻게 해결할 수 있는 방법이 없을까요? 선생님처럼 콘솔창이 떴으면 좋겠습니다.

빈페이지로 나오는데 왜그런걸까요?https://github.com/fe-ui-study/ui-study

[셀렉트박스 (3/5) headless #2 hook 적용] 부분에서 getTriggerProps/getListProps 처럼 각 컴포넌트가 필요한 것들을 useCallback으로 감싸고 함수형태로 제공해주셨는데요, 아래처럼 useMemo를 이용해서 객체에 값을 담아서 전달해주는 방식은 다른 걸까요??const getTriggerProps = useCallback( () => ({ selectedItem: items[selectedIndex], toggle, }), [selectedIndex, items, toggle] ); const TriggerpropsValue = useMemo(() => { return { selectedItem: items[selectedIndex], toggle, }; }, [items, selectedIndex, toggle]);

import { useEffect, useRef } from "react" const mutationObserverOption: MutationObserverInit = { childList: true, subtree: true } const ModalRoot = () => { const ref = useRef<HTMLDivElement>(null); useEffect(() => { let observer: MutationObserver if (ref.current) { observer = new MutationObserver(() => { const size = ref.current?.childNodes.length || 0 document.body.classList.toggle('no-scroll', size > 0) }) observer.observe(ref.current, mutationObserverOption) } return () => { observer.disconnect() } }, []) return (<div id="modalRoot" ref={ref}/>) } export default ModalRoot; 수업시간에 구현 되었던 코드가 어떤 순서로 동작하는지 콘솔로 확인해봤습니다. 제가 확인해 봤을 땐 처음 페이지가 렌더링 될 때 1. ModalRoot 컴포넌트가 실행 2. modalRoot div가 생성 3. useEffect가 실행4. useEffect의 Clean Up 작동까지는 예상대로 진행되었습니다. 하지만 이후에 이해가 안되는 부분이 있습니다.질문 1) 이후 useEffect가 다시 실행되는데, 의존성도 없는데 어떻게 다시 실행되는지 궁금합니다.질문 2) 영상에서 모달 버튼을 누르면 useEffect의 조건문에서 size를 콘솔로 확인하셨는데, ModalRoot 컴포넌트가 재실행되지 않고 어떻게 size를 확인할 수 있는지 궁금합니다.

해당 강의에서 컴포넌트를 만들고 상태관리를 할때 모든 코드에 this가 왜 붙는건가요??저렇게 만든것도 그냥 객체인거 같은데 let state ={} 로안 하고 let도 없고 변수도 없는데 this로 state를 참조되는것도 궁금합니다.모든 코드에 this가 붙는 이유일반함수에 this한거니 그냥 window 객체에 state 변수가 생긴건지 궁금합니다.2가 아니면 그냥 state라는 걸 자바스크립트가 제공해서 참조해서 사용하는것인지this.state = {};

강의 커리큘럼을 보면 "강의자료 (완성본)"과 "강의자료 (보일러플레이트)" 다운로드를 구분해 두셨는데, 다운로드는 "강의자료 (완성본)"만 만 받게 되어 있는거 같습니다.혹시 보일러플레이트 강의자료는 아직 준비가 되지 않은것일까요?완성본 README.md에 있는 `git clone https://github.com/fe-ui-study/ui-study.git`도 Repository를 찾지 못하고 있습니다.

코드 관련 질문은 아래와 같이 '코드블럭' 기능을 이용해주세요!+ 오류 메세지도 함께 올려주시면 좋아요 🙂console.log('hello'); 강의에서 보면 name을 선언한 후 typeof에서 name에줄이 쳐져있는데 혹시 왜 그런건지 알 수 있나요?제 컴퓨터에서도 사용하여 봤는데 name은 사용되지 않습니다. 라고 나옵니다

history 연습예제에서 뒤로가기 앞으로가기 버튼 눌렀을때는 화면에 제대로 표시되지 않아서요강사님 소스를 여러번 확인해봤는데,,,,뭐가 혹시 틀린걸까요? 

저는 create이라는 부분이 없고 vanilla template을 찾을 수가 없습니다.

chrome://extensions 위에서 오른쪽 상단의 개발자모드를 켜고 맨위에 "압축해제된 확장된 프로그램을 로드합니다." 클릭해서 개발한 소스가 있는 newtab폴더를 선택하면  오류 : 매니페스트 파일이 없거나 읽을 수 없습니다매니페스트를 로드할 수 없습니다.뜨면서 안되더라구요, 혹시나 외장하드에 파일이 있으면 안되나 싶어서 컴퓨터의 c나 d드라이브에 옮겨서 동일하게 에러메시지가 뜹니다.예전에 강의내용대로 해서 잘 되었었는데 복습하면서 다시 해보니 이렇게 에러가 나서요혹시 뭔 잘못한걸까요? 아님 기능이 없어진건지....ㅋㅋ

안녕하세요, 수강 중에 css transition 파트에서 궁금증이 생겨 질문 드립니다. max-height 속성을 이용해서 애니메이션을 적용해주셨는데, 아래 방식처럼 height를 0, auto로 애니메이션 주는 것과 차이가 있을까요? .item3 { overflow: hidden; .description { padding: 0 15px; border-bottom-width: 0; // max-height: 0; height: 0; transition: ease 0.3s; } &.current .description { padding: 15px; border-bottom-width: 1px; // max-height: 300px; height: auto; } }

안녕하세요 강의를 들으면서 정리하는 데 블로그에 게시글로 같이 올려도 가능한지 문의드립니다  예를 들어 아코디언을 듣고 코드와 주석 및 정리한 내용들을 바탕으로 출처와 함께 글을 올리는 것입니다  따로 강의 코드에 대한 github이 없는 것 같아 여쭤봅니다 !

안녕하세요 재남님 강의 너무 잘듣고 있습니다이번 강의 듣고 생각이 드는게 저는 지금까지 모달을 만들때 각각의 모달을 완성본으로 만들고 모달을 부르는 트리거버튼이나 그,런것에 상태를 주고 상태의 변경에따라 그 아래에 그리는 방식으로 모달을 구현했습니다이번강의도 보면 비슷하긴한데 모달을 만드는곳에서 모든것을 만드는것이 아니라 모달이라는(컴파운드 패턴..? 사실 이건 처음봐서 혼란스럽네요...ㅎㅎ)컴포넌트에서 기본 적인 css와 칠드런등을 만들어놓고 모달에서는 이것들을 가져와서 완성본 모달을 만드는것으로 이해를 했습니다 제가 궁금한것은실무에서는 보통 이렇게 만드는지 궁금합니다이렇게 만드는것의 장점이 있을까요?(찾아보니 재사용성이 좋다고 하는데 이부분이 크게 와닿지가 않네요..)