포스팅용 첨부 이미지 생성기 - 2

프로젝트 사이트

이번에는 이 프로젝트에서 사용중인 git 브랜치 전략과 지난번 이후에 구현한 기능들에 대해서 정리하려 합니다.

git 브랜치 전략

저는 git-flow 전략을 참고하여, master, develop, feature 브랜치만을 운영하기로 하였습니다.
브랜치 전략을 체험 위한 용도로 구상하였습니다.

우린 Git-flow를 사용하고 있어요
Git 브랜치 종류 및 사용법

1. 새로운 기능 추가

   • github에 이슈 등록
   • develop 브랜치에서 feature 브랜치 생성
   • 브랜치명 : feature/[이슈번호]-[구현기능]
   • 예시 : feature/100-download-image

2. 기능 개발 완료

   • feature 브랜치를 develop 브랜치로 pull request
   • 머지 후, feature 브랜치는 삭제한다.
   • 관련이슈 close 처리

3. 배포 시

   • develop 브랜치를 marster 브랜치로 pull request
   • 머지 시점에서 Tag 부여
   • github pages를 사용중이므로, 자동으로 변경 됨.

4. 기타
   • commit시 message에 이슈번호 언급(#이슈번호)
   • 이슈창에서 자신을 언급한 커밋내역 볼 수 있음.
   • 이슈에 맞는 커밋내역을 찾기가 편할 것 같음.

canvas에서 SVG로 변경

SVG는 백터(vector) 이미지를 표현하기 위한 포맷으로 w3c에서 만든 백터 이미지 표준입니다.
svg.js 를 이용해서 작업하였습니다.

스케일러블 벡터 그래픽스
Canvas VS SVG

Text와 rect를 포함시켰고
rect는 배경색을 넣는 용도로, Text는 사용자가 입력한 항목을 보여주는 용도로 사용하였습니다.
만약 svg의 포함되어야 되는 요소들이 가변이 될 경우는 미리 포함시키지 않고 동적으로 생성하는 방식으로 변경해야 될 것 같습니다.

 <svg xmlns=http://www.w3.org/2000/svg xmlns:xlink="http://www.w3.org/1999/xlink" 
      id="imagePreview" height="200" width="400">
    <rect width="100%" height="100%" fill="#ffffff" id="imageBackground" />
	<text id="imageText" dominant-baseline="middle" text-anchor="middle">
    </text>
   This browser doesn't support svg 🙅‍♂️
</svg>

    function convertImageAfterAction(callback) {
      ... 생략 ...
        img.onload = function () {
            ctx.drawImage(img, 0, 0);
            DOMURL.revokeObjectURL(url);
            
            callback(canvas);
        };
        img.src = url;
    }