개발58 [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. [claude] 클로드와 함께 바이브 코딩(intellij) 클로드와 바이브 코딩 1. 인텔리제이에 클로드 연동하기인텔리제이를 사용한다면 상당히 간단하다. 설정 > 플러그인 > 마켓 플레이스에서 Claude Code 를 검색 후 설치해주면 된다.설치 후 위 이미지처럼 상단바에 클로드 로고가 나타나면 성공이다. 혹 나타나지 않는다면 인텔리제이를 재시작하면 된다. 클로드 로고를 누르면 터미널에 귀여운 클로드 채팅창이 나오고 여기서 클로드와 대화하며 코딩을 시작하면 된다. 2. 로컬 폴더 클로드 연동그 외 클로드를 직접 연동할 수 없는 IDE를 사용 중이라면 데스크탑 버전의 클로드를 설치해서 사용하면 된다. https://claude.com/download Download ClaudeDownload Claude for your desktop or mobile devic.. 2025. 12. 17. 이전 1 2 3 4 ··· 12 다음
