강의 내용 정리

SVG와 Canvas의 차이

1. dom 활용성

   • svg - dom으로 표현이 될 수 있기 때문에 dom을 다룰 때 사용할 수 있는 모든 것을 사용할 수 있다.
   • canvas - <canvas> 태그를 제외하면 dom으로 표현이 되지 않아 dom 인터페이스로 제공하는 기능을 활용하지 못하고 자바스크립트를 이용하여 처리한다.

2. 그래픽을 표현하는 방식

   • svg - 벡터 기반

     이미지 확대 축소시 품질이 손상되지 않는다. 간단한 일러스트, 아이콘 등에 사용한다.

   • canvas - 픽셀 기반

     이미지 확대 축소시 품질이 손상된다. 사진, 그림과 같은 복잡한 이미지에 사용된다.

   벡터기반 이미지로 이미지 확대 축소시 품질을 유지시키는 것은 성능적으로는 비용이다.

SVG와 Canvas 선택의 기준

1. 3D 가 필요한가? → Canvas
2. 복잡한 이미지(svg로 표현시 dom 요소 1000개 이상)인가? → Canvas
3. dom 활용이 가능해야하는가? → SVG
4. 확대 축소시 이미지 품질을 고려해야 하는가? → SVG
5. 그외 → 일반적으로 SVG

스터디 목표

• 춘식이의 관찰일기와 같은것을 만들고 싶다! 라는 생각으로 스터디에 참여했기 때문에 이런 프로젝트를 만들 수 있을 정도로 필요한 내용을 잘 공부했으면 좋겠습니다.
• 포트폴리오를 Bruno의 포트폴리오와 같이 만들어보려고 합니다.
• 위의 두 가지 목표를 이룰 수 있는 방향으로 스터디주차마다 작은 프로젝트를 해보며 실용적인 공부를 해보려고 합니다

고민

• R3F 강의가 목차식 구성이라 결국 threejs를 배우게 하기 위한 index의 느낌이나서 어떻게 하면 각 주차마다 의미있는 공부를 할 수있을지 고민입니다. Threejs Journey 강의를 따로 신청하고 배우며 R3F 로 바꿔보는 연습을 하며 복습을 해볼까 하는 생각이 있는데 아직은 잘 모르겠습니다 ㅎㅎ