동물 앨범 만들기 3차 까지 들어서 라이브 코드를 작성하였지만, 강의 내용에서 나오는 웹 실행화면이 출력되지 않고 있습니다. 또한, 강사님의 깃 주소에 있는 코드들을 그대로 실행해도 강의 내용처럼 나오지 않습니다. 강사님이 동물 앨범 만들기 2차 때는 1차에서 작성한 각 동물들의 js파일과 html 파일을 삭제하라고 하셨는데, 막상 1차때 작성한 파일들을 삭제하니까 동물 사진이 웹에 출력되지 않아서 다시 기재하였습니다 그래서, 강사님의 깃 주소에는 1차와 2차, 3차 코드는 중복되게 작성하면 안되는 건가요? 강사님처럼 웹 화면에 출력될려면 3차 코드만 있으면 되는 건가요? 왜 3차 코드만으로 강의 내용처럼 출력이 안되는 걸까요? 1차, 2차, 3차의 모든 코드들을 융합해서 작성해야하나요? 다음 강의 node.js와 express.js를 진행할 수 가 없어서 급하게 문의드립니다! !
<리스트> <레코드1/> <레코드2/> </리스트> 일 경우… 리스트단에서 use client로 한 후 zustand에서 리스트 자체를 통으로 관리해야하는가? 각각의 레코드에 use client를 한 후 데이터를 받으면 zustand에 리스트를 만들어 레코드별로 hash(Map)으로 등록해 관리해야하는가? 레코드에는 좋아요, 조회수 등이 표시됨. 제 생각은 1번은 SEO가 중요한건 각각 레코드 (상세페이지) 이므로 zustand에서 통으로 넣어 관리하면 되니 구현 및 데이터 신뢰도에서는 나아보이는데 하나바뀌면 전부 렌더링되니까 애매한거같고 2번은 서버에서 모두 다 가져와서 초기속도는 빠르고 seo에 좋으나 zustand에 통으로 못넣고 데이터 자체를 내가 직접관리하는 구조라 구현 및 데이터 신뢰 측면에서는 골치아플거같은데… 무엇이 일반적인 구현방식인지 모르겠습니다. 도와주세요 ㅠㅠ
코드 관련 질문은 아래와 같이 '코드블럭' 기능을 이용해주세요! + 오류 메세지도 함께 올려주시면 좋아요 🙂 console.log('hello'); https://trip-wiki-api.vercel.app/?start=0 브라우저에서 여기로 들어가도 api 호출값이 안나오고 검은색 창이 떠요 그리고 코드 작성했는데, Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec. 이런 에러만 console에 찍혀서... 코드 사이트에 있는걸로 복사해서 넣어도 마찬가지네요 server.js는 const express = require('express'); const path = require('path'); const app = express(); const PORT = 3000; app.use(express.static(path.join(__dirname, '..'))); app.get('/*splat', (req, res) => { res.sendFile(path.join(__dirname, '..', 'index.html')); }); app.listen(PORT, () => { console.log('START SERVER'); }); /*splat은 /*name 해도 결과가 같아요 ㅠ express는 5.1.0 node는 20 번대 사용중입니다. ⚠ 답변은 평일 오전 10시에 순차적으로 작성해드립니다. ⚠ '질문 해결'은 답변 작성일 기준 1일 이후에 적용됩니다.
코드 관련 질문은 아래와 같이 '코드블럭' 기능을 이용해주세요! + 오류 메세지도 함께 올려주시면 좋아요 🙂 console.log('hello'); 안녕하세요, 강의 잘 수강하고 있습니다. 궁금한게 있는데, 혹시 vsCode 사용할 때 단축키 설정이나 플러그인 등 추천해주실만한 게 있을까요? 이를테면 괄호()안에 무엇을 누르면 탭을 빠져나오는 단축키가 있다던지 소소한 팁이 있으시다면 공유부탁드리고 싶습니다.
버튼 컴포넌트 onClick={handleClick()} jsx 에서 위처럼 적으면 자바스크립트에서 엔진에서 즉시실행함수로 인식하는것 처럼 인식을 해서 렌더링이 되기도전에 함수를 먼저 실행해버리는 현상이 생기는 이유가 맞을까요? 결국 핸들러 함수의 기능도 하지못하고 1회용으로 즉시실행되고 소멸해버리는 함수가 되어버리는 것 같아보이는데 이에 대한 정확한 설명이 있을까요? 제가 생각한 이 부분에 보충적으로 필요한 설명을 혹시 해주실 수 있으실까요?
안녕하세요! 항상 유익한 강의를 제공해 주셔서 감사드리며, 강의를 통해 UI를 다양한 방법으로 구현하는 법과 요구 사항의 디테일한 부분을 어떻게 처리해야 하는지에 대해 많은 것을 배우고 있습니다. 조심스럽게 여쭤보고 싶은 점이 있어 글을 남깁니다. 혹시 시간이 괜찮으시면 선생님의 고견을 듣고 싶습니다. - tooltip의 react 버전 viewportContext.tsx에서 useSyncExternalStore()사용부분 useSyncExternalStore를 통해 외부요소의 변화를 구독할 수 있게, 첫번째 인자로 subscribe를 넘기고 해당 상태를 컴포넌트와 동기화 할 수 있도록 두번째 인자로 getViewportRect를 넘기고 있습니다. 첫번째 인자인 subscribe는 함수의 참조를 넘기는데, 두번째 인자인 getViewportRect는 "getViewportRect()"로 값을 넘기고 있어, 이 부분에서 조금 의문이 생겨 아래와 같이 수정하면 어떨까 생각했습니다. useSyncExternalStore의 두번째 인자에도 함수의 참조를 넘기도록 수정하여 react에게 제어권을 넘기고, getViewportRect에서 리턴된 함수는 stored값을 기억할 수 있도록 즉시실행함수로 만드는 방식입니다. const getViewportRect = (() => { let stored: Rect = DefaultRect; return () => { const el = typeof document !== 'undefined' && document.scrollingElement; if (!el) return stored; const { left, top, width, height } = el.getBoundingClientRect(); const newRect = { left, top, width, height, scrollHeight: el.scrollHeight }; if (newRect && !isSameRect(stored, newRect)) stored = newRect; return stored; }; })(); //1. 즉시실행함수로 수정 const ViewportContextProvider = ({ children }: { children: ReactNode }) => { const viewportRect = useSyncExternalStore(subscribe, getViewportRect); //2.두 인자 모두 참조만 넘기도록 수정 return ( <ViewportContext.Provider value={viewportRect}> {children} </ViewportContext.Provider> ); }; 이렇게 수정하는 것이 더 나은 방법일지 여쭙고 싶습니다. useStyleView.ts에서 useLayoutEffect의 의존성배열에 참조 자료형 넣는 것 viewportRect가 객체인데, 이를 의존성배열에 그대로 넣는것이 괜찮은지 궁금합니다. const viewportRect = useViewportRect(); //객체 useLayoutEffect(() => { ... }, [viewportRect, wrapperRef, targetRef, position]); viewportRect에서 개별 값만 분리해서 넣는 방법도 고려해 보았습니다. const { top, left, width, height } = useViewportRect(); //생각해본 버전 useLayoutEffect(() => { ... }, [top, left, width, height, wrapperRef, targetRef, position]); 강의자료에 완성코드가 있다고 하는 걸 어디서 본 것도 같은데... 제가 어디있는지 찾지를 못해서... 🥲 강의 내용만 보고 작성한 코드임을 양해 부탁드립니다. 🙇♀
안녕하세요. 항상 좋은 인사이트와 경험을 공유해주셔서 감사드립니다. 최근 프론트엔드 개발을 공부하면서 "Content Attribute"와 "IDL Attribute"의 사용 방식에 대해 고민하게 되었습니다. 이를 정리해보면서 나름대로 다음과 같은 결론에 이르렀습니다. Content Attribute는 변하지 않는 어트리뷰트 값이나 리소스를 표현할 때 사용하고, 그 외, 동적으로 핸들링이 필요한 경우에는 IDL Attribute를 사용하는 것이 맞다고 이해하고 있습니다. 이러한 개념을 공부하면서, 현업에서 다양한 코드들을 보게 되었는데요, 특히 주니어 개발자분들이 작성한 코드에서는 Content Attribute를 많이 사용하는 반면, 시니어 개발자나 CTO급 분들의 코드에서는 Content Attribute 사용이 상대적으로 적고, 대부분 IDL Attribute를 적극적으로 사용하는 모습을 많이 볼 수 있었습니다. 이런 현상을 보며 자연스럽게 궁금증이 생겼습니다. 왜 경험 많은 개발자일수록 Content Attribute 사용이 줄어드는 걸까? Content Attribute 방식과 IDL Attribute 방식에 대해 어떻게 생각하시고, 어떤 기준으로 선택하시는지 궁금합니다. 혹시 이 부분에 대해 간단히 의견을 들려주실 수 있다면 큰 도움이 될 것 같습니다. (물론 바쁘시다면 답변 주시지 않아도 괜찮습니다! 이렇게 질문을 정리하는 과정만으로도 많은 공부가 되고 있습니다.) 읽어주셔서 감사합니다. 좋은 하루 되세요.
p id =one onclick=show() 1. five 오브젝트를 클릭할때 one onclick 이벤트삭제 2. five 오브젝트를 클릭할때 one onclick null 로 재할당 2번을 쓰게 되는 경우가 어떤경우가 일까요? 1번방법이 일반적으로 쓰게될 것 같다는 생각이 듭니다
안녕하세요! 7.스코프 편 강의를 듣고 있는데 4:45부터 재생이 끊깁니다. 이전 강의(정확히 어느 편이었는진 기억이 안남) 에서도 동일한 현상이 있었는데 다행히 영상이 거의 끝날 쯔음이라 신경 쓰지 않았는데 지금은 아예 중간부터 끊겨서 강의에 지장이 생기네요ㅠㅠ 단순히 제 PC의 문제로 봐야할까요..? ㅠ
안녕하세요 효빈님 ! 해당 강의에서 상태 관리 코드들은 this.state , this.setState , this.render 를 통해 생성자 함수의 프로퍼티로 작성하는 반면 App 컴포넌트 의 init 함수 는 프로퍼티가 아닌 함수로 작성하신 부분 이 궁금하여 질문드립니다. 혹시 메서드로 작성한 함수와 자체적인 내부 함수로 작성한 기준이 있으실까요 ?! init 함수는 내부에서만 사용되는 함수이고, 다른 메서드 함수는 외부에서도 사용할 수 있어서 그런걸까요?
🚨질문 작성법 및 안내사항 질문 작성법 - 몇 섹션의 어떠한 강의에 대한 질문인지 작성해주세요. (ex. 섹션2 조건문에 대한 질문) - 질문은 최대한 구체적으로 작성해주세요. - 비슷한 질문이 올라와있는지 확인해주세요. - 코드가 포함된 질문은 아래와 같이 코드블록을 사용해주세요. console.log("hello world"); 안내사항 - 질문에 대한 답변은 보통 주말, 공휴일을 제외한 평일 오전 시간 에 답변해드립니다. BigInt에 대해서 조금더 자세하게 설명해 주실 수 있을까요?
