EJ의 DEVLOG 💻

변수 값을 직접 할당하여 변경한다. 작성된 Component 내부에서만 사용되는 값이다. 변수 값이 변경되어도 Component가 리렌더링 되지 않는다. let myVariable = 0; myVariable = 1; State useState를 사용하여 선언된 State는 setState를 사용하여 값을 변경한다. 작성된 Component 내 외부에서 사용될 수 있다. props나 context 등을 통해 하위 컴포넌트로 전달 가능 State 값이 변경되면 Component가 리렌더링 되도록 트리거 된다. 상태 관리가 필요하거나, 동적 UI 구현을 위해 사용된다. const [myState, setMyState] = useState(0); setMyState(1);

event (이벤트) 카멜 케이스로 작성되며, html 에서 onclick은 React에서 onClick으로 작성한다. 핸들러 함수는 컴포넌트 내에서 작성되며, 익명함수로도 작성할 수 있다. 익명함수 내에선 this가 아무것도 가리키지 않으므로 bind 함수를 사용하여 this를 지정해준다. import React, { Component } from 'react'; class MyComponent extends Component { constructor(props) { super(props); this.state = { buttonName = '저장' }; } handleClick() { console.log(this.state.buttonName, '버튼이 클릭되었습니다.'); } render() { ..

Props (속성) 부모 -> 자식 컴포넌트로 데이터를 전달할 때 사용한다. 읽기 전용이며, 자식 컴포넌트에서 수정할 수 없다. // 부모 컴포넌트 import React from 'react'; import ChildComponent from './ChildComponent'; const ParentComponent = () => { const data = "전달할 데이터"; return ; }; // 자식 컴포넌트 import React from 'react'; const ChildComponent = (props) => { return {props.data}; }; State (상태) 컴포넌트 내부에서 관리 하는 데이터이다. 컴포넌트의 상태가 변화할 때마다 React는 자동으로 랜더링한다. Stat..

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 지원

※의역과 오역이 있을 수 있습니다. ※피드백 좋아요 51-100번 No. 일본어 읽는 법 한국어 50 呼び出す よびだす 호출하다(특정 기능을 불러올 때 많이 사용함) 51 テキスト 텍스트 52 バッファリング 버퍼링(Buffering) 53 常識 じょうしき 상식 54 ユニコード 유니코드(Unicode) 55 繰り返す くりかえす 반복하다, 되풀이하다 56 全角 ぜんかく 전각（표준 활자의 공간이나 크기；アエイオウ） 57 半角 はんかく 반각(표준 활자의 절반이 되는 공간이나 크기; ｱｴｲｵｳ) 58 区切り文字 くぎりもじ 구분문자(데이터를 텍스트 파일로 저장할때 항목이나 셀을 구분하는 문자) 59 フレームワーク 프레임워크 60 左辺 さへん 좌변(수학용어; =의 왼쪽) 61 右辺 うへん 우변(수학용어; =의 오른쪽..

※의역과 오역이 있을 수 있습니다. ※피드백 좋아요 1-50번 No. 일본어 읽는 법 한국어 1 手順 てじゅん 매뉴얼 2 文字化け もじばけ 글자 깨짐 3 サーバーが落ちる おちる 서버와 연결이 끊어지다 4 ググる 구글링 하다 5 呼び出し よびだし 호출 6 改行 かいぎょう 개행, 행 바꿈 7 用意 ようい 준비, 대비 8 試し ためし 시도 9 中身 なかみ 내용물, 안에 든 것 10 操作 そうさ 조작 11 初期値 しょきち 초기값 12 疑問点 ぎもんてん 의문점 13 文法 ぶんぽう 문법 14 コピー 복사 15 貼り付け はりつけ 붙여넣기 16 コピペ 복사・붙여넣기 17 切り取り きりとり 잘라내기 18 まとめ 정리, summary 19 ソースコード 코드 20 仕組み しくみ 구조 21 比較 ひかく 비교 22 必須 ひっす..