[새싹X코딩온] 2차 프로젝트 (5)

Sohee Kwon·2024년 1월 5일

부트캠프 새싹 코딩교육 코딩온 프로젝트

[SeSAC] 풀스택 웹 개발자 과정

목록 보기

13/17

2024-01-05 (11일차)

📌 To Do

multer 파일 저장 규칙 설정
회원 정보 조회

💡 Try

회원 정보 조회

프로필 페이지에서 회원 정보(닉네임, 프로필 이미지, 강아지 이름, 강아지 정보 등)를 확인 할 수 있도록
프로필 이미지가 없을 경우, 기본 이미지 삽입

// 사용자 정보 조회
exports.userProfile = async (req, res) => {
  try {
    const profile = await User.findOne({
      attributes: ["user_id", "nickname", "image", "dog_name", "dog_intro"],
      where: { user_id: req.session.user },
    });

    if (!profile.image) profile.image = "/static/user-profile.png";

    res.send(profile);
  } catch (err) {
    console.log(err);
    res.send({ result: false, message: "서버 오류입니다." });
  }
};

💣 트러블 슈팅

multer

프로필 이미지를 수정하거나, 게시판에 이미지를 삽입할 때, 사용자가 업로드하려는 이미지 파일의 이름이 한글이면 깨지는 현상 발생

이미지 파일 이름 규칙을 설정함.

// 업로드된 파일을 저장할 디렉터리 및 파일명 설정
let imageNum = 1;
const storage = multer.diskStorage({
destination: function (req, file, cb) {
  cb(null, "static"); // 파일을 저장할 디렉터리
},
filename: function (req, file, cb) {
  const ext = path.extname(file.originalname);
  cb(null, "image__" + imageNum + ext); // 파일명 설정 ex) image_1.png
  imageNum++;
},
});

📃 기록

이제 프로젝트 마감 기간까지 일주일도 안 남았는데,
백엔드는 거의 끝나가는데 프론트는 아직 UI도 작성이 안 된 페이지들이 몇 개 있어 과연 마감기한 전까지 다 할 수 있을지 걱정이다...😭
그래서 백엔드이지만 이번에도 axios를 해야 할 것 같다ㅠㅠ

2024-01-06 (12일차)

📌 To Do

프로필 이미지 확인
회원별 게시판 조회
axios (회원가입(추가), 게시판, 메인, 프로필)

💣 트러블 슈팅

multer

결국 이번에도 시간에 쫓겨서 프론트를 하게 되어서...
회원 정보를 axios로 요청받아 사용했는데, 다른 정보는 잘 변경되는데 이미지만 인식이 안되는 것이다!
- 확인해보니 image: /static/image__1.png 이런 식으로 데이터가 들어오는데
  axios 요청처럼 scr = "http://localhost:8000/static/image__1.png 이렇게 입력해줘야 하는 것이었다💥

<img src={`${process.env.REACT_APP_HOST}${userInfo && userInfo.image}`} alt="프로필 사진" />

formData

서버에 이미지를 업로드할 때, 이미지는 form-data형태로 전송되어야 하기 때문에, formData를 선언해서 이미지와 다른 데이터를 append 해서 회원가입 시키는데 자꾸 이미지만 서버로 넘어오지 않는 문제 발생!
- 알고보니, user router에 multer 미들웨어가 걸려있지 않아서, req.file을 인식하지 못했던 것...
```
const { upload } = require("../multer/multerConfig");
router.post("/signup", upload.single("image"), controller.signUp);
```