재안 IT 공부 일기장

프론트엔드 성능 사실 프론트엔드 개발자가 관여할 수 있는 부분이 많은 편은 아니다. 브라우저와 웹표준이 발전하면서, 성능 튜닝의 많은 부분을 브라우저가 알아서 해준다. make it work, make it right, make it fast시간 초기 구동 시간     - 파일 다운로드          - 최신 브라우저는 대체로 도메인 당 최대 6개의 접속만 동시에 처리 (HTTP/1.1 기준)          - 파일 개수가 6개 이상이면 그 다음 부터는 다운로드가 지연됨          - 별도 도메인과 CDN 등으로 분산하는 것도 방법          - HTTP2에서는 접속을 하나만 생성해서 모든 요청을 다 처리함          - RFC2616 Section 8.1.4에는 한 도메인당 최대 2..

ES6는 설탕 문법이 많다. - 이해하기 쉽고, 사용하기 편리한 문법이 많다. - ECMAScript 2015부터는 언어 내부적인 동작에 관환 명세는 거의 변화가 없다. - 새 버전의 언어에 추가될 기능은 깃허브 공개 저장소에서 공개적으로 명세 제안을 받고 토론과 심사를 거친 후 TC39위원회 승인을 거치면 공식 명세에 포함된다. - 모듈 불러오기 방식 : ESM(표준), CommonJS  JS가 아닌 JS - TS, WebASM, Rust - 웹어셈블리의 경우 같은 기능을 하는 자바스크립트 코드에 비해 최적화 하지 않은 경우엔 9배 빠르고, 최적화 한 경우 21배 빠르다는 케이스 스터디의 발표가 있었다. - 하지만 브라우저 환경의 자바스크립트는 특수한 몇몇 상황(게임, 그래픽 처리 등)을 제외하면 지금..

CSS - CSS3는 없다. - CSS 명세가 방대해졌다. Layout- 크기와 위치 - CSS Box Model     - CSS 레이아웃의 기본이 되는 원리     - 엘리먼트의 크기를 정하는 표준     - box-sizing 속성으로 크기 계산 방식 변경 가능         - content; 너비와 높이를 설정하면, 컨텐츠 부분의 크기로 받아들이겠다.         - border-box; 너비와 높이를 보더까지 포함한 크기로 받아들이겠다. - runlayout.com Flexbox - 부모/자식/자식들 사이의 관계를 직관적으로 정의 - 이전에는 12 Column Grid를 사용하기도 했었다. - 성배 레이아웃 문제를 해결 - flex-direction: row는 글쓰기 방향과 일치된다. (항상..

HTML5- 버전이 없는 Living Standard로 변화- 그래도 이전과의 차이를 두기 위해 HTML5라고 지칭한다. HTML6이 나오진 않을 것.- HTML 엘리먼트와 속성, 속성값은 특정한 의미를 지니도록 정의되었다.- 의미를 기술하기 위한 Microdata도 포함 (지메일 지원) - Microdata를 포함해도 구글 검색 우선순위 배치와 같은 이점이 아직은 없다. - 비주얼 요소를 의미하는 태그나 속성은 사라지거나 의미가 변함    - , 등등 옛날 기능을 브라우저 자체에서 지원하는 것이지 HTML5 명세에는 포함되지 않는다.- 멀티미디어, 네트워크 등 다양한 기능과 API 추가     - , , , srcset 등     - WebSocket, WebWorker, Web Storage, Hi..

타입스크립트로 리액트 프로젝트를 하던 중,와 리스트를 간단히 map 돌려서 컴포넌트로 반환하는 로직 여러 군대에서 발견되어혹시 번들링할 때 map 그대로 들어가나? 생각을 했다. 아래와 같은 구조를 통해 중복되는 부분을 추상화 했다. 일단 타입 정의 먼저,export interface ItemProps { id: number | string;}export type IteratingItemProps = { items: T[]; component: ElementType;};export type IteratingLayoutProps = IteratingItemProps & { container: ElementType;};export type ItemsIteratorProps = IteratingLayo..

[6] AI for Security Anomaly Detection - Find rare items or events which deviate significantly from the majority of the data. - Define normal events. - No need of data on faulty actions(behaviors). - Point Anomaly - Context Anomaly - Collective Anomaly @Point Anomaly - A single instance of data is anomalous if it's too far off from the rest. @Contextual Anomaly - The abnormality is context specif..

[5] AI Security [5-1] AI 강화를 위한 보안 [5-2] 보안 강화를 위한 AI [5-1] AI 강화를 위한 보안 AI 동작 절차 - 1. Dataset - 2. Training - 3. Model creation - 4. Predictions - 5. Service Deep learning 기술의 한계 - 매우 많은 학습 데이터가 필요하다. - 결과에 대한 인과 관계 표현 능력이 부족하다. - 예외 상황에 대한 처리가 불가능하다. Adversarial Examples - 적대적 사례 - 인간의 눈에 보이지 않는 noise를 섞은 이미지 - 예측 단계에서 AI 모델을 쉽게 속일 수 있다. Fast Gradient Sign Method - 적대적 공격 방법 - 학습 방향의 반대 방향으로 노..

[4] Business Chances of Blockchain Block이란? - Record of state change - Consisting of hash, answer, and transactions - Hash : Summary of previous transaction information - Answer : Value used for hash calculation - Transaction : 거래정보 - Transaction records are stored in blocks. Blockchain이란? - A fully distributed P2P software network - That uses encryption to secure host applications, stores data,..

[3] Symmetric Encryption and Message Confidentiality (AES) Stream Ciphers - Faster and use far less code. - Key is used to produce stream of Pseudo-Random Sequence Generation. - XOR keystream output with plaintext bitstream. - Encryption sequence should have a large period, large enough to ensure no repetition. - Keystream approximates random number properties. - Should use a sufficiently long k..

[2] Symmetric Encryption Message Confidentiality [2-1] Block Cipher Structure [2-2] Data Encryption Standard [2] Symmetric Encryption Message Confidentiality conventional encryption, secret-key or single-key encryptionplaintext, encryption algorithm, secret key, ciphertext, and decryption algorithm Cryptanalysis - Only weak algorithms fail a ciphertext-only attack - Usually design algorithms to ..