6) Git

이번 프로젝트에서는 Git을 효율적으로 사용했다. 이전까지는 git을 단순히 Github에 업로드하기 위한 Tool 정도로 이해하고 있었는데, 이번 프로젝트를 통해 Git을 잘 사용하면 효율적으로 코드를 관리할 수 있다는 것을 알게 되었다.

Git log

문제가 발생했을 때, 혹은 기능별 개발이 필요할 때 Git Branch를 사용했다.

Branch는 말 그대로 나무줄기(가지?) 처럼 뻗어나가며 버전을 관리하는 느낌이다. 무언가 수정한 부분이 필요할 때 현상태를 복사하여 새로운 나무줄기를 만들어 코드를 수정할 수 있다.

또한 수정완료 후 Main 나무줄기와 다시 합쳐서 전체 코드를 수정하는 기능도 가능했다. (Merge)

웹 어플리케이션 실행 시, 뷰와 관계된 컴포넌트는 한번 로드된 이후 지속해서 리렌더링이 될 필요가 없다.

이 부분을 개선하고자 rerendering이란 Branch를 만들어 코드 수정을 했다.

이후 Merging을 통해 Main 코드를 수정한 코드로 덮어씌울 수 있었다.

7) Downloading Function

라벨링을 하면 좌표들이 state에 저장된다. 이 저장된 state들을 local에 txt 포맷으로 로컬에 저장할 수 있어야 한다.

이를 위해 <a> 태그를 사용했다.

<a> 태그에 아래와 같이 text 파일 생성하여 담을 수 있다. ("data:attachment/text,")

encodeURI를 통해 state에 저장된 값들을 text 형식으로 엔코딩해 텍스타 파일에 추가할 수 있다.

hiddenElement.href =
          "data:attachment/text," +
          encodeURI(
            element.labelName +
              " " +
              element.x1 +
              " " +
              element.y1 +
              " " +
              element.x2 +
              " " +
              element.y2
          );

파일의 이름은, 이미지명.txt로 설정했다.

hiddenElement.download = `${fileName}.txt`;

그리고 해당 기능은 Save 버튼 클릭시 실행된다. 그래서 버튼 클릭 시, a 태크의 클릭 이벤트도 같이 일어나 파일이 다운로드 된다.

hiddenElement.click();

8) Deploy

프로젝트의 배포를 위해 Netlify를 이용했다. Github과 연동해서 자동배포가 가능한데 배포 과정도 매우 간단했다.

https://imagelaber.netlify.app/

9) Improvement plan

• imageShowBox 컴포넌트에 drawing function, image loading, saving 등의 기능이 작성되어 코드가 무척 길다.

  추후 기능별 분리가 필요하다.

• react hook을 사용한 성능 최적화가 된다면 좋을 것 같다.

• canvas를 컴포넌트 형식으로 만들어 Layer를 분리한다면 성능적으로 더 좋을 것이다.

(현재 이미지 레이어와, 라벨링이 그려지는 레이어가 같은 컴포넌트에 들어있는데 라벨링이 그려질 떄 지속적으로 리렌더링이 일어나면서 이미지도 계속해서 다시 그려지게 된다. 컴포넌트 별로 나눠서 동시에 리렌더링이 일어나지 않도록 개선이 필요하다.)