분류 전체보기

CSS의 꽃, Flexbox

[CSS] 화면 중앙 배치 (Flexbox/Grid) | Engineering Blog by Dale Seo [CSS] 화면 중앙 배치 (Flexbox/Grid) Engineering Blog by Dale Seo www.daleseo.com 이번에야말로 CSS Flex를 익혀보자 이 튜토리얼은 “차세대 CSS 레이아웃” 시리즈의 첫번째 포스트입니다. 이번에야말로 CSS Flex를 익혀보자 이번에야말로 CSS Grid를 익혀보자 벌써부터 스크롤의 압박이 느껴지고,‘좀 편안하게 누 studiomeal.com *엘리님의 무료 유튜브 영상을 보고 배운 것들을 정리한 포스팅입니다! 1. flexbox는 컨테이너 박스에 적용되는 속성값들이 존재하고, 그 컨테이너 박스 안에 있는 아이템들에 적용되는 속성값들도 존재..

Html/css 구성하는데 유용한 사이트

0. 아이디어/웹 레이아웃 브레인 스토밍 https://excalidraw.com/ 1. 실시간 Html/css/js 적용상태 볼 수 있는 사이트 JS Bin - Collaborative JavaScript Debugging 2. 색깔을 고르고 싶을 때, 색깔 고르면 uI 컬러 배치구성까지 미리보여준다 Color Tool - Material Design 3. 이미지 파일을 원하는 크기로 변경, 16x16 / 32x32 / 64x64 / 128x128 / 256x256등 https://www.iloveimg.com/ko 4. 이미지 파일로 파비콘 생성 https://www.websiteplanet.com/ 5. 디자이너들이 제공해주는 무료 아이콘 모음 https://fontawesome.com/ svg t..

[타입스크립트] 객체지향의 꽃 composition(부제: 상속의 문제점)

Favor Composition over inheritance "상속 대신에 컴포지션(뜻: 구성요소들, 구성)을 더 선호하세요." 타입스크립트 OOP의 꽃, composition을 다루기 전에 상속의 문제점에 대해서 먼저 알 필요가 있다. 미리 말하자면, composition은 복잡하게 상속의 수직 구조가 길어지는 대신에 상속의 레벨을 한 단계로만 유지할 수 있도록 도와주는 기법이다. 문제점도 미리 말하자면, composition용으로 가져다 쓰는 클래스와 가져오는 클래스 사이의 커플링이 너무 심하다는 점이 있다.( 가져다 쓰는 클래스를 변경하거나 다른 클래스로 바꾸고 싶다면, 가져다 쓰는 클래스와 연결된 모든 클래스에 들어가서 코드를 업데이트해야 한다.-> 더 확장이 쉽고 유연한 테크닉은 다음 포스팅을..

[타입스크립트] 다형성(polymorphism)이 뭐가 좋은 것일까?

포스팅 제목의 해답은 아래 코드에 있다. 아래 코드를 보고도, 짐작하기 어렵다면 포스팅 가장 아래에 기재해두었다! //힌트1 const machines = [ new CoffeMachine(25, 25), new CafeLatteMachine(15, 25, 25, "S1"), new saltCoffeeMachine(5, 10), new CoffeMachine(25, 25), new CafeLatteMachine(15, 25, 25, "S1"), new saltCoffeeMachine(5, 10), ]; machines.forEach((machine) => { console.log("------------커피머신 가동~!------------"); console.log(machine.makeCoffee(1..

[타입스크립트] 커피머신클래스 <-상속- 카페라떼머신클래스

커피머신 클래스가 다음과 같이 있다. type CoffeeCup = { orderShot: number; hasMilk: boolean; }; interface CoffeeMaker { makeCoffee(shots: number): CoffeeCup; } //위 인터페이스를 구현하는 클래스이다. class CoffeMachine implements CoffeeMaker { private static ONE_SHOT_CAPSULE: number = 3; private static ONE_CUP_WATER: number = 10; static makeMachine(beans: number, water: number): CoffeMachine { return new CoffeMachine(beans, wat..

[타입스크립트] OOP 다형성, 상속 개념 확실하게 정리

다형성 정의 : 다형성이란 하나의 이름(방법)으로 많은 상황에 대처하는 기법이다. 효과 : 개념적으로 동일한 작업을 하는 함수들에 똑같은 이름을 부여할 수 있으므로 코드가 더 간단해지는 효과가 있습니다. 이를 통해 코드의 재사용, 코드 길이 감소가 되어 유지보수가 용이하도록 도와준다. 위의 설명을 조금 더 풀어 설명하자면, 아래와 같다. 다형성은 [상속]에서 비롯되는 큰 장점이라고 생각하면 쉽다. 다형성은 상속을 통해 동일 이름임에도 그 기능을 변경하는 것을 가능하게 해준다. 다형성 : 같은 이름을 불렀는데 다른 형상을 하는 것(같은 동작이지만 다른 과정과 결과가 나옴) [클래스 상속] extends 클래스 상속을 잘 이용하면 공통적인 기능은 그대로 재사용하면서, 자식클래스에서만 조금 더 자식클래스에 특..

[타입스크립트] 제네릭 타입 별칭

type MyEvent = { target: T; type: string; }; type ButtonEvent = MyEvent; let myEvent: MyEvent = { target: "홍길동이벤트", type: "click", }; type TimedEvent = { event: MyEvent; from: Date; to: Date; }; function trggerEvent(event: MyEvent): void { console.log(event); } trggerEvent({ target: "황진이이벤트", type: "mouseover", }); 제네릭 타입 별칭 : 타입 별칭과 할당 기호(=) 사이에만 제네릭 타입을 선언할 수 있다. type MyEvent = { target: T; ty..

[타입스크립트] 2개 이상의 제네릭 적용해보기(추론, 명시, 프로미스 제네릭까지)

2개 이상의 제네릭 적용해보기 초안 function map(array: unknown[], f: (item: unknown) => unknown): unknown[] { let result = []; for (let i = 0; i U): U[] { let result = []; for (let i = 0; i < array.length; i++) { result[i] = f(array[i]); } return result; } : 인수 배열 멤버의 타입을 대변하는 T, 반환 배열 멤버 타입을 대변하는 U..

[타입스크립트] 함수호출 시그니처의 제네릭

function filter(array: T[], f: (item: T) => boolean): T[] { let result = []; // tslint:disable-next-line: prefer-for-of for (let i = 0; i boolean): T[] }; let names = [{ 이름: "smith" }, { 이름: "kate" }, { 이름: "max" }]; //1. T는 number로 한정됨 console.log(filte..

[타입스크립트] 호출 시그니처(타입시그니처)란?

함수 시그니처란 컴파일러가 함수를 구분하기 위한 구성요소를 말한다. 프로그래밍 언어마다 시그니쳐를 구성하는 요소가 다르지만 대체적으로 아래의 요소가 포함되어 있다. 함수의 이름 매개변수(Parameter)의 개수 (옵셔널) 매개변수의 자료형 (옵셔널) 반환하는 값의 자료형 만약 두 함수의 이름, 매개변수의 개수, 그 타입이 모두 같다면 이 두 함수의 시그니처는 같다고 할 수 있다. 함수의 전체 타입을 표현하는 방법 function sum(a: number, b: number): number { return a + b; } number타입의 인자 두개를 받아 number타입을 반환한다는 뜻의 타입스크립트의 함수 타입 문법 (a: number, b: number) => number 이런 식의 표현을 호출 시..