해당 강의에서 컴포넌트를 만들고 상태관리를 할때 모든 코드에 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와 칠드런등을 만들어놓고 모달에서는 이것들을 가져와서 완성본 모달을 만드는것으로 이해를 했습니다 제가 궁금한것은실무에서는 보통 이렇게 만드는지 궁금합니다이렇게 만드는것의 장점이 있을까요?(찾아보니 재사용성이 좋다고 하는데 이부분이 크게 와닿지가 않네요..)

안녕하세요 재남님 강의 너무 잘듣고 있습니다제가 지금 캐러셀 공부하면서 궁금한것이캐러셀 각 이미지에 ref를 다 할당한다슬라이드 이벤트 화살표 클릭시 이동할 인덱스를 계산하고 인덱스를 기준으로 current와 next의 ref를 가져온다그럼 가져온 ref에 각각 애니메이션 클래스네임을 할당한다 애니메이션에 따라 translateX만큼 이동 , 마지막으로 이동한 인덱스 상태변화 이렇게 동작원리를 이해를 하였습니다 그래서 일단 animationend는 없어도 될거 같아서 일단 없애고 코드를 작성하니 화면 전환은 되는데 자연스러운 슬라이드가 아니라 그냥 뚝뚝끊기는 이미지 전환이 되고있습니다.. 제 생각엔 handleAnimationEnd함수는 애니메이션 동작완료후 동작하는것이라고 알고있는데 애니메이션이 동작을 안하는 이유를 모르겠습니다 const moveTo = useCallback( (nextIndex: number, direction?: Direction) => { const $current = itemsRef.current![currentIndex] as HTMLLIElement; const $next = itemsRef.current![nextIndex] as HTMLLIElement; if (nextIndex === currentIndex) return; const dir = direction || (nextIndex > currentIndex ? "right" : "left"); // const handleAnimationEnd = () => { // $current.className = cx("item"); // $next.className = cx("item", "current"); // $current.removeEventListener("animationend", handleAnimationEnd); // setCurrentIndex(nextIndex); // }; // $current.addEventListener("animationend", handleAnimationEnd); $current.classList.add(cx(`${dir}_current`)); $next.classList.add(cx(`${dir}_next`)); setCurrentIndex(nextIndex); }, [currentIndex] );

안녕하세요! 이제 막 강의를 듣고 있는 배정규라고 합니다.  아코디언 강의를 듣고나니 UI 컴포넌트 개발뿐만 아니라 자바스크립트와 프론트엔드 개발의 실무 팁까지 배울 수 있겠다라는 기대감이 생기네요 🙂  질문은 toggleItem 함수를 클로저를 활용해서 개선을 해주셨는데요, 왜 클로저로 개선을 해주셨는지가 궁금합니다. 클로저를 활용했을 때와 이전 함수와 비교했을 때 어떤 이점이 생기는지 크게 와닿지가 않아서요.왜 toggleItem 함수를 클로저를 활용해서 개선해주셨는지 궁금합니다 😃

앞선 질문들에서 친절하게 답변주셔서 감사합니다! 항상 많이 배우고 있습니다 <Dropdown.Provider> <Dropdown.Container> <DropDown.Trigger> <Dropdown.List> {data.map((item) => ( <Dropdown.Item key={item.key} /> )} </Dropdown.List> </Dropdown.Container> </Dropdown.provider>가독성이 조금 떨어지지만 createDropdown을 만들지 않아도 되고, 제네릭으로 타입을 복잡하게 주지 않아서 이 방법도 괜찮을 것 같은데 어떨까요?!

<Dropdown.Provider list={data}> <Dropdown.Container> <Dropdown.Trigger></Dropdown.Trigger> <Dropdown.List></Dropdown.List> </Dropdown.Container> </Dropdown.Provider>위와같이 Provider을 노출하는 것보다, 아래와 같이 Container 내부에 Provider을 불러와서 사용하는 것이 캡슐화 측면에서 좋지 않나요?! // DropdownContainer <DropdownContextProvider> <div className={cx("Dropdown")} onKeyDown={handleKeyDown} onClick={(e) => e.stopPropagation()} > {children} </div> </DropdownContextProvider>  <Dropdown.Container list={data}> <Dropdown.Trigger></Dropdown.Trigger> <Dropdown.List></Dropdown.List></Dropdown.Container>    

const KeyEventMap: Partial<Record<KeyboardEvent<Element>['key'], KeyEventHandler>> = { ArrowUp: (e, { size, focusIndex }) => { e.preventDefault() focusIndex(prev => (size + prev - 1) % size) }, ArrowDown: (e, { size, focusIndex }) => { e.preventDefault() focusIndex(prev => (size + prev + 1) % size) }, Enter: (e, { focusedIndex, selectIndex }) => { e.preventDefault() selectIndex(focusedIndex) }, Escape: (e, { toggle }) => { toggle(false) }, } 제 짧은 지식으로는 focusIndex, selectIndex를 파라미터로 받는 것보다 context 내부에서 그냥 사용하는 것이 더 간단할 것 같다고 생각했습니다. keyEventMap을 전역에 구현하여, focusIndex와, selectIndex를 따로 파라미터로 받아서 사용하시는 이유가 있을까요?

아코디언 8_r.tsx에서 item7 클래스를 주셨는데 강의자료에 item7 클래스가 없는 것 같아요!

리액트에서는 onClick으로 이벤트를 등록하면 Root에 모이게 된다고 하셨는데제가 이 부분을 정확히 이해했는지 알고싶어서 질문 드립니다!보통은 자바스크립트에서는 각 요소마다 addEventListener를 여러 번 호출하면 메모리 측면에서 비효율적이고 성능이 떨어질 수 있다고 알고 있습니다. 그래서 이벤트 위임을 사용하는 것으로 이해했습니다. 현재 강의에서는 각 요소마다 onclick 이벤트를 등록하셨는데 리액트에서는 Root에서 중앙통제하기 때문에 상관없다는 것으로 인지했습니다.제가 알기로는 이벤트들을 모아다가 root에 addEventListener를 하는 것으로 알고 있는데 이게 맞을까요?그러면 리액트에서는 굳이 이벤트 위임을 사용할 필요가 없을까요? 예를 들어 onClick을 여러 요소에 등록하지 않고 상위 요소 하나에만 등록하는 것처럼 말이죠..!

insertAdjacentElement 를 사용해서 구현하셨는데저 부분을 append로 해도 똑같은 결과가 나옵니다.혹시 append말고 insertAdjacentElement를 사용하신 이유가 있을까요?개인적으로 검색해봤는데 append와 차이점이 insertAdjacentElement는 '지정한 위치에 요소를 삽입할 수 있다'는 점 이외에는 없더라구요..ㅠ어떤 장점때문에 insertAdjacentElement 를 사용한지 알고 싶습니다!

<div id='modalRoot' ref={ref} className='fixed inset-0 z-100 flex flex-col items-center justify-center' > {children} </div>테일 윈드로 선생님 모달 포탈로만드는것 해보고있는데.뒤에 클릭이 안되요 pointer-events-none 쓰지말고 하는법이 없을까요?!일단은 아래처럼 쓰고잇긴한데 ㅠㅠ 먼가 ...'use client'; import React, { useEffect, useRef } from 'react'; import { useModalStore } from '@/shared/models/modal/stores/modalStore'; const mutationObserverOption: MutationObserverInit = { childList: true, subtree: false, }; /** * 모달 컴포넌트를 렌더링하기 위한 전역 컨테이너 프로바이더입니다. * 모달이 열려 있을 때 body 요소에 'no-scroll' 클래스를 토글하여 스크롤을 비활성화합니다. * * @param {React.ReactNode} children - 모달 루트 내부에 렌더링할 자식 요소 * @returns {JSX.Element} 모달 루트 프로바이더 */ const ModalRootProvider: React.FC<{ children: React.ReactNode }> = ({ children, }) => { const ref = useRef<HTMLDivElement>(null); const { openedModalTypes, closeModal } = useModalStore(); // const isModalOpen = openedModalTypes.length > 0; useEffect(() => { let observer: MutationObserver; /** * MutationObserver를 사용하여 모달 루트 컨테이너의 자식 요소 변경을 감지합니다. * 모달이 열려 있는 경우 body 요소에 'no-scroll' 클래스를 추가하고, 모달이 닫혀 있는 경우 클래스를 제거합니다. */ if (ref.current) { observer = new MutationObserver(() => { const size = ref.current?.childNodes.length || 0; document.body.classList.toggle('no-scroll', size > 0); ref.current!.classList.toggle('bg-black/50', size > 0); ref.current!.style.pointerEvents = size > 0 ? 'auto' : 'none'; }); observer.observe(ref.current, mutationObserverOption); } // 컴포넌트 언마운트 시 MutationObserver 연결을 해제합니다. return () => { observer.disconnect(); }; }, []); return ( <div id='modalRoot' ref={ref} className='fixed inset-0 z-100 flex flex-col items-center justify-center pointer-events-none' // onClick={handleOutsideClick} > {children} </div> ); }; export default ModalRootProvider;

HTML이랑 CSS 아는 게 얼마 없는데 이 상태로 공부하면 하다가 막힐까요? 그리고 출판사에서 전자책 출간 일자 답변은 아직인지요..ㅠㅠ

종이책은 곧 나오던데 전자책 출시는 언제 될지, 출시할 계획이 있는지도 알 수가 없어서 이렇게 문의드립니다. 각각 한 권씩 사서 집에서는 종이책으로 보고 밖에서는 전자책으로 보고 싶습니다.