터미널에서 npm install -g create-react-app 작성 후에아래와 같은 메세지가 뜹니다.이럴 경우 어떻게 해야 하나요??adminui-MacBook-Pro:grab-market-web admin$ npm install -g create-react-appnpm warn deprecated inflight@1.0.6: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.npm warn deprecated fstream-ignore@1.0.5: This package is no longer supported.npm warn deprecated uid-number@0.0.6: This package is no longer supported.npm warn deprecated rimraf@2.7.1: Rimraf versions prior to v4 are no longer supportednpm warn deprecated glob@7.2.3: Glob versions prior to v9 are no longer supportednpm warn deprecated fstream@1.0.12: This package is no longer supported.npm warn deprecated tar@2.2.2: This version of tar is no longer supported, and will not receive security updates. Please upgrade asap.changed 64 packages in 968ms4 packages are looking for funding run npm fund for detailsadminui-MacBook-Pro:grab-market-web admin$

id와 같이 사용하지 않는 객체를 생성했을 경우 빌드가 진행되지 않습니다. 정환쌤 같은경우 빌드를 하실때 저렇게 //를 하지 않아도 잘 빌드가 가능한데, 저는 에러가 발생하네요.제가 설정과정을 놓친걸까요?

loading.tsx나 Suspense를 사용했을 때, Next의 Streaming이 동작하여 병렬적으로 미리 준비된 컴포넌트는 사용자의 브라우저에서 먼저 보이게 되고, fetch가 완료된 이후에 서버에서 데이터를 클라이언트로 보내줘서 사용자가 보이는걸로 알고 있습니다.하지만, 개발자 도구 Network 탭을 확인해본결과 새로고침을 하였을 때, loading.tsx나 Suspense를 사용을 모두 빼고서 prefetchQuery와 HydrationBoundary, useQuery만을 사용했을 시 Streaming 동작 방식처럼 fetch문 실행이 완료되기 전에 미리 NavMenu나 글자 같이 정적인 요소들이 fetch가 끝나기 전에 이미 브라우저에 도착해있는걸 확인하였습니다.하지만, 딱 한가지 다른 점은 후자 같은 경우는 정적인 컴포넌트가 브라우저에 도착했음에도 화면에 보이질 않고, 전자 같은 경우는 로딩창이나 다른 정적인 요소들은 이미 화면에 미리 보입니다.그렇다면, Next 15 공식문서에 있는 fetch 실행이 끝날때까지 HTML 파일을 서버 사이드에서 렌더링 하는 것이 Blocking 된다는 논리가 이해가 되질 않습니다. (https://nextjs.org/docs/app/building-your-application/routing/loading-ui-and-streaming)위의 코드는 /home의 추천탭을 기준으로 확인하였습니다.이러한 현상이 발생하는 원인이 무엇인지 알 수 있을까요?

이슈 함수: deleteMemo이슈 흐름: "+" 버튼 클릭, 새로운 메모 아이템(Untitled)생성 → memo 2 삭제 → memo 1 삭제이슈 내용: Untitled 메모 아이템이 있음에도 "메모가 없습니다" 로 처리됨.이유: 삭제 시 배열의 길이가 달라지면서 index 에 영향이가는데 selectedMemoIndex 값은 그에 따라 변하지 않아서단순히 index === selectedMemoIndex 의 조건문으로 만족하지 않음.해결방법: 삭제 시 selectedMemoIndex 에도 새로운 값을 넣어줘야함.저는 아래와 같이 해결했습니다.if (index > selectedMemoIndex) {setSelectedMemoIndex(selectedMemoIndex + 1);} else if (index < selectedMemoIndex) {setSelectedMemoIndex(selectedMemoIndex - 1);} else if (index === selectedMemoIndex) {setSelectedMemoIndex(0);}

실습 링크 들어가니깐 안됩니다.. 새로운 링크 알려주세요

  해결했습니다

안녕하세요.강의 잘 시청중입니다. 진행 하고있던 도중 궁금한게 생겼습니다. 섹션2 - 로그인 모달에서 발생하는 문제 해결하기(router.replace) 4:06 경에 개발자 도구쪽을 보면 x개수가 빠르게 늘어나는것을 보실 수 있을텐데,제 기준에서는 저 때 무한 새로고침이 되고있더라구요. next.js콘솔에서는 GET 요청으로 /i/flow/login이 계속 되고있고 제가 직접 새로고침을 하거나 페이지를 벗어나면 멈추는데, 저 뒤로 강의 내용에 맞게 useRouter를 사용하면 문제는 없지만 저런 현상이 벌어진 이유가 궁금합니다. 혼자서 이것저것 바꿔가면서 해봤는데 /login -> redirect -> (인터셉팅 라우트)/i/flow/login 형태만 되면 계속 새로고침 되는 이유를 도무지 모르겠는데 원인이 너무 궁금해요

npx eas build --platform android --profile development위의 명령을 치면...장시간 build 작업후에 도스창 같은 것이 2개 뜨다가 오류가 납니다. 그래서 휴대폰 창이 뜨지 않습니다.어떤 상황 일까요?  

풀 라우트 캐시가 이루어지는 과정을 잘 이해 했는지에 대한 질문이에요!서버 컴포넌트 이면서 static page일 경우, 빌드 타임에 사전 렌더링 후 결과를 풀 라우트 캐시에 저장한다.추가 요청시 풀 라우트 캐시에 저장된 페이지를 바로 렌더링한다. 클라이언트 컴포넌트, dynamic page일 경우 빌드 타임이 아닌 서버에서 사전 렌더링을 진행한다. 추가 요청 시 다시 사전 렌더링한 후 페이지를 렌더링한다.추가로 풀 라우트 캐시 2 강의에서 Searchbar 컴포넌트는 useSearchParams 사용하고 있는데, 클라이언트 컴포넌트이면서 동적함수를 쓰고 있어서 dynamic page에 해당되는걸로 알고있어요. 근데 빌드 타임에 걸리는 이유가 무엇인가요? useSearchParams 같은 경우는 예외적인 걸로 봐야되는 걸까요? 🚨 아래의 가이드라인을 꼭 읽고 질문을 올려주시기 바랍니다 🚨질문 하시기 전에 꼭 확인해주세요- 질문 전 구글에 먼저 검색해보세요 (답변을 기다리는 시간을 아낄 수 있습니다)- 코드에 오타가 없는지 면밀히 체크해보세요 (Date와 Data를 많이 헷갈리십니다)- 이전에 올린 질문에 달린 답변들에 꼭 반응해주세요 (질문에 대한 답변만 받으시고 쌩 가시면 속상해요 😢)질문 하실때 꼭 확인하세요- 제목만 보고도 무슨 문제가 있는지 대충 알 수 있도록 자세한 제목을 정해주세요 (단순 단어 X)- 질문의 배경정보를 제공해주세요 (이 문제가 언제 어떻게 발생했고 어디까지 시도해보셨는지)- 문제를 재현하도록 코드샌드박스나 깃허브 링크로 전달해주세요 (프로젝트 코드에서 문제가 발생할 경우)- 답변이 달렸다면 꼭 확인하고 반응을 남겨주세요- 강의의 몇 분 몇 초 관련 질문인지 알려주세요!- 서로 예의를 지키며 존중하는 문화를 만들어가요. - 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.

강사님께서 map으로 출력하시던데 2-4 반복문 강의처럼 배열로 넣어서 출력을 해보고싶었는데 출력이 세로로만 나오거나 가로로만 한줄로 나오던데 줄바꿈을 어떻게 줘야하는건지 궁금해서 작성해봅니다. 

투두 리스트 작성 앱 개발에서 다음과 같이 콜백함수에 중괄호를 사용하니 제대로 동작하지 않더군요. 그래서 중괄호를 제거하니 올바르게 작동하는데, 통상적으로는 중괄호를 사용해야 하잖아요. 중괄호를 사용할 때 왜 제대로 작동하지 않는지 그 이유가 궁금합니다. 아래 코드에서 첫 번째 코드는 제대로 동작하지 않는 코드이고, 두 번째 코드는 제대로 동작하는 코드입니다. (아래 코드에서 todos.filter 메서드에 주목해 주세요.) const getFilteredData = () => { if(search === "") { return todos; } return todos.filter((todo) => { todo.content.includes(search) }); } const getFilteredData = () => { if(search === "") { return todos; } return todos.filter((todo) => todo.content.includes(search) ); }

안녕하세요! 강의 수강 중 헷갈리는 게 있어 질문 드립니다!!다름이아니라, 강의 초반에 프로필 페이지가 SSR인 것과 prefetchQuery를 사용하는 것에 이해를 했는데, 왜 하위 컴포넌트인 UserInfo에서 다시 userQuery를 통해 데이터를 가져오는지 모르겠습니다!서버사이드 환경인 page.tsx에서 데이터를 가져오기 위해 PrefetchQuery를 사용하는 것으로 알고있는데, 그렇다면 UserInfo에서 useQuery를 통해 데이터를 가져오는 것이 아닌 데이터를 props로 넘겨줄 수 있는게 아닌가 싶습니다!혹시 최상위 page에서 prefetchQuery를 통해 데이터를 먼저 가져와야 그 하위 컴포넌트들 내부의 클라이언트 컴포넌트에서 useQuery를 통해 데이터를 가져올 수 있는건가요?그렇다면 prefetchQuery없이 클라이언트 컴포넌트에서 userQuery만 사용해도 되나요?

메인화면에서 SSR로 데이터를 받아오도록 구현한 상태입니다. (page router)데이터가 많아서인지 페이지 접속 시 빈 화면이 출력되는데,스켈레톤 UI를 적용해봐도 스켈레톤 UI가 표시되지 않습니다.스켈레톤 UI는 CSR 환경에서만 사용할 수 있는 걸까요?이런 경우에는 데이터를 CSR로 받아오고, 스켈레톤 UI를 적용하는 게 나을까요?

실습과장에서 중단점을 클릭 했고 디버그 했는데 중단점에서 멈추지 않고 텍스트 찍어준다면 어떤 문제가 있는 것 일까요. 구글링 해도 정확한 해답을 찾지 못해 이렇게 질문을 남기게 되었습니다.

저도 이전에 미리 구매해놓고 공부하려는데 뒤늦게 확인했습니다.리뉴얼된 버전으로 공부하고 싶은데, 쿠폰을 발급받을 수 있을까요?

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요  안녕하세요 버튼이 안 떠서 질문드립니다 오타는 없는 것 같은데 버튼이 안 나오네요    

import './App.css' import Header from './components/Header'; import Editor from './components/Editor'; import { useState, useRef,useReducer } from 'react'; import List from './components/List'; const mockData=[ { id:0, isDone: false, content : "React 공부하기", date: new Date().getTime(), }, { id:1, isDone: false, content : "빨래하기", date: new Date().getTime(), }, { id:2, isDone: false, content : "노래 연습하기", date: new Date().getTime(), }, ]; function reducer(state,action){ switch(action.type){ case 'CREATE': return [action.data, ...state]; case 'UPDATE': return state.map((item)=>item.id===action.targetId?{...item, isDone: !item.isDone}:item); case "DELETE": return state.filter((item)=>item.id !==action.targetId); default: return state; } } function App() { // const [todos,setTodos]=useState(mockData); const [todos,dispatch]=useReducer(reducer,mockData); const idRef=useRef(3); const onCreate=(content)=>{ dispatch({ type:"CREATE", data:{ id:idRef.cureent ++, isDone:false, content: content, date: new Date().getTime(), }, }); }; const onUpdate=(targetId)=>{ dispatch({ type:"UPDATE", targetId:targetId }) }; const onDelete=(targetId)=>{ dispatch({ type:"DELETE", targetId:targetId }); }; return ( <div className="App"> <Header /> <Editor onCreate={onCreate} /> <List todos={todos} onUpdate={onUpdate} onDelete={onDelete} /> </div> ); } export default App 강의 10.2를 보던 중 '123'을 리스트에 추가하고 체크박스를 누르는 과정에서 체크박스와 삭제 버튼이 작동하지 않습니다. 기존에 있던 리스트들은 체크와 삭제가 다 되는데 추가된 리스트에 대해서만 작동하지 않는데 틀린 부분이 있는지 궁금합니다.

 수정페이지에서 수정하기 버튼을 누르면 네트웨크에 이런 에러가 떠요미리보기{ "errors": [ { "message": "Unknown type \"Sting\". Did you mean \"String\" or \"Int\"?", "locations": [ { "line": 1, "column": 67 } ], "extensions": { "code": "GRAPHQL_VALIDATION_FAILED", "exception": { "stacktrace": [ "GraphQLError: Unknown type \"Sting\". Did you mean \"String\" or \"Int\"?", " at Object.NamedType (/frontend-api-example/node_modules/graphql/validation/rules/KnownTypeNamesRule.js:57:29)", " at Object.enter (/frontend-api-example/node_modules/graphql/language/visitor.js:323:29)", " at Object.enter (/frontend-api-example/node_modules/graphql/utilities/TypeInfo.js:370:25)", " at visit (/frontend-api-example/node_modules/graphql/language/visitor.js:243:26)", " at Object.validate (/frontend-api-example/node_modules/graphql/validation/validate.js:69:24)", " at validate (/frontend-api-example/node_modules/apollo-server-core/src/requestPipeline.ts:536:14)", " at Object.<anonymous> (/frontend-api-example/node_modules/apollo-server-core/src/requestPipeline.ts:302:32)", " at Generator.next (<anonymous>)", " at fulfilled (/frontend-api-example/node_modules/apollo-server-core/dist/requestPipeline.js:5:58)", " at processTicksAndRejections (node:internal/process/task_queues:105:5)" ] } } } ]}페이로드    09-03-boards/ [number] 페이지 코드 입니다"use client"; //상세 import { useParams } from "next/navigation"; import { gql, useQuery } from "@apollo/client"; import Link from "next/link"; const FETCH_BOARD = gql` query fetchBoard($mynumber: Int) { fetchBoard(number: $mynumber) { number writer title contents } } `; export default function BoardsDetailPage() { const params = useParams(); //useQuery는 중괄호, uesMutation은 대괄호 const { data } = useQuery(FETCH_BOARD, { variables: { mynumber: Number(params.number) }, }); console.log(data); return ( <div> <div> {Number(params.number)}번 게시글 상세페이지 이동이 완료되었습니다. </div> <div>작성자: {data?.fetchBoard?.writer}</div> <div>제목: {data?.fetchBoard?.title}</div> <div>내용: {data?.fetchBoard?.contents}</div> <Link href={`/section09/09-03-boards/${params.number}/edit`}> 수정하러가기 </Link> </div> ); }  09-03-boards-write 코드 입니다"use client"; import { useMutation, gql } from "@apollo/client"; import { useState } from "react"; import { useParams, useRouter } from "next/navigation"; const 나의그래프큐엘셋팅 = gql` # 타입적는곳 mutation createBoard( $mywriter: String $mytitle: String $mycontents: String ) { # 전달할 변수 적는 곳 createBoard(writer: $mywriter, title: $mytitle, contents: $mycontents) { _id number message } } `; //수정 const UPDATE_BOARD = gql` mutation updateBoard( $mynumber: Int $mywriter: String $mytitle: Sting $mycontents: String ) { updateBoard( number: $mynumber writer: $mywriter title: $mytitle contents: $mycontents ) { _id number message } } `; export default function BoardsWrite(props) { const router = useRouter(); const params = useParams(); console.log(params.number); const [writer, setWriter] = useState(""); const [title, setTitle] = useState(""); const [contents, setContents] = useState(""); const [나의함수] = useMutation(나의그래프큐엘셋팅); //수정 const [updateBoard] = useMutation(UPDATE_BOARD); //등록 const onClickSubmit = async () => { //여기서 그래프큐엘 요청하기 const result = await 나의함수({ //variables 이게 $역할을 함 variables: { mywriter: writer, mytitle: title, mycontents: contents, }, }); console.log(result); alert("등록이 완료되었습니다."); router.push(`/section09/09-03-boards/${result.data.createBoard.number}`); }; //수정 const onClickUpdate = async () => { //여기서 수정하기 하자!! const result = await updateBoard({ variables: { mynumber: Number(params.number), mywriter: writer, mytitle: title, mycontents: contents, }, }); console.log(result); alert("수정이 완료되었습니다."); router.push(`/section09/09-03-boards/${result.data.updateBoard.number}`); }; const onChangeWriter = (event) => { setWriter(event.target.value); }; const onChangeTitle = (event) => { setTitle(event.target.value); }; const onChangeContents = (event) => { setContents(event.target.value); }; return ( <div> 작성자: <input type="text" onChange={onChangeWriter} /> <br /> 제목: <input type="text" onChange={onChangeTitle} /> <br /> 내용: <input type="text" onChange={onChangeContents} /> <br /> <button onClick={props.isEdit ? onClickUpdate : onClickSubmit}> {props.isEdit ? "수정" : "등록"}하기 </button> </div> ); }

  타입 포함된 버전을 설치한 후에도 타입에러가 계속 생기는데버전이슈일까요.."dependencies": { "@ant-design/icons": "^5.5.2", "@apollo/client": "^3.11.9", "@emotion/react": "^11.13.3", "@emotion/styled": "^11.13.0", "antd": "^5.21.6", "axios": "^1.7.7", "graphql": "^16.9.0", "lodash": "^4.17.21", "next": "12.1.0", "react": "17.0.2", "react-daum-postcode": "^3.2.0", "react-dom": "17.0.2", "react-infinite-scroller": "^1.2.6", "ts-node": "^10.9.2" }, "devDependencies": { "@eslint/js": "^9.18.0", "@graphql-codegen/cli": "^5.0.3", "@graphql-codegen/typescript": "^4.1.2", "@types/node": "17.0.2", "@types/react": "17.0.2", "@types/react-infinite-scroller": "^1.2.5", "eslint": "^9.18.0", "eslint-config-next": "15.1.4", "eslint-config-prettier": "^10.0.1", "eslint-plugin-prettier": "^5.2.1", "eslint-plugin-react": "^7.37.4", "globals": "^15.14.0", "prettier": "^3.4.2", "typescript": "^5.7.3", "typescript-eslint": "^8.20.0""react-infinite-scroller": "^1.2.6", 이고"@types/react-infinite-scroller": "^1.2.5", 로 되어있습니다.++ return ( <div style={{ height: '700px', overflow: 'auto' }}> <InfiniteScroll pageStart={0} loadMore={onLoadMore} hasMore={hasMorePosts} loader={ <div className='loader' key='loader'> Loading... </div> } useWindow={false} > {data?.fetchBoards?.map((el) => el ? ( <div key={el._id}> <span style={{ margin: '10px' }}>{el.title}</span> <span style={{ margin: '10px' }}>{el.writer}</span> </div> ) : null, ) ?? []} </InfiniteScroll> </div> );1. InfiniteScroll 'InfiniteScroll' cannot be used as a JSX component. Its instance type 'InfiniteScroll' is not a valid JSX element. Property 'refs' is missing in type 'InfiniteScroll' but required in type 'ElementClass' 3. loader Type 'Element' is not assignable to type ReactElement<unknown, string | JSXElementConstructor<any>> Types of property 'key' are incompatible. TYpe 'Key | null' is not assignable to type 'string | null'. Type 'number' is not assignable to type 'string'. 4. {data?.~</div>;})} Type 'void[] | undefined' is not assignable to type 'ReactNode'.2. {data?.~</div>;})}Type 'void[] | undefined' is not assignable to type 'ReactNode'. (이하 생략)이런 에러였었는데,상단에 타입선언 해주고 모두 해결 되었습니다.import React, { ReactElement } from 'react'; declare module 'react-infinite-scroller' { interface InfiniteScrollProps { pageStart?: number; loadMore: () => void; hasMore?: boolean; loader?: ReactElement | null; useWindow?: boolean; children?: React.ReactNode; } export default function InfiniteScroll(props: InfiniteScrollProps): ReactElement; }모듈이 덜 설치된건지 ㅠㅠ 왜 이런 에러가 생긴지 모르겠네요 ㅠㅠ 

 import { Pressable, StyleSheet, Text, View } from 'react-native' import React from 'react' import CheckboxUnChecked from '../assets/checkbox-unchecked.svg'; import CheckboxChecked from '../assets/checkbox-checked.svg'; import DeleteIcon from '../assets/delete.svg'; const TodoItem = () => { return ( <View style={styles.itemContainer}> <Pressable hitSlop={10} style={styles.itemTextChecked} > <CheckboxUnChecked /> <CheckboxChecked style={styles.itemCheckboxCheckedIcon}/> </Pressable> <Text style={[styles.itemText, styles.itemTextChecked]} > 코딩하기 </Text> <Pressable style={[ styles.deleteButton, styles.deleteButtonDone ]} hitSlop={10} > <DeleteIcon /> </Pressable> <Text>TodoItem</Text> </View> ) } export default TodoItem const styles = StyleSheet.create({}) 내가 보낸 이미지 보면 글자가 짤려 왜그런거야? 선생님이 하란대로 했고 14.1로 인스톨해서 에러도 안났어. 그런데 인스톨 하고나서 보니까 글자가 잘리더라고 왜그런거같아?import { SafeAreaView, StyleSheet, Text, View } from 'react-native' import React from 'react' import { StatusBar } from 'expo-status-bar' import { Platform } from 'react-native'; import InputForm from '../components/InputForm' // 대소문자 정확히 일치 import TodoItem from '../components/TodoItem'; const MainScreen = () => { return ( <SafeAreaView style={styles.container}> <StatusBar backgroundColor={'default'} /> <Text style={styles.pageTitle}>ToDo App</Text> <View style={styles.listView}> <Text style={styles.listTitle}>할일</Text> <TodoItem /> </View> <View style={styles.separator} /> <View style={styles.listView}> <Text style={styles.listTitle}>완료된 일</Text> </View> <InputForm/> </SafeAreaView> ) } export default MainScreen const styles = StyleSheet.create({ container: { flex: 1, paddingTop: Platform.OS === 'android' ? 20 : 0, backgroundColor: '#f7f8fa' }, pageTitle: { marginBottom: 35, paddingHorizontal: 15, fontSize: 54, fontWeight: '600' }, separator:{ marginHorizontal: 10, marginTop : 25, marginBottom : 10, borderBottomWidth: 1, borderBottomColor: 'rgba(0,0,0,0.2)', }, listView: { flex: 1, }, listTitle: { marginBottom: 25, paddingHorizontal: 15, fontSize: 41, fontWeight: '500' } })이게 mainscreen이야. 알려줄수있어??