안녕하세요 재남님 강의 너무 잘듣고 있습니다제가 지금 캐러셀 공부하면서 궁금한것이캐러셀 각 이미지에 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 아는 게 얼마 없는데 이 상태로 공부하면 하다가 막힐까요? 그리고 출판사에서 전자책 출간 일자 답변은 아직인지요..ㅠㅠ

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

안녕하세요 선생님 고급강의 잘보고 있습니다.잘만들어 주셔서 감사합니다. 아코디언 만들기 1/6 을 보다가 궁금한 사항이 있어 질문드립니다. const toggleItem = (id: string) => () => { setCurrent((prev) => (prev === id ? null : id)) } 아코디언 1/6 강의를 듣다가 가운데 () 가 클로져 라고 하셨는데 가운데에 저렇게 () 를 쓰면 클로져가 되는건가요? ( 제가 프론트엔드 개발자가 아니라서 클로져의 장단점을 몰라서 질문을 드리는것 같습니다. )  chatgpt 에게 질문을 남겼는데 더욱 이해가 안되어서 질문드렸습니다..ㅎㅎ 아래는 gpt의 답변 입니다.  여기서 (id: string) => () => {...}는 두 개의 함수를 연속적으로 정의하고 있습니다. 1.외부 함수: (id: string) => {...} 이 함수는 id라는 문자열을 매개변수로 받습니다. 내부에는 또 다른 함수를 반환하고 있습니다.  2. 내부 함수: () => {...} 외부 함수가 반환하는 내부 함수입니다. 외부 함수의 id 매개변수를 사용하여 동작을 수행합니다.

catch-all segments 를 루트 페이지에 적용해서nextjs 의 파일 기반 라우트를 무력화 하기 때문에nextjs 에서 제공해주는 다양한 라우터 기능들route intercepting , parallel route 같은것들은사용할수 없게 된다?맞나여?그럼 실무의 next js 프로젝트에서 똑같이 gnb 를 구현 하면 안되겠죠?단순히 수업을 위해 임의로 구현한 포트폴리오 프로젝트용gnb 라고 보면 되는거져?아니면 실무에서라도 catch-all segments [...slug] 폴더를 디폴트 페이지가 아니라 특정 하위 페이지에 대해서만 적용 해서 구현 하는식으로 실무에서도 사용 할수 있나여?그리고 순수 바닐라 js를 이용한 구현 부분도 실무에서는 별로 안쓸것 같고 어려울것 같아서 skip 해도 되나여?

안녕하세요.인제 부트캠프를 하고 거의 끝나가면서 부족함을 느껴서 강의를 신청하게 되었는데요. 강의자료를 다운로드 받아서 설치해보니 아마 완성본(?) 인것 같더라구요. 그래서 route 설정할때 폴더 트리를 보고 내용도 지우고 진행하려고 합니다. 혹시 이렇게해도 앞으로 강의 나가는데 문제가 없을까해서 문의드립니다.예를 들면 현재 이런 상태입니다. 

export const randomize = ({ min = 0, max = 0, step = 1, }: { min: number; max: number; step: number; }) => { if (max < min || max - min < step) throw Error('wrong arguments'); const num = Math.random() * (max - min) + min; return Math.max(Math.floor(num / step) * step, min); };1. src/service/util.ts 파일에서 randomize 함수를 보면 위와 같습니다.num 값을 구하는 표현식이 min 이상 max 이하가 되려면 다음과 같이 바뀌어야 할 것 같습니다.const num = Math.floor(Math.random() * (max - min + 1)) + min; -> const num = Math.floor(Math.random() * (max - min + 1) + min)export type Datum = { index: number; id: string; title: string; description: string; }; export type FetchState = 'loading' | 'fetched' | 'idle' | 'error'; export type State<T> = { data: T[][]; state: 'loading' | 'fetched' | 'idle' | 'error'; };src/components/07_infiniteScroll/vanilla/infiniteFetcher.ts 에서 FetchState 타입을 활용하여 리팩토링 할 수 있을 것 같습니다.export type State<T> = { data: T[][]; state: FetchState; }; 

TextBox2의 경우 제목이 #2. React uncontrolled. canvas 라고 되어 있는데 코드를 보면 단순히 기존 onChange -> onInput으로만 바뀌어 있습니다. 따라서 ref를 사용한 예제로 바뀌면 좋을 것 같습니다.TextBox3 제목에 (자체 제작 방법) 이런 문구도 소괄호로 같이 표시되어 있으면 좋을 것 같습니다.또한 사소하지한 onChange와 onInput에 대한 약간의 차이 같은 설명이 주석이나 자막으로 처리되어 있으면 더욱 좋을 것 같습니다.TextBox5에 스터디를 하신 다른 분이 useImperativeHandle 훅을 사용한 것을 만들어주신 것 같은데 혹시 재남님은 useImperativeHandle을 실제 실무에서 활용하신 사례가 있으신지 궁금합니다.p.s) 매일 오전에 하나씩 보고 있는데 재밌게 보고 있습니다.좋은 강의 감사드립니다~

강의에는 positionType이 relative인 경우의 설명만 있어서 시간 여유가 되시면 absolute인 경우의 설명에 대한 보강 영상이 있으면 좋을 것 같습니다~

보통 window.addEventListener 같은 것을 사용할 때 이벤트 파라미터에 대해서는 Event 타입을 사용하시고, 버튼 같은 클릭 이벤트 리스너의 이벤트 파라미터에 대해서는 SyntheticEvent 타입을 사용하시는 것 같습니다. 보통 클릭이라고 하면 MouseEvent<HTMLButtonElement> 또는 MouseEventHandler로 함수의 타입을 줄 수 있을 것 같은데 SyntheticEvent로 지정하시는 이유가 있으실까요. 대략적으로 SyntheticEvent가 여러 브라우저 등 호환성을 위해 React에서 자체적인 내장 인터페이스로 추상적으로 Vanilla JS의 Event 타입을 확장한 것으로 인지는 하고 있습니다.

gnb 를 이렇게 수정해 봤어여https://github.com/hyunsokstar/challenge_gnb 부모 메뉴일 경우 토글 가능하도록 react 상태와 연동https://github.com/hyunsokstar/challenge_gnb/blob/main/src/app/Component/ParentGnbItem.tsx zustand 로 현재 active 메뉴 관리https://github.com/hyunsokstar/challenge_gnb/blob/main/src/app/Component/ChildGnbItem.tsx https://github.com/hyunsokstar/challenge_gnb/blob/main/src/app/%5B...item%5D/stores/isActiveLinkStore.ts결과:이렇게 수정한 방식도 괜찮을까여?그리고 강의에서 src\app\[...item]\page.tsx 에서 url path를 얻어와서 Next Js 의 파일 기반 페이지 라우팅을 통째로 custom 하는 방식을 사용하는데 이런 방식은 Next Js에서 gnb 를 구현 하는 이상적 혹은 보편적인 방법 이라서인지 아니면 강의를 위한 제한적 구현인지 궁금합니다

classnames/bind 를 사용하지 않고, classnames를 사용할 때, typescript-plugin-css-modules 라는 것을 사용하면 위와 같이 현재 scss파일 안에 있는 클래스들이 보여지게 되는데요! classnames/bind 를 통해 cx를 만들어 사용할 때도 클래스들이 자동완성 됐으면 좋겠다고 생각이 들었습니다. 혹시 이것에 대한 방법이 있을까요?