2024-04-30.md

날짜: 2024-04-30

🌤️ 스크럼

• 학습 목표 1 : 커뮤니티웹 express 서버 구축
• 학습 목표 2 : 커뮤니티웹 서버와 클라이언트 연결

⚡️ 새로 배운 내용

1. formData

• formData는 multipart/form-data 형식으로 데이터를 전송할 수 있게 해주는 객체이다.

🔥 오늘의 도전 과제와 해결 방법

도전 과제 1: 클라이언트와 서버에서 이미지 처리하기

• 상황
  이미지를 인코딩한 Base64 문자열 길이가 너무 길어서 서버에서 아래와 같은 에러가 발생했다.

  PayloadTooLargeError: request entity too large

  원래 코드
  html/signup.js

  function encodeFileToBase64(img, callback) {
      const reader = new FileReader();
      reader.onload = () => {
          const imageSrc = reader.result;
          callback(imageSrc);
      };
      reader.readAsDataURL(img);
  }
  
  // event listener
  $profileImageUploadField.addEventListener("change", (e) => {
      if (e.target.files.length === 0) {
          $profileImageHelper.textContent = "*프로필 사진을 추가해주세요.";
          $profileImageLabelField.src = "../../images/icons/plus.png";
          return;
      }
  
      const image = e.target.files[0];
      $profileImageHelper.textContent = "";
      encodeFileToBase64(image, (imageBase64) => {
          $profileImageLabelField.src = imageBase64;
      });
  });

• 의도
  클라이언트 서버에서 이미지를 base64로 인코딩하여 서버에 전송하는 방식으로 구현해놨는데, base64 문자열을 formData에 담아서 이 formData를 서버로 전송하는 방식으로 변경해야 한다.

• 방법
  -> [2024-05-01 TIL]

오늘의 회고

• 스크럼 중 완료한 작업: express 서버 구현 ing...
• 이미지 저장 방식을 찾느라 2시간 넘게 소요했다. 이전 프로젝트에서는 프론트에서 이미지를 Base64로 인코딩하여 전달하는 방식을 사용했어서 이런 에러가 발생할 줄 몰랐다..
• 해결 방법 조사 중에 multer라는 미들웨어를 알게 되었는데, 생소한 개념이고 나는 이미지를 disk에 저장하는 방식을 사용 안한다고 생각해서(현재 db를 구현해놓은게 아니기 때문에...) 다른 방법을 계속 찾았다. 근데 다른 적절한 방법을 찾지 못했다. 내일 multer를 사용해서 이미지를 서버에 저장하는 방법을 찾아봐야겠다.

참고 자료 및 링크

• multer란