본문 바로가기

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.
[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.
[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.
[TypeScript]나만 보는 TypeScript 기초 메모장 "자바스크립트"와 "타입스크립트"의 차이점 : 타입 유무 const message = "hello"; console.log(message); const message1: string = "hello2"; console.log(message1); //message: string은 message가 문자열 타입임을 명시.React.FC : 리액트 컴포넌트 타입import React from "react";const HelloWorld: React.FC = () => { return Hello, World!;};export default HelloWorld;props의 전달 방식( Props란? )import React from "react";type HelloWorldProps = { name: .. 2025. 1. 31.
[TypeScript]BrowserRouter, HashRouter 차이(Vite) 1. BrowserRouter와 HashRouter의 차이BrowserRouter :HTML5의 history API를 사용합니다.URL이 깔끔합니다. (예: http://localhost:5173/about)Vite 서버 설정이 필요하여, 모든 경로에 대해 index.html을 제공하도록 서버를 구성해야 합니다. 그렇지 않으면 404 오류가 발생할 수 있습니다.createRoot(document.getElementById('root')!).render( } /> );HashRouter :URL의 해시(#)를 사용합니다 (예: http://localhost:5173/#/about).서버 설정이 필요 없고, 해시 뒤의 경로는 서버로 전송되지 않기 때문에.. 2025. 1. 30.

티스토리툴바