Log 8/11

Dev log

canvas에 대해서 공부했다. canvas태그를 만들어서 특정 태그에 append한다. canvas의 크기를 정해주고 script를 통해서 canvas api를 통해서 원하는 그림, 애니메이션 등을 구현하는 과정을 거친다. 여기서 canvas는 순수 JavaScript 코드로 움직인다. canvas 태그의 id나 class로 선택자를 통해 변수에 할당한 후 getContext('2d')를 통해 객체를 할당하여 객체 안의 메소드로 구현하게 된다.

const canvas = document.querySelector('.canvas');
const context = canvas.getContext('2d');

context.beginPath(); // 그리기 시작
context.fillRect(0, 0, 100, 100); // 0,0 좌표에 width 100 height 100 사각형
context.fill(); // 정해진 색으로 칠한다. 이 과정으로 보이게 된다.
context.closePath(); // 그리기 종료

context.beginPath(); // 그리기 시작
context.arc(200, 100, 20, 0, Math.PI*2, false); // 200, 100 좌표를 중심으로 반지름 20 원
context.fill(); // 정해진 색으로 칠한다. 이 과정으로 보이게 된다.
context.closePath(); // 그리기 종료

이런 방식으로 그려지게 된다. 어려운 점도 많고 조금 감만 잡은 것 같다. 부족한 부분을 더 공부해야겠다.

Error log

1

canvas 로직이 들어있는 js 파일을 읽어오고 렌더링을 하는데 콘솔에 에러가 발생했다.

Warning: findDOMNode is deprecated in StrictMode. 
findDOMNode was passed an instance of Transition 
which is inside StrictMode. Instead, add a ref directly 
to the element you want to reference. Learn more about using refs safely here:

이 부분이 에러 코드다.
findDOMnode에 대한 경고문구였다. 이 부분이 찾아보니 그렇게 성능에 크게 문제 되는 것 같아보이지 않았다.
스택오버플로우 레퍼런스
그래서 Next.js를 사용하고 있기 때문에 next.config.js 파일을 수정해서

module.exports = {
  reactStrictMode: false,
  sassOptions: {
    includePaths: [path.join(__dirname, 'styles')],
  }
}

reactStrictMode를 true에서 false로 변경하여 해결했다.

2

canvas를 넣어둔 script 태그가 반복해서 발생하는 에러가 발생했다. next.js에서 해당 페이지에 접근할때 api에 비동기로 요청해서 canvas가 있는 js 파일을 받는 과정에 여러 script를 생성했고 그래서 여러 script가 생성된 것이라고 짐작하고 있었다. 라우트의 문제일까 싶어서 next.js에서 기본 제공하는 Link component를 a 태그로 변경했을때 문제가 해결되는 듯 했다. 반복되는 부분이 사라지긴 했으나 next.js 에서는 기본제공하는 a 태그 대신에 Link component를 사용하게 되어 있어서 lint 문법에 맞지 않아서 배포에 영향이 갈 수 있었다.

3

위와 같이 발생했던 문제다. 두개의 canvas로 구현한 기능들이 하나는 url에 파일을 요청해서 응답으로 받은 파일을 Script 컴포넌츠에 props로 내려주는 것과 하나는 Script 컴포넌트의 src에 api 주소를 지정해서 받아오는 방법이다. 여기서 props로 받는 방법은 여러 script를 발생해서 문제가 되었고 api로 접근 하는 방법은 뒤로가기 하고 돌아오면 canvas가 보이지 않는 문제가 있었다.

2,3

2,3 번을 해결하는 방법이 useEffect 를 이용해서 페이지에 접근할때 받아오고 받은다음에 해당 태그에 append를 하고 return함수로 script 태그를 제거하는 방법으로 해결을 하고 있다.