230702_WIL | 7월 1주차

230702_WIL

이번주 한 일

• storybook 드디어 배포 성공 :D
• heic2any 라이브러리(heic 파일 업로드)

이번주의 정리

1. storybook

• storybook docs 바탕으로 기본적인 키워드만 정리
  • component : 해당 컴포넌트
  • title : 스토리북 앱의 사이드바에서 컴포넌트를 참조하는 방법
• 스토리를 정의하기 위해서 각각의 테스트 상태에 해당하는 스토리를 생성하는 함수를 내보내고, 이 스토리는 주어진 상태 안에서 렌더링된 요소를 반환하는 함수임 ==> 함수형 컴포넌트와 같음

• Template 변수에 할당하여 사용하는 것이 편리하며 이러한 패턴을 스토리에 도입함으로써 작성하고 유지해야하는 코드의 양이 줄어듦

• Template.bind({}) : 함수의 복사본을 만드는 표준 javascript의 한 기법 -> 각각의 스토리가 고유한 속성을 갖지만 동일한 결과물을 사용할 수 있도록 함

• args(=arguments : 인수) : 스토리북을 다시 시작하지 않고도 Control addon으로 컴포넌트를 실시간으로 수정 가능(args의 값이 변하면 컴포넌트도 함께 변함)

npx storybook@next automigrate
//(main, preview 수정 후 생긴 오류 -> 설치)

(사실 Docs의 내용 순서대로 하면 정상적으로 동작한다. 뭔가 요약하기도 애매한 내용들.. 부분적으로 설치 코드가 다른 부분들이 있었는데 어디서 오류가 난 건지 제대로 파악하지 못해서 모두 정리해두지 못했다.. 다음에 공부할 때 같은 문제가 발생하면 정리해둬야할듯)

• 아무튼 2주만에 배포 성공함 (Chromatic 배포)

  • 배포 시 생겼던 문제가 있었는데, 다시 확인해보니, 문제가 아니라 문제라고 착각했던 것 같다. error라고 떠있어서 오류라고 생각했던 것 같은데 크로마틱 확인해보니 전부 배포되어있었다

    ℹ For CI/CD use cases, this command failed with exit code 1
    Pass --exit-zero-on-changes to succeed this command regardless of changes.
    Pass --auto-accept-changes to succeed and automatically accept any changes.
    error Command failed with exit code 1.
    info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
    

  • 일단 error 부분이 뜨면 안될 것 같아서 아래와 같은 내용을 입력하고 나서는 해당 문구는 다시 안뜨긴 했다

    yarn chromatic --auto-accept-changes
    

  • 배포가 안되는 줄 알고 파악한다고 시간이 오래 들었는데 알고보니 별다른 문제는 없었던..
  • 이제 위 내용 바탕으로 todo list 만들어보는 게 목표..

2. heic2any 라이브러리(heic 파일 업로드)

• 기본적으로 heic파일은 아이폰 이미지에서 주로 사용되는 확장자명으로 대부분의 사이트에서 미리보기 적용이 되지 않는다.
• 그리고 이때까지 진행했던 프로젝트의 경우, 기본적인 이미지 확장자인 jpg, jpeg, png 위주로만 올리고 있었는데, 이번에 heic도 업로드되어야할 것 같다고 전달받았고, 여러 사이트에서 어떻게 업로드가 되는지 확인 하던 중, 대부분의 사이트들이 미리보기는 적용되지 않지만, heic->png 등의 일반적인 이미지 확장자로 변환하여 업로드되는 것을 파악할 수 있었다.

• 그래서 알게된 라이브러리인 heic2any

  • 생각보다 사용법은 간단했는데, 이미지 원본을 원하는 확장자로 변경해주는 코드만 짜주면 됐다.

    const handleChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
      const options = {
        maxWidthOrHeight: 1440,
        useWebWorker: true,
      };
      const image = e.target.files[0];
      let file = image;
    
      if (image.type === "image/heic") {
        const converted = await heic2any({
          blob: image,
          toType: "image/png", // toType 미기입 시 기본 변환 확장자는 png에 해당한다
        });
        const convertedBlob = Array.isArray(converted) // 이미지는 blob타입으로 만들어주고 있는데, new File에서 기본 Blob타입을 받을 수 없다고 오류가 발생하여 위처럼 Array로 변환할 수 있도록 세팅하였음
          ? converted[0]
          : converted;
        file = new File([convertedBlob], `${image.name.split(".")[0]}.png`, {
          // 변경을 원하는 file에 변경된 파일 데이터를 덮어씌운다(convertedBlob이 이에 해당함
          type: "image/png",
          lastModified: new Date().getTime(),
        });
      }
    
      const compressedFile = await imageCompression(file, options);
    };
    

---

요 며칠동안 컨디션 이슈로 공부해아하는데 좀 쉬었다.. 이번에 프로젝트 기간이 좀 짧았었는데, 팀에 진짜 도움이 1도 안되는 것 같아서 무척 속상했었다. 공부의 필요성은 항상 느끼고 있지만 사실 어디서부터 시작을 해야할지 모르겠어서 좀 헤맸었다. 현재는 이전에 보다 말았던 리액트 강의부터 다시 보고 있는 중이다. 모든 문제의 근원은 기초가 없는 탓이지 않을까 싶어서..
그리고 원래 오늘까지 지하철 자동완성 검색 기능 구현해보고 싶었는데, 생각보다 시간이 좀 걸려서 다음주까지 완성하는 걸로.. 일단 현재 개인적으로 하고 만들어보고싶은 것들은 지하철 자동완성 검색 기능 만들어보기, storybook 활용해서 todoList 만들어보기 두가진데, 갈 길은 꽝꽝 멀어보인다. 막혔을 때 선임님이 보여주신 코드도 최대한 써먹어보고 싶은데 마음으로는 이해했는데 머리로는 활용이 안된다.
정신차리자~~~