주특기 미니 프로젝트 시작

리액트 과정의 마지막으로 백엔드와 협업하는 미니 프로젝트에 돌입했다. 프로젝트 인원이 3명인데 백엔드가 2명이고 프론트엔드가 1명이다. 혼자서 작업한다. 쓸쓸해

이번에 만들 프로젝트는 아나바다 웹사이트이다.

• 거래할 물품을 등록
• 등록 물품을 마이페이지에서 관리
• 채팅으로 거래 중개

목표에 필요한 페이지가 8페이지인데 프론트가 1명이라 내가 부지런히 해야 한다.

다른 조보다는 속도가 빠르게 작업 중이다.(목표량이 많으니까 마음이 급하다)

사실 백엔드가 2분이라 내가 빌드 과정을 끝 맞히면 서버가 준비되어 있을 줄 알았는데... 아니었다. ㅋㅋㅋㅋㅋㅋㅋ
그래도 내일 아침부터 테스트 들어가기로 했다. 내일부터는 준비된 서버가 있다!!

일단 리액트 쿼리를 사용해서 서버에 조회 요청하는 기능은 써둔 상태다.
지난 연습들에서 로그인을 구현할 때, 로그인 상태를 전역 관리하는 걸 선호했던지라 리덕스를 쓸지, 아니면 context API를 사용할지 고심된다. context API는 사용해 본 적이 없다. 지금 급하게 작업하고 있어서 내가 이걸 이해하며 사용할 수 있을지 모르겠다.

오늘의 주요 기능

리액트를 사용하면서 이미지를 업로드하는 기능을 구현하는 건 처음이다.

1. FormData를 사용해서 백엔드에 데이터를 넘겨주기

백엔드 팀원분이 html에서 form 태그에 encType="multipart/form-data"을 사용하라고 알려주셨다.
검색을 해보니 리액트는 FormData 함수를 사용해서 append로 데이터를 저장해 넘겨준다고 한다.

그리고 FormData는 console.log로 확인할 수 없다. 그래서 for 문을 돌려서 key나 value 값을 console.log로 확인해야 한다.

form onSubmit 함수 부분

const ProductRegSubmitHandler = (e) => {
    e.preventDefault();
    const img = imgRef.current;
    const multipleImg = multipleImgRef.current;
    const formData = new FormData();
    formData.append('itemName', title);
    formData.append('itemOneContent', productOneDesc);
    formData.append('itemContent', productDesc);
    formData.append('tradingItem', tradeItem);
    formData.append('tradingPosition', location);
    formData.append('image', img);
    multipleImg.forEach((file) => {
        formData.append(`image`, file);
    });

    // mutation.mutateAsync(formData);

    //formData 콘솔 확인하기
    for (let value of formData.values()) {
        console.log(value);
    }
    setTitle('');
    setProductOneDesc('');
    setProductDesc('');
    setTradeItem('');
    setTradeItem('');
    setLocation('');
};

2.FileReader로 이미지 업로드 미리보기 구현하기

FileReader는 브라우저에서 제공하는 함수라고 한다.
fileReader를 통해 저장을 하면 해당 파일의 url 정보가 저장된다.
state로 저장해서 이미지 업로드를 하면 미리 보기 이미지에 업로드한 이미지가 보이게 해주었다.
그리고 데이터를 넘겨주는 건 화면상의 렌더 되는 상태가 아니어도 되므로 Ref를 사용했다.

하나의 이미지를 미리 보기 하는 건 검색으로 찾았는데
다중 이미지는 어떻게 해야 할지 몰라서 챗GPT에 물어봤다.
새로운 배열을 만들고 반복문을 사용해서 배열에 저장하는 방식을 사용한다.

const handleImageChange = (event) => {
  const file = event.target.files[0];
  imgRef.current = file;
  const reader = new FileReader();
  reader.readAsDataURL(file);
  reader.onloadend = () => {
      setImage(reader.result);
  };
};

const MultipleImageHander = (event) => {
  const files = event.target.files;
  const selectedFiles = Array.from(files);
  multipleImgRef.current = selectedFiles;
  const fileReaders = [];
  selectedFiles.forEach((file) => {
      const reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onloadend = () => {
          const imageDataURL = reader.result;
          fileReaders.push(imageDataURL);
          if (fileReaders.length === selectedFiles.length) {
              setMultipleImage(fileReaders);
          }
      };
  });
};