안녕하세요.강의 잘 시청중입니다. 진행 하고있던 도중 궁금한게 생겼습니다. 섹션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이야. 알려줄수있어??

 pressable 자동으로 import되는데 어떻게 하는건가요?

24년 12월에 결제하여 수강 중입니다올해 [코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스 강의가 오픈 된 것을 보았는데, 강의 간 내용에 많은 차이 점이 있을까요? 신규 강의를 수강하려면 재결제 하는 방법밖에 없을까요..?

AWS HTTPS 적용하는 부분에서과정대로 2번 따라했는데똑같이 해당 에러가 나서 https로 접속이 안 되네요 ㅜㅜ이유가 먼지 알 수 있을까요?!

안녕하세요.수강생입니다.이부분을 5번은 넘게 들은거 같은데 어려워요.깃주소주신것도 가서 봤는데구조도 잘 이해가 안되고todo 와 react만 연동되는 코드를 따로 깃에 주시면 안될까요?todo따로 react따로 폴더를 만들어주신거 같은데myreact01-cra 온전히 todo를 리엑트에 붙이는 깃주소를 따로 만들어주셨으면해서요.전부 한군데에 있어서 분석해보면서 하고는 있는데 저위의 3개의 카테고리중에2개만이라도 되고 싶은데다 합해서 20분수업도 안되는데 전 2분도 못쫓아가고 있어요.리엑트도 어느정도안다고 생각하고장고도 어느정도 안다고 생각하는데도어렵습니다. 흑....소스코드를 받고 싶습니다.인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.

해당 강의 1:51에서 갑자기 데이터베이스 익스플로러용 데이터그립 툴이 나오는데 이에 대한 설정은 어느 강의에서 확인할 수 있는 거죠? 느닷없이 나와서 혼동스럽기만 하네요. 섹션 1의 MariaDB와 부트 프로젝트생성에서도 하이디sql 툴 설정만 하셔서 데이터그립 툴은 어디에서 나온 건지 모르겠습니다.

안녕하세요! 비슷한 유형의 질문글을 보고 늦었지만 문의드리게 되었습니다. 공지를 늦게 확인하여 쿠폰을 받지 못했는데 혹시 지금이라도 발급이 가능할까요?