EJ의 DEVLOG 💻

공통점 1. 초기화 단계 두 프레임워크 모두 컴포넌트 초기화 단계에서 특정 메서드를 실행한다. Angular : ngOnInit React : constructor, componentDidMount 2. 소멸 단계 두 프레임워크 모두 컴포넌트 소멸 단계에서 특정 메서드를 실행한다. Angular : ngOnDestroy React : componentWillUnmount 차이점 1. 변경 감지 (Change Detection) Angular 변경 감지 메커니즘을 내부적으로 처리한다. 컴포넌트의 상태나 데이터가 변경될 때마다 Angular는 컴포넌트의 뷰를 업데이트한다. ex) ngOnChanges, ngDoCheck React Virtual DOM을 사용하여 변경 감지를 수행한다. 컴포넌트의 상태나 속성..

Angular의 index.ts Angular 프로젝트에서 index.ts 파일은 애플리케이션의 진입점 (entry point)로서 사용된다. Angular 모듈을 로드하고, 애플리케이션을 부트스트랩 하는 역할을 한다. platformBrowserDynamic() 을 사용하여 브라우저에 동적으로 Angular 프로젝트를 부트스트랩 하고, AppModule을 로드한다. // index.ts import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { AppModule } from './app/app.module'; platformBrowserDynamic().bootstrapModule(AppModule) .catc..

Angular의 {{ }} Interpolation은 보간이라고도 하며, 데이터를 바인딩 할 때 사용합니다. '{{ }}' 구문으로 동적으로 바인딩할 구문을 표현합니다. // app.component.ts import { Component } from '@angular/core'; @Component({ selector: 'app-root', template: ` {{pageTitle}} Welcome to {{frameworkName}}! `, styleUrls: ['./app.component.css'] }) export class AppComponent { pageTitle: string = 'Angular Interpolation Example'; frameworkName: string = 'An..

Angular의 @Input 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때 사용 자식 컴포넌트의 속정을 정의 하고, 부모 컴포넌트에서 값을 전달할 수 있도록 한다. 부모 컴포넌트에서 [childProperty]="parentValue"와 같이 속성을 설정하여 자식 컴포넌트에 값을 전달한다. // parent.component.ts import { Component } from '@angular/core'; @Component({ selector: 'app-parent', template: ` `, }) export class ParentComponent { parentValue = '부모에서 전달한 값'; } // child.component.ts import { Component, Input }..

실제 DOM Document Object Model 웹 페이지의 구조를 표현하는 트리 구조 HTML 요소들을 객체로 표현 가상 DOM 실제 DOM의 가벼운 복제본 애플리케이션의 현재 상태를 나타냄 메모리에 저장됨 실제 DOM과 동기화 됨 UI 변경이 필요한 경우, 먼저 가상 DOM에서 변경 사항을 계산 한 다음, 실제 DOM에 적용 Angular 실제 DOM요소를 직접 조작하며, 변경 사항을 감지 -> 업데이트 변경감지는 Angular 프레임워크 내부에서 처리됨 ngOnInit, ngAfterViewInit, ngOnDestroy 등등.. React 가상 DOM을 사용하여 성능 최적화 실제 UI 업데이트 시 가상 DOM을 조작 이전 가상 DOM과 상태를 비교하여 변경된 부분을 실제 DOM에 적용 DOM ..

공통점 JavaScript 기반 : TypeScript 사용 가능 컴포넌트 기반 아키텍쳐 : 독립적, 재사용적 SPA 지원