본문 바로가기

TypeScript8

[TypeScript] 나만 알고 싶은 웹 프레임워크 'Svelte(스벨트)' 스벨트(Svelte), 프레임워크의 새로운 패러다임 보통 "React", "Vue" 같은 프레임워크가 "가상돔(Virtual DOM)"을 사용해 웹페이지를 업데이트한다고 알고 있습니다. 하지만 Svelte는 완전히 다른 방식으로 접근합니다. Svelte는 프레임워크가 아니라 '컴파일러' Svelte는 우리가 작성한 코드를 브라우저에서 실행하기 전에, '빌드(build) 단계'에서 미리 최적화된 순수 자바스크립트(Vanilla JS) 코드로 변환해버립니다.기존 프레임워크 : 실시간으로 통역해주는 '동시통역사'와 함께 일하는 방식입니다. 계속해서 통역사의 도움이 필요하죠.Svelte : 책을 출간하기 전에 '전문 번역가'가 완벽하게 번역을 끝내놓는 방식입니다. 독자(브라우저)는 그냥 잘 번역된 책(순수 .. 2025. 9. 10.
[TypeScript] TypeScript 상태 관리 Hook 정리 1. useStateuseState는 가장 기본적인 상태 관리 Hook으로, 컴포넌트 내에서 상태를 저장하고 업데이트하는 데 사용됩니다.import { useState } from "react";const Counter: React.FC = () => { const [count, setCount] = useState(0); return ( Count: {count} setCount(count + 1)}>Increment );};2. useEffectuseEffect는 컴포넌트가 렌더링될 때 특정 로직을 실행하고자 할 때 사용됩니다. (예를 들면 API 호출, 구독(subscription), DOM 업데이트 등의 작업이 가능합니다.)import { useState, .. 2025. 5. 19.
[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 기초 메모장(Styled-components 기본 문법 모음) 1. 기본 사용법styled.div 사용2. Props로 동적 스타일props => 조건 ? 스타일 : 스타일3. 전역 스타일createGlobalStyle4. 다크 모드 지원ThemeProvider 활용5. 애니메이션keyframes 활용6. 반응형 스타일@media 사용7. 스타일 상속styled(기존 컴포넌트)8. Mixin 활용css 함수로 공통 스타일 정리9. as 활용컴포넌트 태그 변경1. 기본적인 스타일드 컴포넌트 생성styled.태그명import styled from "styled-components";const Container = styled.div` width: 100%; max-width: 1200px; margin: 0 auto; padding: 20px; backgrou.. 2025. 2. 23.
[TypeScript]나만 보는 TypeScript 기초 메모장(Styled-components 기본) 장점동적 스타일링 : props를 이용해 컴포넌트 스타일을 동적으로 바꿀 수 있음.컴포넌트 단위 스타일 : CSS가 컴포넌트 내에서 바로 정의되기 때문에, 스타일과 컴포넌트가 더 잘 결합, 유지보수하기 쉬움.자동으로 클래스 이름 해시화 : 클래스 이름이 자동으로 고유하게 변환되기 때문에, 전역 스타일 충돌을 걱정할 필요가 없음.예시:import styled from 'styled-components';const Button = styled.button` background-color: ${props => props.primary ? 'blue' : 'gray'}; color: white; padding: 10px 20px; border: none; border-radius: 5px;`;const.. 2025. 2. 19.
[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 기초 메모장(map 고유ID) index를 사용하는 이유 & ID를 쓰는 이유map()을 사용할 때, React는 각 항목이 고유한 식별자(key)를 가지면 React가 리스트를 효율적으로 업데이트할 수 있습니다.index를 key로 사용한 경우{tasks.map((task, index) => ( ))} index는 배열에서 현재 항목의 위치(순서)를 나타냄.예를 들어, tasks = ["A", "B", "C"]가 있으면0A1B2C문제점새로운 항목이 추가되거나 삭제되면 index가 바뀜.React는 key 값이 바뀌는 걸 감지 못하고, 예상치 못한 렌더링 문제가 발생 가능성.고유한 ID를 key로 사용한 경우(추천)TodoList.tsximport React, { useState } from "react";import TodoIte.. 2025. 2. 15.

티스토리툴바