Day 2 - ShoppingCart 컴포넌트 생성 가이드

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

Vue, Svelte, Angular 프레임워크를 사용하는 개발자 (중급 이상)

핵심 요약

• Vue 3에서 ShoppingCart.vue 파일 생성 및 App.vue에 컴포넌트 등록
• SvelteKit에서 shopping-cart.svelte 파일 생성 및 +page.svelte에 컴포넌트 연동
• Angular 19에서 CLI로 컴포넌트 생성 후 inline template 사용 및 AppComponent에 등록
• 각 프레임워크별 컴포넌트 등록 방식과 템플릿 구조가 다름

섹션별 세부 요약

1. Vue 3 애플리케이션

• components/ 폴더 내 ShoppingCart.vue 생성

• Shopping Cart

  템플릿 추가
• App.vue에 import ShoppingCart 명령어로 컴포넌트 등록

2. SvelteKit 애플리케이션

• lib/ 폴더 내 shopping-cart.svelte 생성
• index.ts 파일에서 export * from './shopping-cart.svelte' 명령어로 내보내기
• +page.svelte에 import ShoppingCart 명령어로 컴포넌트 연동

3. Angular 19 애플리케이션

• CLI 명령어 ng g c shopping-cart/shoppingCart --flat로 컴포넌트 생성
• shopping-cart.component.html, shopping-cart.component.scss 파일 삭제
• @Component 어노테이션에 inline template 사용
• AppComponent의 imports 배열에 ShoppingCartComponent 추가

결론

• 각 프레임워크별 컴포넌트 생성 방식과 등록 시점을 정확히 파악해야 함
• Angular의 경우 inline template 사용으로 파일 관리 용이
• import/export 경로 설정 시 프레임워크별 규칙 준수 필요