2106 TIL

Jun 1st 2021 by jyoon

210524

횡단 관심사

횡단 관심사
객체 지향 소프트웨어 개발에서 횡단 관심사 또는 크로스커팅 관심사(cross-cutting concerns)는 다른 관심사에 영향을 미치는 프로그램의 aspect이다.
이 관심사들은 디자인과 구현 면에서 시스템의 나머지 부분으로부터 깨끗이 분해되지 못하는 경우가 있을 수 있으며 분산(코드 중복)되거나 얽히는(시스템 간의 상당한 의존성 존재) 일이 일어날 수 있다.
이를테면, 의무기록을 관리하기 위한 애플리케이션을 작성한다고 했을 때 이러한 기록의 색인화는 핵심 관심사인 한편
변경 이력을 기록 데이터베이스나 사용자 데이터베이스에 로깅하는 일이라든지,
인증 시스템과 같은 것은 횡단 관심사이며 이들은 프로그램의 더 많은 부분과 상호작용한다.

배경

횡단 관심사들은 시스템의 수많은 다른 부분에 의존하거나 영향을 미쳐야 하는 프로그램의 일부분이다.
애스펙트의 개발의 토대를 형성한다.
이러한 횡단 관심사들은 객체 지향 프로그래밍, 절차적 프로그램에 딱 들어맞지는 않는다.
관심사를 횡단하는 것은 프로그램 내에서 시스템 상호 의존과 밀접한 관련이 있다.
절차적, 함수형 프로그래밍 구조체가 완전히 프로시저 호출을 이루기 때문에 두 가지 목표(구현할 기능과 관련 횡단 관심사)를 동시에 해결할 수 있는 시맨틱이 없다.
이로 인해 횡단 관심사를 해결하는 코드는 서로 관련된 다양한 장소에 분산되거나 중복될 수 밖에 없으며 그 결과 모듈화의 손실이 발생하게 된다
관점 지향 프로그래밍은 횡단 관심사들을 애스펙트로 캡슐화함으로써 모듈화를 갖는 것을 목표로 한다.
이를 통해 횡단 관심사를 해결하는 코드의 깨끗한 분리와 재사용을 달성할 수 있게 한다.
횡단 관심사에 대한 기초적인 설계를 통해 소프트웨어 공학적 장점으로 모듈화와 단순해진 유지보수가 포함될 수 있다.

로그파일

위키피디아
컴퓨팅에서 로그파일(logfile)은 운영 체제나 다른 소프트웨어가 실행 중에 발생하는 이벤트나 각기 다른 사용자의 통신 소프트웨어 간의 메시지를 기록한 파일이다.
로그를 기록하는 행위는 로깅(logging)이라고 한다.
트랜잭션 로그는 시스템과 해당 시스템 사용자 간 통신에 대한 파일이거나[1], 시스템에 속하는 터미널의 사용자가 발생시킨 트랜잭션의 종류, 내용, 시간을 자동으로 캡처한 데이터 수집 방식이다.[2]
수많은 운영 체제, 소프트웨어 프레임워크, 프로그램들은 로깅 시스템을 포함한다.
널리 쓰이는 로깅 표준은 syslog이며, IETF RFC 5424에 정의되어 있다.

210620

Modules, introduction

Modules, introduction - jsinfo

하나의 스크립트는 하나의 모듈 입니다
모듈은 서로를 로드하고 특수 지시문 내보니기 및 가져오기를 사용하여 기능을 교환하고 한 모듈의 함수를 다른 모듈에서 호출 할 수 있다.
export 키워드는 현재 모듈 외부에서 액세스 할 수 있어야 하는 변수 및 함수에 레이블을 지정
import를 사용하면 다른 모듈에서 기능을 가져올 수 있다.
import 하는 type을 module로 설정해주면 된다.
```
<script type="module" src="hello.js"></script>
```

210611

method definitions

method definitions - mdn

함수(Method)란? - mdn

함수(Method)란? - mdn
function이 object의 property로 사용될때 function을 method라고 한다.

두가지 methods가 있다.

1. Instance Method (객체 인스턴스에 의해 수행되는 내장 작업 인 인스턴스 메서드)
1. Static Method (객체 생성자에서 직접 호출되는 작업인 정적 메서드(static method))

  // ## static method 예시
  // In the Notifications API, 
  // the Notification.requestPermission() method is called on the actual Notification constructor itself — it is a static method:
  let promise = Notification.requestPermission();

  // ## instance method 예시
  // The Notification.close() method on the other hand, is an instance method — it is called on an specific notification object instance to close the system notification it represents:
  let myNotification = new Notification('This is my notification');

  myNotification.close();

Arrow function expressions

[mdn]](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions#arrow_functions_used_as_methods)으로 알아보는 arrow function, traditional funciton의 차이
정의와 아래 세가지 예시 코드로 traditional, Arrow function을 알아 보자
세가지 예시 코드
- traditional, Arrow functions used as methods
- traditional, Arrow functions used call, apply and bind
- Perhaps the greatest benefit of using Arrow functions is with DOM-level methods (setTimeout, setInterval, addEventListener) that usually required some kind of closure, call, apply or bind to ensure the function executed in the proper scope.
Differences & Limitations
- Does not have its own bindings to this or super, and should not be used as methods.
- Does not have arguments, or new.target keywords.
- Not suitable for call, apply and bind methods, which generally rely on establishing a scope.
- Can not be used as constructors.
- Can not use yield, within its body.

traditional, Arrow functions used as methods

예시 - traditional function in methods

'use strict';

var obj = { // does not create a new scope
  i: 10,
  // [point]
  b: () => console.log(this.i, this),
  // [point]
  c: function() {
    console.log(this.i, this);
  }
}


obj.b(); // [point] prints undefined, Window {...} (or the global object)
obj.c(); // [point] prints 10, Object {...}

예시 - Arrow function in methods
Arrow functions do not have their own this.

Another example involving Object.defineProperty():

  'use strict';

  var obj = {
    a: 10
  };

  Object.defineProperty(obj, 'b', {
    get: () => {
      // [point]
      console.log(this.a, typeof this.a, this); // undefined 'undefined' Window {...} (or the global object)
      return this.a + 10; // represents global object 'Window', therefore 'this.a' returns 'undefined'
    }
  });

traditional, Arrow functions call, apply and bind

결론: arrow function에 call, apply, bind 첫번째 인자에 this scope을 binding 해줘도 arrow function의 this는 window 입니다.
이유: Arrow functions establish "this" based on the scope the Arrow function is defined within.
예시: traditional function vs arrow function

    // ----------------------
    // Traditional Example
    // ----------------------
    // A simplistic object with its very own "this".
    var obj = {
        num: 100
    }

    // Setting "num" on window to show how it is NOT used.
    window.num = 2020; // yikes!

    // A simple traditional function to operate on "this"
    var add = function (a, b, c) {
      return this.num + a + b + c;
    }

    // call
    var result = add.call(obj, 1, 2, 3) // establishing the scope as "obj"
    console.log(result) // result 106

    // apply
    const arr = [1, 2, 3]
    var result = add.apply(obj, arr) // establishing the scope as "obj"
    console.log(result) // result 106

    // bind
    var result = add.bind(obj) // establishing the scope as "obj"
    console.log(result(1, 2, 3)) // result 106

    // ----------------------
    // Arrow Example
    // ----------------------

    // A simplistic object with its very own "this".
    var obj = {
        num: 100
    }

    // Setting "num" on window to show how it gets picked up.
    window.num = 2020; // yikes!

    // Arrow Function
    var add = (a, b, c) => this.num + a + b + c;

    // call
    console.log(add.call(obj, 1, 2, 3)) // result 2026

    // apply
    const arr = [1, 2, 3]
    console.log(add.apply(obj, arr)) // result 2026

    // bind
    const bound = add.bind(obj)
    console.log(bound(1, 2, 3)) // result 2026

[중요] Perhaps the greatest benefit of using Arrow functions is with DOM-level methods (setTimeout, setInterval, addEventListener) that usually required some kind of closure, call, apply or bind to ensure the function executed in the proper scope

예시: Traditional Example vs Arrow Example

  // * Traditional Example:
  var obj = {
      count : 10,
      doSomethingLater : function (){
          // [point] setTimout callback function에서 this가 obj를 가르키는 방법 2
          // 1. bind함수로 this binding 해주기 
          // 2. arrow function으로 
          setTimeout(function(){ // the function executes on the window scope
              this.count++;
              console.log(this.count);
          }, 300);
      }
  }
  obj.doSomethingLater(); // console prints "NaN", because the property "count" is not in the window scope.
  


  // * Arrow Example:
  var obj = {
      count : 10,
      // [point][!]
      // * 현재 상황에서 arrow function은 method로 사용될때 부적합, 
      // * callback function에서는 this가 obj 객체를 binding하고 있음으로 적합
      doSomethingLater : function(){ // of course, arrow functions are not suited for methods
          setTimeout( () => { // since the arrow function was created within the "obj", it assumes the object's "this"
              this.count++;
              console.log(this.count);
          }, 300);
      }
  }
  obj.doSomethingLater();

210610

자주 사용하는 linux

35 Linux Basic Commands Every User Should Know
touch .gitignore
ls
pwd
mkdir
cat 파일명: 파일 내용 보기
mv file.txt /home/username/Documents.
rmdir
diff

glob 패턴

.gitignore, tsconfig.json에 exclude, include에서 사용하는 패턴
gitignore glob syntax
예시
- .exe로 끝나는 모든 파일 무시: *.exe
- 그 중, Go.exe는 무시하지 않음: !Go.exe
- 프로젝트 전체에서 test폴더를 모두 찾아 무시: test/
- 프로젝트 최상위에 존재하는 test폴더만 무시: /test
- ignore everything: /*
- but the following: !/.profile