import { useState, useCallback } from "react"; import ThemeContext from "./ThemeContext"; import MainContent from "./MainContent"; function DarkOrLight(props) { const [theme, setTheme] = useState("light"); const toggleTheme = useCallback(() => { if (theme === "light") { setTheme("dark"); } else if (theme === "dark") { setTheme("light"); } }, [theme]); return ( <ThemeContext.Provider value={{ theme, toggleTheme }}> <MainContent /> </ThemeContext.Provider> ) } export default DarkOrLight;import React from "react"; const ThemeContext = React.createContext(); ThemeContext.displayName = "ThemeContext"; export default ThemeContext;MainContent가 ThemeContext의 하위 컴포넌트입니다.그러면 <ThemeContext.Provider> 안에 있는 <MainContent /> 컴포넌트는 ThemeContext.Provider 안의 props.children으로 간주될텐데 ThemeContext 에 {props.children}가 없어도 <MainContent />가 표시되는 이유가 궁금합니다. .privider메서드(메서드로 지칭하는게 맞나요...?ㅎ)를 사용하면 자동으로 하위 컴포넌트를 표시하는 기능(암묵적으로 {props.children}를 사용한다던지...)이 있는 건가요?

이미지 부분에 cctv 영상을 구현하고 싶은데,  혹시 .... api를 연동해서 어떻게 연결하면 되는지 알 수 있을까요?  

jQuery에서 '클릭한다'는 동작의 실행 코드로 맨 위에서는 focus를 사용했고, 아래에서는 click을 사용하신 것은 input에 사용할때와 아닐 때의 차이인 것인가요?

강사님의 영상 약 11분 10초 대를 보면 go live를 한 후 h1태그를 추가 한 후에 새로고침 하면 웹 창에서 추가된 h1이 보이는데 제가 하면 아래와 같은 오류가 뜨면서 추가되지 않습니다. 어떻게 하면 될까요?Live Reload is not possible without a head or body tag.

노션 링크가 어디있나요 ? 찾기가 어렵네요..

flex-basis에서 auto로 설정하는 것과 0으로 설정하는 것의 차이가 무엇인지 궁금합니다.따로 코드를 짜서 실행하면 autof로 설정했을 때와 0으로 설정했을 때 결과물이 똑같아서 차이가 궁금합니다.

expo를 global로 설치하고 init까지 한 후npm start를 했을 때 일단 아래처럼 에러가 발생합니다.Unable to find expo in this project - have you run yarn / npm install yet?-> 이건 npm install을 해서 해결 했습니다. 그런데 그 후에도 또 아래와 같은 에러가 발생합니다.PS D:\Programming\study\Inflearn\FullStack\project\grab-market-mobile> npm start> grab-market-mobile@1.0.0 start> expo startStarting project at D:\Programming\study\Inflearn\FullStack\project\grab-market-mobileStarting Metro BundlerFetchError: request to https://api.expo.dev/v2/sdks/49.0.0/native-modules failed, reason: self signed certificate in certificate chainFetchError: request to https://api.expo.dev/v2/sdks/49.0.0/native-modules failed, reason: self signed certificate in certificate chain at ClientRequest.<anonymous> (D:\Programming\study\Inflearn\FullStack\project\grab-market-mobile\node_modules\node-fetch\lib\index.js:1501:11) at ClientRequest.emit (node:events:513:28) at TLSSocket.socketErrorListener (node:_http_client:494:9) at TLSSocket.emit (node:events:513:28) at emitErrorNT (node:internal/streams/destroy:157:8) at emitErrorCloseNT (node:internal/streams/destroy:122:3) at processTicksAndRejections (node:internal/process/task_queues:83:21)이건 어떻게 해결해야 하나요?

입력란과 버튼의 크기를 배분하기 위해 flex를 사용할 때, 부모 요소는 반드시 display: flex를 사용해야 하는 것인가요? flex와 display:flex가 상관관계가 있는 것인지 궁금합니다.

spoqa han sans neo글씨체 다운받았는데 피그마 할 때 text밑에 fonts에서 no matching font로 나오네요.아예 검색자체가 안되는데 무슨 문제인가요??

안녕하세요.react-native-reanimated-carousel 사용 시,carousel의 prop으로 width를 정의했는데도,제목 처럼 "width must be speified for horizontal carousels" 오류가 발생합니다.어떻게 해결할 수 있을까요?? 강의 클론코딩 했는데, 위 오류에 앞서 "PanGestureHandler must be used as a descendant of GestureHandlerRootView" 오류가 발생했었는데, 인터넷 검색 결과로 <SafeAreaView> 바깥에 <GestureHandlerRootView> 선언하여 해결했는데, 이 영향도 일까요?? 코드 첨부합니다.import { StatusBar } from "expo-status-bar"; import { API_URL } from "./config/constant"; import avatarImg from "./assets/icons/avatar.png"; import React from "react"; import { StyleSheet, Text, View, Image, ScrollView, Dimensions, TouchableOpacity, Alert, SafeAreaView, } from "react-native"; import Carousel from "react-native-reanimated-carousel"; import { GestureHandlerRootView } from "react-native-gesture-handler"; import axios from "axios"; import dayjs from "dayjs"; import relativeTime from "dayjs/plugin/relativeTime"; import "dayjs/locale/ko"; dayjs.extend(relativeTime); dayjs.locale("ko"); export default function App() { const [products, setProducts] = React.useState([]); const [banners, setBanners] = React.useState([]); React.useEffect(() => { axios .get(`${API_URL}/products`) .then(function (result) { const products = result.data.products; setProducts(products); }) .catch(function (error) {}); axios .get(`${API_URL}/banners`) .then(function (result) { const banners = result.data.banners; setBanners(banners); }) .catch(function (error) {}); }, []); return ( <GestureHandlerRootView> <SafeAreaView style={styles.safeAreaView}> <View style={styles.container}> <ScrollView> <Carousel> data={banners} width={Dimensions.get("window").width} height={200} autoPlay={true} sliderWidth={Dimensions.get("window").width} itemWidth={Dimensions.get("window").width} itemHeight={200} renderItem= {(obj) => { retrun( <TouchableOpacity onPress={() => { Alert.alert("배너 클릭"); }} > <Image style={styles.bannerImage} source={{ uri: `${API_URL}/${obj.item.img_url}` }} /> </TouchableOpacity> ); }} </Carousel> <Text style={styles.headline}>판매되는 상품들</Text> <View style={styles.productList}> {products.map((product, index) => { return ( <View key={index} style={styles.productCard}> {product.status === "02" && ( <View style={styles.productBlur} /> )} <View> <Image style={styles.productImg} source={{ uri: `${API_URL}/${product.img_url}`, }} resizeMode={"contain"} /> </View> <View style={styles.productContents}> <Text style={styles.productName}>{product.name}</Text> <Text style={styles.productPrice}>{product.price}원</Text> <View style={styles.productFooter}> <View style={styles.productSeller}> <Image style={styles.productAvatar} source={avatarImg} /> <Text style={styles.productSellerName}> {product.seller} </Text> </View> <Text style={styles.productDate}> {dayjs(product.created_at).fromNow()} </Text> </View> </View> </View> ); })} </View> </ScrollView> </View> </SafeAreaView> </GestureHandlerRootView> ); } const styles = StyleSheet.create({ headline: { fontSize: 24, fontWeight: "800", marginTop: 10, marginBottom: 10, }, container: { flex: 1, backgroundColor: "#fff", paddingTop: 32, margin: 10, }, productCard: { width: "100%", borderColor: "rgb(230,230,230)", borderWidth: 1, borderRadius: 16, backgroundColor: "white", marginBottom: 10, }, productBlur: { position: "absolute", top: 0, bottom: 0, right: 0, left: 0, backgroundColor: "#ffffffaa", zIndex: 999, }, productImg: { width: "100%", height: 210, }, productContents: { padding: 8, }, productSeller: { flexDirection: "row", }, productAvatar: { width: 24, height: 24, }, productFooter: { flexDirection: "row", justifyContent: "space-between", alignItems: "center", marginTop: 12, }, productName: { fontSize: 14, }, productPrice: { fontSize: 16, fontWeight: "600", marginTop: 8, }, productSellerName: { fontSize: 14, }, productDate: { fontSize: 14, }, productList: { alignItems: "center", }, bannerImage: { width: "100%", height: 200, }, safeAreaView: { flex: 1, backgroundColor: "#fff", }, });

Contex가 하위 컴포넌트들에서 해당 변수에 바로 접근이 가능하게 만들어주는 것은 이해가 되었습니다.하지만 한 가지 의문점이 있습니다.저의 짧은 지식으로는 redux같은 전역 상태 관리 라이브러리를 이용하면 모든 컴포넌트가 접근할 수 있는 store라는 공간이 생기는 것으로 알고 있습니다. 그래서 redux를 사용한다면 contex는 굳이 사용할 필요가 없는 것으로 생각됩니다. redux같은 전역 상태 관리 라이브러리를 이용할 때에도 context를 사용하는 경우가 있는지 궁금합니다. 그리고 이전 질문에서 엄밀히 말하면 context가 상태 관리는 아니라고 하셨는데 상태 관리와 context의 차이점을 잘 모르겠습니다.. 간략하게나마 차이점을 설명들을 수 있을까요?

useRef() Hook의 다음 코드에서 질문이 있습니다.useRef는 DOM에 접근하기 위해 사용하는 Hook으로 이해하면 될까요?예시 코드에서 <input type="text" ref={inputElem} />inputElem을 해당 input태그에 접근하기 위해 useRef를 사용하는 것이 맞나요?useRef() Hook이 데이터 변경을 감지하지 못해서 HTML 코드에 있는 ref의 변경을 감지할 수 있는 useCallback() Hook을 대신 사용하는게 맞나요?그럼 useCallback을 useRef를 대체하여 사용가능한 건가요?

안녕하세요. 도형 만들어 지지 않아 질문 드립니다.사진 올리기, 색깔 등등 다른 것은 다 되는데 이상하게 border와 같은 테두리, 도형을 만들면 화면에 보이지 않습니다. 아래의 코드 방식으로 작성했을 때는 적용이 됩니다. 표기 방식만 다른 것인데 무엇이 문제인가요?

안녕하세요 선생님! 개인 포트폴리오 홈페이지 만들다 궁금한 점이 있어 여쭤봅니다 :)해당 강의에서 만든 작업물을 변형하여 개인 포트폴리오 홈페이지에 넣으려고 하는데Header랑 GNB 부분을 제이쿼리 load 메서드로 연결해서 그런지a태그로 모바일 웹 작업물을 연결하면 Header랑 GNB 부분이안 뜨더라구요ㅜㅜ혹시 이런 경우에는 어떻게 하면 되는 걸까요?항상 알차고 좋은 강의 감사합니다!

강의 영상에서는 .tabs에 relative, 100vh .items에 absolute top, left이렇게 강의 해주셨는데 제가 다르게도 한번 해보았습니다.이렇게 하니 코드가 조금이나마 짧은것 같아서요~ 동작은 똑같이 하는데 이렇게 해도 실무에 적용하는데 구조적으로 문제 없는지 궁금해서 질문 드려봅니다.항상 좋은강의 감사합니다 선생님!

.js로 아래와 같은 자바스크립트 파일을 작성했습니다. export function log(message) { console.log(message); } export function error(message) { console.error(message); }해당 자바스크립트 파일을 html에 삽입하기 위해 src에 넣고, type을 module로 지정했습니다. 후에 log함수를 이용하려고 아래 코드를 작성했는데,"Uncaught ReferenceError: log is not defined at 3-14.html:9:7" 이라고 에러가 납니다.<!DOCTYPE html> <html> <head> <title>Document</title> </head> <body> <script src="./scripts/3-13.Module.js" type="module"></script> <script> log("메세지 출력"); // Uncaught ReferenceError: log is not defined at 3-14.html:9:7 에러 출력 </script> </body> </html> 여기서 질문이 2가지가 있는데,위의 코드 에러를 해결하려면 어떻게 해야하나요?모듈을 삽입하는 방법으로 script 안에 type을 모듈로 정의하고 import를 통해 삽입하는 방법과, src에 자바스크립트를 사용하여 삽입하는 2가지 방법이 존재한다고 이해했습니다. 그럼 후자의 방법은 단순히 src만 입력해 해당 자바스크립트 안에 있는 모든 함수, 변수를 사용하는 방법을 말하는 걸로 이해하면 될까요?  답변주시면 감사하겠습니다.! 항상 강의 잘 듣고 있습니다. 좋은 강의 내주셔서 정말 감사합니다 . ㅎㅎ 😃

안녕하세요 마지막 프로젝트 진행시 오류때문에 질문남겨드립니다.  이러한 오류가 생기는데 해결방법을 잘 모르겟습니다 ㅠㅠ

  var i = 0; var fnc = setInterval(function () { if (i == 3) { clearInterval(fnc); } console.log("3초마다 프로그램 실행 - " + i); i++; }, 3000);i가 3일 때 setInterval를 중단하기 위해 해당 코드를 작성했습니다.i가 3일 경우에는 clearInterval에 의해 setInterval이 중단됐기 때문에아래 console.log("3초마다 프로그램 실행 - " + i)도 실행되지 않아콘솔창을 실행했을 때 "3초마다 프로그램 실행 - 2"까지만 나오고 멈출거라고 생각했는데,"3초마다 프로그램 실행 - 3"이 나와 왜 그런지 질문 드립니다.

 /* Goods Accordion */ $('.goods-accordion .detail').eq(0).show() $('.goods-accordion .title').click(function(){ $(this).toggleClass('active') $(this).next().toggle() $(this).siblings('.goods-accordion .title').removeClass('active') })상품문의에 클레스가 들어가서 상품후기에 있는 엑티브가 빠졌는데상품문의 밑에 디테일은 안접혀졌어요 (영상강의캡쳐)이렇게 적을경우에 .title부분은 class가 빠져서 시블링이 되는데 .detail 부분은 접었다 펴는 토글이라서 계속클릭하면 .title +,- 와 .detail의 이미지가 안맞는데 이런경우에는 어떻게 하나요 ㅠ?   

 안녕하세요. 강의를 듣고 있는 수강생입니다.초반 버튼을 만드는 과정에서 css가 인식이 안되는데 어떻게 해야할까요?