git basic1 - input output 없는것
git basic2- 있는 것
// 인터페이스를 쓰신것이 아니라 type을 쓰셨을 interface와 type의 차이는?
type Todo = {
id: number;
content: string;
done: boolean;
};타입스크립트에서 type 과 interface 더 알아보기
정리
type은 모든 타입을 선언할 때 사용할 수 있고, interface는 객체에 대한 타입을 선언할 때만 사용할 수 있다.
또한 확장 불가능한 타입을 선언하고 싶다면 type을 사용하면 되고, 확장 가능한 타입을 선언하고 싶다면 interface를 사용하면 된다.
<addtodo 버튼>
❓❓❓❓❓
angular page.html와 component.html 차이
따라서 page.html과 component.html의 주요 차이는 다음과 같습니다:
- page.html: 일반적으로 Angular 애플리케이션에서는 페이지를 여러 컴포넌트의 조합으로 구성합니다. 페이지 HTML 파일은 일반적으로 라우터(Router)를 통해 특정 URL에 대한 뷰를 정의하는 데 사용됩니다. 이 페이지 템플릿은 여러 개의 컴포넌트를 조합하여 해당 페이지의 레이아웃을 정의하고, 각 컴포넌트에 해당하는 뷰를 포함할 수 있습니다.
- component.html: 컴포넌트 템플릿은 해당 컴포넌트의 뷰를 정의하는 데 사용됩니다. 각 컴포넌트 클래스와 연결되어 해당 컴포넌트의 상태와 데이터를 표시하고 사용자의 상호 작용에 응답합니다. 컴포넌트 템플릿은 해당 컴포넌트의 로직과 결합하여 동적으로 화면을 렌더링합니다.
즉, page.html은 여러 컴포넌트를 조합하여 페이지의 레이아웃을 정의하는 데 사용되고, component.html은 해당 컴포넌트의 뷰를 정의하는 데 사용됩니다.
🚨🚨🚨🚨🚨
$ ng serve -o
Error: This command is not available when running the Angular CLI outside a workspace.
해결방법
"작업 영역 오류 외부에서 Angular CLI를 실행할 때 이 명령을 사용할 수 없습니다." 오류를 수정하려면 Visual Studio Code에서 프로젝트 이름을 마우스 오른쪽 버튼으로 클릭하고 "통합 터미널에서 열기" 옵션을 클릭하세요.
터미널에서 프로젝트가 열리고 오류가 수정됩니다. 이제 문제 없이 터미널에서 “ng Serve –open” 또는 “ng Serve” 명령을 실행할 수 있습니다 .
//
// 아무것도 입력 안하고 버튼을 눌렀을때 입력된 내용이 없다고 알람
addtodo() {
if (!this.inputValue) {
alert('입력하신후 눌러주세요!');
}
}왜 안뜸?
바보다 입력값을 넣고 버튼을 누르면서 확인 하고 있었음
// 맨마지막 객체의 변수를 만들기
addtodo 함수 안에 저걸 안 넣어서 그럼 레전드… 스코프 잘 보기 😡😡😡😡
lastItem = this.todos[this.todos.length - 1].id;
// 새로운 배열의 객체는 어떤 것인지 변수 만들기
newTodo = {
id: this.lastItem + 1,
title: this.inputValue,
done: false,
};//추가하기 버튼을 누른 뒤에 어떻게 되는지
for문 사용
@for(todo of todos; track todo.id)
todos - 반복될 걸레션 반복가능한 배열 및 대상
todo - 반복에서 현재 항목을 보유 / todos 배열에서의 객체 1개
track- 각 요소에 전달 할 식별자를 나타냄
track todo.id 앵귤러에게 각 렌더링 된 돔을 todo( todos 배열의 객체)
의 id 값으로 식별하도록 지시
<div>
<input type="text" placeholder="입력" [(ngModel)]="inputValue" />
<button (click)="addtodo()">추가하기</button>
</div>
@for (todo of todos; track todo.id) {
<ul>
<li>
{{ todo.title }}
</li>
</ul>
}addtodo() {
if (!this.inputValue) {
alert('입력하신후 눌러주세요!');
}
const lastItem = this.todos[this.todos.length - 1].id;
const newTodo = {
id: lastItem + 1,
title: this.inputValue,
done: false,
};
this.todos.push(newTodo);
}//삭제하기 버튼을 누른 뒤에 어떻게 되는지
삭제 하기는 filter 함수를 써서 다시 새로운 배열을 만들어서 해야함
@for (todo of todos; track todo.id) {
<ul>
<li>
{{ todo.title }}
<button (clkick)="remove(todo)">삭제하기</button>
</li>
</ul>
//remove 안에 들어가는 todo는 for문에서 있는 todos 배열의 객체를 todo를 뜻함 remove(todos: Todo) {
this.todos.filter((item) => item.id !== todos.id);
}// todo 리스트 체크 박스 해서 글자css 바뀌게 하는 법
@for (todo of todos; track todo.id) {
<ul>
<input type="checkbox" [(ngModel)]="todo.done" />
// todo.done은 for배열의 객체 todo의 속성done을 말하는 듯 [(ngModel)]: 이것은 "바나나 상자" 구문이라고도 하며, Angular에서 양방향 데이터 바인딩 구문입니다. 이는 컴포넌트 클래스와 템플릿 간의 속성을 바인딩하는 단축 구문입니다.todo.done: 이는todo객체의 속성done을 가리킵니다. Angular에서ngModel은 주로 폼 컨트롤과 함께 사용되어 입력 값을 컴포넌트 클래스의 속성에 바인딩합니다. 따라서todo.done은 아마도 할 일 항목이 완료되었는지 여부의 상태를 나타냅니다.
이 구문은 주로 체크박스, 입력 상자 등의 양식 요소와 함께 사용됩니다. 이 경우, 할 일 항목의 done 속성을 토글하는 체크박스와 함께 사용되고 있을 것입니다. 체크박스가 선택되거나 선택 해제되면 todo.done 속성이 그에 따라 업데이트되고, 그 반대도 마찬가지입니다.
즉, 이 코드는 Angular 애플리케이션의 템플릿에 표시된 체크박스를 만들고, 이 체크박스의 상태가 변경되면 todo.done 속성을 업데이트하여 애플리케이션의 상태를 반영합니다.
<p class="grow" [ngClass]="{'line-through text-gray-400' : todo.done}">
{{todo.content}}
</p>