inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

[리뉴얼] React로 NodeBird SNS 만들기

조인한 테이블에서 데이터 꺼내오기 질문

269

뉸뉴

작성한 질문수 23

0

안녕하세요 선생님. 현재 유저 프로필의 이미지를 불러오는데에 어려움을 겪고 있습니다...ㅠ

 

유저 정보는 유저 리듀서의 info안에 들어있으니 쉽게 꺼냈는데,

유저 Image는 다른 테이블(Images 테이블)에 들어있어서 어떻게 해당 아이디의 image의 src를 꺼내올 수 있는지 모르겠습니다..

 

<img src={`http://localhost:3065/${me.Images[0].src}`} />

저는 이렇게 가져오면 되지 않을까 싶었는데

me는 useSelector로 가져왔고,

리액트 노드버드에서 게시글 이미지를 조인된 테이블에서 `http://localhost:3065/${images[0].src}`이렇게 가져오길래(노드버드에서는 부모 컴포넌트에서 부터 props로 전달해서 준 것을 알지만 맥락이 제 코드와 비슷하다고 생각했습니다.)

 

하지만 리액트 노드버드에서는 게시글 이미지를 불러올 때 map의 키값으로 각각의 post의 id를 알 수 있지만 저는 바로 me를 불러오는데...어떻게 해야할지 감을 잡을 수 없어 질문 드립니다.ㅠ

조언 부탁드립니다 선생님.

express redux react nodejs Next.js

답변 1

0

제로초(조현영)

me 정보를 서버에서 불러올 때 Images를 include 안 하신 게 아닌가요??

0

뉸뉴

네....선생님 말씀대로 include에서 이미지 테이블을 빼먹었습니다....ㅠㅠㅠㅠㅠ제가 놓친 부분 이네요...

그리고 이상하게 이전 질문에서 routes의 user의 add.Image에서 오류가 나서, 선생님이 create부분에서 UserId를 설정하라 하셔서 설정해가지고 그 부분 오류는 해결했었는데 갑자기 또 add.Image가 함수가 아니라고 오류가 납니다..UserId를 설정했는데도요.

//프로필 정보 수정
router.patch('/info', isLoggedIn, upload.none(), async(req, res, next) => {
    try{
       const user = await User.update({
            info: req.body.info
        }, {
           where: {
            id: req.user.id
          } 
        });
        if(req.body.image){
          console.log('image:::' + req.body.image);
          console.log('user:::' + req.user.id);
          const image = await Image.create({src: req.body.image, UserId: req.user.id});
          await user.addImage(image);
        }
        res.status(200).json({info: req.body.info});
    }
    catch(error){
        console.error(error);
        next(error);
    }
});

오류가 난 부분은 이렇고,

Images테이블 구성은

image위와 같이 되어있습니다.

콘솔의 에러 코드를 보면

Executing (default): SELECT id, nickname, password, info, createdAt, updatedAt FROM Users AS User WHERE User.`id` = 1;

Executing (default): UPDATE Users SET info=?,`updatedAt`=? WHERE id = ?

image:::luobulinka-FO4mQZi1c0M-unsplash_1667562741275.jpg

user:::1

Executing (default): INSERT INTO Images (`id`,`src`,`createdAt`,`updatedAt`,`UserId`) VALUES (DEFAULT,?,?,?,?);

TypeError: user.addImage is not a function

at C:\Users\내컴\Desktop\passionary\back\routes\user.js:161:22

at processTicksAndRejections (node:internal/process/task_queues:96:5)

TypeError: user.addImage is not a function

at C:\Users\내컴\Desktop\passionary\back\routes\user.js:161:22

at processTicksAndRejections (node:internal/process/task_queues:96:5)

PATCH /user/info 500 35.501 ms - 338

라고 하는데

console.log를 찍어본걸 보면 브라우저에서 요청한 image데이터도 들어오고, user id도 들어와 있는데 왜 addImage함수가 다시 작동을 안하는지 모르겠습니다.....

 

user와 image의 모델 관계는 user에

db.User.hasOne(db.Image);

image에

db.Image.belongsTo(db.User);

로 설정해놨습니다.

조언 부탁드립니다 선생님.

0

제로초(조현영)

User.update로는 user 객체를 만들어낼 수 없습니다. 그래서 user.addImage가 없는겁니다. create나 find로 만드는 겁니다.

0

뉸뉴

아아 알겠습니다 다시 해볼게요!

넥스트 버젼 질문

0

90

2

로그인시 401 Unauthorized 오류가 뜹니다

0

104

1

무한 스크롤 중 스크롤 튐 현상

0

197

1

특정 페이지 접근을 막고 싶을 때

0

116

2

createGlobalStyle의 위치와 영향범위

0

103

2

인라인 스타일 리렌더링 관련

0

98

2

vsc 에서 npm init 설치시 오류

0

159

2

nextjs 15버전 사용 가능할까요?

0

166

1

화면 새로고침 문의

0

129

1

RTK에서 draft, state 차이가 있나요?

0

164

2

Next 14 사용해도 될까요?

0

455

1

next, node 버전 / 폴더 구조 질문 드립니다.

0

359

1

url 오류 질문있습니다

0

218

1

ssh xxxxx로 우분투에 들어가려니까 port 22: Connection timed out

0

391

1

sudo certbot --nginx 에러

0

1295

2

Minified React error 콘솔에러 (hydrate)

0

481

1

카카오 공유했을 때 이전에 작성했던 글이 나오는 버그

0

257

1

프론트서버 배포 후 EADDRINUSE에러 발생

0

341

1

npm run build 에러

0

526

1

front 서버 npm run build 중에 발생한 에러들

0

399

1

서버 실행하고 브라우저로 들어갔을때 404에러

0

351

2

css 서버사이드 랜더링이 적용되지 않아서 문의 드립니다.

0

291

1

팔로워 3명씩 불러오고 데이터 합쳐주는걸로 바꾸고 서버요청을 무한으로하고있습니다.

0

250

2

해시태그 검색에서 throttle에 관해 질문있습니다.

0

207

1