복잡한뇌구조마냥

1. XSS ( Cross - Site Scripting [ 교차 사이트 스크립팅 ] )공격자가 웹 페이지에 악성 코드를 삽입하여 공격하는 방법ex) script 문구 삽입 ( ) 2. Angular의 XSS 보안 모델XSS 버그를 체계적으로 차단하기 위해 Angular는 기본적으로 모든 값을 신뢰할 수 없는 것으로 취급기본값으로 위험요소를 삭제하고 escape 처리가 되도록 되어 있음. 1) escape 자바스크립트의 escape() 함수는 알파벳과 숫자, 특수문자(*, @, -, _, +, ., /)를 제외한 모든 문자를 16진수로 인코딩하는 함수1바이트 문자는 %XX형태로 변환되며, 2바이트 문자는 %uXXXX형태로 변환됨ex) 공백문자 : %20 등등HTML에서는 HTML 엔티티로 escape됨..

Angular Material의 Dialog 컴포넌트는 기본적으로 모달이 열릴 때 내부 첫 번째 포커스 가능한 요소로 자동 포커스를 이동시킵니다. 하지만 상황에 따라 이 자동 포커스 기능을 끄고 수동으로 포커스 이동을 제어하고 싶은 경우가 있습니다.개발하는데 본문이 아닌 하단에 버튼이 먼저 focus가 가는 상황이 계속 발생해서 focus가 되지않도록 하고싶어서 찾아봤습니다.간단하게 dialog 옵션에 autoFocus를 false로 변경하니 해결되네요.this.dialog.open(ExampleDialogComponent, { autoFocus: false}); 참조 내용:https://stackoverflow.com/questions/47562474/disable-auto-focus-in-dia..

❗️ProblemAngular에서 Text를 관리하는 방법일반적으로 사용하는 Text관리 방법은 무엇인가?LiveStudio 내에서 사용하는 모든 Text를 일괄적으로 관리하는 방법이 필요하다.Text들을 Translation하는 방법Angular에서 지원하는 traslation은 무엇이고, 어떤 라이브러리들이 있는가?LiveStudio에 적용하기에 가장 효과적인 방법은 무엇인가?⚠️ Text 관리방법⭐️ 일반적 Text 관리 방법 1. String을 이용한 Text 관리공식 문서 :String - JavaScript | MDNconst string1 = "A string primitive";const string2 = 'Also a string primitive';const string3 = `Yet ..

1. XSS ( Cross - Site Scripting [ 교차 사이트 스크립팅 ] ) - 공격자가 웹 페이지에 악성 코드를 삽입하여 공격하는 방법 ex) script 문구 삽입 ( ) 2. Angular의 XSS 보안 모델 - XSS 버그를 체계적으로 차단하기 위해 Angular는 기본적으로 모든 값을 신뢰할 수 없는 것으로 취급 - 기본값으로 위험요소를 삭제하고 escape 처리가 되도록 되어 있음. 1) escape - 자바스크립트의 escape() 함수는 알파벳과 숫자, 특수문자(*, @, -, _, +, ., /)를 제외한 모든 문자를 16진수로 인코딩하는 함수 - 1바이트 문자는 %XX형태로 변환되며, 2바이트 문자는 %uXXXX형태로 변환됨 ex) 공백문자 : %20 등등 - HTML에서는..

1. 계층적 트리 구조 - 분할된 컴포넌트를 조립하다보면 자연스레 계층적인 구조가 형성 - 상위 컴포넌트 - 하위 컴포넌트를 '부모-자식' 관계로 표현됨 - 리엑트를 공부할 당시에는 함수형으로 Prop React : 함수형 프레임워크 컴포넌트 방식 전달방식 React 함수형, 클래스형 Props Angular 클래스형 데코레이터 (Input, Output) 2. 상위 컴포넌트에서 하위 컴포넌트로 상태 전달 ( 부모 → 자식 ) 1)상위 - HTML 값을 props처럼 동일하게 전달 (데이터 값은 ts에서 사용하는 변수) 값2처럼 변수뿐만 아니라 값으로도 전달 가능 2) 하위 - TS export class ParentComponent{ @Input() 값1:type; @Input() 값2:number; ..

함수 호출 방식을 이용한 d3 real-time-charttick 함수 호출을 통한 path 구현단일 그래프 interval 방식과 tick 함수 호출 방식 비교차이 발생 원인 tick 함수 호출을 통한 path 구현참조: 블로그 lineCarht .on(“start”, tick)을 통해서 tick() 함수 호출다음 코드를 통해 새로운 데이터 기입 다음 코드를 통해 기본 변환 행렬 초기화 다음 코드를 통해 변환 행렬 설정 tick 함수 내부의 this는 함수 자신을 나타내어 this 바인딩의 대상 전환 단일 그래프 interval 방식과 tick 함수 호출 방식 비교interval 동작 원리그래프 생성interval 40초 마다그래프 재 작성반복tick 동작 원리그래프 생성tick함수 호출duratio..

0. RxJS (ReactiveX JavaScript) - RxJS는 관찰 가능한 시퀀스를 사용하여 비동기 및 이벤트 기반 프로그램을 구성하기 위한 라이브러리 - Observable(Array), 위성 유형(Observer, Schedulers, Subjects) 및 메서드( map, filter, 등) 연산자를 제공하여 비동기 이벤트를 컬렉션으로 처리 - ReactiveX는 Observer패턴을 Iterator 패턴과 함수형 프로그래밍을 결합하여 이벤트 시퀀스를 관리하는 방법에 대한 요구를 충족 - 비동기 이벤트 관리를 해결하는 RxJS의 필수 개념은 다음과 같습니다. 개념 설명 Observable 미래 값 또는 이벤트의 호출 가능한 컬렉션 아이디어 Observer Observable이 전달한 값을 수..

1. 개발 환경 설정 1-0. VScode, Node.js 설치 - 구글 검색창에 검색 후 설치 - Node.js 는 최신 버전이 아닌 안정된 버전 설치 권장 1-1. Angular CLI 설치 npm install -g @angular/cli - 터미널 명령어 실행 npm install -g - npm 최신 업데이트 오류시 패치 - ng 명령어 오류시 컴퓨터 재구동 1-2. 기본 어플리케이션 생성 ng new [App-Name] - ng new 명령어로 생성 1-3. 어플리케이션 실행 cd [App-Name] // 경로 이동 ng serve --open // 실행 - 어플리케이션 경로로 이동 - ng serve 명령어로 실행 ( --open 옵션으로 실행 후 접속 ) - 브라우저 실행이 되지 않을 경우..