Angular CLI Setting (앵귤러 설치 및 환경설정)

 

 

 

_

프론트엔드 개발 시작 (앵귤러일대기)

 

 

자바스크립트 독학한다고 한 게 벌써 일 년이 넘었는데

그렇게 난 독......도 못하고
학..... 도 못했다

 

 

그래도 우여곡절 우당탕탕 !! Develop이란걸 하고 있다


23년 현재 이거 들으시는 분?
이 아니라 이거 쓰시는 분?



저요!

Angular 제가 써요 !!

Angular 가이드

 

 

_

Angular CLI 

 

$ sudo npm install -g @angular/cli@latest
$ ng new my-first-app --no-strict
$ cd my-first-app
$ ng serve

 

 

터미널 혹은 사용하고 있는 IDE를 열어 

npm install부터 시작해주면 된다.

 

 

** 혹시 ng serve 명령어를 실행했을 때 실행이 안 되면 이미 4200 포트를 사용 중인지 확인해야 한다.

** 4200 포트를 종료하지 못하는 상황이라면 

$ ng serve --port 4300

위의 코드 처럼 --port 포트번호(임의숫자가능) 를 적어주면 된다.

 

 

$ ng g c servers

 

 

다음으로 명령어를 이용하여 컴포넌트를 생성한다.

(컴포넌트는 앵귤러에서 매우 중요한 개념이므로 다음에 상세하게 다뤄보겠다.)

 

 

 

여기까지 오류없이 무사히 왔다면

 

• servers.component.html : 컴포넌트 템플릿을 위한 HTML 파일
• servers.component.scss : 컴포넌트 템플릿 스타일링을 위한 SCSS 파일 (혹은 SCSS,CSS 등 설치 옵션에 따라 다르게 보임)
• servers.component.ts : 컴포넌트 클래스 파일
• servers.component.spec.ts : 컴포넌트 유닛 테스트 스펙 파일

 

4가지 파일이 생성 된다. (여기서 spec는 삭제해도 된다고 한다!)

 

 

 

 

 

파일 생성 후 app.module.ts 이 있는지 확인하고 없다면 생성해주어야 한다.

 

 

 

 

루트 모듈 src/app/app.module.ts

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
			...
  ],
  providers: []
})
export class AppModule { }

 

declarations에도 ClassNameComponent 추가해줘야한다.

 

 

 

 

ng serve 명령어를 입력 후 실행이 되면

초기 셋팅 성공!!!

 

 

 

_

이렇게 해서

Angular cli 설치부터 컴포넌트 생성까지 해보았다.

이제 다음엔 부트스트랩 추가와 style적용에 관해서 

스몰톡을 나눠봅시더