안녕하세요! React Native도 Next.js와 같이 폴더 기반 라우트라 게시글 수정 페이지를 ~/app/post/update/[id].tsx 에 만들었고, 해당 [id] 부분에 동적으로 게시글 id 값을 넣어 라우팅할 수 있게 하였습니다. 또 ~/app/post/_layout.tsx 레이아웃에 Stack.Screen에 등록도 하였구요! 그래서 엑스포 라우터를 import 하여 import { router } from 'expo-router'; 바텀 시트의 수정 버튼 클릭 시, 다음을 호출하였는데요, router.push(`/post/update/${post.id}`); 다음 에러가 납니다... ㅠ Argument of type /post/update/${number} is not assignable to parameter of type 'RelativePathString | ExternalPathString | ... '/post/update/[id]'라는 경로는 인식하는 것으로 보아 엑스포 라우터가 다이나믹 경로를 못 찾는 것 같은데 왜 이런 현상이 발생하는지 모르겠습니다 ㅠ
Next.js 완벽 마스터 (v15): 노션 기반 개발자 블로그 만들기 (with 커서AI)
안녕하세요! 먼저 좋은 강의 감사합니다. 중간쯤, 전체 데이터를 조회해서 Client 측에서 필터링 해서 사용하는게 아닌, 서버로부터 이미 필터링 된 데이터를 받아오도록 검색 api 를 수정한 내용입니다. 이 부분이 클라이언트 사이드 -> 서버 사이드로 변경하였다, 라는 내용을 설명주셨는데, 랜더링과는 전혀 관계 없는 데이터 필터링 주체를 말씀 하시 내용이라고 생각되는데 맞게 이해했는지 궁금합니다. 즉, Notion = 서버, Next.js=클라이언트 관점으로 애기 하신게 맞는지 궁금합니다.
강의를 만들어주셔서 감사합니다. 몇가지 질문이 있습니다. Frontend와 Backend폴더를 만든이유가 협업과 소스코드관리를 위한것이라고 생각합니다. 그런데 node-modules를 Frontend와 Backend에 각각 설치하신 이유가 있으실까요? company-website에 설치해서 두곳다 이용하는방법도 있을것같은데 Frontend와 Backend를 따로 설치하신이유가 궁금합니다. 깃허브에는 node-modules가 저장되게 하지 않았는데요 그러면 현재 사용하는 노트북이 아닌 다른 노트북이나 데스크톱에서 현재 개발한것을 이어서하고싶을 경우 Ch0-3과Ch0-4의 설치를 다시 해주면되나요? 본강의를 듣고 저만의 웹페이지를 만드는게 목표인데 react에 대해 찾아보다가 Create React App(CRA)로 만드는법과 Vite, Next.js로 만드는방법이 있었습니다. 이중 Vite를 고른 이유가 있을까요? 빠르다는 장점으로 선택하신건가요? 선택이유가 궁금합니다.
Context 분리하기 강의 중 3분 55초에 나오는 컴포넌트의 계층 구조 표를 보면, 기존의 Context를 TodoStateContext와 TodoDispatchContext로 분리하면서 TodoDispatchContext가 TodoStateContext의 하위에 존재하는 것을 봤는데요, 이 부분에서 의문이 생긴 것이 TodoStateContext와 TodoDispatchContext가 형제 위치에 존재하면 안되는걸까요..? 제 생각에는 TodoDispatchContext가 하위에 존재하지 않고 StateContext와 형제 위치에 있다면 DispatchContext가 todos에 영향을 받지 않아 리랜더링도 발생하지 않을 것 같은데, 해당 방법이 안되는 이유가 있을까요?
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 교재 구입해서 강의 들으려고 하는데 커리큘럼이 없어졌어요. 이제 못 듣게 된건가요?
안녕하세요!! 강의 너무나도 잘 듣고 있습니다. 18-05 게시글 이미지와 함께 등록 23:25분에서 file에 대한 타입을 지정을 할 때 알려주신 방법 외에도 ! 를 이용해서 해결을 의도치 않게 했는데, 구글 및 스택오버플로우에도 Argument of type ' file | undefined' is not assignable to parameter of type 'File'. Type 'undefined' is not assignable to type 'File'.ts(2345) 해당 오류를 검색해보았지만 알려주신 방법들 외에는 느낌표를 사용하는 방법은 찾지 못했습니다. 이게 왜 되는건지... 도통 알수가 없네요... 이건 어떤 원리인가요?? 항상 감사드립니다.
1강 '왜 Next.js 가 필요할까?(기술적인 등장 배경)' 에서 언급하신 영상들이 무엇인지 궁금해서 질문드립니다. 04:40 "이 비동기에 대한 의미는 한 번 설명드린 적이 있어요." 10:00 "서버 사이드 렌더링 시간에 저희가 이미 공부했으니까요." 두 지점에서 언급하신 Youtube 영상이 각각 무엇인지 URL을 알려주실 수 있으실까요?
서버 구성해서 직접 만들고 있는데, 입력폼에서 스크립트가 안먹히더라고요. 쭉 강의 보고 실습필요한 부분 다시 보는데 일전에 브라우져 설정을 변경 했었었나요. 기억이 가물합니다! Content-Security-Policy-Report-Only 이 옵션 때문에 가능했던가요.
안드로이드로 실행하고 있고 앱 아이콘까지 성공하였습니다. 그런데 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에 불필요한 작업으로 인한 비용이 발생이 되는거라서... 혹시 이미지 사이즈 크기에 대한 팁이 있을까요?
