textarea 에서 body 무한깜빡현성 질문 드립니다.

강의자료부터 문제가 있나 싶어 내려받아 실행해보았는데, 강의자료의 코드를 실행했을 때는 같은 현상이 발생하지 않고 있네요.말씀하신 현상만 보면 어디선가 계속 업데이트 되고 있다는 추측은 참일 가능성이 높아 보이지만, 그게 어디서 발생하는지를 질문 내용만으로 유추하기가 어려워 보입니다.업데이트 발생 원인이 리액트 때문인지를 좀 더 직관적으로 알아볼 수 있는 방법이 있습니다.리액트 개발자도구에서 다음 그림처럼 체크하시면, 화면에 변경사항이 박스로 표시되어요.(사진)이걸로 한 번 더 테스트해 보시고, 그래도 안되면 질문자님의 코드를 공유해 주세요.함께 살펴보시죠.

닫힌 상태에서 문자열은 찾아지는데 열리진 않아요

검색기능은HTML details로 작성한 코드이거나hidden="until-found" 속성을 부여한 상태에서 "beforematch" 이벤트핸들러로 toggle 함수를 실행시키도록 한 코드두가지 방법에서만 동작합니다.나머지 다른 아코디언 컴퍼넌트에서는 아코디언이 열리지 않는 것이 정상이에요.제대로 동작하지 않는다면 디버깅을 해봐야겠죠.useEffect 안에서 descRef가 있을 때 이벤트리스너를 등록해주도록 했는데,descRef가 있는지부터 출력을 해보세요.만약 DOM 요소가 출력되지 않는다면 어디선가 오타가 있었을 확률이 있을 것입니다.

질문있습니다 !

어디를 말씀하시는건가요? 저는 말씀하신 내용이 어디있는지 못찾겠어요https://github.com/roy-jung/api-practice/blob/ts-ch3/package.jsonhttps://github.com/roy-jung/api-practice/blob/ts-ch3/server/package.jsonhttps://github.com/roy-jung/api-practice/blob/ts-ch3/client/package.jsonhttps://github.com/roy-jung/api-practice/blob/ts-ch6/package.jsonhttps://github.com/roy-jung/api-practice/blob/ts-ch6/client/package.jsonhttps://github.com/roy-jung/api-practice/blob/ts-ch6/server/package.json

scrollSpy 바닐라버전에서 data-index를 찾는 코드 질문

closest로 충분합니다!다른 메서드도 소개하고 싶어서 억지로 끼워넣어 봤어요 ㅎㅎ차이라면 e.composedPath는 발생한 이벤트에서 바로 메서드를 적용하는 것이고,e.target.closest는 이벤트가 발생한 요소에서 찾는 것이죠.closest는 내부에 지정한 선택자에 해당하는 상위 요소를 탐색하는 명령이니 매 번 새로 탐색을 할 수밖에 없죠.반면 e.composedPath는 이벤트 객체에 처음부터 담겨 있는 '버블링할 대상들'을 배열로 반환해주는 메서드라서 노드를 다시 탐색하지 않을 것이라 추측합니다. 제 추측이 맞다면, e.composedPath가 성능상 아주 약간이나마 이점이 있을 것 같네요.

제네릭을 사용하실 때 콤마

콤마가 없을 때 TSX에 대해 prettier나 biome, vscode typescript 등에서 문법 파싱을 제대로 하지 못해 오류로 표기되는 문제가 있습니다.이를 피하기 위한 목적으로 부득이하게 넣은 것일 뿐입니다. TSX문법과의 혼동을 방지한다는 해석이 맞겠네요.

popover createPortal 방식에서

강의에서는 페이지단위로 다른 내용을 소개하기 위해 어쩔 수 없이 페이지 내 컴포넌트별로 따로 넣어줬지만, 실제 서비스에서는 최상단 컴포넌트(_layout.tsx 또는 _app.tsx 등)에 딱 한 번만 넣으면 됩니다. 다른걸 생각하실 이유가 없을 것 같네요.

2강부터 영상이 나오지 않습니다.

저는 잘 나오고 있는데, 혹시 지금도 안나오시나요?혹시 결제를 안하셨거나, 로그인이 안된 것은 아닌지 확인해 보시기 바라요인프런에 문의를 해보시는게 좋을것 같네요.

[#보일러플레이트 코드 사용법 문의] 강의자료[보일러플레이트] 사용법에 대해서 문의 드려요

아무것도 없이 처음(기본환경세팅 파트)부터 직접 작성하면서 수강하시면 좋습니다. 본 강의(아코디언~)에 돌입할 때엔 수강자분께서 작성하신 코드로 계속 이어나가셔도 되고, 보일러플레이트 코드를 바탕으로 수강하셔도 됩니다.routes 파트를 건너뛰거나 코드를 눈으로만 쫓으며 수강하신 다음, 보일러플레이트 코드를 바탕으로 다음 챕터(아코디언)부터 수강하셔도 됩니다.

2024 FE 컨퍼런스 (토스, 카카오, 당근) 함께 시청해요

스낵바를 만들 때 snackBarContext와 snackBarSetContext

AI가 잘 설명을 해줘서 덧붙일 말이 없네요. 상태로 관리할 대상 중에 상태'값'으로 사용할 대상과 '함수'로 사용할 대상을 나눈 것입니다. 리렌더링을 최소화 하기 위한 조치입니다. 하나의 컨텍스트로 관리하면 상태가 변경될 때 함수들만 사용하는 컴포넌트도 모두 리렌더링될 것입니다. 상태가 변경되더라도 함수는 변경되지 않을 확률이 높기 때문에 컨텍스트를 분리하면 리렌더링을 줄일 수 있습니다.리액트 공식문서에서도 다음과 같이 둘을 구분하고 있습니다.https://ko.react.dev/learn/scaling-up-with-reducer-and-context#step-2-put-state-and-dispatch-into-context