[31JUL, 2021] TIL

7월의 마지막 TIL✨

어제는 백신 맞고 일찍 자버렸다..! 사람마다 반응이 다르다는데 나는 졸림과 무기력함이 많이 온 것 같다..! 오늘도 많이 공부한 건 아니지만 간단히 정리하고 슝슝~

 

---

 

✔️ TS에서 enum과 object 차이

요즘 계속 JS로 공부하고 코딩하고 있어서 TS를 다시 복습하다 enum부분에서 object(객체)와 차이에 대해 정리해본다. 

 

object는 새로운 속성을 자유롭게 추가할 수 있지만, enum 은 선언할 때 이후에 변경할 수 없다.
object의 속성 값은 JS가 허용하는 모든 타입이 올 수 있지만, enum 의 속성 값으로는 문자열 혹은 숫자만 허용된다.

 

이렇기에 같은 ‘종류’를 나타내는 여러 개의 숫자 혹은 문자열을 다뤄야 하는데, 각각 적당한 이름을 붙여서 코드의 가독성을 높이고 싶다면 enum을 사용하고, 그 외의 경우 상수, 배열, 객체 등을 사용하면 된다.

 

 

✔️ SVG

프로젝트를 할 때 팀원분이 SVG이미지를 사용해서 뭔지 알아보려 한 걸 이제야..! 해본다.

PNG 와 SVG의 가장 큰 차이점은 이미지를 구성하는 방식이다. SVG 파일 형식의 가장 큰 특징은 레스터 방식으로 표현하는 JPG, PNG, GIF, BMP와 달리 벡터화된 그래픽 이미지라는 점이다. 그럼 레스터와 벡터는 무엇일까?!

 

레스터(Raster): 래스터 방식은 이미지의 모양과 색을 색상 정보가 담긴 픽셀(pixel)로 표현하는 방식으로 비트맵 방식이라 불린다. 각각의 픽셀에 색을 입혀, 그 픽셀을 하나로 모아서 그림이나 선 등을 만들어 낸다.
벡터(Vector): 수학적 함수를 이용하여 도형이나 선을 그려서 표시하는 방식이다.

 

레스터와 벡터는 일반적으로 봤을 때 큰 차이가 없다. 하지만 확대를 할수록 레스터로 표현된 이미지는 픽셀이 드러나며 선명도가 떨어지는데 비해 벡터로 표현된 이미지는 어떠한 크기에도 원본의 선명도를 유지하는 특징을 가진다. 또한 웹 개발 시 SVG(벡터로 표현된 이미지)의 가장 큰 장점은 HTML, CSS, JAVASCRIPT 와 함께 동작할 수 있다는 것이다. 하지만 SVG는 색 표현의 한계, 수학 계산이 필요하기 때문에 이미지가 복잡할수록 로딩 시간이 오래 걸릴 수 있다는 단점도 있다.

그래서 SVG는 확대했을 때도 선명함의 차이가 없어야하는 로고 및 홍보물 등에 많이 사용된다. 

 

참고:

• TypeScript enum을 사용하는 이유
• What is the difference between enum and object in typescript 
• SVG가 뭔가요?