몽땅뚝딱 개발자

React + Typescript 환경에서 Swiper 적용하기! 오늘도 안됐ㄷㅏ 이젠 개의치않아 맨날 안되니깐 말이야 ! 내가 구현할 환경에서는 React, TypeScript, SCSS를 사용하고 있다. 1. Swiper를 설치해준다. 가장 최신버전으로 했다. $ npm i swiper 2. 이렇게 선언해준다. 이렇게 선언하면 이미지 슬라이드까지는 구현이 된다. { displayImageList.map((url, index) => { return ( ) }) } ✍🏻 여기서 내가 원하는 바를 정리해보자면 1) 현재 슬라이드의 인덱스를 받아와서 화면에 노출해야한다. 2) 2개의 탭을 왔다갔다 하는 것이기 때문에 다른 탭을 누르면 activeIndex(현재 활성화 된 슬라이드의 인덱스)도 함께 초기화되어..

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

대부분의 편집기는 인라인(//)이 아닌 JSDoc(/** */) 스타일의 주석을 툴팁으로 표시해준다. /** * 인사말을 생성하는 함수 * @param name 인사할 사람의 이름 * @return 인사말 */ const greetFullTSDoc = (name: string) => { return `안녕하세요, ${name}님.` } 인터페이스에도 적용해 볼 수 있다. /** 유저정보 */ interface User { /** 유저의 이름 */ name: string /** 유저의 나이 */ age: number } const user1: User = { name: 'vinch', age: 10000, } 마크다운도 사용할 수 있다. 📄 예시 1. /** * this _interface_ has **t..

any는 남발하지 않는 것이 좋지만 꼭 사용해야한다면 가능한 한 좁은 범위에서 사용하도록 한다. any는 자바스크립트에서 표현할 수 있는 모든 값을 아우르는 매우 큰 범위의 타입이다. any 타입에는 모든 숫자, 문자열, 배열, 객체, 정규식, 함수, 클래스, DOM 엘리먼트는 물론 null, undefined까지 포함한다. ◽ 변수에 사용할 때 // 이렇게 사용하지 않는다. const f1 = () => { const x: any = expresstioReturningFoo() useBar(x) } // 다른 코드에는 영향을 끼치지 않도록 매개변수에만 사용한다. const f2 = () => { const x = expresstioReturningFoo() useBar(x as any) } ◽ 객체에 ..

CASE 1. 유니온의 인터페이스보다는 인터페이스의 유니온을 사용하자 아래처럼 사용하면 너무 많은 속성을 갖게되고 너무 많은 오류를 발생시킬 수 있다. interface Layer { layout: FillLayout | LineLayout | PointLayout paint: FillPaint | LinePaint | PointPaint } 각각 타입의 계층을 분리된 인터페이스로 두는 더 나은 방법으로 모델링 할 수 있다. interface FillLayer { layout: FillLayout paint: FillPaint } interface LineLayer { layout: LineLayout paint: LinePaint } interface PointLayer { layout: PointLa..

◽ Partial 특정 타입의 부분 집합을 정의할 때 사용한다. interface UserInfo { name: string age: number } type User = Partial const user1: User = {} const user2: User = { name: 'hi' } const user3: User = { name: 'hello', age: 20000 } ◽ Record 타입스크립트에서는 인덱스 시그니처(Index Signature)는 대괄호로 객체를 접근하는 방법을 사용할 수 있다. 인덱스 시그니처의 경우 문자열 리터럴을 key로 사용하지 못하지만, Record는 가능하다. 예제 1. // 1. 인덱스 시그니처를 사용했을 때 type UserInfo = { [name: string..

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..

📍 클릭 시 이동! 1. 분기문 사용하기 2. instanceof 사용하기 3. 속성 체크하기 4. 명시적 '태그' 붙이기 5. 사용자 정의 타입 가드 사용하기 추가. 주의할 점 ◽ 1. 분기문 사용하기 예제 1. if문 const el = document.getElementById('foo') // 타입: HTMLElement | null if(el) { el // 타입: HTMLElement } else { el // 타입: null } 예제 2. 에러 던지기 const el = document.getElementById('foo') // 타입: HTMLElement | null if(!el) throw new Error('변수를 찾을 수 없습니다.') el // 타입: HTMLElement ◽ 2...

◽ 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가..