본문 바로가기

STUDY61

(펌)(펌)(펌) HTML Unicode Math Sign https://velog.io/@ho991217/%ED%8E%8C%ED%8E%8C-HTML-Unicode-Math-Sign 2024. 3. 28.
[CSS] font-display 이란? font-display 속성이란? 웹 폰트를 로드 할 때 사용 하는 CSS 속성이다. 사이트를 들어 갈 때, 웹 폰트 렌더링 속도가 느려 글자가 안보였다 나타나거나, 기본 폰트에서 바뀌는 경우를 본 적 있을 것이다. 그러한 경우에 웹 폰트의 로딩 동작을 제어하여 사용자 경험을 개선 할 수 있게 해준다. 폰트 로딩 동안 빈 텍스트나 다른 대체 폰트로 표기 할 수 있기 때문이다. 주로 사용 되는 경우 1. 로딩 지연을 최소화 할 때 웹 폰트 중 일부는 다운로드 시간이 많이 걸려 느리게 출력 되는 문제 2. FOIT (Flash of Invisible Text) 를 해결 해야 할 때 FOIT는 브라우저에서 웹 폰트가 다운로드 되지 않아 텍스트가 안 보이는 문제 FOUT (Flash of Unstyled Tex.. 2023. 7. 6.
React useState Hook의 반환 값이 객체가 아닌 배열인 이유 1. 구문 간결성 객체를 사용하는 경우 객체의 속성을 개별적으로 추출 해야한다. 배열을 사용하는 경우에는 구조 분해 할당을 통해 간단하게 요소에 접근 할 수 있어 코드가 간결하고 가독성 있게 만들어준다. const user = { name: 'John', age: 30, city: 'New York' }; // 객체 속성 구조 분해 할당 const { name, age, city } = user; console.log(name); // 'John' console.log(age); // 30 console.log(city); // 'New York' const numbers = [1, 2, 3, 4, 5]; // 배열 요소 구조 분해 할당 const [first, second, third] = number.. 2023. 7. 4.
일급객체(First Class Object) , 일급함수(First Class Function) 란? 일급 객체 (일급 함수) 란? 프로그래밍 언어에서 함수를 값으로 다룰 수 있는 특성을 가진 함수를 말한다. 이는 함수를 변수에 할당하거나, 다른 함수의 인자로 전달하거나, 함수의 반환 값으로 사용 할 수 있는것을 의미한다. 일급함수를 가진 언어에서는 함수가 일반적인 데이터 타입처럼 취급 된다. 이는 함수를 생성하고 조작하고 전달하는 데, 좀 더 자유롭고 유연한 프로그래밍 스타일을 가능하게 한다. 1. 변수에 함수 할당 함수를 값으로 취급하여 변수에 할당 할 수 있다. const add = function (a, b) { return a + b; }; 2. 함수를 인자로 전달 함수를 다른 함수의 인자로 전달할 수 있다. function calculate(operation, a, b) { return ope.. 2023. 7. 4.
[Swiper] 스와이퍼 이벤트 리스트 정리 이벤트 이름 설명 init 슬라이드 쇼가 초기화될 때 발생합니다. slideChange 슬라이드가 변경될 때 발생합니다. slideChangeTransitionStart 슬라이드 변경 트랜지션 시작시 발생합니다. slideChangeTransitionEnd 슬라이드 변경 트랜지션 끝날 때 발생합니다. slideNextTransitionStart 다음 슬라이드로 이동할 때 발생합니다. slideNextTransitionEnd 다음 슬라이드로 이동한 후 트랜지션 끝날 때 발생합니다. slidePrevTransitionStart 이전 슬라이드로 이동할 때 발생합니다. slidePrevTransitionEnd 이전 슬라이드로 이동한 후 트랜지션 끝날 때 발생합니다. slideChangeTransitionStar.. 2023. 5. 10.
[CSS]UI 요소 1. 아코디언메뉴 (Accordion) 각 섹션을 클릭하여 펼쳐 컨텐츠를 확인 할 수 있는 인터페이스 시스템이다. 많은 양의 정보를 한정된 공간에 담을 때 주로 사용 한다. 2. 메뉴 버튼(Menu Button) 벤토메뉴 (Bento Menu) 도시락 메뉴 도시락 박스라고 불리는 이것은 그리드 목록으로 나열 된 메뉴를 뜻한다. 햄버거메뉴 (drawer Menu) 주로 앱이나 모바일 상단에 사용되는ui 로 주로 nav 목록 메뉴를 뜻한다. 되네르메뉴 (Döner Menu) 햄버거 메뉴의 바리에이션으로 목록이나 그룹의 필터링을 뜻한다. 케밥 메뉴 (Kebab Menu) 세로 형태의 원으로 구성된 메뉴로 미트볼 메뉴와 유사하다. 컨트롤에서 더 작은 메뉴를 열거나 추가 옵션이 있는 메뉴를 확인할때 주로 사용 한.. 2023. 2. 14.
[TypeScript] Partial ,Pick , Omit 차이 Partial 이란? 유틸리티 타입으로, 특정 타입의 부분 집합을 정의 할 수 있다. Partial 타입 예제 코드 type Partial = { [P in keyof T]?: T[P]; } type Person = { name: string; age: number; address: string; } type PartialPerson = Partial; // PartialPerson은 // { // name?: string; // age?: number; // address?: string; // } // 과 같이 정의 된다. Pick 이란? 특정 타입에서 특정 값만 뽑아 새로운 타입으로 정의 할 수 있다. Pick 타입 예제 코드 type Pick = { [P in K]: T[P]; } type Per.. 2023. 2. 2.
타입 ORM (Type ORM ,Object Relational Mapping) Type ORM (Object Relational Mapping) 이란? Type ORM 은 NodeJS, Browser, Cordova, PhoneGap 등의 다양한 플랫폼에서 JS , TS와 함께 사용 할 수 있는 ORM 라이브러리 이다. 다른 ORM 과 달리 액티브 레코드 패턴 (Active Record Pattern) 과 데이터 매퍼 패턴(Data Mapper Pattern) 을 모두 지원하고, 작성할 수 있다. 액티브 레코드 패턴 (Active Record Pattern) 이란? 활성 레코드 접근 방식을 사용해, 모든 쿼리 메서드를 정의하고 모델 메서드를 사용하여 개체를 CRUD(생성, 조회,수정,삭제) 를 한다. 쉽게 말해서 모델 내에서 데이터베이스에 액세스 접근하는 방식이다. User 모델의.. 2023. 1. 3.
URI, URL, URN 에 대해서 알아보기 URI, URL, URN 에 대해서 알아보기 URl (Identifier) 자원의 식별자 URL와 URN 을 감싸는 모체 URL (Locator) 자원의 위치로 자원 식별 URN (Name) 고유한 이름으로 자원을 식별 Protocol Domain Port Path To The File Parameters URI O O O O O URL O O O O X URL 과 URN의 차이점 URL은 리소스를 어떻게 얻을 것이고, 어디에서 가지고 와야 하는지를 명시하는 URI이다. URN은 리소스를 어떻게 접근할 것인지 명시하지 않고 경로와 리소스 자체를 특정하는 것을 목표로 하는 URI 이다. 2023. 1. 2.
728x90