solar_system_11 solar_system_11

웹을 디자인하다 보면 어떤 정보를 담고 있는 버튼 안에 삭제 버튼이 있는 것처럼 버튼과 버튼이 겹치는 것이 불가피할 때가 있다. 이때 눌러보면 두 버튼이 모두 작동하는데, 버튼을 눌렀을 때 하나만 동작하는 것이 일반적이니 이를 어떻게 할 수 있을지 알아보자. 핵심은 event의 stopPropagation()이다. 안에 있는 버튼에 아래와 같이 선언해주면 안쪽 버튼이 눌릴 때 바깥쪽 버튼이 안 눌리는 것을 확인할 수 있다. const onClick = (e: React.MouseEvent) => { e.stopPropagation(); // Do something } 아래는 이를 활용한 예시 코드이다. import "@/styles/components/card.css"; import React from ..

제네릭(Generic)은 여러 가지 타입에서 동작하는 컴포넌트를 생성하는데 사용되는데, 이를 활용하면 재사용성이 높은 컴포넌트를 만들 수 있다. 일반적으로 아래와 같이 작성하며, 함수 사용 시 같이 넘겨준 모든 타입 T에 대해 동작한다. function genericFunctionName(arg: T): T { // Do something return arg; } 코드를 작성하다보면 arrow function ("=>" 이용하는) 형태로 사용해야 할 때도 있는데, 그럴 땐 아래와 같이 작성한다. const genericArrowFunctionName = (x: T) => { // Do something retrun x; }; 조금 더 확장하면 아래와 같이 제네릭 타입(인터페이스)이랑 제네릭 클래스도 작성..

const d1 = new Date(2000, 2, 1); const d2 = new Date(2010, 4, 27); console.log(d1 > d2) // false console.log(d1 < d2) // true 기본적으로 위 식처럼 비교 연산자를 이용해 단순하게 Date를 비교할 수 있다. 그런데 저 식이 모두 false를 반환할 때가 있는데, 그건 두 Date의 형태가 달라서 발생한다. 나는 DB에 저장된 유효 기간과 현재 시간을 비교해서 해당 요청이 유효한지를 판단하는 코드를 작성해야 했는데, 이때 서버에서 받아 온 expiration 값(Date 형식)과 현재 시간을 반환하는 new Date()의 형태가 달라 앞서 언급한 문제가 발생하였다. 나는 아래와 같이 받아 온 값을 형태를 맞춰..