안녕하세요! 제로초님! 노드버드 섹션6 EC2 생성하기 강의까지 수강한 수강생 입니다!아래 수강생 분과 동일한 문제가 발생하여 구글링과 다른 분들의 질문 글을 보며해결하려 했으나 그러지 못하여 질문을 올리게 되었습니다!항상 친절한 답변을 해주셔서 감사합니다!(강의 항상 잘 보고 있어요!) 같은 문제가 발생한 수강생 분의 질문https://www.inflearn.com/course/lecture?courseSlug=%EB%85%B8%EB%93%9C%EB%B2%84%EB%93%9C-%EB%A6%AC%EC%95%A1%ED%8A%B8-%EB%A6%AC%EB%89%B4%EC%96%BC&unitId=49012&tab=community&category=questionDetail&q=152537키의 권한을 바꾸는 방법 참고https://wookim789.tistory.com/34SSH은 22번 포드, HTTP는 80번 포트, HTTPS는 443번 포트로 강의와 동일하게 진행하였습니다.폴더를 하나 더 들어가야 하는 불편함 때문에 강의와 똑같이 prepare 폴더는 만들지 않고,노드버드 폴더 아래에 바로 front, back 폴더가 위치하도록 하였습니다.vs 터미널에서 발생한 문제 메시지를 번역하니 다음과 같았습니다.경고: 보호되지 않는 개인 키 파일react-nodebird.pem'에 대한 권한이 너무 열려 있습니다.다른 사람이 개인 키 파일에 액세스할 수 없어야 합니다. 이 개인 키는 무시됩니다.로드 키 "react-nodebird.pem": 잘못된 권한ubuntu@ec2-13-125-253-222.ap-northeast-2.compute.amazonaws.com : 권한이 거부되었습니다 같은 문제가 발생한 수강생 분의 글을 읽고 vs 터미널이 아닌 git bash를 사용했습니다.이 때 문제를 해결하신 수강생 분과는 다른 메시지가 나타났습니다.(문제를 해결하신 수강생 분의 git bash 상태)(저의 git bash 상태)응용프로그램에 대한 확장 보안 유지관리가 활성화되지 않았습니다.Expanded Security Maintenance for Applications is not enabled.빨간 선은 개인 정보라 부득이하게 블러 처리하였습니다. ssh -i "react-nodebird.pem" ubuntu@ec2-13-125-253-222.ap-northeast-2.compute.amazonaws.com의심이 들어 다시 vs code 터미널의 노드버드 폴더 경로에 위 명령어를 붙여 넣었으나WARNING: UNPROTECTED PRIVATE KEY FILE! 문제가 계속 발생합니다.어떻게 해야 이 문제를 해결할 수 있는지 도움을 구하고 싶습니다!저 또한 답변만 기다리지 않고 계속 해결 방안을 모색하겠습니다!긴 질문 글 읽어주셔서 감사합니다.

npm run build 후npm run start:prod 했더니 main.js를 찾을 수 없다는 에러 메세지가 나와 디렉토리를 확인해보니 아래와 같았습니다.그리고 main.js는 /dist/src 아래에 있었고요. 일단 packakge.json에서 start:prod의 실행 경로를 'dist/src/main.js'로 변경했고,npm run start:prod해서 서비스 가동되는것 확인했습니다. vsc 종료해도 로컬 호스트로 백엔드 서버 접근과 api 사용까지 이상 없이 되는 것 확인했으니 이대로 aws에 올리고 루트 디렉토리에 /dist 폴더, .env, .gitignore, package-lock.json, package.json만 업로드 해주면 되는걸까요?

build해서 yarn start 했을때 제컴퓨터론 잘되는데 AWS해서 페이지를 열경우 게시판 리스트가 안뜹니다 불러오기가 안되는거같은데 이유가 이유가 뭘까요

https://github.com/diderot7/REACT-PRACTICE/blob/master/src/Logout.js 강의를 들으면서 1. 로컬스토리지로 로그인 기능 구현로그인 시 로컬스토리지에 동일한 아이디 패스워드가 있다면 컨텐츠 보여주는 기능 구현이렇게 만들어봤습니다. 그런데 useEffect로 로그인 유지기능이 어떻게해도 안되서.. 혹시 힌트를 좀 얻을 수 있을까요?

약 7분경 css는 그냥 import로 불러오시는 강의 내용이 있는데요, 이전에 import를 하기 위해선 원본 파일에서 꼭 export를 해줘야한다고 말씀해주셨던 것 같아서요.js파일과 다르게 css 파일을 불러올때는 꼭 export를 하지 않아도 되는 걸까요?

 안녕하세요. 우분투 서버에서 ftp 서버을 사용하고 있습니다.nestjs-ftp 을 사용해서 다운로드 하면 upload, download는 가능한데(우분투 서비 컴퓨터에) upload만한 위치 주소만 링크를 시키고 싶은데 안됩니다.aws같이 다운로드 url주소만 가져올수 있는 방법이 있을까요?frontend에서 이미지를 등록을 할려고 하니 url주소가 없어서 등록이 안됩니다.aws을 사용할려고도 생각해 보았으나 사진이 많이 업로드 되어야 해서 비용적인 부담이 있습니다.

안녕하세요 제로초님!! 해당 강의 영상을 끝까지 수강한 수강생 입니다!항상 강의 영상 잘 보고 있습니다. 복잡한 질문에도 친절히 답해주셔서 감사합니다~! 첫 번째 에러를 번역해보니 'FollowList'에 prop 'data'가 필요한 것으로 표시되어 있지만 값은 'undefined'입니다. 라고 뜹니다.문제가 생긴 profile.js 에서 console.log(data)를 해보니 역시 data가 undefined 가 나옵니다.FollowList.js의 data가 profile.js로 전달이 되지 않은 것인가요? 만약 그렇다면 어디를 봐야 하는지 힌트 부탁 드립니다!(data의 프롭타입은 배열입니다!)https://github.com/ZeroCho/react-nodebird/blob/master/ch6/front/pages/profile.js질문을 올리기 전에 제로초님 깃허브를 꼼꼼히 참고하고 스스로 구글링 해보았지만 해결이 어려워 질문 올립니다!포기하지 않고 끝까지 완강을 목표로 하겠습니다! 아래 사진은 상단 이미지에서 잘린 에러 전체입니다.감사합니다!

http일 때는 문제가 없었는데 https 적용 후에 문제가 발생합니다.강의에서 알려주신 대로 하면 에러가 나와서 제로초 님 블로그 보고 cerbot이랑 nginx 설치했습니다.아래 코드만 강의와 다르게 했습니다.sudo snap install certbot --classic sudo apt-get install nginxsudo certbot --nginxhttps://www.zerocho.com/category/NodeJS/post/5ef450a5701d8a001f84baeb 에러 내용은 다음과 같습니다.https 적용 전https://abc.s3.ap-northeast-2.amazonaws.com/original/1705127046450_china.jpg https 적용 후https://abc/https:/abc.s3.ap-northeast-2.amazonaws.com/original/1705127046450_china.jpghttp://abc/ 이 부분을 없애는 방법을 알고 싶습니다. nginx.conf는 아래와 같습니다.server { // 실제로는 구매한 도메인 넣었습니다. server_name abc; location / { proxy_set_header HOST $host; proxy_pass http://127.0.0.1:3000/; proxy_redirect off; } }server { // 실제로는 구매한 도메인 넣었습니다. server_name api.abc; location / { proxy_set_header HOST $host; proxy_pass http://127.0.0.1:3000/; proxy_redirect off; } } 

figma에서 클릭을 해서 눌러도 옆에 properties/comment/Export 이 칸에서 code가 따로 보이지 않습니다. 어떻게 된건가요?

// users.module.ts import { Module } from '@nestjs/common'; import { UsersService } from './users.service'; import { UsersController } from './users.controller'; import { TypeOrmModule } from '@nestjs/typeorm'; import { Users } from '../entities/Users'; @Module({ imports: [TypeOrmModule.forFeature([Users])], providers: [UsersService], controllers: [UsersController], }) export class UsersModule {}// app.module.ts import { MiddlewareConsumer, Module } from '@nestjs/common'; import { AppController } from './app.controller'; import { AppService } from './app.service'; import { ConfigModule } from '@nestjs/config'; import { LoggerMiddleware } from './middlewares/logger.middleware'; import { UsersModule } from './users/users.module'; import { WorkspacesModule } from './workspaces/workspaces.module'; import { ChannelsModule } from './channels/channels.module'; import { DmsModule } from './dms/dms.module'; import { UsersService } from './users/users.service'; import * as process from 'process'; import { TypeOrmModule } from '@nestjs/typeorm'; import { Users } from './entities/Users'; @Module({ imports: [ ConfigModule.forRoot({ isGlobal: true }), UsersModule, WorkspacesModule, ChannelsModule, DmsModule, TypeOrmModule.forRoot({ type: 'mysql', host: 'localhost', port: 3306, username: process.env.DB_USER, password: process.env.DB_PW, database: process.env.DB_NAME, entities: ['./entities/*.{js,ts}'], synchronize: false, logging: true, keepConnectionAlive: true, migrations: [__dirname + '/src/migrations/*.ts'], }), TypeOrmModule.forFeature([Users]), ], controllers: [AppController], providers: [AppService, UsersService], }) export class AppModule { configure(consumer: MiddlewareConsumer): void { consumer.apply(LoggerMiddleware).forRoutes('*'); } }// users.controller.ts import { Body, Controller, Post, Get, Req, Res, UseInterceptors, } from '@nestjs/common'; import { ApiOperation, ApiResponse, ApiTags } from '@nestjs/swagger'; import { JoinRequestDto } from './dto/join.request.dto'; import { UsersService } from './users.service'; import { UserDto } from '../common/dto/user.dto'; import { User } from '../common/decorators/user.decorator'; import { UndefinedToNullInterceptor } from '../common/interceptors/undefinedToNull.interceptor'; @UseInterceptors(UndefinedToNullInterceptor) @ApiTags('USER') @Controller('api/users') export class UsersController { constructor(private usersService: UsersService) {} //..... @ApiOperation({ summary: '회원가입' }) @Post() async join(@Body() body: JoinRequestDto) { await this.usersService.join(body.email, body.nickname, body.password); }import { HttpException, Injectable } from '@nestjs/common'; import { InjectRepository } from '@nestjs/typeorm'; import { Repository } from 'typeorm'; import { Users } from '../entities/Users'; import bcrypt from 'bcrypt'; @Injectable() export class UsersService { constructor() {} @InjectRepository(Users) private usersRepository: Repository<Users>; getUser() {} async join(email: string, nickname: string, password: string) { const user = this.usersRepository.findOne({ where: { email } }); if (!email) { throw new HttpException('이메일이 없습니다.', 400); } if (!nickname) { throw new HttpException('닉네임이 없습니다.', 400); } if (!password) { throw new HttpException('비밀번호가 없습니다.', 400); } if (user) { throw new HttpException('이미 존재하는 사용자입니다.', 400); } const hashedPassword = await bcrypt.hash(password, 12); await this.usersRepository.save({ email, nickname, password: hashedPassword, }); } }// a-nest/src/entities/Users.ts import { Column, Entity, Index, OneToMany, PrimaryGeneratedColumn, } from "typeorm"; import { Channelchats } from "./Channelchats"; import { Channelmembers } from "./Channelmembers"; import { Dms } from "./Dms"; import { Mentions } from "./Mentions"; import { Workspacemembers } from "./Workspacemembers"; import { Workspaces } from "./Workspaces"; @Index("email", ["email"], { unique: true }) @Entity("users", { schema: "sleact" }) export class Users { @PrimaryGeneratedColumn({ type: "int", name: "id" }) id: number; @Column("varchar", { name: "email", unique: true, length: 30 }) email: string; @Column("varchar", { name: "nickname", length: 30 }) nickname: string; @Column("varchar", { name: "password", length: 100 }) password: string; @Column("datetime", { name: "createdAt" }) createdAt: Date; @Column("datetime", { name: "updatedAt" }) updatedAt: Date; @Column("datetime", { name: "deletedAt", nullable: true }) deletedAt: Date | null; @OneToMany(() => Channelchats, (channelchats) => channelchats.user) channelchats: Channelchats[]; @OneToMany(() => Channelmembers, (channelmembers) => channelmembers.user) channelmembers: Channelmembers[]; @OneToMany(() => Dms, (dms) => dms.sender) dms: Dms[]; @OneToMany(() => Dms, (dms) => dms.receiver) dms2: Dms[]; @OneToMany(() => Mentions, (mentions) => mentions.sender) mentions: Mentions[]; @OneToMany(() => Mentions, (mentions) => mentions.receiver) mentions2: Mentions[]; @OneToMany( () => Workspacemembers, (workspacemembers) => workspacemembers.user ) workspacemembers: Workspacemembers[]; @OneToMany(() => Workspaces, (workspaces) => workspaces.owner) workspaces: Workspaces[]; }  서버 실행 후 http://localhost:3002/api/users URL로 빈 값을 POST로 보내면 콘솔창에 400 이메일이 없습니다. 라는 문구가 뜬 이후에C:\Users\xxx\Documents\Project\NestProject\a-nest\src\data-source\DataSource.ts:448 if (!metadata) throw new EntityMetadataNotFoundError(target) ^ EntityMetadataNotFoundError: No metadata for "Users" was found. at DataSource.getMetadata (C:\Users\xxx\Documents\Project\NestProject\a-nest\src\data-source\DataSource.ts:448:30) at Repository.get metadata [as metadata] (C:\Users\xxx\Documents\Project\NestProject\a-nest\src\repository\Repository.ts:53:40) at Repository.findOne (C:\Users\xxx\Documents\Project\NestProject\a-nest\src\repository\Repository.ts:597:42) at UsersService.join (C:\Users\xxx\Documents\Project\NestProject\a-nest\src\users\users.service.ts:13:39) at UsersController.join (C:\Users\xxx\Documents\Project\NestProject\a-nest\src\users\users.controller.ts:37:29) at C:\Users\xxx\Documents\Project\NestProject\a-nest\node_modules\@nestjs\core\router\router-execution-context.js:38:29 at processTicksAndRejections (node:internal/process/task_queues:95:5)위와 같이 EntityMetadataNotFoundError에러가 발생합니다. DB 커넥션 부분도 확인해보고, entities 부분이 문제인가 싶어 아래와 같이 변경도 해보았지만TypeOrmModule.forRoot({ entities: ['./entities/*.{js,ts}'], ],해결되지 않아 질문드립니다.추가적으로 \data-source\DataSource.ts 부분과\repository\Repository.ts부분은 실제 디렉토리에 없는 것들인데 왜 뜨는지도 모르겠습니다.해결 방법이 있을까요?

안녕하세요. 선생님 무한스크롤이 계속 만들어져서 질문드려요위 사진에는 댓글이 2개 달린 상태입니다. 그런데스크롤을 내리면서 2개였던게 계속 복사되어 만들어지는 상태입니다. 이런식으로 초기 댓글 갯수가 반복해서 늘어나는 것 같아요. 코드를 보고도 오류를 찾기 힘들어 질문 드려요!참고로, 이전에 비슷한 질문에 확인 해야 할 사항이 있어서 체크해보았습니다. nextconfig.json에서 reactStrictmode를 false로 바꿔보시고 서버를 껐다 다시 켜주세요!>> 바꾸고 해도 되지 않는 것 같습니다. 무한스크롤을 제거한 후 댓글을 작성해 보고 정상적으로 작성이 되는지 알려주세요.>> 무한스크롤 컴포넌트 삭제 시 다른 부분들은 원활하게 작동합니다.또 다른 자료가 필요하시면 말씀해주세요! 긴 질문 읽어주셔서 감사합니다!!  

 어이없네.. 쿰척쿰척 먹는걸 왜 돈낸 강의에서 들어야함;; 진짜 짜증나네진짜

해당 강의 깃허브 주소나디스코드 주소는 어디있나요?

// Home.js import { useState, useContext, useEffect } from "react"; import { DiaryStateContext } from "../App"; import MyButton from "./../components/MyButton"; import MyHeader from "./../components/MyHeader"; import DiaryList from "./../components/DiaryList"; const Home = () => { const diaryList = useContext(DiaryStateContext); const [data, setData] = useState([]); const [curDate, setCurDate] = useState(new Date()); const headText = `${curDate.getFullYear()}년 ${curDate.getMonth() + 1}월`; useEffect(() => { if (diaryList.length >= 1) { const firstDay = new Date( curDate.getFullYear(), curDate.getMonth(), 1 ).getTime(); const lastDay = new Date( curDate.getFullYear(), curDate.getMonth() + 1, 0 ).getTime(); setData( diaryList.filter((it) => firstDay <= it.date && it.date <= lastDay) ); } }, [diaryList, curDate]); useEffect(() => { console.log(data); }, [data]); const increaseMonth = () => { setCurDate( new Date(curDate.getFullYear(), curDate.getMonth() + 1, curDate.getDate()) ); }; const decreaseMonth = () => { setCurDate( new Date(curDate.getFullYear(), curDate.getMonth() - 1, curDate.getDate()) ); }; return ( <div> <MyHeader headText={headText} leftChild={<MyButton text={"<"} onClick={decreaseMonth} />} rightChild={<MyButton text={">"} onClick={increaseMonth} />} /> <DiaryList diaryList={data} /> </div> ); }; export default Home;  // DiaryList.js import { useState } from "react"; const sortOptionList = [ { value: "latest", name: "최신순" }, { value: "oldest", name: "오래된 순" }, ]; const ControlMenu = ({ value, onChange, optionList }) => { return ( <select value={value} onChange={(e) => onChange(e.target.value)}> {optionList.map((it, idx) => ( <option key={idx} value={it.value}> {it.name} </option> ))} </select> ); }; const DiaryList = ({ diaryList }) => { const [sortType, setSortType] = useState("lastest"); return ( <div> <ControlMenu value={sortType} onChange={setSortType} optionList={sortOptionList} /> {diaryList.map((it) => ( <div key={it.id}>{it.content}</div> ))} </div> ); }; DiaryList.defaultProps = { diaryList: [], }; export default DiaryList;  // App.js import React, { useReducer, useRef } from "react"; import "./App.css"; import { BrowserRouter, Routes, Route } from "react-router-dom"; import Home from "./pages/Home"; import New from "./pages/New"; import Edit from "./pages/Edit"; import Diary from "./pages/Diary"; const reducer = (state, action) => { let newState = []; switch (action.type) { case "INIT": { return action.data; } case "CREATE": { const newItem = { ...action.data, }; newState = [newItem, ...state]; break; } case "REMOVE": { newState = state.filter((it) => it.id !== action.targetId); break; } case "EDIT": { newState = state.map((it) => it.id === action.data.id ? { ...action.data } : it ); break; } default: return state; } return newState; }; export const DiaryStateContext = React.createContext(); export const DiaryDispatchContext = React.createContext(); const dummyData = [ { id: 1, emotion: 1, content: "오늘의일기 1번", date: 1704809815768, }, { id: 2, emotion: 2, content: "오늘의일기 2번", date: 1704809815769, }, { id: 3, emotion: 3, content: "오늘의일기 3번", date: 1704809815770, }, { id: 4, emotion: 4, content: "오늘의일기 4번", date: 1704809815771, }, { id: 5, emotion: 5, content: "오늘의일기 5번", date: 1704809815772, }, ]; function App() { const [data, dispatch] = useReducer(reducer, dummyData); console.log(new Date().getTime()); const dataId = useRef(0); // CREATE const onCreate = (date, content, emotion) => { dispatch({ type: "CREATE", data: { id: dataId.current, date: new Date(Date).getTime(), content, emotion, }, }); dataId.current += 1; }; // REMOVE const onRemove = (targetId) => { dispatch({ type: "REMOVE", targetId }); }; // EDIT const onEdit = (targetId, date, content, emotion) => { dispatch({ type: "EDIT", data: { id: targetId, date: new Date(Date).getTime(), content, emotion, }, }); }; return ( <DiaryStateContext.Provider value={data}> <DiaryDispatchContext.Provider value={{ onCreate, onEdit, onRemove }}> <BrowserRouter> <div className="App"> <Routes> <Route path="/" element={<Home />} /> <Route path="/new" element={<New />} /> <Route path="/edit" element={<Edit />} /> <Route path="/diary/:id" element={<Diary />} /> </Routes> </div> </BrowserRouter> </DiaryDispatchContext.Provider> </DiaryStateContext.Provider> ); } export default App;  해당 강의 23분경부터 계속 막힙니다. 아무리 정렬을 바꿔도 정렬이 변경되지 않아요. 따라친다고 따라쳤는데 어디가 틀린지 잘 모르겠습니다.

🚨 아래의 가이드라인을 꼭 읽고 질문을 올려주시기 바랍니다 🚨질문 하시기 전에 꼭 확인해주세요- 질문 전 구글에 먼저 검색해보세요 (답변을 기다리는 시간을 아낄 수 있습니다)- 코드에 오타가 없는지 면밀히 체크해보세요 (Date와 Data를 많이 헷갈리십니다)- 이전에 올린 질문에 달린 답변들에 꼭 반응해주세요 (질문에 대한 답변만 받으시고 쌩 가시면 속상해요 😢)질문 하실때 꼭 확인하세요- 제목만 보고도 무슨 문제가 있는지 대충 알 수 있도록 자세한 제목을 정해주세요 (단순 단어 X)- 질문의 배경정보를 제공해주세요 (이 문제가 언제 어떻게 발생했고 어디까지 시도해보셨는지)- 문제를 재현하도록 코드샌드박스나 깃허브 링크로 전달해주세요 (프로젝트 코드에서 문제가 발생할 경우)- 답변이 달렸다면 꼭 확인하고 반응을 남겨주세요- 강의의 몇 분 몇 초 관련 질문인지 알려주세요!- 서로 예의를 지키며 존중하는 문화를 만들어가요. - 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.=====================================1강 부터 듣고 있는데 CodeSandBox에서 1강이 끝나고 나와 있는 링크를 따라 CodeSandbox를 연결하였는데 console.log를 찍어도 아무런 반응도 없네요.어디가 문제인가요?

저번에 Unresolved variable 워닝이 뜬다고 했던 수강생입니다.저 워닝 안 뜨게 하려고 종일 구글링했는데도 해결 방법을 못 찾았습니다 ㅠㅠ제로초님 강의에서는 함수로 잘 인식하던데 혹시 수고롭지 않으시다면 webstorm 세팅을 알려주실 수 있나요?Settings에서 Languages & Frameworks => JavaScript => Libraries에 Node.js Core도 체크되어 있고 구글에서 하라는 건 다 해봤는데 안 되네요 ㅠㅠmodels/index.js에서 const sequelize = new Sequelize(~~); 에서 Sequelize도 constructor가 아닌 function으로 인식하네요따로 설정 안 하셨다면 어쩔 수 없지만 혹시 따로 세팅하신 게 기억이 나신다면 공유해주시면 감사하겠습니다

안녕하세요, Counter 컴포넌트 호출 회수를 디버깅 하기 위해 console.log("counter 호출!"); 구문을 아래와 같이 추가해주었는데, 강사님과는 다르게 저는 처음 렌더링 될 때와 count의 상태 값이 변화할 때 마다 counter 호출이 두 번씩 일어납니다. 이유가 무엇일까요..? 아무리 생각해봐도 이유를 모르겠습니다. 위 브라우저 콘솔 사진은 최초 렌더링 되고나서 개발자도구를 켰을 때 모습입니다. 처음부터 두 번이 호출되어 있고, 그 이후에도 count의 상태를 변화시킬 때 마다 두 번씩 로그에 찍힙니다. 

 안녕하세요. 구글 로그인시 authService에 setRefreshToken 함수를 불러오면서 setHeader오류가 발생합니다. @UseGuards(GqlAuthGuard('google')) @Get('google') async socialGoogleLogin( @Req() req: Request & IOAuthUser, @Res() res: Response & IContext, ) { let user = await this.usersService.findOne({ findOneUserInput: { email: req.user.email }, }); if (!user) { user = await this.usersService.create({ createUserInput: { email: req.user.email, password: req.user.password, name: req.user.name, }, }); } await this.authService.setRefreshToken({ user, context: res, }); res.redirect('http://localhost:5500/social-login.html'); }  async setRefreshToken({ user, context }: IAuthServiceSetRefreshToken) { const refreshToken = await this.jwtService.sign( { sub: user.id }, { secret: 'coex', expiresIn: '4h' }, ); context.res.setHeader( 'set-Cookie', `refreshToken=${refreshToken}; path=/;`, ); }  @Injectable() export class JwtRefreshStrategy extends PassportStrategy(Strategy, 'refresh') { constructor() { super({ jwtFromRequest: (req) => { const cookies = req.headers.cookie; const refreshToken = cookies.replace('refreshToken=', ''); return refreshToken; }, secretOrKey: 'coex', }); } async validate(payload: any) { return { id: payload.sub }; } } front error{statusCode: 500,message: "Internal server error"}server error[Nest] 90403 - 2024. 01. 10. 오후 7:10:04 ERROR [ExceptionsHandler] Cannot read properties of undefined (reading 'setHeader')TypeError: Cannot read properties of undefined (reading 'setHeader')

http://storage.goolgeapis.com/codecamp-file-storage/2024/1/10/IMG_9473.jpeg위에 주소 맞지 않나요? ㅠㅠ

안녕하세요 제로초님! 노드버드 섹션5 swr 사용해보기 강의까지 진행한 수강생 입니다!항상 질문에 답해주셔서 감사합니다. 올려주신 강의도 잘 보고 있습니다!구글링과 제로초님의 노드버드 깃허브를 꼼꼼히 살펴보았으나 제 지식 부족으로 인하여 질문 올립니다..!swr 라이브러리를 사용 후, 로그인한 다음 프로필 페이지에 가면콘솔 에러가 발생하며, 팔로잉, 팔로워 목록이 없는 문제가 발생합니다.때문에 더 보기 버튼을 클릭해도 더 불러오지 못 했습니다!에러 메시지를 번역하니 다음과 같았습니다.리덕스 탭과 네트워크 탭에서는 에러를 발견하지 못하였습니다!리덕스 탭에서는 해당 사용자의 팔로잉, 팔로워 정보가 들어가 있었고,네트워크 탭에서는 팔로잉, 팔로워 limit이 잘 불러와 집니다.의심이 들어 백엔드 터미널을 확인해보니 팔로잉, 팔로워 목록 limit이 안되고 있었습니다!GET /user/followers?limit=3 401GET /user/followings?limit=3 401에러가 난 코드를 포함해 가장 의심되는 코드를 올립니다!프로필 페이지 profile.js팔로워, 팔로잉 불러오기 구조분해 할당 부분의 ${}코드가 자꾸 깨져서 이 부분만 사진으로 올리겠습니다..!// 실제로 주소 가져오기 : 데이터를 가져오는 API를 호출하는 fetcher 함수 const fetcher = (url) => axios.get(url, { withCredentials: true }).then((result) => result.data ); // 프로필 컴포넌트(사용자 정의 태그) const Profile = () => { // 프로필 페이지에서 로그아웃한 상태일(me가 없을 때)때 메인 페이지로 이동 useEffect(() => { if (!(me && me.id)) { Router.push('/'); } }, [me && me.id]); // 팔로워 목록 더 불러오기 콜백 함수 const loadMoreFollowers = useCallback(() => { setFollowersLimit((prev) => prev + 3); // 기존 limit보다 3 올려주기 }, []); // 팔로잉 목록 더 불러오기 콜백 함수 const loadMoreFollowings = useCallback(() => { setFollowingsLimit((prev) => prev + 3); // 기존 limit보다 3 올려주기 }, []); // 로그인 하지 않은 상태일(me가 없을)때 프로필 페이지로 이동 막기 if (!me) { return '내 정보 로딩중...'; }; /* 팔로워 에러 or 팔로잉 에러 둘 중 하나가 에러났을 때 에러 콘솔하기 */ // Hook은 항상 모두 다 실행되어야 하기에 return은 Hook보다 위에 위치할 수 없다. if (followerError || followingError) { console.error(followerError || followingError); return <div>팔로워/팔로잉 로딩 중 에러가 발생합니다.</div>; } return ( <> <Head> <title>내 프로필 | NodeBird</title> </Head> <AppLayout> {/* ---------- 닉네임 수정 폼 ---------- */} <NicknameEditForm /> {/* ---------- 팔로잉 목록 ---------- */} console.log(followingsData); <FollowList header="팔로잉" data={followingsData} onClickMore={loadMoreFollowings} // SWR에서의 로딩 : 팔로잉 데이터와 팔로잉 에러가 없을 때 loading={!followingsData && !followingError} /> {/* ---------- 팔로워 목록 ---------- */} <FollowList header="팔로워" data={followersData} onClickMore={loadMoreFollowers} // SWR에서의 로딩 : 팔로워 데이터와 팔로워 에러가 없을 때 loading={!followersData && !followerError} /> </AppLayout> </> ); };user.js(백엔드 팔로워, 팔로잉 라우터)// 팔로워 라우터 router.get('/followers', isLoggedIn, async (req, res, next) => { // GET /user/followers try { /* 나를 찾는 함수 */ const user = await User.findOne({ where: { id: req.user.id }}); /* ---------- 만약 내가 없다면 400번대 에러 출력 ---------- */ if (!user) { res.status(403).send('없는 사람을 찾으려고 하시네요?'); } /* 사용자 팔로워 목록 가져오기 */ // limit을 올려주면 그 limit만큼 더 가져오도록 하기 const followers = await user.getFollowers({ limit: parseInt(req.query.limit, 10), }); /* 팔로워 목록을 프론트로 넘기기 */ res.status(200).json(followers); /* ---------- 에러 캐치 ---------- */ } catch (error) { console.error(error); next(error); } }); // 팔로잉 라우터 router.get('/followings', isLoggedIn, async (req, res, next) => { // GET /user/followings try { /* 나를 찾는 함수 */ const user = await User.findOne({ where: { id: req.user.id }}); /* ---------- 만약 내가 없다면 400번대 에러 출력 ---------- */ if (!user) { res.status(403).send('없는 사람을 찾으려고 하시네요?'); } /* 사용자 팔로잉 목록 가져오기 */ // limit을 올려주면 그 limit만큼 더 가져오도록 하기 const followings = await user.getFollowings({ limit: parseInt(req.query.limit, 10), }); /* 팔로잉 목록을 프론트로 넘기기 */ res.status(200).json(followings); /* ---------- 에러 캐치 ---------- */ } catch (error) { console.error(error); next(error); } });FollowList.js// 팔로우 리스트 컴포넌트(사용자 정의 태그) const FollowList = ({ header, data, onClickMore, loading }) => { . . . return ( <List /* 더보기 버튼 */ loadMore={( <div style={{ textAlign: 'center', margin: '10px 0px' }}> <Button onClick={onClickMore} loading={loading}>더 보기</Button> </div> )} . . . /> ); };