Day 12 - JavaScript 프레임워크를 활용한 컴포넌트 기초
카테고리
프로그래밍/소프트웨어 개발
서브카테고리
웹 개발
대상자
Vue, Svelte, Angular 프레임워크를 사용하는 개발자 및 프론트엔드 학습자
핵심 요약
- Vue 3, Svelte 5, Angular 19 프로젝트 생성 및 기본 설정
npm create vue@latest
,npx sv create
,ng new
명령어로 각 프레임워크별 프로젝트 초기화- TypeScript, Prettier, ESLint 도구 포함
- 보일러플레이트 코드 제거 및 전역 스타일 적용
components
폴더 삭제,main.css
및styles.scss
파일 업데이트- SvelteKit에서는
+layout.svelte
에global.css
임포트 - 프로젝트 구조 정리
app.component.css
,app.component.spec.ts
파일 삭제 및 HTML 코드 이동
섹션별 세부 요약
1. Vue 3 프로젝트 생성 및 설정
npm create vue@latest
명령어로 프로젝트 생성- TypeScript, Prettier, ESLint 활성화
fundamental-vue
디렉토리 생성 후npm i
,npm run dev
실행- 애플리케이션 루트 URL:
http://localhost:5173
2. Svelte 5 프로젝트 생성 및 설정
npx sv create fundamental-svelte
명령어로 프로젝트 생성- SvelteKit Minimal 템플릿 선택, TypeScript 및 ESLint 활성화
sveltekit-adapter: Auto
설정 후npm i
,npm run dev
실행- 애플리케이션 루트 URL:
http://localhost:3000
3. Angular 19 프로젝트 생성 및 설정
ng new fundamental-angular
명령어로 프로젝트 생성- CSS 스타일 선택, SSR/SSG 비활성화
fundamental-angular
디렉토리 생성 후npm i
,ng serve
실행- 애플리케이션 루트 URL:
http://localhost:4200
4. 전역 스타일 적용 및 보일러플레이트 삭제
- Vue:
main.css
파일에서 전역 스타일 업데이트 - Svelte:
+layout.svelte
파일에global.css
임포트 - Angular:
styles.scss
파일에서 전역 스타일 업데이트 - 모든 프레임워크에서
app.component.css
,app.component.spec.ts
파일 삭제
결론
- 각 프레임워크별 프로젝트 생성 시 SvelteKit Minimal 템플릿 및 sveltekit-adapter: Auto 설정을 권장
- 보일러플레이트 코드 제거 및 전역 스타일 파일 통합을 통해 프로젝트 구조를 간결하게 유지
+layout.svelte
파일을 통해 SvelteKit 애플리케이션의 전역 스타일을 일관되게 적용해야 함