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. 이전 1 2 다음
