0Pricing
Angular Academy · 강의

프로젝트 구조 설명

CLI가 생성하는 파일을 둘러봅니다.

프로젝트 구조 설명은(는) CoddyKit의 무료 Angular Academy 강의입니다. 이것은 4개 중 2번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Angular Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Angular Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

프로젝트 구조 설명

Angular 작업 영역은 예측 가능한 구조를 갖습니다. 주요 파일과 폴더를 알고 있으면 어떤 프로젝트든 쉽게 탐색할 수 있습니다.

src 폴더

src/ 폴더에는 애플리케이션 소스 코드가 들어 있습니다. 진입점, 애플리케이션 코드, index.html 및 스타일과 같은 전역 자산이 포함됩니다.

main.ts

src/main.ts는 애플리케이션 진입점입니다. bootstrapApplication으로 루트 구성 요소를 부트스트랩합니다.

import { bootstrapApplication } from '@angular/platform-browser';
import { appConfig } from './app/app.config';
import { AppComponent } from './app/app.component';

bootstrapApplication(AppComponent, appConfig);

index.html

src/index.html은 하나의 HTML 페이지입니다. 본문에는 루트 구성 요소 선택자가 있으며, Angular는 이 위치에 애플리케이션을 렌더링합니다.

<!-- inside body -->
<!-- <app-root></app-root> -->

app 폴더

src/app/에는 구성 요소, 서비스, 경로 및 구성이 들어 있습니다. 새 프로젝트에는 app.component, app.config.ts 및 app.routes.ts가 포함됩니다.

app.component 파일

루트 구성 요소에는 일반적으로 .ts 클래스, .html 템플릿, .css(또는 .scss) 스타일시트와 .spec.ts 테스트 파일이 있습니다.

app.config.ts

app.config.ts는 부트스트랩 시 사용되는 공급자 배열이 포함된 ApplicationConfig를 내보냅니다. 예를 들어 라우터와 HTTP 클라이언트가 이에 해당합니다.

app.routes.ts

app.routes.ts는 provideRouter가 사용하는 경로 정의 배열을 내보냅니다.

import { Routes } from '@angular/router';

export const routes: Routes = [];

angular.json

작업 영역 루트에 있는 angular.json은 CLI를 구성합니다. 각 프로젝트의 빌드 대상, 출력 경로, 자산, 스타일 및 실행 옵션을 설정합니다.

package.json 및 tsconfig

package.json에는 종속 항목과 npm 스크립트가 나열됩니다. tsconfig.json 파일은 애플리케이션과 테스트를 위한 TypeScript 컴파일러를 구성합니다.

public 또는 assets

정적 파일(이미지, 글꼴, 파비콘)은 public 또는 assets 폴더에 저장되며, angular.json에 구성된 대로 빌드 출력에 복사됩니다.

빠른 확인: 구조

진입점을 찾아보세요.

복습: 구조

작업 영역을 살펴보았습니다. src/는 소스 코드, main.ts는 진입점, index.html은 호스트 페이지, app/은 구성 요소와 구성, angular.json은 CLI 구성을 담당합니다. 다음 주제: CLI로 코드 생성하기

자주 묻는 질문

“프로젝트 구조 설명” 강의는 무료인가요?

네 — “프로젝트 구조 설명” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Angular Academy 강의 전체를 잠금 해제할 수 있습니다. Angular Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“프로젝트 구조 설명”에서 뭘 배우나요?

CLI가 생성하는 파일을 둘러봅니다. 브라우저에서 직접 실행하는 실습 코드로 Angular Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

Angular Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 Angular Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 2번째 강의입니다.

“프로젝트 구조 설명” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 Angular Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 Angular Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

  1. 새 프로젝트 생성
  2. 프로젝트 구조 설명
  3. ng generate로 코드 생성
  4. 빌드 및 제공
← Angular Academy(으)로 돌아가기