프로젝트 14일차

정지우·2021년 12월 6일

Project.zip

목록 보기

9/17

파이널 프로젝트 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>

⛔️ 에러 핸들링

: 프로필 수정 요청을 보낸 후, 로그아웃 이후, 다시 마이페이지에 들어가면, callstack 에러가 발생한다.

📖 로그인이 안 되는 에러 발생

⛔️ 에러 핸들링

: 프로필 수정 이후, 로그인을 시도하면 서버 에러(500)가 발생하면서, 로그인이 정상적으로 실행되지 않습니다.

join을 통해 회원가입을 성공적으로 진행한 후, 바로 로그인을 시도하면 로그인에 아무런 문제가 발생하지 않습니다.
아래 코드는, 서버 터미널에서 console.log로 출력한 계정 정보입니다.

DATA :  User {
  dataValues: {
    id: 5,
    email: 'aa@aa.com',
    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: 'aa@aa.com',
    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: 'aa@aa.com',
    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: 'aa@aa.com',
    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가 생기는 이유이기도 합니다.