728x90 반응형 source-code/TypeScript7 팩토리 구현 시, 인스턴스 타입 안전성 확보하기 Backgrounds최근 프로젝트에서 다양한 메시지 핸들러 클래스를 생성하고 관리할 필요가 생겼습니다. 메시지 핸들러는 프로젝트 내 모듈들 간의 통신을 담당하며각각의 메시지 핸들러는 자신이 해야할 일(action)과 데이터(payload), 실제 송수신 방법에 대한 메서드를 구현하고 있었습니다.(ex "사이드 패널 활성화 메시지 핸들러", "팝업 활성화 메시지 핸들러", "타겟 정보 데이터 전송 메시지 핸들러") 이때 앱 내 메시지 핸들러의 종류가 점차 많아짐에 따라,각 메시지 타입(action)에 대응하는 구체적인 메시지 핸들러 클래스들을 손쉽게 생성하고 관리하기 위해 팩토리 패턴을 적용했습니다.import { MessageHandlerPort, Message,} from "@/application.. 2024. 7. 5. "'React'은(는) UMD 전역을 참조하지만 현재 파일은 모듈입니다" 에러 해결 typescript로 React 애플리케이션을 작성하고 있는데 다음과 같은 타입 에러와 마주쳤다. react component 내에 작성된 JSX 표현식에서 에러가 발생했는데... 해결 방안 해결 방법 자체는 단순하다. 아래의 두 해결책 중 하나를 사용하면 된다! 1. 해당 tsx 파일 내 React import import React from "react"; React를 import 해주면 된다. 2. tsconfig compilerOptions 변경 { "compilerOptions": { // ... "jsx": "react-jsx", // react-jsx 또는 react-jsxdev로 설정 } } tsconfig의 compilerOptions 중 jsx 속성을 변경해 주면 된다. 원인 그런데 영.. 2023. 11. 18. getElementsByClassName에 for each 사용해 HTMLElement 접근하기 같은 className의 요소들을 순회하며 특정 동작을 수행해야 할 때가 있다. const balls = document.getElementsByClassName("ball"); balls.forEach((element) => {}); // Error! 위와 같이 작성하면 될 것 같지만... HTMLCollectionOf 에는 forEach가 없단다. 왜? https://developer.mozilla.org/ko/docs/Web/API/HTMLCollection HTMLCollection - Web API | MDN HTMLCollection 인터페이스는 요소의 문서 내 순서대로 정렬된 일반 컬렉션(arguments처럼 배열과 유사한 객체)을 나타내며 리스트에서 선택할 때 필요한 메서드와 속성을 제공합.. 2023. 11. 16. react-hook-form TS와 똑똑하게 사용하기 2023.08.16 - [source-code/React] - React Hook Form 기반 유효성 버튼 구현 React Hook Form 기반 유효성 버튼 구현 약 1년이 조금 넘는 기간 동안, 샵 관리 프로그램을 개발했다. 대부분의 데이터가 사용자의 입력을 통해 생성되는 관리 프로그램의 특성상... form과 관련된 로직을 정말로 많이 다뤘다. 온갖 요구 23life.tistory.com 여전히 react-hook-form의 도움을 받고 있다. 현 서비스의 PC 버전은 nextJS + Typescript를 사용하고 있다. 앱에 있는 기능이 모두 구현돼야 하므로... 역시나 수많은 form 관련 로직을 다룬다. → react-hook-form도 TS로 작성하는 중! // Input.tsx impor.. 2023. 8. 21. index signature 관련 타입 에러 const convertToIndexGroup = ( data: T[] = [], ): {[key: number]: T[]} => { let indexKey = 0 return data.reduce((prev, cur, currentIndex) => { ... return Object.assign(prev, { [indexKey]: prev[indexKey] ? [...prev[indexKey], cur] : [cur], }) }, {}) } T[ ] 타입의 data 파라미터를 {[key:number] : T[ ]} 형태로 변환하는 함수. reduce함수를 사용해, 배열의 각 요소를 기준에 맞게(요구 사항으로는 4개씩 끊어서) key-array형태의 object로 변환했다. 여기서 위와 같이 작성하면.... 2023. 8. 21. JsToTs : axios JavaScript를 TypeScript로 변환하기🦾 2023.01.14 - [BTY/TypeScript] - JsToTs : 비동기 처리 - Promise JsToTs : 비동기 처리 - Promise JavaScript를 TypeScript로 변환하기🦾 비동기 처리 유저 정보를 받아오는 비동기 처리 함수를 생각해보자. 기존 JS 코드는 다음과 같다. const getUserProfile = async ({ id }) => { let config = { method: "get", url: `${U 233life.tistory.com 유저 정보를 조회하는 비동기 요청을 TS로 변환했었다. interface UserInfo { id: number; name: string; } const getUserPro.. 2023. 8. 21. JsToTs : 비동기 처리 - Promise JavaScript를 TypeScript로 변환하기🦾 비동기 처리 유저 정보를 받아오는 비동기 처리 함수를 생각해보자. 기존 JS 코드는 다음과 같다. const getUserProfile = async ({ id }) => { let config = { method: "get", url: `${URL}/auth/profile/${id}`, }; try { const _res = await axios.get(`${URL}/auth/profile/${id}`); return _res.data; } catch (e) { throw e; } }; 항상 기억하자 → TS는 JS의 변수, 매개 변수, 리턴값에 타입을 지정한 것! 우선 가장 먼저 눈에 띄는(그리고 선명한 빨간 밑줄이 그여있는) 매개변수의 타입을 지.. 2023. 8. 21. 이전 1 다음 728x90 반응형
