반응형

curl 을 사용해 로컬에 있는 파일을 업로드하기 위해서는 다음과 같이 --upload-file(-T) 옵션을 사용하면 된다.

curl --upload-file {file path}

 

그런데 위에서 전달받은 파일을 fetch API를 사용해 다른 API의 body로 전달하려고하면 해당 파일의 타입이 ReadableStream이라 실제 파일의 타입으로 내용이 전달되지 않는다.

 

ReadableStream을 원하는 타입으로 전달하기 위해선 다음과 같이 처리하면 된다.

const response = new Response(data as ReadableStream); // stream으로 Response 객체 생성
const text = await response.text();

fetch(url, {
  method: 'post',
  // stream이 javascript 파일이라면 Content-Type 헤더를 설정해주면 된다.
  // headers: {
  //   'Content-Type': 'application/javascript',
  // },
  body: text,
});

 

반응형
반응형

2021-01-13T01:28:30 이라는 문자열을 Date 포맷으로 변경할 때, 다음과 같이 Safari에서의 결과가 잘못 표시되는 현상이 있다.

Firefox
Chrome
Safari

Safari에서는 timezone 값을 Chrome 등 다른 브라우저와 다르게 처리하여 발생하는 것으로 보인다.

해결하려면 국내 기준으로 시간 문자열 뒤에 +09:00를 추가하면 된다.

const datetimeString = '2021-01-13T01:28:30';
new Date(`${datetimeString}+09:00`);

 

하지만 고정 값을 넣는 것이 꺼려진다면 다음과 같이 timezone 값을 입력 시간에 더해주면 된다.

이 경우에는 timezone 식별자인 Z를 시간 문자열 뒤에 추가로 붙여준다.

const datetimeSring = '2021-01-13T01:28:30';
new Date(new Date(`${datetimeString}Z`).getTime() + new Date().getTimezoneOffset() * 60 * 1000);

 

출처: stackoverflow.com/a/54211231/3422425

반응형
반응형

call, apply, bind는 함수의 실행 컨텍스트(this)를 지정하는데 유용한 메소드이다.

this란 함수가 실행된 환경을 나타내는 것으로 보통은 함수가 실행되는 시점에 결정되며 이를 this가 함수에 바인딩된다고 한다.

여기서 바인딩 되는 this를 지정할 수 있게 해주는 것이 call, apply 이고, 바인딩되는 시점을 실행 시점으로부터 독립시켜주는 것이 bind 이다.

 

call, apply 의 경우 호출 즉시 this가 바인딩되고 함수가 실행된다. 차이점은 파라미터가 나열형(call)이냐 배열(apply)이냐 정도이다.


this를 지정한다는 것은 아무 값이나 지정할 수 있다는 의미는 아니고, 다음과 같이 생성자 체이닝으로 this를 통해 다른 메소드의 프로퍼티를 가져오는 효과를 얻을 수 있다.

function Product(name, price) {
  this.name = name;
  this.price = price;
}

function Food(name, price) {
  Product.call(this, name, price); // equivalent to `Product.apply(this, [name, price]);`
  this.category = "food";
}

const burger = new Food("burger", 10);
/*
  burger = {
    name: "burger",
    price: 10,
    category: "food",
  };
*/

Food에서 Product.call을 호출하는 순간 this는 Product가 아닌 Food로써 바인딩되므로, Food의 프로퍼티로 name, price가 설정되는 것이다.

Product와 무슨 연관이 있는거 아닌가하는 의문이 든다면, burger의 prototype을 비교해보면 된다.

burger.__proto__ === Product.prototype // false
burger.__proto__ === Food.prototype // true

반면에 위와 달리 연관성을 주입하려면 다음과 같이 작성해볼 수 있을 것이다.

function Product(name, price) {
  this.name = name;
  this.price = price;
}

function Food(name, price) {
  const product = new Product(name, price);
  product.category = "food";
  return product;
}

const burger = new Food("burger", 10);

 

burger의 출력물은 동일하지만 이 경우 burger는 Product가 된다.

burger.__proto__ === Product.prototype // true
burger.__proto__ === Food.prototype // false

bind는 첫 번째 파라미터로 전달한 변수에 bind를 호출한 시점의 this를 설정한다. 호출 시 함수가 반환되는데, 이 함수를 호출하면 바인딩한 메소드가 실행된다. bind를 사용하여 위 예시를 구현하면 다음과 같다.

function Product(name, price) {
  this.name = name;
  this.price = price;
}

function Food(name, price) {
  const product = Product.bind(this, name, price);
  this.category = "food";
  product();
}

const burger = new Food("burger", 10);

결과는 동일하다.

반응형

+ Recent posts