SW 일반
-
svg를 아이콘 폰트로 바꾸기SW 일반 2022. 2. 8. 22:32
svg를 아이콘 폰트로 바꾸기 svg를 html에서 사용하는 방법 네 가지 1. html img태그 사용 2. css background image 3. svg를 복사해서 그대로 쓴다. (하나의 태그처럼 사용) svg를 태그로 사용 시 유용한 점 예1) aria-label을 지정할 수도 있고 예2) fill = "currentColor" -> 색상을 원하는대로 컨트롤 가능 (부모 태그의 색상 상속받음) svg 태그 사용 시 단점 리액트를 사용하지 않고 생 html을 작성하는데 svg를 그대로 넣는 것은 적절하지 않다. svg이기 때문에 용량은 그대로이지만 코드가 너무 길어진다. 4. Icon Font 생성, 적용 svg를 icon font로 바꾸어 사용한다. https://icomoon.io/app/#/..
-
raster, vectorSW 일반 2022. 2. 8. 19:42
웹 개발 시 자주 쓰이는 이미지 형식 하나의 리소스에 들어가는 용량의 60~65% 차지하는 것 : 이미지 로드시간(렌더링 타임) 오래 걸리면 사용성이 좋지 않다. 따라서 퍼포먼스에 해를 끼치지 않는 이미지 타입을 적절히 선택해 써야 한다. 그래픽 파일 포맷 중 래스터와 벡터에 대해 정리한다. 벡터와 래스터 벡터 이미지 래스터 이미지 특징 확대해도 깨지지 않음 픽셀 단위 -> 확대 시 깨짐 포맷 종류 svg jpg(jpeg), png Vector images 수학식을 통해 연산으로 그래픽을 표현한다. 용량이 상대적으로 가벼울 확률이 높다. 참고로 폰트도 일종의 벡터 그래픽이다. 벡터 이미지의 특성을 잘 살리는 형식은 svg(scalable vector graphics) 포맷으로 웹 개발 시 자주 쓰인다. ..
-
소프트웨어 아키텍처 패턴, 디자인 패턴SW 일반 2021. 7. 30. 02:22
소프트웨어 아키텍처 패턴 개념 - 소프트웨어를 설계할 때 참조할 수 있는, 일반화되고 재사용 가능한 문제 해결 방식 필요성 - 개발 시 시행착오를 줄여 개발 효율, 품질 향상 - 이미 검증 된 구조 -> 보다 예측 가능하고 안정적인 개발 가능 유형 계층화패턴 Layered Pattern - 시스템을 계층으로 구분하여 구성 - 하위 모듈들은 특정 수준의 추상화 제공, 각 계층은 다음 상위 계층에 서비스 제공 - 서로 마주보는 두 개의 계층 사이에서만 상호작용 클라이언트 - 서버패턴 Client-Server pattern - 하나의 서버와 다수의 클라이언트로 구성 - 서버는 클라이언트로부터 요청을 대기, 클라이언트 요청 시 서버에서 서비스 제공 파이프-필터 패턴 Pipe-Filter pattern - 데이터..