const { data: movieDetail } = await axios.get(`movie/${movieId}`, { params: { append_to_response: "videos" }, }); setMovie(movieDetail); 안녕하세요 <이미지 배너 생성하기>를 듣다가 이 부분 코드가 이해가 안가서 질문 드립니다. 다른 답변적으신거에 append_to_response가 theMovieDB API 서버에서 정해놓은 것이라고 작성하신 것을 봤는데, 어디에 가야 그 내용을 확인할 수 있는지 궁금합니다. 제가 movieDetail을 콘솔로그로 확인해보았을땐 해당 내용이 뜨지않아서요... 항상 도움이 되는 강의 잘 수강하고 있습니다!!
따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 22:03 초 부분 에 cors 설치하시는데 요거는 안하셨는데 해야되는거 맞나요?? 저는 안하니까 오류나서 설치하라고 뜨더라구요.. 영상에서는 설치안했는데도 오류 안뜨는 거같아서.. 아님 제가 잘 못본걸 수도 있어서 알려주시면 감사드립니다!
따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. Rect.FC의 사용하지않고 아래와 같이해도 무방할까요???
따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
_app.tsx export default function App({ Component, pageProps }: AppProps) { axios.defaults.baseURL = process.env.NEXT_PUBLIC_SERVER_BASE_URL + '/api'; axios.defaults.withCredentials = true; const { pathname } = useRouter(); const authRoutes = ['/register', '/login']; const authRoute = authRoutes.includes(pathname); return ( <AuthProvider> {!authRoute && <NavBar />} <div className={authRoute ? '' : 'pt-12'}> <Component {...pageProps} /> </div> </AuthProvider> ); } 해당 부분에서 !authRoute 논리연산자를 추가하면 Error: Hydration failed because the initial UI does not match what was rendered on the server. 에러가 나옵니다. 강사님 파일을 클론 해서 빌드 확인해보니 이런 에러가 안나오길래, 이 강의까지의 나머지 파일도 클론한 것과 모두 같은 것을 확인했는데 왜 저만 이런 에러가 나오는걸까요? 해당 에러를 구글링해서 해결책으로 나오는 것들을 적용해봤는데 어느것도 에러를 해결해주지 못했습니다ㅠ 어떤 부분을 확인해보면 좋을까요?
배포단계와 보너스 강좌를 보면서 댓글 리트윗 , 좋아요 , 삭제 , 수정 및 리트윗한 게시글 다시 리트윗버튼을 클릭했을 때 해당 게시글을 지우려고 기능을 추가하려고 하고 있습니다 그래서 구조를 해당 리트윗 게시글을 me.Posts 안에서 리트윗한 아이디와 해당 게시글의 post.id가 일치하는 게시글을 삭제하려고하는데 해당 구조로 짜게 되면 맨처음 페이지가 로딩되고 나서 데이터를 받아오는 Post를 인식해서 그런지 리트윗 되어있던걸 삭제하는건 가능한데 삭제 후 다시 리트윗 하고 삭제하려면 id가 그 처음 리트윗되어있던 id를 찾습니다. (기존 리트윗 되어있던 post.id ) (리트윗 삭제 후 다시 리트윗 하고 나서 리트윗 버튼 클릭시 나오는 post.id ) 리트윗 제거하고 다시 리트윗 하면 DB와 me.Posts 와 mainPosts 안에 데이터가 새롭게 추가되는건 확인이 되는데 왜 초기 데이터값만을 읽는건지 모르겠습니다. 항상 늦은 시간에도 답변해주셔서 감사합니다.(그리고 워낙 질문이 많아서 죄송해요)
따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 혹시 아래와 같이 자동완성 사용하는 거랑 같을까요??
따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. Eslint는 뭔지 알겠는데 밑에 3개는 처음보네요.. 업데이트 되면서 생긴건가요?? 마지막은 @components/* 이렇게 설정하라고 하던데 맞나요?? 무슨뜻인가요?? 구글링했습니다
따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
lllll@172 server % npm run dev > server@1.0.0 dev > env-cmd -f .env.development nodemon --exec ts-node ./src/server.ts [nodemon] 2.0.20 [nodemon] to restart at any time, enter rs [nodemon] watching path(s): . [nodemon] watching extensions: ts,json [nodemon] starting ts-node ./src/server.ts /Users/lllll/study/reddit-clone-app/server/node_modules/ts-node/src/index.ts:859 return new TSError(diagnosticText, diagnosticCodes, diagnostics); ^ TSError: ⨯ Unable to compile TypeScript: src/routes/subs.ts:139:16 - error TS2339: Property 'file' does not exist on type 'Request<ParamsDictionary, any, any, ParsedQs, Record<string, any>>'. 139 if (!req.file?.path) { ~~~~ src/routes/subs.ts:144:22 - error TS2339: Property 'file' does not exist on type 'Request<ParamsDictionary, any, any, ParsedQs, Record<string, any>>'. 144 unlinkSync(req.file.path); ~~~~ src/routes/subs.ts:154:26 - error TS2339: Property 'file' does not exist on type 'Request<ParamsDictionary, any, any, ParsedQs, Record<string, any>>'. 154 sub.imageUrn = req.file?.filename || ""; ~~~~ src/routes/subs.ts:157:27 - error TS2339: Property 'file' does not exist on type 'Request<ParamsDictionary, any, any, ParsedQs, Record<string, any>>'. 157 sub.bannerUrn = req.file?.filename || ""; ~~~~ at createTSError (/Users/lllll/study/reddit-clone-app/server/node_modules/ts-node/src/index.ts:859:12) at reportTSError (/Users/lllll/study/reddit-clone-app/server/node_modules/ts-node/src/index.ts:863:19) at getOutput (/Users/lllll/study/reddit-clone-app/server/node_modules/ts-node/src/index.ts:1077:36) at Object.compile (/Users/lllll/study/reddit-clone-app/server/node_modules/ts-node/src/index.ts:1433:41) at Module.m._compile (/Users/lllll/study/reddit-clone-app/server/node_modules/ts-node/src/index.ts:1617:30) at Module._extensions..js (node:internal/modules/cjs/loader:1308:10) at Object.require.extensions.<computed> [as .ts] (/Users/lllll/study/reddit-clone-app/server/node_modules/ts-node/src/index.ts:1621:12) at Module.load (node:internal/modules/cjs/loader:1117:32) at Function.Module._load (node:internal/modules/cjs/loader:958:12) at Module.require (node:internal/modules/cjs/loader:1141:19) { diagnosticCodes: [ 2339, 2339, 2339, 2339 ] } [nodemon] app crashed - waiting for file changes before starting... client에서는 rpm run dev가 정상적으로 실행되는데 server에서는 npm run dev를 실행하면 상기와 같은 오류가 발생하네요. 구글링해보니 server 디렉토리 내의 tsconfig.json 파일이 문제인 것 같은데 여러 세팅을 바꾸어보아도 해결되지않아 문의드립니다. (tsconfig.json 파일은 강사님이 올려주신 소스코드 파일과 같은 파일 사용중입니다)
http://practice.codebootcamp.co.kr/graphql 에서 mutation을 가져올때 백틱 안에 들어가면서 강사님과는 다른 포맷으로 입력됩니다. 데이터를 받아오는 과정에서 문제가 생기진 않는데 뒤의 수업에서 자동완성이 되지 않거나, # 주석도 표현되지않고 죄다 연두색으로 표현되는 문제가 있습니다. 왜 다르게 표현되는거죠? 강사님처럼 쉼표를 붙이고 자리를 똑같이 만들어도 변하지 않네요,,,
작성한 이유(저는 이 문제로 골머리를 앓았어서..) 도메인 설정 후 쿠키가 전달되지 않아 로그인이 되지 않았다가 해결되었습니다 session 설정 뿐만 아니라 nginx 설정도 확인해야 합니다 혹시라도 이 문제로 고통받으시는 분이 있다면 해결책이 되길 바랍니다 back 쪽 session 설정 if (process.env.NODE_ENV === "production") { app.use(morgan("combined")); app.use(hpp()); app.use(helmet()); app.set("trust proxy", 1); //배포 시 추가 app.use( cors({ origin: "https://engword.shop", //local "http://localhost:3000" credentials: true, }) ); } else { app.use(morgan("dev")); app.use( cors({ origin: true, credentials: true, }) ); } passportConfig(); app.use(express.json()); app.use(express.urlencoded({ extended: true })); app.use(cookieParser(process.env.COOKIE_SECRET)); app.use( session({ saveUninitialized: false, resave: false, secret: process.env.COOKIE_SECRET, proxy: true, //배포 시 추가 cookie: { httpOnly: true, secure: process.env.NODE_ENV === "production" ? true : false, //https 적용 시 true sameSite: process.env.NODE_ENV === "production" ? "none" : false, domain: process.env.NODE_ENV === "production" && ".engword.shop", }, }) ); nginx 설정 back 에서 설정한 nginx입니다 sudo vim /etc/nginx/nginx.conf server { server_name api.engword.shop; location / { proxy_set_header HOST $host; //추가 proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-Forwarded-Proto $scheme; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection "upgrade"; proxy_set_header X-Real-IP $remote_addr; proxy_pass http://127.0.0.0:3000 //http로 설정할 것 proxy_redirect off; } //아래는 certbot 내용 } 위와 같이 설정을 바꾼 후 nginx를 다시 실행합니다 sudo systemctl restart nginx pm2 로 진행 시 pm2 를 껏다 키거나, pm2 재시작을 하시면 됩니다. pm2 껏다 키는 경우 sudo npx pm2 kill npm start (혹은 sudo npm start) pm2 재시작 sudo npx pm2 reload all
