Angular
Angular는 HTML과 TypeScript로 클라이언트 애플리케이션을 개발할 때 사용하는 플랫폼이자 프레임워크이다.
NgModule
Angular 애플리케이션의 구성 요소 중 가장 중요한 컴포넌트 묶음이다.
- NgModule은 비슷한 기능을 하나로 묶어서 관리하기 위한 모듈이다.
- Angular 애플리케이션은 부트스트랩을 하기 위해 최상위 모듈을 꼭 갖는다.
- 보통 이 모듈 이외에 기능 모듈을 정의해서 사용하게 된다.
컴포넌트
Angular 애플리케이션에는 페이지 DOM의 최상위에 위치하는 컴포넌트가 존재한다. 이 컴포넌트를 최상위 컴포넌트라고 한다.
Angular 컴포넌트는 TypeScript 클래스로 정의된다.
- Angular
컴포넌트 = 컴포넌트 클래스 + 템플릿 구성
컴포넌트 클래스
컴포넌트 클래스는 애플리케이션 데이터와 로직을 처리한다.
// app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'My Angular App';
message = 'Hello, Angular!';
}AppComponent는 Angular의 Component 데코레이터를 사용하여 정의된 클래스이다. 이 클래스이다. 이 클래스는 컴포넌트의 동작과 상태를 정의하고 있다.
title과 message는 컴포넌트의 속성으로 사용되고 나중에 템플릿에서 바인딩될 것이다.
템플릿
템플릿은 화면에 표시할 HTML을 정의한다.
<!-- app.component.html -->
<div>
<h1>{{ title }}</h1>
<p>{{ message }}</p>
</div>app.component.html 은 AppComponent의 템플릿을 정의한다.
템플릿은 HTML과 Angular의 템플릿 문법을 사용하여 구성된다. 중괄호 {{ }}를 사용하여 컴포넌트의 속성을 템플릿에 바인딩 할 수 있다.
결론 : 이렇게 정의된 컴포넌트 클래스와 템플릿은 Angular 애플리케이션에서 사용되며, 클래스의 인스턴스는 런타임에 생성되고 템플릿은 해당 인스턴스와 연결되어 뷰를 생성한다.
설치 목록
- IntelliJ
- HeidiSQL
- WinSCP
- Moboxterm
- Figma
- nvm
nvm
NVM은 Node version Manager의 약자이고 여러 버전의 Node.js 설치 및 버전 변경을 관리해주는 도구이다. NVM을 사용하면 상황에 맞게 Node.js를 원하는 버전으로 설치하거나 변경할 수 있다.
IntelliJ 설치링크
Moboxterm 설치링크 및 사용법
node, npm 버전 변경하기 링크
https://velog.io/@yeguu037/node-npm-%EB%B2%84%EC%A0%84-%EB%B3%80%EA%B2%BD%ED%95%98%EA%B8%B0
node.js 설치링크
node version : 18.10.0
https://kjchoi.co.kr/18
엥귤러 CLI
~16.2.0 버전npm i @angular/cli@16.2.0
MariaDB(HeidiSQL) 설치링크
https://congsong.tistory.com/62
