본문 바로가기

분류 전체보기59

[Svelte] svelte4 vs svelte5 비교 1. State$state()반응형 변수일 경우 $state()를 사용하여 반응형 상태임을 명시한다.🏃‍♀️‍➡️ Svelte4🏃‍♂️‍➡️ Svelte5 Svelte 4 vs Svelte 5 비교 항목 Svelte 4 (기존 방식)Svelte 5 (새로운 방식)반응성 선언 방식let count = 0; (자동 감지)let count = $state(0);변수의 명확성반응형인지 불분명함$state()를 사용하여 명확히 반응형 변수임을 표시렌더링 최적화전체 블록이 다시 실행될 가능성 있음변경된 부분만 업데이트즉, Svelte 5에서는 $state()를 통해 더 직관적인 상태 관리를 제공하면서, 렌더링 성능도 최적화되었다.2. Computed State$derived()반응형 계산일 경우 $derived.. 2025. 12. 26.
[React] 이벤트 처리하기_2 Event Propagation in React리액트의 이벤트는 DOM을 타고 전파되는 특성이 있다.function Toolbar() { return ( { alert('You clicked on the toolbar!'); }}> alert('Playing!')}> Play Movie alert('Uploading!')}> Upload Image );}위와 같이 button 태그를 감싼 div 태그에 이벤트가 부착되어 있을 때 button 태그를 클릭할 경우 div 태그의 이벤트도 같이 실행된다. 이를 이벤트 전파 또는 이벤트 버블링이라 한다. (onScroll 이벤트는 해당 태그에서만 실행된다. 이를 .. 2025. 12. 25.
[Svelte] svelte5 새로운 문법의 도입 Svelte 5의 새로운 문법Svelte 5가 2024년에 정식 출시되면서 기존 문법과 많은 부분이 달라졌다. 특히 반응성 시스템이 완전히 새로워졌는데, 이제 $state, $derived, $effect 같은 rune이라는 개념을 사용한다. 1. $state - 상태 관리의 새로운 방식기존 Svelte에서는 그냥 let count = 0 이렇게 선언하면 반응성이 자동으로 작동했다. 하지만 Svelte 5에서는 명시적으로 $state()를 사용해야 한다. (스벨트5에서도 여전히 스벨트4 문법을 지원하지만 가독성을 위해)클릭: {count}{user.name}님의 나이는 {user.age}세$state()로 선언한 변수는 값이 변경되면 자동으로 UI가 업데이트된다. 객체나 배열도 깊은 반응성을 지원하기 때.. 2025. 12. 24.
[Cursor] 인공지능과 함께하는 개발 Cursor IDE 개발자에게 IDE는 단순한 프로그램이 아니다. 하루 종일 마주하며 생각하고 판단하는 공간이기 때문에, IDE의 성격은 곧 개발자의 작업 방식과 직결된다. Cursor IDE는 이러한 점을 특성화한 도구다. 겉으로 보면 익숙한 코드 편집기처럼 보이지만, 실제로는 인공지능을 중심에 두고 설계되어 전혀 다른 접근 방식을 취하고 있다. 커서가 주목받는 이유는 “코드를 얼마나 빨리 작성할 수 있는가”보다는 “코드를 얼마나 잘 이해하고 다룰 수 있는가”에 초점을 맞추고 있기 때문이다. 현실적인 개발 환경에서는 새 코드를 작성하는 시간보다, 기존 코드를 읽고 구조를 파악하며 수정하는 시간이 훨씬 길다. 커서는 바로 이 지점을 해결하기 위해 만들어졌다. 처음 접하는 프로젝트나, 여러 사람이 거쳐 간.. 2025. 12. 22.
[Svelte] Svelte vs React, 스벨트와 리액트 스벨트(Svelte)와 리액트(React)는 자주 비교되는 프레임워크, 라이브러리이다.유튜브에 스벨트 검색해보면 리액트 유저가 스벨트 사용하면? 과 같은 주제로 영상이 많이 있다. 직접 써보니 비교할만하다. 상태관리가 핵심인데 리액트에 비해 스벨트가 훨씬 간편하기 때문이다. 하지만 단순히 '가볍다', '쉽다'라는 인상만으로는 이 두 기술의 본질을 이해하기 어렵다.스벨트와 리액트, 왜 이렇게 자주 비교될까?프론트엔드 개발을 시작하거나 새로운 기술 스택을 고민할 때, 거의 빠지지 않고 등장하는 이름이 바로 리액트와 스벨트이다. 리액트는 한국의 프론트 계를 평정한 라이브러리이고, 스벨트는 상대적으로 늦게 등장했지만 '생각보다 훨씬 단순하다', '코드가 눈에 띄게 줄어든다'는 평가를 받으며 리액트와 비교되어 주.. 2025. 12. 19.