본문 바로가기

타입스크립트6

[TypeScript]React 개발 프로젝트에서 BrowserRouter를 사용했을 때 화면이 정상적으로 렌더링되지 않는 경우 + Vite(트러블 슈팅) 원인 : React로 프로젝트를 개발하다 보면, BrowserRouter를 사용했을 때 화면이 정상적으로 렌더링되지 않는 경우가 있습니다. 하지만 HashRouter로 변경하면 문제없이 동작하는데 그 이유를 알아보자. BrowserRouter 를 사용하면 화면이 안 나오는 이유  BrowserRouter는 history API를 활용하기 때문에, 사용자가 새로고침을 하면 문제가 발생할 수 있습니다.일반적으로 React 애플리케이션은 단일 HTML 파일(index.html)을 기반으로 동작합니다. 그런데 BrowserRouter를 사용할 경우, 새로고침을 하면 해당 경로(/about 등)에 대한 요청이 서버로 직접 전달됩니다.이는 개발 서버(Vite, Webpack Dev Server 등)가 해당 URL을.. 2025. 2. 28.
[TypeScript]나만 보는 TypeScript 기초 메모장(컴포넌트 간 요소 전달 (Props)와 interface의 역할) React에서 컴포넌트 간에 데이터를 전달할 때 Props(속성)interface는 이 Props의 구조(타입)를 정해주는 역할interface의 역할interface MemoItemProps { task: string; //내용 index: number; //해당 할 일의 배열 내 위치(인덱스) onDelete: (index: number) => void; //삭제함수(인덱스를 전달받아야 함)}interface는 MemoItem 컴포넌트가 받아야 하는 props의 형태를 정의하고 반드시!! task, index, onDelete라는 3가지 값을 꼭 넘겨야함.onDelete: (index: number) => void;를 쓰는 이유onDelete가 어떤 타입의 함수인지 미리 정의(onDe.. 2025. 2. 16.
[TypeScript]나만 보는 TypeScript 기초 메모장(배열 삭제, filter메서드) 기본적인 filter 메서드 개념filter 메서드는 배열을 순회하면서 주어진 조건을 만족하는 요소만 새로운 배열로 반환.const numbers = [1, 2, 3, 4, 5];const filteredNumbers = numbers.filter(num => num !== 3);console.log(filteredNumbers); // [1, 2, 4, 5] React에서 filter를 활용한 배열 삭제 기능import React, { useState } from "react";const MemoPad: React.FC = () => { const [tasks, setTasks] = useState(["공부하기", "운동하기", "책 읽기"]); const deleteTask = (index: nu.. 2025. 2. 15.
[TypeScript]나만 보는 TypeScript 기초 메모장(상태(state)에서 객체 형태로 저장, Map의 고유ID) type Task = { id: number; name: string; };는 언제 필요할까?이 type Task는 객체의 구조(타입)를 정의하는 역할.즉, 어떤 변수가 어떤 속성을 가지고 있어야 하는지 강제하는 것. tasks라는 상태(state)에서 각 할 일이 객체 형태로 저장. ex) {[고유ID, 입력값, [고유ID(2), 입력값(2)]}tasks 상태의 타입const [tasks, setTasks] = useState([]);tasks는 할 일(Task) 객체들의 배열.따라서, tasks 배열에 들어가는 모든 요소는 Task 타입을 따름만약 type Task를 안 쓰면? 타입스크립트가 타입 검사를 제대로 못 함! 예를 들어, id 없이 tasks를 만든다면?const newTask = { n.. 2025. 2. 15.

티스토리툴바