TOC

• 첫 오픈소스 기여 후기
  • 첫 번째 시도
    • 하지만…
  • 두 번째 시도
    • 하지만…
  • 세 번째 시도
    • 하지만..
  • 마지막
    • 하지만..

첫 오픈소스 기여 후기

작고 소소한 기여지만 후기를 남겨본다 . 현재 블로그는 아스트로 테마를 가져와 만든 정적 블로그이다. 하지만 글을 작성할 때 약간 불편한 점이 있었다.

1. 글 작성후 파일을 git에 업로드해야함
2. 사진 파일을 따로 저장하고 경로를 직접 지정해줘야함

해결책으로 이슈에 블로그 글을 작성하고 이슈 글을 마크다운 파일로 변경해 업로드 해주는 깃허브 액션 템플릿 issue-to-markdown 을 사용했다.

이슈에다 작성하니 여러모로 편한 점이 있었다.

1. 사진도 캡쳐 후 복사 붙여넣기로 작성해하면 자동으로 경로에 맞게 저장
2. 이슈 작성 후 publish 태그만 붙여주면 github action 이 자동으로 이루어짐

하지만 이미지를 올렸을 때 이미지가 안뜨는 에러가 생겼다.

//전
https://user-images.githubusercontent.com/adfadsf.JPG
//후
[https://github.com/JEM1224/blog/assets/101504594/dfc2ae84-0793-40ec-9152-984664d21289`](https://github.com/JEM1224/blog/assets/101504594/dfc2ae84-0793-40ec-9152-984664d21289%60)

테스트 파일하고 비교해보고 나서 에러 원인을 알 수 있었다. 깃에서 이미지를 업로드할 때 저장되는 주소가 변경되어 파일을 다운로드 할 때 확장자가 붙지 않으면 버퍼 파일이 저장되었다.

첫 번째 시도

이미지 확장자가 없다면 버퍼 파일로 생각해 sharp 패키지를 사용해 이미지 변환을 해주었다.

const validExtensionsRegex = /\.(jpg|jpeg|png)$/i
if (!validExtensionsRegex.test(image.filename)) {
  await sharp(`./${newImageFilename}`)
    .toFormat('png')
    .toFile(`${newImageFilename}.png`)
  const dirpath = path.join(dirname, newImageFilename)
  newImageFilename += '.png'
  fs.unlinkSync(dirpath)
}

하지만…

PR 답변으로 알게 된 문제점이 있었는데 jpg나 png같은 이미지 확장자만 생각하고 있었기 때문에 gif나 tiff 가 들어온다면 모두 png로 변환되었다.

두 번째 시도

버퍼 파일에서 파일타입을 확인 가능하기 때문에 파일 타입을 확인해주고 만약 sharp에서 변환이 가능한 파일이라면 변환해주었다.

하지만…

내 개발환경인 윈도우에서는 잘 돌아갔으나 sharp가 운영체제에 따라 설치되는 모듈이 달라 cross-platform으로 환경 설정을 해주어야했다.

세 번째 시도

await $npm uninstall sharp //추가
await $npm install --platform=linux --arch=x64 sharp //추가

sharp의 클래스 플랫폼 환경 설정을 추가했다.

하지만..

위 코드를 추가해 동작하지 않는다고 하셔서 다른 라이브러리로 교체하는 방법을 찾아보았다.

마지막

버퍼 파일을 gif로 변환시키는게 가장 어려웠는데 jimp도 이용해보고 gif-encoder를 찾아서 사용해봤다.

하지만..

그렇다.. fs 라이브러리에서 에서 path에 확장자만 붙인다면 자동으로 변환을 해주었다..

if (imageExt === '') {
      const buffer = fs.readFileSync(imagePath)
      const imageType = await fileTypeFromBuffer(buffer)
      newImageFilename += `.${imageType?.ext}`
      fs.writeFileSync(path.join(dirname, newImageFilename), buffer)
      fs.unlinkSync(imagePath)

짧은 코드지만 우여곡절이 많았다. 다음엔 더 꼼꼼히 알아보고 PR을 올리도록 해야겠다.실제로 잘쓰고있는 액션 템플릿에 첫 기여를 해봐서 뿌듯했다.