AI Store에서 AI코딩으로 만들어진 앱을 만나보세요!
지금 바로 방문하기

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.cssstyles.scss 파일 업데이트
  • SvelteKit에서는 +layout.svelteglobal.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 애플리케이션의 전역 스타일을 일관되게 적용해야 함