몽땅뚝딱 개발자

글 하나로 적긴 애매하지만 모아두면 소소한 깨달음의 정리... 계속 추가 될 예정....🚂 1. 함수를 넣으면 렌더링 시점에서 함수가 호출되므로 함수형태로 넣어준다. // 이렇게 함수형태로 작성해준다. // 이렇게 적으면 렌더링 시점에 실행된다. 2. 값은 이렇게도 담긴다. import SwiperCore, {Navigation} from "swiper"; const [swiper, setSwiper] = useState(); 3. 기본값을 지정하는 방법은 2가지 - 첫번째 방법: defaultProps를 사용한다. UserInfo.defaultProps = { name: 'empty', age: 0, }; - 두번째 방법: 매개변수에서 지정해준다. function UserInfo({ name = 'em..

마커를 넣어보자! 1. 마커 1개 넣어보자 import React, { useEffect } from 'react' import styled from 'styled-components' declare global { interface Window { kakao: any } } const Map = styled.div` width: 100%; height: 300px; ` function MapContainer() { const addMarker = () => { const markerPosition = new window.kakao.maps.LatLng(33.450701, 126.570667) return new window.kakao.maps.Marker({ position: markerPosition..

테마를 분리해보자.... 해내고나니 뿌듯하다... ^_ ^ㅋ 다만 리팩토링이 필요하다. 1. type으로 선언했는데 interface와 구분이 잘 되지 않는다. 좀 더 알아본 뒤 변경해야 할 것 같다. 2. 좀 더 공통화 할 수 있는 부분이 있을 것 같다. 3. 기본값도 유니온을 사용해서 type으로 만들 수 있을 듯?! 📄 CommonButton.tsx import styled, { css } from 'styled-components' // ... function CommonButton(props: ButtonProps) { return ( {props.label} ) } export default CommonButton ButtonProps는 이렇게 지정해주었다. /** * **label**: 버튼..

1. 모든 변수에 타입을 넣지 않는다. - 타입스크립트는 결국 타입을 위한 언어이기 때문에 변수를 선언할 때마다 타입을 명시해야한다고 생각할 수 있다. 하지만 모든 변수에 타입을 선언하는 것은 비생산적이며, 타입스크립트가 타입을 추론할 수 있다면 타입 구문을 작성하지 않는 것이 좋다. - 이상적인 타입스크립트 코드는 *메서드 시그니처에 타입 구문을 포함하지만, 함수 내에서 생성되는 지역변수에는 타입 구문을 넣지 않는다. 타입 구문을 생략하여 방해되는 것들을 최소화하고 코드를 읽는 사람이 구현 로직에 집중할 수 있게 하는 것이 좋다. * 메서드 시그니처란? 메서드 이름 + 파라미터의 조합이 메서드 시그니처가 된다. 메서드 시그니처가 같다는 말은 메서드 이름과 파라미터가 같다는 뜻이다. - eslint 규칙..

CASE 1. Action 유니온을 인덱싱하여 반복 없애기 interface SaveAction { type: 'save'; // ... } interface LoadAction { type: 'load'; // ... } type Action = SaveAction | LoadAction type ActionType = 'save' | 'load' // 타입이 반복된다. // Action 유니온을 인덱싱하면 타입 반복 없이 ActionType을 정의할 수 있다. type ActionType = Action['type'] // 타입은 'save' | 'load' // 하지만 pick을 사용하면 다른 결과를 얻는다. type ActionRec = Pick // {type: 'save' | 'load'} C..

◽ as const const는 변경할 수 없는 변수를 선언할 때 사용하는 것이고, as const와는 다르다. as const는 타입스크립트가 해당 값에 추정되는 많은 타입들 중에서 최대한 좁은 타입으로 추론할 수 있도록 한다. 예를 들어, 원시형 타입은 const로 선언하면 변경이 불가능하지만 Array나 Object는 원시형 타입이 아닌 참조 타입이기 때문에 const로 선언하더라도 깊은(deep) 변경을 실행할 경우 값을 바꿀 수 있다. 따라서 참조 타입은 필요한 경우, const 단언문을 사용하여 타입을 좁히거나 변경할 수 없도록 만들 수 있다. // 타입은 { x: number, y: number } const v1 = { x: 1, y: 2, }; v1.x = 3 // 정상: 변경이 가능하다..

◽ Readonly - Readonly는 속성을 읽기만 가능하도록 설정하여 매개변수가 변경되는 것을 방지한다. - 변경이 발생하는 코드를 쉽게 찾을 수 있으며, 변경하면서 발생하는 오류를 방지할 수 있다. - 단, Readonly는 얕게 동작하므로 깊은(deep) readonly 타입이 필요하다면 ts-essentials에 DeepReadonly 제네릭을 사용하면 된다. interface Outer { inner: { x: number; } } // 이렇게도 적을 수 있다. // const o: { readonly Outer } const o: Readonly = { inner: { x: 0 } }; // 할당할 수 없다. o.inner = { x: 1 }; // 하지만 이건 가능한데, readonly가..

◽ Exclude T에 지정된 타입들 중 U에 나열된 타입들은 제외하여 정의한다. /** * Exclude from T those types that are assignable to U */ type Exclude = T extends U ? never : T 예제 1. type TChar = "a" | "b" | "c" | "d" type T00 = Exclude; // "b" | "d" 예제 2. interface IUser { name: string age: number birth: Date death: Date } type User = Exclude // type User = "name" | "age" | "birth" ◽ Extract // Extract: T에 지정된 타입들 중 U에 나열된 타..