1️⃣ Coord 타입 정의 export interface Coord { latitude: number; // 위도 longitude: number; // 경도 radius: number; // 반경 (기본값 가능) date: string; // 선택 시각 ISO 문자열 address: string; // 주소 문자열}모든 좌표 데이터는 위 타입 기반radius, date, address 등은 선택 시점에 자동 채움2️⃣ Zustand Store 설계 (Partial + localStorage + 리셋) import { create } from "zustand";import secureLocalStorage from "react-secure-storage";impor..
🧩 TypeScript + React에서 ref 정리✅ 전체 요약리스트를 렌더링할 때 ref를 map() 안에서 동적으로 관리하고자 할 때,배열 방식과 객체(Record) 방식의 차이, 그리고 ref 함수의 타입에 대한 이해가 중요함.🔹 Q1. ref={el => itemRefs.current[item.id] = el} 에서 el의 타입은?HTMLDivElement | null마운트 시에는 실제 DOM 엘리먼트 (HTMLDivElement), 언마운트 시에는 null🔹 Q2. 컴포넌트에 ref를 쓰면 el의 타입은?일반 컴포넌트는 ref를 직접 받을 수 없음forwardRef로 감싸야 함그 경우 el의 타입은 ref가 노출하는 객체 (T | null)🔹 Q3. useRef>({})의 의미?Reco..
*map에서 ref 사용하기import { useRef, useEffect } from 'react';type Item = { id: number; name: string;};const items: Item[] = [ { id: 1, name: 'First' }, { id: 2, name: 'Second' }, { id: 3, name: 'Third' },];export default function ListComponent() { const itemRefs = useRef([]); useEffect(() => { // 예시: 두 번째 요소에 포커스 주기 itemRefs.current[1]?.scrollIntoView({ behavior: 'smooth' }); }, []); ..
상태의 타입이 까다로운 구조를 가진 객체이거나 배열일 때 interface PropsType { cat: boolean; dog: boolean; pig: boolean; } 1. 타입정의후 const [isHover, setIsHover] = useState({ cat: false, dog: false, pig: false, }); 2. 재네릭으로 타입을 정의해 주고 기본값 세팅 const handleImgChange = (x: boolean, y: boolean, z: boolean) => { setIsHover({ cat: x, dog: y, pig: z, ..
1. 설치하기 npx create-react-app . npm i @types/react 통합적으로 npx create-react-app . --template typescript 설치가능 2. .ts 와 .tsx .ts파일은 pure typescript 파일 .tsx 파일은 typescript의 react문법을 담아내기 위한 확장자(jsx+ typescript) 3. src 디렉토리 1) index.tsx 1: 메인 엔트리 파일 2: React.Dom.render 수행 3: pwa(프로그레시브 웹 앱 = HTML, CSS, JavaScript와 같은 웹 기술로 만드는 앱)를 위한 서비스 워커 등록 작업 2) index.css 글로벌 스타일 작성(프로그래밍적으로 제한되지 않음) 3) App.tsx App..
alias(별칭) 타입 - 재사용에 좋음 / 변수에 할당하는 방식 type Age = number; type Name = string; type Player = { readonly name:Name, age?:Age // optional } const playerMaker = (name:string) : Player => ({name}); const suuun = playerMaker("seon"); suuun.age = 32; //suuun.name="dddd"; //readonly가 있으면 읽기 전용이므로 최초 선언 후 수정 불가 const playersuuun:Player = { name:"seon" } 함수의 리턴값에 타입을 지정하는 방식 - 위의 화살표 함수와 같음 function playerM..
#배경 javascript는 클라이언트 측 언어로 도입되었는대 node.js개발로 인해서 서버측 기술로도 활용하기 위해 만들었음 그러나 소스코드가 더 복잡해 지고 유지관리 및 재사용이 힘들며 type검사 및 컴파일 시 오류 검사의 기능을 수용하지 못하는 단점이 발생하여 typescript가 제시 됨 #typescript란? -자바스크립트에 타입을 부여한 언어(자바스크립트의 확장된 언어) -타입스크립트를 브라우저에서 실행하기 위해 자바스크립트로 컴파일(파일변환) 해주어야 함 #type system -개발환경에서 에러를 잡을 수 있음(오직 개발환경에서만 활성화 됨) -type annotations를 사용해서 코드를 분석할 수 있음(변수나 상수의 생성 시 데이터 타입을 지정해주는 것) *변수명, 함수명, 객체..
