IT개발/TypeScript9 [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]나만 보는 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. 이전 1 2 3 다음