Dev_Ryomi

author: Airbus A380Ti Though these two might sound the same, visibility: hidden and display: none works differently and can be used for several different cases. Let’s see the difference between them and their use cases here. 이 둘은 같아 보이지만, 'visibility: hidden'과 'display: none'은 다르게 동작하며 여러 다른 경우에 사용될 수 있습니다. 이들의 차이와 use case를 살펴봅시다. Visibility: hidden When you use this CSS property on an element,..

Author: Santiago García da Rosa We are always looking for ways to improve how our clients manage their images, we have made that part of our mission and part of our culture. 우리는 고객들이 이미지를 관리하는 방법을 개선하기 위한 방법을 찾고 있고, 이는 우리의 미션과 문화의 일부입니다. Working with one of our clients, we noticed that their image traffic on mobile was three times more, compared to similar websites. When we started investigating..

회사에서 프로젝트를 진행할 때, 모든 아이콘을 svg로 처리하고 있다. 최근에 svg를 최적화할 수 있는 SVGO라는 라이브러리가 있다고 하여 도입하게 되면서, svg에 대해, 그리고 SVGO에 대해 알아볼까 한다. SVGO와 관련된 내용은 공식문서와 관련 에세이를 번역했다. 먼저, 자주 사용하는 이미지 형태에 대해 알아보자. Image formats SVG (Scalable Vector Graphics): - 벡터 기반의 이미지 형식으로, 확대/축소해도 이미지의 선명도와 질이 유지됩니다. - XML 기반의 형식이며, 코드로 작성되어 편집이 용이하고 검색 엔진 최적화에 유리합니다. - 아이콘, 로고, 차트 등 복잡한 그래픽을 표현하는 데 적합하며, 반응형 디자인에도 용이합니다. JPG/JPEG (Join..

보호되어 있는 글입니다.

TypeScript is a popular programming language that offers static type checking and advanced features for working with complex data structures. One important concept in TypeScript is type narrowing, which allows developers to make precise assertions about the types of variables in their code. In this article, we will explore how to use Type Predicate Functions to narrow types in TypeScript. 타입스크립트..

@layer - Svelte framework에서 사용되는 기능 중 하나로 style sheet를 layer 별로 정리 및 관리할 수 있게 도와줌 - layer는 style sheet를 그룹화하여 원하는 방식으로 스타일을 구성하고 관리할 수 있게 해주는 방법 - 더 구조적이고 모듈화된 스타일 시트를 작성할 수 있으며 CSS Class 간 충돌을 방지하는데 도움이 됨 - Base Layer : 웹 페이지의 기본 스타일을 정의하는데 사용 : font, text style, 기본 색상, 전체 페이지의 배경 등과 같은 기본적인 스타일 규칙이 들어감 : 웹 페이지의 모든 요소에 공통적으로 적용되는 스타일 정의 - Components Layer : 페이지 내에서 사용되는 구성요소 (ex) 버튼, 카드, 네비게이션 ..

최근 ECMAScript 2023 Specification이 확정되었다. 이는 자바스크립트 프로그램을 더 예측가능하고 유지관리할 수 있게 하는 배열 method를 포함한다. toSorted(), toReversed(), toSpliced(), with()는 data를 변경하지 않고 data 복사 후 이를 변경함으로써 배열에 작업을 수행할 수 있게 한다. 그 차이 당신의 프로젝트에 이들을 적용하는 방법을 배워보자. Mutation and Side effects 배열은 항상 다소 기이하다. sort(), reverse(), splice()와 같은 method는 배열 그 자체를 변경한다. cancat(), map(), filter()와 같은 다른 method는 배열을 복사한 후 그 배열을 조작한다. 배열을 ..

- onMount function onMount( fn: () => | NotFunction | Promise | (() => any) ): void; : onMount 함수는 컴포넌트가 DOM에 마운트된 직후에 콜백을 실행하기 위해 예약합니다. 이 함수는 컴포넌트의 초기화 중에 호출되어야 합니다(하지만 컴포넌트 내부에 위치할 필요는 없으며, 외부 모듈에서 호출될 수 있습니다). : onMount는 서버 사이드 컴포넌트 내에서 실행되지 않습니다. onMount에서 반환된 함수는 컴포넌트가 언마운트될 때 호출됩니다. * 이 동작은 onMount에 전달된 함수가 동기적으로 값을 반환할 때만 작동합니다. 비동기 함수는 항상 Promise를 반환하므로 동기적으로 함수를 반환할 수 없습니다. - beforeUpd..

- slot : 컴포넌트는 요소와 마찬가지로 자식 콘텐츠를 가질 수 있습니다. 콘텐츠는 요소를 사용하여 자식 컴포넌트에서 노출되며, 자식이 제공되지 않을 경우 렌더링되는 대체 콘텐츠를 포함할 수 있습니다. this fallback content will be rendered when no content is provided, like in the first example this is some child content that will overwrite the default slot content * 일반적인 요소를 렌더링하려면 을 사용할 수 있습니다. - `slot name="name"` : 이름이 지정된 슬롯을 사용하면 소비자가 특정 영역을 대상으로 할 수 있습니다. 또한 대체 콘텐츠를 가질 수도 있..

- on:eventname : 컴포넌트는 createEventDispatcher를 사용하거나 DOM 이벤트를 전달함으로써 이벤트를 발생시킬 수 있습니다. dispatch('hello')}> one two : 컴포넌트 이벤트를 수신하는 방법은 DOM 이벤트를 수신하는 것과 동일합니다: : DOM 이벤트와 마찬가지로, on: 지시문을 값 없이 사용하면 이벤트가 전달되어 소비자가 이를 수신할 수 있습니다. - --style-props : CSS 사용자 정의 속성을 사용하여 테마를 적용하기 위해 스타일을 컴포넌트에 props로 전달할 수도 있습니다. : Svelte의 구현은 사실상 래퍼 요소를 추가하는 문법 설탕입니다. 다음 예시를 살펴보겠습니다: 이것은 다음과 같이 해석됩니다: * 이는 추가적인 요소이므로 C..