[TIL] 220903

공부해야할것

• css flex (flex-grow, shrink,... grid)
  - https://naradesign.github.io/flex-grow-shrink.html
• recoil (auth user)
• remix, zod, radix, zag

Vite Env

• https://vitejs.dev/guide/env-and-mode.html
• https://stackoverflow.com/questions/70883903/loading-env-variables-in-react-app-using-vite

// .env
VITE_APP_HOST=http://...

// use
import.meta.env.VITE_APP_HOST

JS File

fileReader

    const fileReader = new FileReader();
    // onload 읽기에 성공했을 때 실행되는 이벤트 핸들러
    // onloadend 읽기가 완료됐을 때 실행되는 이벤트 핸들러 (성공/실패와 상관없이)
    fileReader.onload = (e) => {
      setFileDataUrl(e.target?.result);
    };

https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=horajjan&logNo=220463053828

<input
  id="attach-file"
  type="file"
  accept="image*"
  // 선택을 허가하는 파일의 종류를 MIME Type으로 지정한다. 여러 개의 MIME Type을 지정하는 경우엔 콤마 구분자로 지정함
  onChange={onFileChange}
  className="hidden"
  // multiple 복수의 파일 선택 가능
/>

file여러개?

  const onFileChange = async (event: React.ChangeEvent<HTMLInputElement>) => {

    // const files = event.target.files;
    const file = event.target.files?.[0];
    if (!file) return;
    let formData = new FormData();
    formData.append('imgFile', file);

    const fileReader = new FileReader();
    fileReader.onload = (e: any) => {
      setFileDataUrl(e.target?.result);
    };
    fileReader.readAsDataURL(file);
  };

https://stackoverflow.com/questions/27254735/filereader-onload-with-result-and-parameter

formData img upload

• https://sga8.tistory.com/136
• https://soooprmx.com/multipart-form-data-%ED%83%80%EC%9E%85%EC%9D%98-http-%EB%A9%94%EC%8B%9C%EC%A7%80-%EA%B5%AC%EC%84%B1-%EB%B0%A9%EB%B2%95/

415 error

https://haenny.tistory.com/280

이미지 업로드 부분에서 하루 정도를 애먹었는데 formData 이미지를 어떻게 요청하는지 구글링 열심히 하다 어떤 글에는 headers 'Content-Type' 부분에 'application/json'을 추가하라 하고, 어떤 글엔 'multipart/formdata'이나 'multipart/formdata; boundary어찌구' 을 ,,, 어떤 곳은 추가하지 말라고..!

겁나 이것저것 다 수정하다 백엔드 분이 서버를 고치셧다해서! 다시 multipart/formdata 로 요청했는데 첨보는 status 415가 떴다. 젠쟝 바로 구글링해서 저기 링크를 들어가보니 클라이언트랑 서버 Content-Type 헤더가 일치할 경우 호출된다 해서 json으로 수정했더니

사랑스런 image url이 도착해따,, 이제 좀 살것같군. 정말 formdata나 http 등 이번에 삽질한 거 관련해서 공부를 좀 해야겠다 느꼇음 😭