Vue.js는 선언적인 화면 표현과 반응형 상태를 연결하는 사용자 인터페이스 프레임워크이다. 컴포넌트 단위로 화면을 구성하며, 이 문서는 Vue 3의 반응형 API를 기준으로 설명한다. Composition API에서는 ref로 값을 감싸 반응형 상태를 표현할 수 있다. 자바스크립트 코드에서는 일반적으로 .value를 통해 ref의 값에 접근한다. reactive는 객체를 프록시로 감싸 속성 접근과 변경을 추적하는 방식이다.
React는 컴포넌트를 조합해 사용자 인터페이스를 구성하는 라이브러리이다. 컴포넌트는 입력과 상태를 바탕으로 화면에 필요한 결과를 표현하며, React는 그 결과를 실제 화면에 반영하는 과정을 관리한다. 컴포넌트는 화면을 역할별로 나누는 단위이다. 상위 컴포넌트에서 전달하는 props와 컴포넌트가 유지하는 state를 구별한다. 같은 정보를 여러 위치의 상태로 중복 저장하면 서로 다른 값이 남을 수 있으므로, 상태의 소유 위치
SvelteKit은 Svelte를 이용해 웹 애플리케이션을 만드는 프레임워크이다. 컴포넌트 자체를 넘어 라우팅, 데이터 로딩, 폼 처리와 배포 같은 애플리케이션 수준의 구성을 다룬다. Svelte 컴포넌트는 사용자가 보는 화면을 표현한다. 여러 URL을 연결하고 서버 데이터를 읽고 폼을 처리하는 서비스에는 추가 구조가 필요한데, SvelteKit은 이 흐름을 구성하는 역할을 맡는다. React와 Next.js, Vue와 Nux
Svelte는 HTML·CSS·자바스크립트로 작성한 선언적인 컴포넌트를 컴파일해 웹 사용자 인터페이스를 만드는 프레임워크이다. 작성한 컴포넌트와 브라우저에서 실행되는 결과물 사이에 컴파일 단계가 있다는 점이 중요한 특징이다. 컴파일러는 컴포넌트의 화면 구조와 동작을 실행 가능한 자바스크립트와 스타일로 변환한다. 컴파일을 사용한다는 사실을 브라우저에서 자바스크립트가 필요 없다는 뜻으로 해석해서는 안 된다. 실행할 코드의 양과 성
Angular는 컴포넌트를 중심으로 웹 애플리케이션을 구성하는 프레임워크이다. 컴포넌트는 TypeScript 클래스, 화면 템플릿과 메타데이터를 결합한다. 이름이 비슷한 AngularJS와는 구별해서 설명한다. 클래스는 입력 처리와 동작을 표현하고 HTML 템플릿은 화면 구조를 정의한다. Component 데코레이터의 메타데이터에는 선택자와 템플릿·스타일 정보 등이 들어간다. 선택자에 해당하는 요소에서 컴포넌트가 사용되며, 전
Nuxt는 Vue를 사용해 웹 애플리케이션을 구성하는 프레임워크이다. Vue 컴포넌트에 페이지 구성과 렌더링 전략을 연결한다. 브라우저 안에서만 실행하는 방식뿐 아니라 서버에서 만든 HTML을 전달하는 구성도 지원한다. 유니버설 렌더링에서는 서버가 HTML을 만들고 브라우저가 이를 받은 뒤 자바스크립트로 상호작용을 연결한다. 이미 만들어진 화면과 클라이언트 동작을 연결하는 과정을 하이드레이션이라고 부른다. 서버와 브라우저 양쪽
Next.js는 React를 기반으로 페이지와 라우팅, 서버·클라이언트 렌더링을 구성하는 웹 애플리케이션 프레임워크이다. React 컴포넌트를 사용하지만 애플리케이션 전체의 데이터 전달과 실행 환경을 다루는 계층을 추가한다. App Router에서는 페이지와 레이아웃이 기본적으로 서버 컴포넌트이다. 서버에서 데이터를 읽고 화면 구성을 전달할 수 있으며, 사용자 상호작용이나 브라우저 API가 필요한 부분에는 클라이언트 컴포넌트를
