import NewBoard from "../../../../src/components/units/write/BoardWrite.container" import { useQuery, gql } from "@apollo/client" import { useRouter } from "next/router" const FETCH_BOARD = gql` query fetchBoard($boardId: ID!){ fetchBoard (boardId: $boardId) _id writer title contents } ` export default function editPage(props) { const router = useRouter() console.log("-------------------") console.log(router.query.detail) console.log("-------------------") const {data} = useQuery(FETCH_BOARD, { variables: { boardId : Number(router.query.detail) } }) console.log("++++++++++++++++++") console.log(data) console.log("++++++++++++++++++") console.log("###################################") return( <> <NewBoard isEdit={true} queryData = {data?.data?.fetchBoard}/> </> ) } 수정 페이지에서 라우터 안에 있는 보드 아이디로 쿼리 요청을 보내려 했는데 처음에는 router.query.detail이 undefined 상태로 있어서 그런지 오류가 나왔습니다 ㅜㅜ어떤 부분이 잘못된 걸까요..

강의에 올라와 있는 pages폴더에서 index.js 파일 getServerSideProps부분이 저도 store.dispatch오류가 나서 고차함수로 바꾸어 주니까 해결됬습니다. 근데 이유를 잘모르겠습니다 ㅠㅠexport const getServerSideProps = wrapper.getServerSideProps( (store) => async () => { store.dispatch({ type: LOAD_MY_INFO_REQUEST, }); store.dispatch({ type: LOAD_POSTS_REQUEST, }); store.dispatch(END); await store.sagaTask.toPromise(); } ); 

 제 깃헙 아이디를 만들어서푸시를 해야 이 섹션 진행 할 수 있는건가요?vscode와 git 연결을 해야하는건지답변 부탁드립니다.

 이 수업에 대한 질문은 아니지만,next.js의 버전이 올라갔는데가르쳐주시는 버전으로 배워도취업하는데에 문제가 없을까요??

안녕하세요. 이 강의에 질문을 달았는데 해결이 안되서 다시 질문드립니다.ㅠ 우선 로드밸런서에서는 아래의 동적페이지가 잘 작동되는것으로 확인됩니다.cloudFrond에서 연결도 잘 해줬구요. 그런데...제 도메인에서 부터 시작되는 부분은 자꾸 오류가 납니다.아래처럼요ㅠ아래 _buildManifest.js 네트워크창을 확인해보면 보드아이디도 잘 먹혀있는걸 확인할 수 있습니다.그런데 오류가 난 빨간부분에서는 뭔가 이상합니다.x-cache 부분을 보면 클라우드 프론트에 에러가 났다고 하는데 이유를 당최 모르겠습니다.

이전수업을setting/ts에서 따라해보면서쫒아왔는데요!github에서 받은것은 완성본이라고 하셨는데,폴더생성 및 추후 페이지작업 프론트작업도setting/ts에서 진행해도될까해서 질문드립니다.

안녕하세요! 혹시 프로젝트를 따라서 만들고, 별도로 수정한 내용을 다른 컴퓨터로 옮겨서 실행했어요.깃허브 커밋까지 완료는 했고, firebase deploy --only hosting을 실행하긴 했는데요.아래 에러가 떠요. 혹시 이 부분 어떤 원인인지 알 수 있을까요?Error: Directory 'dist' for Hosting does not exist.

이미지 업로드 후 thumb 폴더가 생성 안됩니다!검색해보니 AWS Lambda 함수에서 S3 서비스를 호출할 때, 해당 Lambda 함수의 실행 역할이 S3 버킷에 대한 필요한 권한을 가지고 있지 않아서 발생한 것이라고 합니다...역할도 S3객체 읽기 전용 권한 선택했습니다.근데 여기서 PutObject가 없는게 걸립니다..

react-typescript강좌 끝말잇기 부분에서 미래에서 온 제로초님께서webpack.config.ts파일에 추가하라고 하신 babel-loader에 관해서 질문이 있습니다.module설정하는 부분에 babel-loader를 추가해주었는데 버전이 업데이트 되면서 왜 이 로더를 추가해야될까요?? 그리고 에러를 해결하는 과정에서 질문이있습니다. module.rules 부분에 순서는 상관없다고 생각해서 ts-loader설정을 먼저 적고 babel-loader를 적어주었습니다. 그러나 아래와 같이 오류가 떳습니다그러나 설정 순서를 바꿔주었더니 해결이 되었는데 어떤 처리과정이 있길래 이 순서를 바꿔주어서 해결을 할 수 있게됬는지 의문입니다.아래는 해결되서 적어놓은 webpack.config.ts파일입니다!import path from 'node:path'; import ReactRefreshPlugin from '@pmmmwh/react-refresh-webpack-plugin'; import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin'; import { Configuration as WebpackConfiguration } from "webpack"; import { Configuration as WebpackDevServerConfiguration } from "webpack-dev-server"; interface Configuration extends WebpackConfiguration { devServer?: WebpackDevServerConfiguration; } const config: Configuration = { name: 'word-relay-dev', mode: 'development', //after production devtool: 'eval', resolve: { extensions: ['.jsx', '.js', '.tsx', '.ts'], }, entry: { app: './client' }, module: { rules: [ { loader: 'babel-loader', options: { plugins: ['react-refresh/babel'] }, }, { test: /\.tsx?$/, loader: 'ts-loader', exclude: path.join(__dirname, 'node_modules'), },] }, plugins: [ new ReactRefreshPlugin(), new ForkTsCheckerWebpackPlugin() ], output: { filename: '[name].js', path: path.join(__dirname, 'dist'), publicPath: '/dist/', }, devServer: { devMiddleware: { publicPath: '/dist' }, static: { directory: path.resolve(__dirname) }, hot: true } } export default config;

도메인까지 연결 성공했고 쿠키 공유만 해결하면 되는데 뭐 때문인지 감이 안잡힙니다....

 강의 수강중에 에러가 발생했는데, 이를 찾지 못하겠습니다.  회원 가입으로 axios 해서 넘어가는거는 알겠는데... 위의 캡처 긍르 보면 api.js에서 addMembers를 호출하는데 에러가 나고 있습니다. 에러는 Cannot read properties of null (reading 'addMembers')라는데 이 부분에서 에러가 왜 나는지 잘 모르겠습니다.  분명 같은 이메일로 로그인 시도시 "이미 있는 사용자입니다"하는 response를 받고 있는 상황입니다.

 어느부분을 봐야할까요?

안녕하세요. 강의 잘 듣고 있습니다. ㅎㅎ애플리케이션이 작동하는 데 있어 불편함은 없지만, 디버깅이 어려워서 질문 남깁니다.현재 Mock데이터를 받아와 콘솔에 찍어줄 때 body가 ReadableStream 형태라고 찍힙니다.body를 json 형태로 바꾸어서 보고 싶은데, handler나 browser의 setupWorker 함수에서 별도의 작업을 해 주어야 할까요??

FE 서버 기동시(yarn start) 사전에 정의한 설정 정보를 읽어서 사용하는 방법이 있을까요?예를 들어, 아래 apollo의 uploadLink 생성 코드의 경우, 만약 graphql 서버 주소가 바뀌었다면 uri 부분을 변경해서 다시 빌드를 해야 되는데요.빌드없이 yarn start 시에 FE 서버 로컬 설정파일에서 uri를 읽어와서 적용하는 방식으로 하고 싶은데 어떤식으로 하면 좋을지요?.env 파일은 빌드 이후에 변경은 반영되지 않는것 같고.. SSR 같은 방법으로 해야 할까요? 아니면, 기동시에 accessToken 처럼 backend에 uri 정보를 조회해서 적용해야 할까요? const uploadLink = createUploadLink({ uri: "https://backendonline.codebootcamp.co.kr/graphql", headers: { Authorization: `Bearer ${accessToken}` }, credentials: "include", });

-코드-import 'core-js/stable'; import 'regenerator-runtime/runtime'; import React from 'react'; import { render } from 'react-dom'; import { BrowserRouter } from 'react-router-dom'; import axios from 'axios'; import App from './layouts/App'; axios.defaults.withCredentials = true; axios.defaults.baseURL = process.env.NODE_ENV === 'production' ? 'https://sleact.nodebird.com' : 'http://localhost:3090'; render( <BrowserRouter> //오류발생구간 <App /> </BrowserRouter>, document.querySelector('#app'), ); -오류내용-ERROR in ./client.tsx:15:4TS2786: 'BrowserRouter' cannot be used as a JSX component. Its instance type 'BrowserRouter' is not a valid JSX element. The types returned by 'render()' are incompatible between these types. Type 'React.ReactNode' is not assignable to type 'import("C:/Users/LG gram 15/node_modules/@types/react/index").ReactNode'. Type '{}' is not assignable to type 'ReactNode'. 13 | 14 | render( > 15 | <BrowserRouter> | ^^^^^^^^^^^^^ 16 | <App /> 17 | </BrowserRouter>, 18 | document.querySelector('#app'),sleact (webpack 5.74.0) compiled with 1 error in 9547 ms  백엔드 서버를 킨 상태에서,npm i 실행하였고npm run build를 실행하게되면위에 오류가 발생됩니다. 

안녕하세요 선생님. 프로젝트 배포하고 나서 테스트 중에 특정 이미지를 업로드 하면 '413 Request Entity Too Large'라고 뜨는 오류를 발견했습니다. 특정 이미지 크기는 4.13mb정도구요. 일단 에러가 떠도 그대로 post요청을 보내면 업로드된 이미지가 보이긴 하는데 왜 이런 에러가 뜨는지 모르겠습니다..테스트 해보니까 세로 길이가 비교적 긴 이미지를 업로드 요청할 때 에러가 나는걸 확인했습니다.위 이미지가 프론트에서 나는 에러 상태 입니다. 오류 해결을 위해 먼저 back의 const upload = multer({ storage: multerS3({ s3: new AWS.S3(), bucket: 'fashionary-s3', key(req, file, cb) { cb(null, `original/${Date.now()}_${path.basename(file.originalname)}`) } }), limits: { fileSize: 20 * 1024 * 1024 }, // 20MB });여기서 limits부분이 20m인걸 확인하고, sudo vim /etc/nginx/nginx.conf 해서 http { ## # Basic Settings ## client_max_body_size 20M; sendfile on; tcp_nopush on; types_hash_max_size 2048; # server_tokens off; # server_names_hash_bucket_size 64; # server_name_in_redirect off; include /etc/nginx/mime.types; default_type application/octet-stream; 위와 같이 http부분 설정을 20m으로도, 0으로도 설정 후 sudo service nginx reload 했는데도 특정 이미지 전송을 시도하면 같은 에러가 떠요..이럴 땐 어디를 봐야 하나요? 

안녕하세요. 강의 잘 듣고 있습니다!graphqlFetcher 함수를 사용하면 자꾸 아래와 같은 에러가 발생합니다. 다른 분들이 질문하신 것도 확인하였고, 강의 코드도 꼼꼼히 점검하였는데 해결이 안됩니다. ㅠㅠ 틀린 부분이 있을까요?깃허브 링크 첨부드립니다! ㅠㅠ https://github.com/eugene028/React-shoppingmall.git

차례대로 index.js, comment.jsx, commentlist.jsx인데. npm start를 하면 아래와 같은 에러가 떠요,,ㅜ

webpack을 실행하면 dist폴더에 app.js가 저장되고 이것을 실행하면서 react가 실행되었는데 핫리로딩을 할때는 dist폴더가 필요없고app.js도 안만들어지는것 같습니다 설정에서는 dist와 app.js를 명시하고 있는데 핫리로딩을 어디에서 app.js를 저장하는 건가요? 

MSW 강의 중 graphqlFetcher 에러 관련하여 문의 드립니다.1.product 폴더 - index.ts위와 같은 오류와 빨간 줄에 커서를 올리면==================================No overload matches this call.Overload 1 of 3, '(queryKey: QueryKey, options?: Omit<UseQueryOptions<Product[], unknown, Product[], QueryKey>, "queryKey"> | undefined): UseQueryResult<...>', gave the following error.Type '() => Promise<unknown>' has no properties in common with type 'Omit<UseQueryOptions<Product[], unknown, Product[], QueryKey>, "queryKey">'.Overload 2 of 3, '(queryKey: QueryKey, queryFn: QueryFunction<Product[], QueryKey>, options?: Omit<UseQueryOptions<Product[], unknown, Product[], QueryKey>, "queryKey" | "queryFn"> | undefined): UseQueryResult<...>', gave the following error.Type 'Promise<unknown>' is not assignable to type 'Product[] | Promise<Product[]>'.Type 'Promise<unknown>' is not assignable to type 'Promise<Product[]>'.Type 'unknown' is not assignable to type 'Product[]'.ts(2769)types.d.ts(9, 89): The expected type comes from the return type of this signature.================================타입에 대한 문제 일까요? 위와 관련된 코드 들은 문제 없이 입력한 것 같습니다.graphql 폴더 안 product.tsqueryClient.ts무엇이 잘 못된 것일까요ㅠ