안녕하세요. 강사님.늘 강의 잘 보고 있습니다. 🙂 오늘 1강부터 청강 시작 했습니다. 윈도우 개발환경에서 파이썬 3.11 설치를 알려주셨습니다. 25년 4월 현재도 여전히 유효한지요?검토 부탁드립니다. 감사합니다.  당신의 파이썬/장고 페이스메이커가 되겠습니다. ;-)인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.

 getStatusBarHeight의 값이 콘솔에 찍히는데 그 값이 화면에 적용되지 않습니다. import { View, StyleSheet, StatusBar, Image, Text, TouchableOpacity, Animated, Platform, } from 'react-native'; import {getStatusBarHeight} from 'react-native-status-bar-height'; import React, {useEffect, useRef} from 'react'; import {SafeAreaView} from 'react-native-safe-area-context'; import Ionic from 'react-native-vector-icons/Ionicons'; const Status = ({route, navigation}) => { const {name, image} = route.params; const statusBarHeight = getStatusBarHeight(); const topMargin = Platform.OS === 'ios' ? statusBarHeight : 0; console.log('statusBarHeight', statusBarHeight); console.log('topMargin', topMargin); // Animated.Value(0)의 값을 직접 변경하면 안되기 때문에 useRef를 사용 const progress = useRef(new Animated.Value(0)).current; const progressAnimation = progress.interpolate({ inputRange: [0, 5], outputRange: ['0%', '100%'], }); useEffect(() => { Animated.timing(progress, { toValue: 5, duration: 5000, useNativeDriver: false, }).start(); }); useEffect(() => { let timer = setTimeout(() => { navigation.goBack(); }, 5000); return () => { clearTimeout(timer); }; }); return ( <SafeAreaView style={styles.statusContainer}> <StatusBar barStyle="light-content" backgroundColor="black" /> <View style={[styles.topGreyLineContatiner, {top: 18 + topMargin}]}> <Animated.View style={{ backgroundColor: 'white', height: '100%', width: progressAnimation, }} /> </View> <View style={[styles.headerContainer, {top: 12 + topMargin}]}> {* ... /*} </View> <Image style={styles.storyImage} source={image} /> </SafeAreaView> ); }; export default Status; const styles = StyleSheet.create({ statusContainer: { backgroundColor: 'black', height: '100%', justifyContent: 'center', }, topGreyLineContatiner: { height: 3, width: '95%', borderWidth: 1, backgroundColor: 'grey', position: 'absolute', }, headerContainer: { padding: 15, flexDirection: 'row', alignItems: 'center', position: 'absolute', top: 12, left: 0, width: '90%', }, headerImageContainer: { width: 30, height: 30, justifyContent: 'center', alignItems: 'center', }, //.... }); console.log('statusBarHeight', statusBarHeight); console.log('topMargin', topMargin);이렇게 했을경우 statusBarHeight 20 , topMargin 20값이 모두 정상적으로 디버깅 툴에 출력됩니다. 그러나 화면상에 ui에 적용되지 않아요.일부로 const 에 넣어서 사용해봤고, margintTop과 top이 같이 있을경우 가끔 문제가 된다는 글을 봐서 아예 top에 값을 따로 추가하는 방식도 해보았습니다. 그리고 마지막으로 예제 코드를 그대로 가져와서 사용해보았지만 여전히 화면에서 적용이 되지 않습니다. 값이 찍히는 걸 보면 getStatusBarHeight가 동작하긴 하는건데 화면상에서 적용이 안되는 이유가 뭔지 알 수 있을까요?

안녕하세요 수업따라고 하고 있는중에,인터넷이 잘 연결되어 있는데 koreanjson.com 이 웹브라우저에서 열리지 않습니다.

30분 30초 패딩 넣었는데 a태그의 클릭가능한 범위가 늘어나나요? 줄어들어야 하는것아닌가요 크기를 키우려면 마진을 넣어야하는 것으로 알고있는데요 ㅠ.ㅠ 또한 강의에서 그 직후에 border를 표시해서 z태그들의 영역이 겹치는것을 말씀하시면서, 그 이유가 인라인 요소이기 때문이라고 말씀하셨는데요, 인라인 요소에 대해 제가 알고있는 것은, 블록요소와 다르게오른쪽으로(?) 쌓일 수 있다는 것만 알고있는데, 이것과 인라인요소가 겹치는 이유가 관련이 있는지, 아니면 제가 모르는 다른 무언가때문인지 어쨌든 인라인요소이기 때문에 겹친다 라는 표현이 이해가 안가네요. 감사합니다.

2.15)SSG 3. 동적경로에 적용하기 book/[id].tsx는 "도서 상세 페이지" 라고 가정하겠습니다. 도서를 생성하는 페이지도 있고 생성api도 있다고 가정해볼게요, 도서 생성페이지에서 도서 생성api 성공한 이후, 백엔드 서버로부터 새롭게 생성한 도서 id를 받았다고 가정하고, 도서 상세페이지로 이동 한다고 가정했을때이때, 강의에서 설정해주신 fallback의 값은 false이기 때문에 페이지를 찾을 수가 없는 것 일까요 ?

강의 마지막 부분에서 let 으로 count 선언 후, App.jsx에서 <Register/> 를 두 번 호출하면 같은 변수를 쓰면서 같은 Register 함수를 호출하는 것이라 하셨는데 useRef로 선언해도 같은 Register함수를 호출하는 것 아닌가요 ?useRef를 사용하면 const inputRef 로 선언해도 다른 객체로 인식 하는 건지 ..! 궁금합니다.

안녕하세요 이정한 강사님!강의를 듣다가npm run build 를 실행 할 때, 컴파일에 실패하면서 img 태그에서 오류가 나는 상황입니다. 구글링과 여기서 나오는 말에 의하면, next/image의 Image를 사용하라고 나와있습니다.  해당 내용으로 바꿔서 사용하니 이미지 태그에서 이미지가 제대로 나오지 않는 현상이 발생하고 있습니다. 기존 img 태그와 image의 태그의 차이가 무엇이고, 왜 이미지가 잘 안나오는 것 일까요?? 또, ESLint에 대한 규정을 build시 영향을 안받게 할 수는 없을까요??두가지 질문 답변해주시면 감사하겠습니다!!🚨 아래의 가이드라인을 꼭 읽고 질문을 올려주시기 바랍니다 🚨질문 하시기 전에 꼭 확인해주세요- 질문 전 구글에 먼저 검색해보세요 (답변을 기다리는 시간을 아낄 수 있습니다)- 코드에 오타가 없는지 면밀히 체크해보세요 (Date와 Data를 많이 헷갈리십니다)- 이전에 올린 질문에 달린 답변들에 꼭 반응해주세요 (질문에 대한 답변만 받으시고 쌩 가시면 속상해요 😢)질문 하실때 꼭 확인하세요- 제목만 보고도 무슨 문제가 있는지 대충 알 수 있도록 자세한 제목을 정해주세요 (단순 단어 X)- 질문의 배경정보를 제공해주세요 (이 문제가 언제 어떻게 발생했고 어디까지 시도해보셨는지)- 문제를 재현하도록 코드샌드박스나 깃허브 링크로 전달해주세요 (프로젝트 코드에서 문제가 발생할 경우)- 답변이 달렸다면 꼭 확인하고 반응을 남겨주세요- 강의의 몇 분 몇 초 관련 질문인지 알려주세요!- 서로 예의를 지키며 존중하는 문화를 만들어가요. - 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.

tailwind css가 편해보이기는 한데, 화면 코드의 많은 부분을 css 클래스로 차지하고 가독성을 헤치는것 같은데요.실무에서도 예제처럼 html 요소 인라인으로 하나하나 class를 넣어두나요?이러면 중복되는 코드도 많고 구조 파악도 어려울 것 같아서요 만약 html 디자이너가 따로 있을때는 tailwindcss를 사용하지 않나요?디자이너랑 협업할때는 css를 따로 만들어 줄것 같은데, 리액트 실무 환경에서 디자인 부분에 대해서 어떤식으로 협업하는지 궁금합니다.

$ npx supabase gen types typescript --project-id 'rirtnceyccxjlupupgxi' --schema public > types/supabase.ts 를 터미널에서 실행시 아래와 같이 error가 발생하고 있어요 ㅠㅠfailed to retrieve generated types: {"message":"Your account does not have the necessary privileges to access this endpoint. For more details, refer to our documentation https://inf.run/QdNfs"}

안녕하세요 강의 코드 중에 질문드립니다.상단 네비게이션바 코드 작성시Navbar.jsx 에서 노션에 올려주신 MenuItem 컴포넌트가 올바로 작동하지 않습니다. 다만, 찾아보니 '화살표 함수에서 중괄호를 사용하면 명시적으로 return문을 작성해야 JSX가 반환됩니다.' 라고 하는데...실제로 return 을 추가하면 실행이 됩니다.선생님 강의에서는 MenuItem 컴포넌트 선언시 retrun 명시를 안하신거 같은데 어떻게 개발서버에서 상단 네비바가 보여지나요..? (전 : 노션코드)const MenuItem = ({ path, label, onClick }) => ( <li> <Link to={path} className="hover:text-blue-600 transition duration-300" onClick={onClick} > {label} </Link> </li> ); (후-실행됨)const Menuitem = ({ path, label, onClick }) => { return ( <li> <Link to={path} className="hover:text-blue-600 transition duration-300" onClick={onClick} > {label} </Link> </li> ); };

강의 수강중인데 koreanjson.com 참고사이트가 사이트에 연결할 수 없음이라고 뜨네요 다른 방법이 있을까요?

Node.js 에서 ES 사용시, default 메서드를 import 하는 과정에서 오류가 생깁니다.강의 마지막 부분처럼 import를 한 줄로 선언해도 안되네요 ..

안녕하세요 현재 Tailwind CSS 강의 부분을 보고 있는데 강의에 나오는 테일윈드 사이트와 현재 테일윈드 사이트가 좀 다른거 같아 우선 강의에 나오는 설치 명령어로 하고 있는데 그 중에 npx tailwindcss init -p 이 명령어를 작성하니 아래 이미지처럼 에러가 계속 나더라구요. 어떤 부분이 잘못된건지 모르겠습니다.

2.2 강의를 들으면서 실습하려고 프로젝트를 실행했는데 npm run dev로 입력해도 서버가 열리지 않은 건지 경로로 들어가면 404: This page could not be found. 라고 화면에 띄어져 있습니다. 프로젝트 실행이 어려워 진도가 막혔는데 어떻게 해결해야 될까요...? ㅠㅠ 아래는 터미널에 출력된 글이고 처음에는 Ready in 2.7s 까지 작성되어 있다가 위의 Local 경로로 접속한 뒤에 컴파일 에러 문구가 출력되었습니다! 비슷한 오류가 있나 질문답변 글을 찾아봤을 때 .next 파일을 지우고 다시 실행하는 글을 발견하여 여러 차례 지우고 실행할 때는 아래 사진처럼 나왔습니다!!

안녕하세요, 수강중인 학생입니다.강사님께서 만들어주신 영상에서 대부분이 현재 기능이 바뀌어서 따로 하나하나 찾아가며 공부하고 있습니다. 때문에 많이 불편하다고 느낍니다. 특히 rules for ai는 한참을 찾다가 결제까지 했는데 알고보니 기능이 바뀌었더군요, 이 부분이라도 현재 어떻게 사용해야 하는지 알고싶습니다.!

혹시 app/_layout.tsx 파일에서 아래 부분 의미가 뭘까요...?  useEffect(() => { if (loaded) { SplashScreen.hideAsync(); } }, [loaded]); if (!loaded) { return null; }

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 섹션 9 실습에서setIsConfirmed((prevIsConfirmed) => !prevIsConfirmed); 로 setState 정의 했는데prevIsConfrimed라는 state는 어디에서 나온 건가요

강의수강중에 Pageable import 관련하여아래와 같은 Pageable을 선택하니까오류가 나오더라구요...type unmatch 형태//import java.awt.print.Pageable; springboot를 사용할 때는아래와 같은 org.springframework의 형태가import 우선순위가 되는것이 맞는건가요?import org.springframework.data.domain.Pageable;

해당 화면에서 강의와 비슷하게 검색기능을 누르거나 엔터키를 치면 search결과가 나오도록 코드를 짰는데, 에러도 나오지 않고 아무것도 나오지않아. 이리저리 해보다가 우선 문의를 남깁니다!파일 구조는 아래와 같습니다!index.tsximport SearchableLayout from "@/components/searchable-layout"; import { ReactNode } from "react"; export default function Home() { return <h1>ONEBITE CINEMA</h1>; } Home.getLayout = (page: ReactNode) => { return <SearchableLayout>{page}</SearchableLayout>; }; searchable-layout.tsximport { useRouter } from "next/router"; import React, { ReactNode, useEffect, useState } from "react"; import style from "./searchable-layout.module.css"; export default function SearchableLayout({ children, }: { children: ReactNode; }) { const router = useRouter(); const [search, setSearch] = useState(""); const q = router.query.q as string; useEffect(() => { setSearch(q || ""); }, [q]); const onSubmit = () => { router.push(`/search?q=${search}`); }; const onChangeSearch = (e: React.ChangeEvent<HTMLInputElement>) => { setSearch(e.target.value); }; // Enter 키 입력 이벤트 const onkeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => { if (e.key === "Enter") { onSubmit(); } }; return ( <div> <div className={style.searchbar_container}> <input value={search} onChange={onChangeSearch} placeholder="영화를 입력해주세요..." onKeyDown={onkeyDown} /> <button onClick={onSubmit}>검색</button> </div> {children} </div> ); }  global-layoutimport Link from "next/link"; import { ReactNode } from "react"; import style from "./global_layout.module.css"; export default function GlobalLayout({ children }: { children: ReactNode }) { return ( <div className={style.container}> <header className={style.header}> <Link href={"/"}>ONEBITE CINEMA</Link> </header> <main className={style.main}>{children}</main> </div> ); } search - index.tsximport SearchableLayout from "@/components/searchable-layout"; import { useRouter } from "next/router"; import { ReactNode } from "react"; export default function Page() { const router = useRouter(); const { q } = router.query; return <h1>검색결과 {q}</h1>; } Page.getLayout = (page: ReactNode) => { return <SearchableLayout>{page}</SearchableLayout>; };위와 같이 구성되어있고, 도저히 제가.. 찾지 못하여 문의드립니다 후.. 아마 input쪽이나 search.tsx에 문제가 있는거 같은데 좀 자괴감이 드네요.. 일어나서 다시한번 살펴볼 예정입니다! 다른분들 git도 궁금해서 봤는데 코드는 너무 똑같은데 대체 뭐가 다른 지 모르겠네요..   

안녕하세요, 강의 잘 보고 있습니다 😀FormControl 컴포넌트 사용시 htmlFor prop 값 넘길 때 문자열을 중괄호로 감싸서 넘기는데요, "label" prop의 값은 문자열을 그냥 전달하는데, htmlFor의 값은 문자열을 중괄호로 감싸서 전달하는 이유가 뭘까요 ? 그냥 문자열만 보내면 안되는건가요 ?