9.20 화 - 메인프로젝트 데일리 회고

1. 체크리스트

오늘

• [x] sns 포스트 업로드 폼
  • [x] 이미지, 텍스트 입력 모두 요청 데이터로 반영, 이미지 여러장 업로드
  • [x] 여러장 업로드 가능하도록 수정
  • [x] 라우팅이 아닌 모달창으로 팝업되도록 구현
• [x] 데일리스크럼 회의록 정리

이번주

• ec2 ↔ s3 연결
• 회원관리 기능(회원가입, 로그인, jwt 인가) 프론트, 백 모두 완성
• FE - 마이페이지, SNS 기능 페이지와 세부 컴포넌트들 가급적 완성(로직 x, 스타일)

---

2. 오늘 한 일

2.1 SNS 포스트 업로드 폼 완성

• [x] 모달창으로 구현
• [ ] 시멘틱 태그를 사용해서 마크업부분 리팩토링
• [x] 미리보기 이미지 캐러셀로
• 모달창 구현 참고
• 낙타의 블로그 :: 효율적인 modal 관리 with React(1)

---

1. 이미지 여러장 업로드하기

1. input 태그에 multiple={true} 속성을 부여한다. (현재 airbnb 린트 설정으로는 불린값이 true면 속성명만 기재토록 강제함)
2. 이미지 파일 입력을 받는 state를 setState 할때 배열로 받도록 수정
3. form-data에 데이터 추가시 append해서 추가해야 하므로 for-of 문으로 이미지 여러장 append해서 submit 하기

// 1. input 태그에 multiple 속성을 true로 부여.
// airbnb 방식 린트 설정을 사용하는 경우 ={true}는 생략하고 속성명만 기재.

<S.FormDropperBox>
              <S.FileDropIconBox>
                <img src={UploadIcon} alt="upload-icon" />
              </S.FileDropIconBox>
              <label htmlFor="image">{fileName}</label>
              <input
                id="image"
                type="file"
                multiple
                accept="image/*"
                onChange={imgSelectHandler}
              />
            </S.FormDropperBox>
            <S.FormSubmitBtn type="submit">업로드</S.FormSubmitBtn>

// 2. 이미지 파일 입력을 받는 state를 setState 할때 배열로 받도록 수정
const [files, setFiles] = useState(null);

const imgSelectHandler = (e) => {
    const imageFiles = e.target.files;
    setFiles(imageFiles);

    // const imageFile = imageFiles[0];
    // setFileName(imageFile.name);
    // const fileReader = new FileReader();
    // fileReader.readAsDataURL(imageFile);
    // fileReader.onload = (event) => setImgSrc(event.target.result);
  };

---

2. 이미지 여러장 미리보기

const [files, setFiles] = useState(null);
  const [previews, setPreviews] = useState([]);
  const [fileName, setFileName] = useState(defaultFileName);
  const [textMsg, setTextMsg] = useState('');

  const imgSelectHandler = async (e) => {
    const imageFiles = e.target.files;
    setFiles(imageFiles);

    // * Refactor
		// 프로미스 지원이 안되기 때문에 새로 프로미스를 만들어야 함.
		// fileReader는 비동기로 동작함.
    const imagePreviews = await Promise.all(
      [...imageFiles].map(async (imageFile) => {
        return new Promise((resolve, reject) => {
          try {
            const fileReader = new FileReader();
            fileReader.readAsDataURL(imageFile);
            fileReader.onload = (event) =>
              resolve({
                imgSrc: event.target.result,
                fileName: imageFile.name,
              });
          } catch (err) {
            reject(err);
          }
        });
      }),
    );
    setPreviews(imagePreviews);
  };

// map 메서드로 img 태그 여러개 생성
const previewImages = previews.map((preview) => (
    <img
      src={preview.imgSrc}
      alt=""
      className={preview.imgSrc && 'show'}
      key={preview.imgSrc}
    />
  ));

---

3. 캐러셀

ant design 캐러셀을 사용했다.

참고: https://ant.design/components/carousel/#components-carousel-demo-basic

---

4. 모달창 구현

• 모달창 구현 참고
• 낙타의 블로그 :: 효율적인 modal 관리 with React(1)

---