안녕하세요!현재 강의자료의 백엔드 서버와 데이터 베이스 도커를 통해 연결까지 하고, 다른 질문글들을 참고로 하여 Dockerfile의 작성까지 완료한 후, pm2 restart all 으로 다시 시작까지 하였지만 아래와 같은 에러가 발생하고 있습니다.에러만 보면 현재 DB와 연결이 잘 되고 있지 않는것이 문제라고 판단이 되지만, 강사님이나 저와 비슷한 에러가 있던 분들이 계시다면 해결법을 알고 계실까 하여 질문을 남깁니다.topSub는 물론, 회원가입과 로그인도 불가능한 상황입니다. 코드도 같이 첨부하겠습니다.docker-compose.ymlversion: "3" services: db: image: postgres:latest container_name: reddit-postgres restart: always ports: - "5432:5432" environment: POSTGRES_USER: "${DB_USER_ID}" POSTGRES_PASSWORD: "${DB_USER_PASSWORD}" volumes: - ./data:/var/lib/postgresql/data server: build: context: ./server container_name: clone-reddit-server restart: always ports: - "4000:4000" volumes: - /app/node_modules - ./server:/app client: build: context: ./client container_name: clone-reddit-client ports: - "3000:3000" volumes: - /app/node_modules - ./client:/app stdin_open: trueDockerfike -clientFROM node:16-alpine ENV PORT 3000 WORKDIR /usr/src/app COPY package*.json ./ RUN npm config set sharp_binary_host "https://npmmirror.com/mirrors/sharp" RUN npm config set sharp_libvips_binary_host "https://npmmirror.com/mirrors/sharp-libvips" RUN npm install COPY ./ ./ ENV NODE_ENV production RUN npm run build:production CMD ["npm", "run", "start:production"]Dockerfike -serverFROM node:14.14.0-alpine WORKDIR /app COPY ./package.json ./ RUN npm install COPY . . RUN npm install pm2 -g RUN npm install ts-node -g RUN pm2 install typescript # CMD ["npm", "run", "dev"] CMD ["pm2", "start", "src/server.ts", "--watch"] # CMD ["pm2", "start", "ecosystem.config.js", "--env", "production", "--watch"] # CMD ["npm", "run", "dev"]ecosystem.config.js//client module.exports = { apps: [{ name: "clone-reddit-client", script: "npm run start:production", }] } //server module.exports = { apps: [{ name: "clone-reddit-server", script: "npm run start:production", }] }  

안녕하세요. 항상 잘 듣고 있는 학생입니다.다름이 아니라 '상세 메세지 보기' 버튼 클릭 시window.location.href 을 사용해서 상세 페이지로 이동하게 구현 하셨는데, next/router 말고 window.location이 사용된 이유가 있을까 문득 궁금해서 질문 남깁니다.외부 URL로 이동하는 건 아니고상세 페이지에서 back버튼은 next/Link를 사용하셔서, 혹시 window.location 방법이 서버사이드 측면에서 기능적 이점이 있는 걸까요?   - 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.

 안녕하세요. 강의를 진행하는데 서버가 죽은것같아 직접 배열을 만들어서 예제를 진행중입니다.그런데 자꾸 문제가 생기네요,,첫번째 클릭에서는 객체가 localStorage에 저장이 되는데 그 이후부터 진행이 안됩니다. 이유가 무엇일까요,,이모션 부분은 제외하고 전달드립니다ㅜ import styled from "@emotion/styled"; import { Modal } from "antd"; interface IBasketsProps { id: number; writer: string; product: string; price: number; } const myBasket = [ { id: 100, writer: "짱구", product: "액션가면 인형", price: 30000 }, { id: 200, writer: "철수", product: "과외", price: 40000 }, { id: 300, writer: "훈이", product: "도시락", price: 50000 }, { id: 400, writer: "맹구", product: "시냇물 돌", price: 2000000 }, ]; export default function BasketHomework() { const onClickBtn = (basket: IBasketsProps) => () => { const baskets: IBasketsProps[] = JSON.parse( localStorage.getItem("baskets") ?? "[]" ); console.log(baskets); const alreadyIn = baskets.filter((el) => el.id === basket.id); if (alreadyIn.length === 1) { Modal.warning({ content: "이미 찜한 상품입니다." }); return; } baskets.push(basket); localStorage.setItem("baskets", JSON.stringify(basket)); }; return ( <> <CardWrapper> {myBasket.map((el, index) => ( <Card key={index}> <Product>{el.product}</Product> <Writer>{el.writer}</Writer> <Price>{el.price}</Price> <button onClick={onClickBtn(el)}>장바구니 담기</button> </Card> ))} </CardWrapper> </> ); }  

6:15초 쯤 자동으로 줄바꿈 되는거 같은데 이런건 어떻게 하는건가요?

제가 코드를 이해한걸로는 userMiddleware는 클라이언트에서 보낸 token의 쿠키에 jwt를 이용하여 해당 user를 찾고 res.locals.user에 글로벌하게 담는 역할을 하는것 같고,authMiddleware는 res.locals.user가 존재 하는지 체크 하는것 같은데언제 언제 사용하고 사용 하지 말아야 할지 도통 감이 안잡히네요 ㅠ

 포트폴리오 리뷰 - container/presenter 파일 분리레퍼런스 코드를 클론후 빌드했을때http://localhost:3000/boards 페이지 접근시우측 날짜 시간쪽이 겹쳐서 나오는 것 같습니다.단순 CSS 문제라고 보면 되나요?  

배포에서 대표적인 클라우드 서비스로 AWS, GCP, Azure 를 알려주셨는데요혹시 파이어베이스도 같은 묶음으로 봐도 될까요?? 파이어베이스는 AWS처럼 사용할 수 없나요??파이어베이스는 DB, 서버 용으로만 배우는게 좋을까요??

안녕하세요export const AuthProvider = ({ children }: { children: React.ReactNode }) => {}에서 ({ children }: { children: React.ReactNode }) 질문입니다.뒤에 타입 부분이 헷갈리는데, ({ children }: { children: React.ReactNode }) 하지 않고 ({ children }: React.Node} 이렇게 하면 왜 안되는건가요? 

 안녕하세요 createBoardComment 만들려고 mutation CreateBoardCommet doc을 보고 하고 있는데createBoardCommentInput과 boardId:ID! 를 두개다 써야되는데 어떻게 해야 되는지 알수 있을까요? 또한 밑에 createBoardComment도 필요하다 하는데 어떻게 써야되는건가요?감사합니다

보통 항상 프론트엔드에 보낼때 res.json으로 보내었는데 이번에는 res.send를 사용 하였는데 2개가 차이가 있을까요?

강좌에서 aws 인스턴스를 2개를 사용해 프론트서버와 백엔드서버를 배포한것과는 다르게 프리티어 인스턴스 한개로 두개의 서버를 배포하려하는데 aws 서버 메모리가 부족할까요?

안녕하세요.현재 새로 나온 노드 교과서 이북과 현영님께서 주신 현물 책도 가지고 있는 상황에서 공부를 시작하려고 하는데 강의 결제 후 같이 보는건 어떨까요??공부하는데 돈은 아끼면 안된다고 생각하는 편이라 학습 효율이 가장 중요합니다. 예전에 유튜브로 하나만 구매하면 된다곤 하셨는데 둘 다 병행하면서 보면 어떨지 궁금합니다. 그리고 만약 하나를 선택 한다면 책, 강좌 중 뭐가 더 괜찮을지 혹은 개인의 성향 차이일지도 궁금합니다.항상 좋은 강좌 감사합니다.

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 이걸 백엔드부분에서 콘솔로그를 출력안하고프론트에서 로그출력하는 법은 없을까요??백엔드에서말고 프론트에서도 받아온 데이터 보고싶은데 콘솔로그하면 데이터가 안뜨고, undefined만 떠서요.. 

안녕하세요. 매 회차마다 선생님 코딩 실력에 감탄하며 강의 듣고 있습니다. 지금 페이지네이션 API 만들고 썬더 클라이언트에서도 문제 없이 작동했는데 view 부분에서 setMessageList((prev) => [...prev, ...data.content]);로 바꾸고 나서 처음 화면이 로드되면 API 호출이 두번 되면서 messageList에 데이터가 두번 저장됩니다. 그 이후 더보기 버튼 클릭시에는 size만큼 잘 불러오는데 처음 페이지 로딩때만 두번 나오는 이유를 모르겠습니다. useEffect 부분도 useEffect(() => { if (userInfo === null) return; fetchMessageList(userInfo.uid); }, [userInfo, messageListFetchtrigger, page]); 로 선생님 작성한 코드와 같은 것 같은데 틀린부분 있을까요?React Hook useEffect has a missing dependency: 'fetchMessageList'. Either include it or remove the dependency array.이런 eslint 경고도 나옵니다.강의 계속 돌려보다가 도저히 모르겠어서 질문 남깁니다 ㅠ    - 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.인덱스와 유저페이지만 안들어가지고 다른 페이지들은 들어가집니다. 구글링 해봐도 해결을 못해서 질문남겨봅니다.혹시 어느 부분이 문제인지 알수 있을까요?  터미널 오류warn - Fast Refresh had to perform a full reload. Read more: https://nextjs.org/docs/messages/fast-refresh-reloadstate { user: null, authenticated: false, loading: true }upstream image response failed for http://localhost:4000/images/qTXQHCjdvd.jpg 404ImageError: "url" parameter is valid but upstream response is invalid at imageOptimizer (/Users/camoma1/Desktop/reddit-clone-app/client/node_modules/next/dist/server/image-optimizer.js:476:19) at process.processTicksAndRejections (node:internal/process/task_queues:95:5) at async cacheEntry.imageResponseCache.get.incrementalCache (/Users/camoma1/Desktop/reddit-clone-app/client/node_modules/next/dist/server/next-server.js:264:72) at async /Users/camoma1/Desktop/reddit-clone-app/client/node_modules/next/dist/server/response-cache/index.js:83:36 { statusCode: 404}런타임 에러Unhandled Runtime ErrorError: Image with src "http://localhost:4000/images/qTXQHCjdvd.jpg" is missing required "width" property.

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.두 가지 질문이 있는데 답변해주시면 정말 감사드립니다.ㅠㅠㅠentrise[0] 이 뜻하는건 뭔지 알 수 있을 까요??아래에서 인수로 마지막 Post의 element를 설정했는데 그걸 의미하는건가요??위에서 setPage(page+1)을 하면 아래에서setPage가 +1이 돼서page가 +1이 되고, getkey의 pageIndex가 page값으로 돼서/posts?page=${pageIndex} 가 호출 되는 건가요??const page 가 getkey의 pageIndex인건가요??

안녕하세요!Credentials 설정 후 origin을 'http://localhost:3060' 으로도, true 로도 변경해봤지만 계속해서 해당 오류가 뜨는데 이유를 모르겠습니다. ㅠㅠ 제로초님의 오류와 다른 부분이 있는 것 같습니다.Access to XMLHttpRequest at 'http://localhost:3065/user/login' from origin 'http://localhost:3060' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Credentials' header in the response is '' which must be 'true' when the request's credentials mode is 'include'. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.제 코드는 현재 이렇습니다.[app.js]const express = require("express"); const session = require("express-session"); const cookieParser = require("cookie-parser"); const cors = require("cors"); const passport = require("passport"); const dotenv = require("dotenv"); const postRouter = require("./routes/post"); const userRouter = require("./routes/user"); const db = require("./models"); const passportConfig = require("./passport"); const app = express(); dotenv.config(); passportConfig(); //서버 실행할 때 db sequelize 연결도 함께 실행 db.sequelize .sync() .then(() => { console.log("db 연결 성공"); }) .catch(console.error); // router보다 위에 작성해야 함 app.use( cors({ // origin: 'https://nodebird.com' // 설정된 웹페이지에서 오는 요청만 허용 // origin: "*" // 전체 허용 // origin: "http://localhost:3060", // withCredential: true 일 때 보안이 더 철저해져서 정확한 주소를 적어야 함 origin: true, // 요청을 보낸 곳의 주소가 자동으로 들어가 허용 credientials: true, }) ); // CORS 에러 처리법 2 (npm i cors) app.use(express.json()); // front에서 json형식으로 데이터를 보냈을 때 json형식의 데이터를 req.body로 넣어줌 app.use(express.urlencoded({ extended: true })); // form을 submit했을 때 urlencoded 방식으로 데이터가 넘어옴 app.use(cookieParser(process.env.COOKIE_SECRET)); app.use( session({ saveUninitialized: false, resave: false, secret: process.env.COOKIE_SECRET, }) ); app.use(passport.initialize()); app.use(passport.session()); app.get("/", (req, res) => { res.send("hello express"); }); app.get("/posts", (req, res) => { res.json([ { id: 1, content: "hello1" }, { id: 2, content: "hello2" }, { id: 3, content: "hello3" }, ]); }); app.use("/post", postRouter); app.use("/user", userRouter); app.listen(3065, () => { console.log("서버 실행중!!!!"); }); [sagas - index.js]import axios from "axios"; import { all, fork } from "redux-saga/effects"; // take 는 1회용이기 때문에 while(true) {} 문으로 감싸준다. 하지만 직관적이지 않으므로 take 대신에 takeEvery를 사용한다. // takeLatest 는 클릭이 두번되었을 때 두 번 실행되지 않기 위해 마지막 것만 실행되도록 하는 effect 이다. (요청은 취소되지 않고 응답만 취소되므로 서버에는 두개가 저장됨(치명적단점)) // takeLeading 은 첫번째 것만 실행되도록 하는 effect 이다. // throttle 은 시간제한을 두어 그 시간동안에 한번만 실행되도록 요청하는 것이다. (특수한 경우에 사용, 디도스 공격을 막을 때 좋음) import userSaga from "./user"; import postSaga from "./post"; axios.defaults.baseURL = "http://localhost:3065"; axios.defaults.withCredentials = true; // function* : generator 는 yield(중단점)가 있는 곳에서 멈춤 export default function* rootSaga() { // all 은 fork 나 call 을 동시에 실행시켜준다. yield all([ // fork !== call // fork 는 비동기 함수 호출 , call 은 동기 함수 호출 fork(userSaga), fork(postSaga), ]); } 어디서 잘못된 걸까요..? 오류를 보면 header in the response is '' 로 헤더의 결과 값이 없는 것같은데...origin 을 true 로 변경했는데 왜 안들어갈까요...

안녕하세요 멘토님.항상 좋은 강의 잘 보고 있습니다. HOC와 권한분기 실습 까지 수강을 마치고 궁금한 점이 생겨 질문 드립니다.페이지로 이동 시 HOC를 먼저 실행하여 로그인을 체크하는 방식은 이해했습니다.그런데, 간혹 어떤 특정 게시판 사이트에 비로그인 상태에서 댓글 작성을 한다고 가정할 때인풋창이나 등록 버튼을 누르면 '로그인 후 이용해주세요' 라는 알럿을 띄워주는 경우가 있습니다. (페이지 이동이 아닌 단순 엘리먼트 클릭)이러한 경우에는 그냥 단순히 인풋이나 등록 버튼 등 엘리먼트를 클릭 했을 때 토큰이 있는지 if 검증을 하는 로직만 넣으면 되는 것인지 궁금합니다.그리고 댓글 리스트 수정과 같은 상황에서 댓글 리스트에서 댓글 하나를 수정 버튼 눌렀을 때, 비로그인 유저를 감지하여 알럿을 띄워주고 싶은 경우도 궁금합니다. 이런 경우는 보통 이전 수업 때 배웠듯이 map을 사용하여 댓글 수정 컴포넌트를 반복문으로 뿌려주는 형태로 사용을 합니다. 그렇다면 이 댓글 수정 컴포넌트를 export 하는 과정에서 HOC를 씌워주는게 맞는 것인지, 아니면 그냥 또 단순히 수정 버튼 클릭 시 if 검증을 통해 토큰 존재 여부만 파악하면 되는지 궁금합니다. 감사합니다.

노드버드 깃허브 코드를 봤습니다 redux-saga와 redux 툴킷을 사용하신 프로젝트에서는 getServersideProps를 주로 쓰시고 react-query에서는 getstaticProps를 쓰셨던데 어째서 이런 차이가 있는건지 궁금합니다

 파이어베이스에서 업데이트나 삭제를 할때 그 문서의 id?(위의 사진의 글자)를 가져와서 변경을 해줘야하잖아요그런데 저 id를 어떻게 데이터와 함께 가져오는거죠..? const [boardsData, setBoardsData] = useState<DocumentData[]>([]); const [boardId, setBoardId] = useState<string[]>([]); const onClickShowBoards = async () => { const myBoard = collection(getFirestore(firebaseApp), "MyBoard"); const result = await getDocs(myBoard); const data = result.docs.map((el) => el.data()); setBoardsData(data); const dataId = result.docs.map((el) => el.id); setBoardId(dataId); }; 위와같이 배열을 생성해서 각각의 아이디를 불러오긴했는데 어떻게 연결시킬지 모르겠네요ㅜ