제가 실습파일을 다시 만들었었는데 리액트 버전 낮추는 명령어를 치지 않고 하다가 section 13에서 antd design 관련 실습 하면서 강사님이랑 조금씩 다른 부분이 보이고, yarn dev 해도 실행이 안되어서 버전 문제라고 생각하고 중간에 버전을 낮췄거든요 ..!근데 아래처럼 '--jsx' 플래그를 제공하지 않으면 JSX를 사용할 수 없습니다. 라는 에러 메시지가 계속 뜨고 구글링해서 방법을 찾아보는데 하라는 거 해봐도 없어지지 않아요 ㅠㅠ타입스크립트를 재설치 해봐도 package.json에 dev-defendencies 항목이 생기지도 않고, tsconfig.js 파일을 삭제했다가 다시 타입스크립트 재설치 후 yarn dev 해도 변화가 없더라구요 !그래서 강사님 tsconfig와 같은 내용을 직접 작성해서 새로고침 해봤는데도 자꾸 에러가 그대로라서 ㅠㅠ 혹시 어떤 부분이 문제일까요 ㅠㅠㅠㅠ
안녕하세요! 강의 잘 듣고 있습니다. 10-TS 기초 강의를 듣고 TS 설치를 완료했는데, 저는 componemt의 타입을 지정하라는 등의 오류가 실행되지 않습니다. 콘솔 창에서는 별다른 에러 없이 잘 설치되었는데도요. yarn dev를 막 끝내고 _app.js를 tsx로 변경하니 터미널 콘솔에는 이렇게 뜹니다. PS C:\Users\Yun\Desktop\frontEnd\class> yarn dev yarn run v1.22.21 $ next dev ready - started server on 0.0.0.0:3000, url: http://localhost:3000 We detected TypeScript in your project and created a tsconfig.json file for you. event - compiled client and server successfully in 4.7s (388 modules) wait - compiling... event - compiled client and server successfully in 321 ms (388 modules) wait - compiling... error - ./pages/_app.tsx Error: error: Unexpected token , . Expected yield, an identifier, [ or { | 3 | export default function App({ Component : , pageProps }) { | ^ Caused by: 0: failed to process js file 1: Syntax Error wait - compiling... event - compiled client and server successfully in 5.7s (388 modules) wait - compiling... error - ./pages/_app.tsx Error: error: Expected ',', got '}' | 3 | export default function App({ Component}, pageProps }) { | ^ 뭐가 문제일까요?
이렇게 초기값을 설정 해주지 않았을 때, 하나의 항목만 수정하고 수정하기 버튼을 누르면 다른 항목들은 그 전 내용 그대로 띄워졌는데 그 이유가 궁금해요 !굳이 boards 수정 2편에서 한 방법이 아니더라도 이렇게 하면 문제가 되는 걸까요 ? 초기값을 설정 안해주면 안되는 이유가 있나요 ㅜㅜ강사님께서 그냥 여기 초기값을 "" 빈문자열로 바꾸고 다시 실행하시기만 하셔서 왜 이 방법을 쓰면 안되는지, boards 수정 2편의 방법과는 무슨 차이가 있는지 잘 모르겠습니다 ..!
package.json "dependencies": { "@ant-design/icons": "^5.0.1", 위와 같이 수정 후 yarn.lock, node_modules 삭제 - yarn install 하여 재 설치 하여도 아래와 같이 err 문구는 사라지지 않았으며 yarn dev를 통해 웹페이지 확인 하면 정상적으로 icon은 출력됩니다. icon = 정상 출력 되나 코드상 error 문구는 삭제되지 않습니다. VS code 를 재시작 하여도 code_modules 등 삭제 후 재설치 3~4번 하여도 동일합니다. yarn.lock 첨부합니다. "@ant-design/icons-svg@^4.3.0": version "4.3.2" resolved "https://registry.yarnpkg.com/@ant-design/icons-svg/-/icons-svg-4.3.2.tgz#ab2e082991877fdc85b2b32f0b68628b716bad23" integrity sha512-s9WV19cXTC/Tux/XpDru/rCfPZQhGaho36B+9RrN1v5YsaKmE6dJ+fq6LQnXVBVYjzkqykEEK+1XG+SYiottTQ== "@ant-design/icons@^4.8.1": version "4.8.1" resolved "https://registry.yarnpkg.com/@ant-design/icons/-/icons-4.8.1.tgz#44f6c81f609811d68d48a123eb5dcc477f8fbcb7" integrity sha512-JRAuiqllnMsiZIO8OvBOeFconprC3cnMpJ9MvXrHh+H5co9rlg8/aSHQfLf5jKKe18lUgRaIwC2pz8YxH9VuCA== dependencies: "@ant-design/colors" "^6.0.0" "@ant-design/icons-svg" "^4.3.0" "@babel/runtime" "^7.11.2" classnames "^2.2.6" lodash "^4.17.15" rc-util "^5.9.4" "@ant-design/icons@^5.0.1": version "5.2.6" resolved "https://registry.yarnpkg.com/@ant-design/icons/-/icons-5.2.6.tgz#2d4a9a37f531eb2a20cebec01d6fb69cf593900d" integrity sha512-4wn0WShF43TrggskBJPRqCD0fcHbzTYjnaoskdiJrVHg86yxoZ8ZUqsXvyn4WUqehRiFKnaclOhqk9w4Ui2KVw== dependencies: "@ant-design/colors" "^7.0.0" "@ant-design/icons-svg" "^4.3.0" "@babel/runtime" "^7.11.2" classnames "^2.2.6" rc-util "^5.31.1"
SyntaxError: Cannot use import statement outside a module 오류가 발생하는데 boards에서 수정하기, 상세페이지를 들어갈 때는 문제가 없다가 수정하기, 상세페이지 안에서 f5를 누르면 위와 같은 오류가 발생했습니다. 어떤게 문제인지 알려주시면 감사하겠습니다.
AntDesign만 사용하면 SyntaxError: Cannot use import statement outside a module 에러가 나옵니다. 구글링 해서 package.json에 " type":"module" 을 작성하면 된다고 하는데 작성하면 ReferenceError: module is not defined in ES module scope 에러가 나옵니다 어떻게 해결하면 좋을까요?
크롬 개발자 도구에서 페이로드 확인을 하면 fetchBoards가 두번 요청을 합니다. 시작점을 확인을 해보면 createUploadLink.js에서 빈 값으로 요청을 하고 두 번째 요청에서는 제대로 index.tsx에서 값을 넣고 refetch를 진행을 합니다. fetchBoards가 1,3번 이고 fetchBoardsCount가 2번 입니다. 사용하는데 있어 아무런 문제 없이 사용이 가능한데 왜 이런 현상이 있는지 해결을 하고 싶습니다. 첫 마운트가 되거나 API요청을 하면 불필요한 fetchBoards, fetchBoardsCount가 createUploadLink.js에서 요청이 가는데 ApolloClient Setting 부분에서 요청이 가는 걸 확인 했습니다. const uploadLink = createUploadLink({ uri: "http://backend-practice.codebootcamp.co.kr/graphql", }); const client = new ApolloClient({ link: ApolloLink.from([uploadLink]), cache: new InMemoryCache(), }); refetch하는 전체 코드입니다. // test - refetch 문제 export default function Hom(): JSX.Element { const { data, refetch } = useQueryFetchBoards(); const { data: dataBoardsCount, refetch: refetchBoardsCount } = useQueryFetchBoardsCount(); const router = useRouter(); const render = useRef(false); useEffect(() => { // 첫 마운트 실행 막음 if (!render.current) { render.current = true; console.log("처음 실행됨"); return; } const search = String(router.query.search); const page = Number(router.query.page) || 1; if (search === "undefined") { void refetch({ page }); console.log("검색X"); } else { void refetch({ page, search }); void refetchBoardsCount({ search }); console.log("검색O"); } console.log("Hom Search: ", search); }, [router.query]); return ( <> <SearchBar /> {data?.fetchBoards.map((el, index) => ( <div key={index}>{el.title}</div> ))} <Pagination count={dataBoardsCount?.fetchBoardsCount} /> </> ); } 여기서 <SearchBar /> , <Pagination />는 router.push에서 query로 ?search= , ?page= 쿼리스트링 만드는 역할만 하고 있고 전체 부모 컴포넌트에서 useEffetch로 refetch하고 있습니다. "next": "13", "react": "^18.2.0", "apollo-upload-client": "^17.0.0", 입니다.
안녕하세요 수업 시작하기 전에 궁금한 점이 있어서요. 앞쪽은 html, css , js 수업영상들이 있고 뒤쪽부터 리액트 시작이던데, 혹시 리액트 수업 영상 부터 시작을 하면 세팅이라던가 수업하면서 앞쪽을 수강하지 않아서 생기는 차이가 있을까요? 그리고 에디터는 vscode 말고 다른거를 써도 문제가 없을까요? 또, 저는 웹스톰을 쓰고 있는데 웹스톰에서는 plugins를 따로 설치 않해도 될까요?
graphql-mutation-args 강의를 보면서 따라하던 도중 아래와 같은 에러가 발생해서 문의 드립니다. 하드코딩으로 graphql 코드를 생성해서 요청을 해도 위와 같은 에러가 발생합니다. 아래는 index.js 에 작성한 코드와 개발자도구의 네트워크 탭 캡처 사진 입니다. 찾아보니 아폴로서버와 graphql 버전이 맞지 않아서 그런 것 같다는 의견이 있던데, 어떻게 해결해야 할지 잘 모르겠습니다.
안녕하세요. 선생님. 코드젠이 업데이트 되면서 보드의 날짜 타입이 에러가 아래의 사진처럼 오류가 나는 것 같습니다 그래서 선생님께서 올려주시는 포폴 예시 파일에 있는 버전의 타입으로 해도 동일하게 eslint에서 에러가 잡히는 것 같아요. createAt 값이 들어가는 곳마다 저렇게 에러가 잡히는데 어떻게 해결해야할까요??
안녕하세요. 선생님 무한스크롤이 계속 만들어져서 질문드려요 위 사진에는 댓글이 2개 달린 상태입니다. 그런데 스크롤을 내리면서 2개였던게 계속 복사되어 만들어지는 상태입니다. 이런식으로 초기 댓글 갯수가 반복해서 늘어나는 것 같아요. 코드를 보고도 오류를 찾기 힘들어 질문 드려요! 참고로, 이전에 비슷한 질문에 확인 해야 할 사항이 있어서 체크해보았습니다. nextconfig.json에서 reactStrictmode를 false로 바꿔보시고 서버를 껐다 다시 켜주세요! >> 바꾸고 해도 되지 않는 것 같습니다. 무한스크롤을 제거한 후 댓글을 작성해 보고 정상적으로 작성이 되는지 알려주세요. >> 무한스크롤 컴포넌트 삭제 시 다른 부분들은 원활하게 작동합니다. 또 다른 자료가 필요하시면 말씀해주세요! 긴 질문 읽어주셔서 감사합니다!!
