본문 바로가기

분류 전체보기148

[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.
[CSS-CLIP-PATH MAKER] CSS polygon 만들어주는 사이트 https://bennettfeely.com/clippy/ Clippy — CSS clip-path maker About Clip Paths The clip-path property allows you to make complex shapes in CSS by clipping an element to a basic shape (circle, ellipse, polygon, or inset), or to an SVG source. CSS Animations and transitions are possible with two or more clip-path shape bennettfeely.com css 에서 좌표나 위치 지정해서 무언가 효과를 줘야 하거나 작업을 해야 할때, polygon을 사용 하게 된다.. 2023. 1. 30.
타입 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.
[TypeScript] TypeScript 할때, DT와 TS의 차이! (별로 쓸데없음 주의) DT 와 TS 의 차이 DT this package has typescript declarations provided by @types/000 이 패키지에는 @types/000 에서 제공하는 타입스크립트 형식이 따로 있다 라는 얘기다. DT로고를 한번 더 클릭해주면 해당 types 패키지 파일로 이동을 할 수 있다. 두개의 패키지를 내려받아야 한다. $ yarn add bcryptjs @types/bcryptjs TS this package conyains built-in TypeScript declarations 해당 패키지에는 기본적으로 ts가 선언 되어있다. 라는 뜻이다. 추가적인 패키지를 내려받을 필요가 없다. $ yarn add class-validator 이상 쓸데 없는 지식이었다고 한다. 2023. 1. 2.
복합 컴포넌트 패턴(Compound Components Pattern) | 리액트 디자인 패턴 복합 구성요소 패턴(Compound Components Pattern) 이란? 프롭 드릴링(prop drilling) 없이 하나의 컴포넌트를 구성하는 State를 공유하도록 작성하는 컴포넌트 패턴이다. view를 구성하는 코드에 커스터마이징이 용이하다는 장점이 생긴다. import React, { useState } from "react"; const Test = () => { const [_value, _setValue] = useState("value2"); const optionChangeValue = (event) => { _setValue(event.target.value); }; return ( {_value} Label1 Label2 Label3 ); }; export default Test.. 2022. 12. 31.
속성 제어 패턴 (Control Props Pattern) | 리액트 디자인 패턴 속성 제어 패턴 (Control Props Pattern) 이란? 컴포넌트를 제어 컴포넌트(Controlled Component)로 변환한다. 외부 상태는 사용자가 컴포넌트의 기본 동작을 변경할 수 있도록 사용자 지정 로직 삽입을 허용하는 SSOT(Single Source Of Truth)로 사용된다. 컴포넌트를 제어 컴포넌트 란? component 의 상태를 제어할 수 있는 컴포넌트를 의미한다. SSOT 란, 정보와 스키마를 오직 하나의 출처에서만 생성 또는 편집하도록 하는 방법론입니다. 장점 더 많은 제어권을 부여 메인 state 가 컴포넌트 밖으로 드러나기 때문에 사용자는 직접적으로 그 컴포넌트를 제어할 수 있다. // app.jsx import "./styles.css"; import input .. 2022. 12. 31.
하이퍼 텍스트 전송 프로토콜 (HTTP, Hyper Text Transfer Protocol) 하이퍼 텍스트 전송 프로토콜 (HTTP, Hyper Text Transfer Protocol) 이란? 웹 브라우저와 서버 사이에 HTML 문서와 같은 리소스 들을 주고 받을 수 있도록 해주는 통신 프로토콜 이다. 모든 데이터 교환의 기초이며, 클라이언트 - 서버 프로토콜이다. HTTP에서는 클라이언트가 서버에 요청 메세지를 보내고 서버는 클라이언트의 요청에 대한 응답을 반환한다. 연결 상태를 유지하지 않는 비 연결성 프로토콜이며, 요청과 응답(request, response) 방식으로 동작한다. 연결 상태를 유지하지 않는다는 말은 서버는 응답 메시지를 반환한 후에 클라이언트의 상태를 저장하지 않는다는 것입니다. 때문에 HTTP 프로토콜은 상태가 없는 프로토콜, 무상태성(stateless)라고도 불립니다... 2022. 12. 28.
728x90

티스토리툴바