useLocalStorage()는 사용되지 않는데 수정까지 해서 남겨둔 이유가 있는 건가요?

useFormState initialState부분 타입스크립트 에러 질문입니다.message에 string이 와야한다고 에러가 뜨는데 이거를 string | null로 해주는 방법을 잘 모르겠습니다!const initialState: { message: string | null; } = { message: null, }; export default function SignupModal() { const [state, formAction] = useFormState(onSubmit, initialState); const { pending } = useFormStatus();일단 이런식으로 빼서 에러 없애긴하였는데 인라인으로는 못하나요?

안녕하세요.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", }, });

인피니티 스크롤로 페이지 방식으로 구현했을때 새로운 채팅 입력시 게시글이 1~50개까지 있을 때 처음 1~10번을 가져왔는데 새로운 게시글이 추가되어서 11~20번을 가져오는 게 아니라 12~21번을 가져오는 문제가 발생해서 어찌어찌 페이지로 해결을 해보려고 해도 방법이 떠오르지 않네요..이걸해결하려면 채팅서비스의 경우 lastId 방식을 사용할 수 밖에 없는지 궁금합니다. 

안녕하세요! 제로초님!항상 강의를 감사히 잘 보고있습니다! 다름이 아니라, 세션에 대한 질문이 있어 글을 올립니다. 첫번째 질문입니다! 현재 클라이언트(브라우저)에서 로그인 요청 시, auth.js를 사용해서 프론트측 세션을 생성하고, 그것을 통해서 클라이언트의 로그인 상태에 대한 분기 기준으로 사용하고 있고, 백엔드에서도 API 허가를 위한 세션을 받아 connect.sid 라는 쿠키를 생성하여 총 2개의 쿠키를 이용하고 있습니다.제가 궁금한 것은 현재 2개로 나누어진 세션을 백엔드에서 주는 세션으로 생성한 쿠키 1개만 사용해도 되지 않을까? 라는 생각이 들었는데, 각각 따로따로 세션을 생성해서 처리하는 이유가 궁금합니다.혹시 프론트엔드 입장에서 next-auth (auth.js)가 제공해주는 기능(CSRF, useSession, signin 등의 메서드... )들이 편리해서, 이것을 사용하신것이고 강의에서 언급하신대로 백엔드 세션과 통합하는 과정이 아직 불완전하여 따로 둔 상태로 둔 것이며, 만약 next-auth가 주는 장점이 굳이 없었다면 처음부터 백엔드 세션 1개를 이용해서 로그인 과정을 구현했을 것 이다. 라고 제가 감히 예상을 해도 될까요.. ? 🤔 두번째 질문입니다.[재게시, 답글기능 zustand로 만들어보기] 강의 17분 40초 부근에서 queryClient.getQueryData 보다 getQueryCache를 사용하는게 더 정확하다라고 말씀하셨는데 그 이유가 궁금합니다!

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를 대체하여 사용가능한 건가요?

로그인모달을 패러랠 라우트 방식으로 구현하는 과정에서default.tsx 강의 타임라인 0:34에서app/(beforeLogin)/@modal 폴더에 있던 page.tsx와 login.module.css파일을 복사해서app/(beforeLogin)/i/flow/login로 디렉터리를 만들어서 거기에다가 page.tsx와 login.module.css파일로 넣으셨는데요.URL이 http://localhost:3000/i/flow/login이면@modal 하위에도 그 url 경로대로 폴더 구조를 맞춰서 넣어줘야 하는 것이죠?  패러랠방식에 대해서 아직 감이 안잡힙니다. (beforeLogin)폴더 자식으로 @modal폴더와 layout.tsx에 가 있고 laytout.tsx에서 modal을 props로 가져옵니다.그럼 그 modal이라고 이름지은 것은 같은 뎁스에 있는 "@자기이름"인 @modal을 탐색해서 가져오는건가요? import { ReactNode } from "react"; import styles from "@/app/page.module.css"; type Props = { children: ReactNode; modal: ReactNode; }; export default async function BeforeLoginLayout({ children, modal }: Props) { return ( <div> <div className={styles.container}> {children} {modal} </div> </div> ); } 

안녕하세요. 현재 섹션 3 수강 중인 수강생입니다. todo App을 만들고 있는데, X 버튼 구현하는 부분에서 onClick 이벤트 발생 시 작동하는 함수를 삽입해주는 부분인데요.onClick => {handleClick(data.id)}이렇게 입력하니 웹페이지가 제대로 동작하지 않고, 아래처럼 화살표 함수로 바꿔주니 정상적으로 동작합니다.<button onClick={() => handleClick(data.id)}> x </button>찾아보니 함수명으로 넣어주는 경우는 렌더링 시 함수가 바로 실행되고 click 이벤트 발생 시엔 함수의 반환값이 중괄호 안에 들어간다고 하고, 화살표 함수로 넣어줄 경우 의도한대로 click이벤트 발생 시에 함수가 실행된다는 걸 알게됐는데요, 이런 부분은 리액트 동작 원리 상 이렇게 되는거니 그냥 받아들이면 될까요? 아니면 제가 js 문법에 대해 이해가 부족해서 이해가 안가는 걸까요...?추가적으로, 그렇다면 리액트에서 이벤트리스너 함수를 넣을 때는 무조건 화살표 함수로 넣는게 맞는건가요?

아이콘...등을 직접만든 이미지로 적용해보려 합니다.프로젝트 루트폴더에 resource폴더 생성 후 여기에 이미지파일을 넣고 상대경로로 지정하거나 public폴더 생성 후 process.env.PUBLIC_URL로 불러오는 등의 방식을 써봤는데 정적리소스를 불러오지 못하네요.  webpack.config.ts의devServer에 static: { directory: path.resolve(__dirname) }는 추가 되어있습니다.

안녕하세요. 강의 재밌게 잘 듣고 있습니다.강의를 듣다 궁금증이 생겨 질문 남깁니다. store.getKeywordList() 메서드를 사용해서 keywordList를 storage에서 가져오는 작업을 componentDidMount에서 하셨는데,main.js의 search 메서드에서 submit이 발생했을 때, store에서 searchResult를 가져오는 것처럼keyword tab을 클릭했을 때 keywordList를 가져오는 방식으로 작성하지 않고 componentDidMount를 사용하신 이유가 궁금합니다.  아래와 같이 onClick과 핸들러를 사용하여 작성해도 정상적으로 동작하는 것처럼 보이는 것을 확인했습니다. handleTabClick(tabType) { if (tabType == TabType.KEYWORD) { const keywordList = store.getKeywordList(); this.setState({ keywordList }); } } ... const tabs = ( <> <ul className="tabs"> {Object.values(TabType).map((tabType) => { return ( <li className={tabType === this.state.selectedTab ? "active" : ""} key={tabType} onClick={() => { this.setState({ selectedTab: tabType }) handleTabClick(tabType)}} > {TabLabel[tabType]} </li> ); })} </ul> {this.state.selectedTab === TabType.KEYWORD && keywordList} {this.state.selectedTab === TabType.HISTORY && historyList} </> );

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

게시하기 버튼 클릭하면 인터셉팅 라우트가 되지 않네요 ㅜ회원가입, 로그인에서는 인터셉팅 라우트가 잘 됬었는데 왜이러는걸까요?.. 아직 넥스트가 불안정 한건지.. 검색해도 잘 안나오네요..

안녕하세요, 수업 잘 듣고 있습니다. 79번째 줄 weatherSearch라는 function에 postion이 매개변수로 들어가는 이유가 잘 이해가 안 됩니다.만약, postion 대신 87번째 줄의 positionObj가 매개변수로 들어 가면 어떻게 되나요? 아직 매개변수 자체의 개념이 약한 것 같은데 좀 더 이해할 수 있게 도와주시면 감사하겠습니다! 

https://www.inflearn.com/questions/1092347/types-ts-%ED%8C%8C%EC%9D%BC%EC%9D%B4-%EC%95%88%EC%83%9D%EA%B9%81%EB%8B%88%EB%8B%A4%E3%85%A0%E3%85%9C-ai-%EB%8B%B5%EB%B3%80%EC%97%90%EB%8F%84-%EB%AF%B8%ED%95%B4%EA%B2%B0-%EC%A4%91%EC%9E%85%EB%8B%88%EB%8B%A4%E3%85%A0%E3%85%A0%E3%85%A0 위의 글을 올렸었는데 해결이 아직 안되어 차라리 건너뛰고 마이웨이를 해야 하는 부분인지 여쭤봅니다... 거의 일주일 째 진도를 못나가고 있습니다ㅠㅜ

섹션1까지 들은 수강생입니다 🙂 프로젝트 실행시 아래와같은 에러가 나오는데요..어떻게 해결해야할지 ㅠㅠFetchError: request to https://fonts.gstatic.com/s/inter/v13/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2pL7W0Q5n-wU.woff2 failed, reason: self-signed certificate in certificate chain at ClientRequest.<anonymous> (C:\simjieun\study\next.js\twitter_clone_nextjs\node_modules\next\dist\compiled\node-fetch\index.js:1:65756) at ClientRequest.emit (node:events:514:28) at TLSSocket.socketErrorListener (node:_http_client:501:9) at TLSSocket.emit (node:events:514:28) at emitErrorNT (node:internal/streams/destroy:151:8) at emitErrorCloseNT (node:internal/streams/destroy:116:3) at process.processTicksAndRejections (node:internal/process/task_queues:82:21) { type: 'system', errno: 'SELF_SIGNED_CERT_IN_CHAIN', code: 'SELF_SIGNED_CERT_IN_CHAIN' } ⨯ Failed to download `Inter` from Google Fonts. Using fallback font instead. Failed to fetch `Inter` from Google Fonts.} FetchError: request to https://fonts.gstatic.com/s/inter/v13/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1pL7W0Q5n-wU.woff2 failed, reason: self-signed certificate in certificate chain at ClientRequest.<anonymous> (C:\simjieun\study\next.js\twitter_clone_nextjs\node_modules\next\dist\compiled\node-fetch\index.js:1:65756) at ClientRequest.emit (node:events:514:28) at TLSSocket.socketErrorListener (node:_http_client:501:9) at TLSSocket.emit (node:events:514:28) at emitErrorNT (node:internal/streams/destroy:151:8) at emitErrorCloseNT (node:internal/streams/destroy:116:3) at process.processTicksAndRejections (node:internal/process/task_queues:82:21) { type: 'system', errno: 'SELF_SIGNED_CERT_IN_CHAIN', code: 'SELF_SIGNED_CERT_IN_CHAIN' } ....

for(var i = 0; i < names.length; i++) { var name = names[i] console.log(name); }에서 var name = names[i] 에서 i가 0 임으로 0 값부터 시작한다고 이해 했는데 i 가 아니라 1 을 넣으니까 철수만 3번 반복 되더라구요 i를 넣음으로써 어떻게 순차적으로 진행되는건지 궁금합니다

firebase 연동 후 client와 server 실행하여 구동 중 오류 발생하여 질문 드립니다.해당 에러를 찾아보니까 'createdAt' 필드를 중복으로 사용하고 있다고 GET_PRODUCTS 쿼리에서 'createdAt' 삭제하여도 역시 그대롭니다.server/src/resolvers/product.ts강의에 설명해주신 기존 코드대로 짜니까"'QueryStartAtConstraint' 형식의 인수는 'QueryOrderByConstraint' 형식의 매개 변수에 할당될 수 없습니다. 'type' 속성의 형식이 호환되지 않습니다. '"startAt" | "startAfter"' 형식은 '"orderBy"' 형식에 할당할 수 없습니다. '"startAt"' 형식은 '"orderBy"' 형식에 할당할 수 없습니다." 라는 에러가 떠서 주석 처리를 하고 수정을 하였는데 인터넷 검색해서 이것저것 고친거라 정확한건지 모르겠네요.장바구니 삭제 에러quertClient.ts 기존 코드에서 에러로 인해 수정했습니다.추가적으로 영상에 설명하신 코드와 현재 설치 버전 호환에 차이가 많아 오류가 생겨 수정해주었습니다client/src/components/cart/item.tsx // 기존 코드 const queryClient = getClient() const { mutate: updateCart } = useMutation( ({ id, amount }: { id: string; amount: number }) => graphqlFetcher(UPDATE_CART, { id, amount }), // 수정 const queryClient = getClient() const { mutate: updateCart } = useMutation<{ updateCart: CartType }, unknown, { id: string; amount: number }>( ({ id, amount }) => graphqlFetcher(UPDATE_CART, { id, amount }),client/src/pages/products/[id].tsx // 기존 코드 const { data } = useQuery<{ product: Product }>([QueryKeys.PRODUCTS, id], () => graphqlFetcher(GET_PRODUCT, { id }), ) // 수정 const { data } = useQuery<{ product: Product }>( [QueryKeys.PRODUCTS, id], () => graphqlFetcher(GET_PRODUCT, { id }), { select: (data) => data as { product: Product }, // 선택적으로 타입 캐스팅 } );위 코드들 외에도 수정한 부분이 여러군대인데 잘못된 코드 수정으로 인하여 오류가 발생하는 것인지 궁금합니다.

AWS 가입시 신용카드가 필수로 필요한것 같은데 가입이안되면 다른 배포방법이 있을까요?지금 닷홈에 호스팅 결제되있고 파일질라로 HTML파일 배포중인데 리액트도 빌드해서 파일질라 올리면 배포가 가능할까요?

41 수정 페이지 폼 1하는데막혀서 진도를 못나가고 있습니다. BlogForm.js const {id} = useParams(); useEffect((id) => { axios.get(`http://localhost:3001/posts/${id}`).then(res =>{ console.log(res) setTitle(res.data.title); setBody(res.data.body); }) }, [id]);강의대로 넣었는데폼입력 페이지에서 아래와 같은 에러가 뜹니다. axios가 문제인건가요?서버는 재기동해도 이상없는거 같습니다.ListPage.js(/blogs) 폴더내의 리스트와ShowPage.js(/blogs/1)는 정상적으로 보입니다.