프로젝트 14일차
파이널 프로젝트 14일차(21-12-06)
user 리덕스 툴킷 로직 구축(4)
📖 프로필 사진 요청 구현(2)
Buffer 형태 이미지를 마이페이지에 렌더링
- 로그인 시, 서버로부터 전달 받은 이미지 파일을 전달 받는다.
- 이미지 파일은
Buffer
형식이기 때문에, String으로 변환해야 한다.
- img 태그의 src 속성에 해당 이미지를 집어넣기 위함이다.
// MyPageProfileImg
const test = user.profile_image.data;
const base64String = btoa(String.fromCharCode(...new Uint8Array(test)));
return (
<>
<MyPageProfileImgBlock>
<div className="img-box">
<img
src={
previewProfileImage ?
previewProfileImage :
`data:image/png;base64,${base64String}`
}
alt="profile"
style={{ backgroundImage : previewProfileImage }}
/>
</div>
<div className="input-box">
<label htmlFor="file">
사진 업데이트하기
</label>
<input
type="file"
accept="image/*"
id="file"
name="file"
style={{ display: 'none' }}
onChange={onFileChange}
/>
</div>
</MyPageProfileImgBlock>
⛔️ 에러 핸들링
Buffer
형식이기 때문에, String으로 변환해야 한다.// MyPageProfileImg
const test = user.profile_image.data;
const base64String = btoa(String.fromCharCode(...new Uint8Array(test)));
return (
<>
<MyPageProfileImgBlock>
<div className="img-box">
<img
src={
previewProfileImage ?
previewProfileImage :
`data:image/png;base64,${base64String}`
}
alt="profile"
style={{ backgroundImage : previewProfileImage }}
/>
</div>
<div className="input-box">
<label htmlFor="file">
사진 업데이트하기
</label>
<input
type="file"
accept="image/*"
id="file"
name="file"
style={{ display: 'none' }}
onChange={onFileChange}
/>
</div>
</MyPageProfileImgBlock>
: 프로필 수정 요청을 보낸 후, 로그아웃 이후, 다시 마이페이지에 들어가면, callstack 에러가 발생한다.
📖 로그인이 안 되는 에러 발생
⛔️ 에러 핸들링
: 프로필 수정 이후, 로그인을 시도하면 서버 에러(500)가 발생하면서, 로그인이 정상적으로 실행되지 않습니다.
- join을 통해 회원가입을 성공적으로 진행한 후, 바로 로그인을 시도하면 로그인에 아무런 문제가 발생하지 않습니다.
- 아래 코드는, 서버 터미널에서
console.log
로 출력한 계정 정보입니다.
DATA : User {
dataValues: {
id: 5,
email: '[email protected]',
nickname: 'aaaa',
password: 'aaaaaa1!',
admin: false,
profile_image: '/Users/jiwoo/Desktop/GongJang/server/models/../source/profileImg.jpg',
createdAt: 2021-12-07T00:38:17.000Z,
updatedAt: 2021-12-07T00:38:17.000Z
},
_previousDataValues: {
id: 5,
email: '[email protected]',
nickname: 'aaaa',
password: 'aaaaaa1!',
admin: false,
profile_image: '/Users/jiwoo/Desktop/GongJang/server/models/../source/profileImg.jpg',
createdAt: 2021-12-07T00:38:17.000Z,
updatedAt: 2021-12-07T00:38:17.000Z
},
_changed: Set(0) {},
_options: {
isNewRecord: false,
_schema: null,
_schemaDelimiter: '',
raw: true,
attributes: [
'id',
'email',
'nickname',
'password',
'admin',
'profile_image',
'createdAt',
'updatedAt'
]
},
isNewRecord: false
}
eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6NSwiZW1haWwiOiJhYUBhYS5jb20iLCJpYXQiOjE2Mzg4Mzc1MzYsImV4cCI6MTYzODkyMzkzNn0.3THHKh4PODioWriQF6Oaz5obsOH_IO000w56ufdekbM
eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6NSwiZW1haWwiOiJhYUBhYS5jb20iLCJpYXQiOjE2Mzg4Mzc1MzYsImV4cCI6MTY0MTQyOTUzNn0.sGRFkiznbhwsBaRxqdMawR-W8NVYQAmP_6xs3zVSOcM
eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6NSwiZW1haWwiOiJhYUBhYS5jb20iLCJpYXQiOjE2Mzg4Mzc1MzYsImV4cCI6MTYzODkyMzkzNn0.3THHKh4PODioWriQF6Oaz5obsOH_IO000w56ufdekbM
profile_image
키를 주목해보면, 경로가 다음과 같습니다.- profile_image: '/Users/jiwoo/Desktop/GongJang/server/models/../source/profileImg.jpg',
- 제 컴퓨터상에 존재하는 파일 경로입니다.
- 로그인 이후, 마이페이지에 접속하여, 프로필을 수정합니다.
- 이제, 로그아웃을 진행하고 다시 로그인 테스트를 해봅니다.
- 아래 코드는, 서버 터미널에서
console.log
로 출력한 계정 정보입니다.
DATA : User {
dataValues: {
id: 5,
email: '[email protected]',
nickname: 'aaaa',
password: 'aaaaaa1!',
admin: false,
profile_image: 'uploads/d1c781cbe792825d6c596274d0a5fca0',
createdAt: 2021-12-07T00:38:17.000Z,
updatedAt: 2021-12-07T00:51:51.000Z
},
_previousDataValues: {
id: 5,
email: '[email protected]',
nickname: 'aaaa',
password: 'aaaaaa1!',
admin: false,
profile_image: 'uploads/d1c781cbe792825d6c596274d0a5fca0',
createdAt: 2021-12-07T00:38:17.000Z,
updatedAt: 2021-12-07T00:51:51.000Z
},
_changed: Set(0) {},
_options: {
isNewRecord: false,
_schema: null,
_schemaDelimiter: '',
raw: true,
attributes: [
'id',
'email',
'nickname',
'password',
'admin',
'profile_image',
'createdAt',
'updatedAt'
]
},
isNewRecord: false
}
eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6NSwiZW1haWwiOiJhYUBhYS5jb20iLCJpYXQiOjE2Mzg4MzgzNTUsImV4cCI6MTYzODkyNDc1NX0.DNSvAcjytxVGdzajlqOGzK5xCNWcK6uei0mQNLwM8ag
eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6NSwiZW1haWwiOiJhYUBhYS5jb20iLCJpYXQiOjE2Mzg4MzgzNTUsImV4cCI6MTY0MTQzMDM1NX0.bc9w-hs0nbu4Bcz5cDjEQ_ZrkWEgUi96UMK2RGSasz8
undefined
profile_image
키를 주목해보면, 경로가 다음과 같습니다.- profile_image: 'uploads/d1c781cbe792825d6c596274d0a5fca0',
- 멀터상의 이미지 저장소인 upload파일 경로입니다.
- 하지만, upload를 보면 아무런 파일도 있지 않습니다.
- 마지막 줄의
undefined
가 생기는 이유이기도 합니다.
🔍 References
Author And Source
이 문제에 관하여(프로젝트 14일차), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@djdu4496/프로젝트-14일차저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)