안드로이드로 실행하고 있고 앱 아이콘까지 성공하였습니다. 그런데 app. tsx에function Section({children, title}: SectionProps): React.JSX.Element { useEffect(() => { setTimeout(() => { SplashScreen.hide(); }, 1000); }); const isDarkMode = useColorScheme() === 'dark';이 코드를 올리면 Cannot read property 'hide' of null 이라고 뜹니다. 그래서 시도해본 방법은-metro 서버 연겨리도 다시해보고-js hide 호출위치를 app()쪽에도 해보고-mainActivity 코드에 SplashScreen.show(this);코드가 잘 있는지 확인도 하고-gradle.properties에 android.enableJetifier=true추가해보고-androidmanifest의 activity에 android:theme="@style/SplashTheme"이 부분도 추가해보고-styles.xml에resource부분에 <!-- ① 스플래시 화면용 테마 --> <style name="SplashTheme" parent="Theme.AppCompat.Light.NoActionBar"> <!-- launch_screen.xml(layout) 을 배경으로 사용 --> <item name="android:windowBackground">@layout/launch_screen</item> </style> <!-- ② 앱 전체용 기본 테마 --> <style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar"> <!-- 여기에 앱 전체 스타일 아이템들을 넣으세요 --> <!-- 예: 상태바 색상, 기본 버튼 스타일 등 --> </style>이렇게도 넣어보아도 앱이 켜지려다가 바로 꺼져버립니다. 로그도 따로 안남고.. 혹시 이 부분에서 왜 이렇게 되고 해결방안이 있을까요??

버튼 컴포넌트 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]);  강의자료에 완성코드가 있다고 하는 걸 어디서 본 것도 같은데... 제가 어디있는지 찾지를 못해서...🥲강의 내용만 보고 작성한 코드임을 양해 부탁드립니다. 🙇‍♀    

선생님! AWS에 이미지 호스팅 서비스 관련해서 궁금한게 있습니다.제가 테스트를 해봤는데 썸네일 이미지 크기(가로/세로)에 상관없이 실제 운영 환경에는 동일한 크기의 썸네일 이미지로 보여지더라구요. 그러면 이게 AWS 이미지 호스팅 할 때 이미지 크기를 리사이징해서 조절해주는 작업이 일어나는거라고 저는 추측하고 있는데요.만약 이런 작업이 일어난다면 결국 AWS에 불필요한 작업으로 인한 비용이 발생이 되는거라서... 혹시 이미지 사이즈 크기에 대한 팁이 있을까요?

10:04에서의 문법을 보면 div안에 {}가 들어간 것이 아니라 {}안에 div태그를 넣는데 제대로 동작하는 것을 보면 그렇다고 생각합니다.

강의의 3분 정도 쯤에,(beforeLogin)/i 폴더와 파일들을 (beforeLogin)/@modal/(i) 로 복사 한 후http://localhost:3000/i/flow/login 접속시 무한 GET 접속 시도가 터미널 창에 보입니다.이때, <Link href="login" className={styles.login}>로그인</Link> 입니다. 그런데, <Link href="/i/flow/login" className={styles.login}>로그인</Link> 변경하면, http://localhost:3000/i/flow/login 접속시, 터미널 창에서는 무한 GET 접속시도는 사라집니다.어떻게 해서 이렇게 되는지요?

강의 50초 정도에, i, login, page.tsx는 {children}에서 렌더링, 여기는 (@modal 의 하위 폴더와 파일 선택) {modal}에서 되죠? 라고 설명하시는 부분이 이해가 안됩니다.저는, app/(beforeLogin)/layout.tsx 의 {children}은 app/(beforeLogin)/page.tsx 를 가져오는 것이고, {modal}은 @modal 폴더의 page.tsx (default.tsx, i/flow/login/폴더로 리다이렉션) 를 찾는 것으로 이했습니다.여러 폴더를 모두 보여준다고 설명하신듯하여, 이해가 안되네요.

안녕하세요.항상 좋은 인사이트와 경험을 공유해주셔서 감사드립니다.최근 프론트엔드 개발을 공부하면서 "Content Attribute"와 "IDL Attribute"의 사용 방식에 대해 고민하게 되었습니다. 이를 정리해보면서 나름대로 다음과 같은 결론에 이르렀습니다.Content Attribute는 변하지 않는 어트리뷰트 값이나 리소스를 표현할 때 사용하고,그 외, 동적으로 핸들링이 필요한 경우에는 IDL Attribute를 사용하는 것이 맞다고 이해하고 있습니다.이러한 개념을 공부하면서, 현업에서 다양한 코드들을 보게 되었는데요, 특히 주니어 개발자분들이 작성한 코드에서는 Content Attribute를 많이 사용하는 반면, 시니어 개발자나 CTO급 분들의 코드에서는 Content Attribute 사용이 상대적으로 적고, 대부분 IDL Attribute를 적극적으로 사용하는 모습을 많이 볼 수 있었습니다.이런 현상을 보며 자연스럽게 궁금증이 생겼습니다.왜 경험 많은 개발자일수록 Content Attribute 사용이 줄어드는 걸까?Content Attribute 방식과 IDL Attribute 방식에 대해 어떻게 생각하시고, 어떤 기준으로 선택하시는지 궁금합니다.혹시 이 부분에 대해 간단히 의견을 들려주실 수 있다면 큰 도움이 될 것 같습니다.(물론 바쁘시다면 답변 주시지 않아도 괜찮습니다! 이렇게 질문을 정리하는 과정만으로도 많은 공부가 되고 있습니다.)읽어주셔서 감사합니다.좋은 하루 되세요.

2분 22초에서 return 문 앞에 const sunriseData = weatherData ? new Date(weatherData.sys.sunrise);이렇게 코드를 적었는데 이후의 코드에서는 갑자기 보이지 않아 이 코드는 어디가고이후의 return 앞에는 이 코드가 오게 되었는지 궁금합니다.const formatTime = timestamp => { const date = new Date((timestamp - 9 * 3600) * 1000); // UTC timestamp에 9시간 추가 return date.toLocaleTimeString([], {hour: '2-digit', minute: '2-digit'}); // 로컬 시간으로 포맷 }; 제가 이해할 때는 sunriseData가 wetherData의 unixtime을 현재 우리가 보는 시간으로 바꾸어 저장하는 것인데...아래의 formatTime은 sunriseData를 대체한 코드인가요?(시차도 적용한?)

p id =one onclick=show() 1. five 오브젝트를 클릭할때 one onclick 이벤트삭제2. five 오브젝트를 클릭할때 one onclick null 로 재할당2번을 쓰게 되는 경우가 어떤경우가 일까요?1번방법이 일반적으로 쓰게될 것 같다는 생각이 듭니다

npm_access_token 오류어떻게 해결하나요 ㅠㅠ

 import "./Main.css";나import "../Main.css"; 둘다 해봤는데css를 컴포넌트로 불러오기 오류떠요 ㅠㅠ

이전 버젼의 강의에서는 emotion을 쓰고본 강의에서는 tailwind를 쓰는데 저는 emotion이 가독성도 좋고 사용하기 편안하다는 느낌을 받았는데요새로 생긴 강의에서는 tailwind를 사용하는 이유가 뭘까요?

제목 그대로 export const dynamic = "auto";로 설정을 해도 해당 페이지가 정적인 페이지임에도 동적인 페이지로 빌드되는데 이게 맞을까요?

기존강의 업데이트를 지금 확인해서 쿠폰 받을 수 있을까요

2.9> 한입북스 UI 구현하기 13분강의하고 똑같이 따라해보고 안 되길래 깃헙에서 복붙에서 붙여 놔도 안되는데 이러면 다른 파일이 틀렸을 가능성이 있나요? 

안녕하세요. 제가 직접 tailwind css v4를 이용해서 트위터 클론코딩을 진행하고 있는데SearchForm에서 입력이 이루어지면, SearchForm의 영향으로 인해서 다른 영역에서도 재랜더링이 일어나는 것 같습니다.먼저 묻고싶은 내용은 어떻게 하면 다른 영역은 재렌더링이 일어나지 않게 할까 입니다. 리엑트 개발자 도구로 렌더링이 일어날때 하이라이트 표시를 켰습니다. 이 때 SearchForm에 입력이 일어나면 위와같이 SearchForm만 아닌, 다른 영역에도 렌더링이 되는 모습이 보입니다. SearchForm 구성은 다음과 같이했습니다.최대한 현재 트위터의 입력 방식을 맞추어 보았습니다."use client"; import { useSearchParams } from "next/navigation"; import React, { useRef, useState, ChangeEventHandler, useEffect, memo, } from "react"; interface SearchFormProps { q?: string; } const SearchForm = () => { const [value, setValue] = useState(""); const inputRef = useRef<HTMLInputElement>(null); const searchParams = useSearchParams(); const search = searchParams.get("q"); const handleChange: ChangeEventHandler<HTMLInputElement> = (e) => setValue(e.target.value); const handleClear = () => { setValue(""); inputRef.current?.focus(); }; useEffect(() => { setValue(search ?? ""); }, []); return ( <div className="relative w-inherit h-12 group min-w-0"> {/* Border 레이어 */} <div className={` absolute inset-0 border border-default-border rounded-full transition-all duration-75 group-focus-within:border-2 group-focus-within:border-twiiter-blue `} /> {/* 내부 요소 컨테이너 */} <div className="relative w-full h-full"> <form className="flex items-center w-full h-full px-4" autoComplete="off" onSubmit={(e) => e.preventDefault()} > {/* 검색 아이콘 (외부 div 기준 위치) */} <svg className="absolute left-4 top-1/2 -translate-y-1/2 text-gray-500 pointer-events-none" width={20} height={20} viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" strokeWidth={2} > <circle cx="11" cy="11" r="8" /> <line x1="21" y1="21" x2="16.65" y2="16.65" /> </svg> {/* Input */} <input ref={inputRef} type="search" placeholder="검색" value={value} onChange={handleChange} className=" w-full h-full pl-10 pr-10 bg-transparent text-base outline-none placeholder-gray-500 appearance-none " /> {/* Clear 버튼 (외부 div 기준 위치) */} {value && ( <button type="button" onClick={handleClear} className=" absolute right-3 top-1/2 -translate-y-1/2 w-7 h-7 flex items-center justify-center bg-gray-700 hover:bg-gray-800 rounded-full transition " tabIndex={-1} aria-label="Clear" > <svg width={16} height={16} viewBox="0 0 20 20" fill="white"> <path d="M10 8.586l4.95-4.95 1.414 1.414L11.414 10l4.95 4.95-1.414 1.414L10 11.414l-4.95 4.95-1.414-1.414L8.586 10l-4.95-4.95L5.05 3.636 10 8.586z" /> </svg> </button> )} </form> </div> </div> ); }; export default SearchForm;  이를 SearchHeader에 적용하였으며.import React from "react"; import SearchTab from "./SearchTab"; import SearchForm from "@/components/common/SearchForm"; const SearchHeader = () => { return ( <div className="w-[calc(100%-72px)] sm:pl-0 sm:max-w-[598px] fixed backdrop-blur-lg border-b-1 border-default-border bg-white/70 dark:bg-black/30"> <div className="w-full mt-2"> <SearchForm /> </div> <div className="w-full mt-1 h-[53px]"> <SearchTab /> </div> </div> ); }; export default SearchHeader; 최종적으로 /search 페이지에 이를 적용했습니다.import React from "react"; import Post from "../home/_components/Post"; import SearchHeader from "./_components/SearchHeader"; interface SearchPageProps { searchParams: Promise<{ q: string; f?: string; pf?: string }>; } const SearchPage = async ({ searchParams }: SearchPageProps) => { const { q } = await searchParams; return ( <main className="main-container"> <SearchHeader /> <div className="mt-[107px]"> <Post /> <Post /> <Post /> <Post /> <Post /> <Post /> <Post /> <Post /> <Post /> </div> </main> ); }; export default SearchPage; 관련된 layout.tsx는 다음과 같습니다.import Image from "next/image"; import Link from "next/link"; import React, { ReactNode } from "react"; import logo from "@/../public/twitter-logo.svg"; import SearchForm from "@/components/common/SearchForm"; import NavMenu from "./_components/NavMenu"; import LinkButton from "@/components/common/LinkButton"; import FollowCard from "./_components/FollowCard"; import TrendCard from "./_components/TrendCard"; import RightSection from "./_components/RightSection"; interface AfterLoginLayoutProps { children: ReactNode; modal: ReactNode; } const AfterLoginLayout = ({ children, modal }: AfterLoginLayoutProps) => { return ( <div className="overflow-y-scroll"> <div className="flex items-stretch"> <header className="flex items-end flex-col sm:flex-grow-1"> <section className="w-[72px] p-2 xl:p-0 xl:w-[275px] h-dvh"> <div className="flex flex-col w-inherit h-dvh fixed "> <Link href={"/home"}> <div className="w-14 h-14 rounded-[50%] flex justify-center items-center hover:bg-[rgba(15,20,25,0.1)]"> <Image src={logo} alt={"twitter logo"} width={40} height={40} /> </div> </Link> <NavMenu /> </div> </section> </header> <div className="flex items-start flex-col h-dvh flex-grow-1"> <div className="h-full w-[100%] sm:w-[600px] lg:w-[920px] xl:w-[990px] flex justify-between "> <main className="w-full sm:max-w-[600px] min-h-full h-fit border-l-1 border-r-1 border-default-border"> {children} </main> <div className="hidden lg:block lg:w-[290px] xl:w-[350px] h-fit relative"> <div className="flex flex-col w-inherit h-dvh fixed pt-1"> <RightSection /> </div> </div> </div> </div> </div> {modal} </div> ); }; export default AfterLoginLayout;  SearchForm에 React.memo를 적용을 해보아도 변하지 않았습니다.(다른 영역, 예를 들어 main이 아닌 양 옆의 영역들에 대해서도 React.memo를 넣었지만 그래도 렌더링이 일어나고 있습니다.) 재랜더링 조건은 부모 컴포넌트가 재랜더링 되거나, props가 바뀌거나, state 변경이 일어났을 때인걸로 알고 있습니다.searchForm에서 Input만 영역에만 영향을 줘야할 것이 분명한데, 전체 영역에서 재랜더링이, 즉 layout.tsx에서 재랜더링이 일으키고 있는것 같습니다. (부모 영역) 혹시 렌더링이 어디까지 일어나는지 확인하는 (즉 최종 부모 컴포넌트까지) 방법이 있나요?그리고 이런 문제가 있을때 어떻게 최적화 할 수 있나요?p.s. 코드상 w-inherit 클래스가 이면 제가 직접 tailwind css utility에 추가하여 기능하도록 만들었습니다.+ 추가console.log()로 재랜더링이 일어나는지 확인해 보았는데 콘솔이 뜨지 않아 재랜더링이 아닌 다른 무슨 활성화(?) 인것 같아 보입니다... 하지만 SearchForm 입력 가지고 무언가 활성화 되는 것 자체가 조금 이해가 되지 않아서... 일단 재랜더링이라고 표현으로 남겨두었습니다... 

안녕하세요. 리액트 초보입니다. 이해하기 쉽게 설명해주셔서 감사합니다. 11.3) Context 분리하기 강의 약 7분 쯤에서 궁금한 부분이 있어서 질문 남깁니다.  <TodoDispatchContext.Provider> 를 통해 context를 전달할 때, 함수를 캐싱하기 위해 강의에서는 아래와 같이 useMemo를 사용해주셨는데요! const memoizedDispatch = useMemo(() => { return { onCreate, onUpdate, onDelete }; }, []); 우선 최적화하고자 한 이유는 아래와 같다고 이해했습니다. onCreate, onUpdate, onDelete 모두 한 번 생성한 후에 바뀌지 않는 함수로, TodoDispatchContext를 참조하는 자식 컴포넌트들의 리렌더링 방지  그리고 useMemo를 사용하신 부분에서는 마운트 후 onCreate, onUpdate, onDelete는 변하지 않는 함수 이므로 "값을 캐싱한다"는 의미에서 useMemo를 사용해주셨다고 이해했습니다. 다만 useCallback도 mount 후 deps 변경 전에는 함수의 중복 생성을 방지한다는 점에서는 useCallback을 사용해도 좋을 것 같단 생각이 들었는데요, 결론적으로 제가 궁금한 부분은 아래와 같습니다. useMemo 대신 useCallback을 사용해서도 동일하게 최적화 할 수 있다고 이해했는데, 제가 이해한 게 맞을까요? 1번이 맞다면 강의에서 useMemo를 사용해주신 이유는 캐싱하기 위함(의도)을 표현하기 위함이라고 이해하면 될지도 궁금합니다! 실무에서는 useMemo와 useCallback을 모두 사용할 수 있는 경우 어떤 훅을 선택하시는지, 강의에서 useMemo를 통해 캐싱하신 이유가 궁금했습니다 ! 블로그를 찾아봐도 잘 이해가 되지 않아서 질문으로 남깁니다! 답변 주시면 감사하겠습니다! 

안녕하세요, 강사님.React Router 설정 강의 중 6분 23초에 사용하신 MainPage 코드와 강의 자료에 제공된 MainPage 코드의 작성 방식이 서로 달라서 문의드립니다.영상에서는 함수 선언식(function MainPage …)을, 자료에서는 화살표 함수(const MainPage = …) 형태로 소개되어 다소 혼란이 있습니다. 혹시 두 방식 중 특별히 권장하시는 것이 있는지, 아니면 단순히 문법 스타일 차이인지 알고 싶습니다 .또한, React나 Spring Boot의 버전 차이에 따라 코드 작성 방식이 달라지는 부분이 있는지도 궁금합니다.앞으로는 강의 영상 기준의 코드를 우선 따라 작성해도 괜찮을지 안내해 주시면 감사하겠습니다.바쁘신 와중에 읽어주셔서 감사합니다.답변 기다리겠습니다.감사합니다.

선생님! 안녕하세요!제가 AWS에 배포 후 도메인을 붙이고 접속했을 때 첫 페이지는 잘 나왔습니다.근데 테스트를 클릭하니 URL이 도메인 주소가 아닌 localhost로 바뀌면서 접속이 안됩니다. 어느 포인트를 수정해야할까요?ㅠ