lugan

lugan

주 언어는 java, kotlin 입니다.

[angular] index.html, main.ts

1 분 소요

출저 및 참고 사이트

https://wryul12.tistory.com/entry/indexhtml-%ED%8C%8C%EC%9D%BC%EC%9D%98-%EC%97%AD%ED%95%A0%EA%B3%BC-%EA%B0%84%EB%8B%A8%ED%95%9C-html-%EC%9B%B9%EB%AC%B8%EC%84%9C-%EB%A7%8C%EB%93%A4%EA%B8%B0



index.html 파일

  • 웹페이지의 홈 화면, 메인 페이지
  • 디렉토리의 대표 문서
  • 어떤 디렉토리에 접속 했을때 자동적으로 보여주는 파일
  • 만약 디렉토리에 index 파일이 없을 경우 그 디렉토리에 있는 파일들을 리스트 형식으로 보여주거나 또는 forbidden 메세지가 뜨면서 접근이 금지된다.

웹페이지의 메인페이지가 index.html 인 이유

  • 웹서버에서 디렉토리 화일 목록을 보여주기 위해 index.html 으로 지음
  • 전통적인 웹서버(apache/nginx)에선, index.html 이 없으면 웹서버가 파일목록(index.html) 을 만들어 보여준다.

  • 옛날에는 웹서버에 지금 우리가 작성하는 웹페이지가 아니라 파일들만 잔뜩 있었다. 그 파일들을 보여주기 위해 index.html 이 필요했던 것이다.

  • 웹서버 목차 역할을 하던 페이지가 메인 페이지로 굳어진 것이다.
  • 서버 설정에서 다른 이름으로 쓸 수 있도록 변경할수 있다. (Angular 프로젝트에서 angular.json 파일에 index : 항목에서 값 변경 가능)

index.html 작동 프로세스

  • 브라우저에 http://yoursite.com/ 입력 -> public_html/index.html 을 보여줌
  • http://yoursite.com/index.html/ 을 입력한 것과 같은 결과가 나옴



index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>StudyWeb</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root> Component가 들어가는 부분, Component의 Selector 를 가져와서 보여준다. </app-root>
</body>
</html>



main.ts

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

/*
platformBrowserDynamic() - 브라우저에서 Angular 를 사용하기 위해 Angular 의 이런 기능을 사용할 것이라고 알려주는 것
Angular에는 platformBrowser() 와 platformBrowserDynamic() 두가지가 있다.

매개변수 App.Module.ts 파일 -> Angular의 설정파일
* */
platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));



app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BoardListComponent } from './page/board-list/board-list.component';
import { BoardDetailComponent } from './page/board-detail/board-detail.component';
import { MainComponent } from './page/main/main.component';
import {TokenInterceptorService} from "./common/token-interceptor.service";
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';

// @ts-ignore

//공통적으로 사용할 Component, Module, Service를 등록하는 설정파일
@NgModule({
  declarations: [
    AppComponent,
    BoardListComponent,
    BoardDetailComponent,
    MainComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [
    //공통적으로 사용할 Service를 등록하는곳
    {
      provide: HTTP_INTERCEPTORS,
      useClass: TokenInterceptorService,
      multi: true
    }
  ],
  bootstrap: [AppComponent]
  //bootstrap -> 최상위 컴포넌트, 즉 프로젝트를 실행했을 때 가장먼저 실행되는 컴포넌트를 등록한다. 현재는 AppComponent가 등록되어져 있다.
})
export class AppModule { }
//AppModule 이라는 이름으로 export 시켜서 외부에서 참조할수 있도록 한다.

참고