미고렝 코딩

'Access-Control-Allow-Origin'의 값은 기본적으로 한개의 origin을 입력받던가 모든 오리진을 허용해주는 '*'이라는 와일드카드를 값으로 받을 수 있다.

만약 여러개의 origin을 허용하고 싶다면 따로 배열을 만들고 들어온 request의 origin이 그 배열에 포함이 되있는지 확인 하는방법을 사용할 수 있다. 확인 후에 해당 origin을 현재 'Access-Control-Allow-Origin'의 값으로 넣어주면 된다.

const server = http.createServer((request, response) => {
	let body = [];
	let allowedOrigins = [
		//multiple origin 설정하기
		'http://127.0.0.1:5500',
		'http://14.36.99.81:44949',
		'http://14.36.99.81:35911',
	];
	let origin = request.headers.origin; //@@@@@@@@@@@@@@@@@@@@@@@@@@@@origin 가져오기
	temp = request.headers;
	console.log(
		'defaultCorsHeader[Access-Control-Allow-Origin]: ',
		defaultCorsHeader['Access-Control-Allow-Origin'],
	);
	console.log('origin: ', origin);

	if (allowedOrigins.includes(origin)) {
		defaultCorsHeader['Access-Control-Allow-Origin'] = origin;
	}
}

promise 객체

속성: 상태, 결과값

메서드: then(), catch(), finally()

then()의 리턴값은 promise객체이며, 인자로 받은 함수의 리턴값이 promise객체이면 그 객체의 상태와 결과값을 가진다.

보통 then안에 

return new Promise((resolve, reject)=>{
	if(조건문)resolve(전달할게 있다면 전달)
    else reject(전달할게 있다면 전달)
})

이런식으로 사용하여 비동기적 코딩을 실행한다.

리턴값이 일반 데이터면 그 일반데이터를 결과값으로 가지는 promise객체를 반환하지만 비동기적으로 순차적으로 then이 실행되는지 장담하기 힘들다.

Promise.resolve('foo')
  // 1. "foo"를 받고 "bar"를 추가한 다음 그 값으로 이행하여 다음 then에 넘겨줌
  .then(function(string) {
    return new Promise(function(resolve, reject) {
      setTimeout(function() {
        string += 'bar';
        resolve(string);
      }, 1);
    });
  })
  // 2. "foobar"를 받고 그대로 다음 then에 넘겨준 뒤,
  // 나중에 콜백 함수에서 가공하고 콘솔에 출력
  .then(function(string) {
    setTimeout(function() {
      string += 'baz';
      console.log(string);
    }, 1)
    return string; //여기에서 일반 데이터를 반환하면 문제가 생김@@@@@@
  })
  // 3. 이 부분의 코드는 이전의 then 블록 안의 (가짜) 비동기 코드에서
  // 실제로 문자열을 가공하기 전에 실행됨
  .then(function(string) {
    console.log("마지막 Then: 앗... 방금 then에서 프로미스 만들고 반환하는 걸 까먹어서 " +
                "출력 순서가 좀 이상할지도 몰라요");

    // 'baz' 부분은 setTimeout 함수로 비동기적으로 실행되기 때문에
    // 이곳의 string에는 아직 'baz' 부분이 없음
    console.log(string);
  });

// 로그 출력 결과 (순서대로):
// 마지막 Then: 앗... 방금 then에서 프로미스 만들고 반환하는 걸 까먹어서 출력 순서가 좀 이상할지도 몰라요
// foobar
// foobarbaz

await를 사용하면 promise객체를 리턴하는 함수 앞에 키워드를 쓰게되는데,

async function getNewsAndWeatherAsync() {
  let result = {}
  let data1 = await fetch(newsURL).then(response => response.json())
  let data2 = await fetch(weatherURL).then(response => response.json())
  result = { news : data1.data, weather : data2}
  return result
}

여기서 data1의 값은 promise객체가 아니라 promise객체의 결과값이다!!

Promise.all

var newsURL = 'http://localhost:5000/data/latestNews';
var weatherURL = 'http://localhost:5000/data/weather';
function getNewsAndWeatherAll() {
  // TODO: Promise.all을 이용해 작성합니다
  return Promise.all([ fetch(newsURL), fetch(weatherURL) ])
    .then((responses) => {
      return Promise.all(responses.map((response) => response.json()))
    })
    .then((responses) => {
      let result = {}
      // console.log(responses[0])
      result = { news: responses[0].data, weather: responses[1] }

      return result
    })
}
if (typeof window === 'undefined') {
  module.exports = {
    getNewsAndWeatherAll
  }
}

promise.all 또한 await와 마찬가지로 위의 responses에 promise객체들의 배열을 인자로 전달해주는것이 아닌 promise객체들의 결과값을 담은 배열을 then에 넘겨준다.

문제들:

function getNewsAndWeatherAll() {
  // TODO: Promise.all을 이용해 작성합니다
  let result = {}
  let arr = []
  return Promise.all([fetch(newsURL),fetch(weatherURL)])
  .then(rawDatas =>{
    //console.log('datas: ',rawDatas)
    arr = rawDatas.map((rawData)=>{
      return rawData.json().then(json=>{
        return json
      })
    })
    return arr
  })
  .then(promiseArr =>{
    let dataArr = []
    promiseArr[0]
    .then(data => {
      dataArr.push(data.data)
      return promiseArr[1]
    })
    .then(data=>{
      dataArr.push(data)      
    })
    //console.log('dataArr: ',dataArr)
    return dataArr
  })
  .then(dataArr =>{
    console.log('length: ',dataArr.length)
    console.log('last then dataArr: ',dataArr)
    console.log('dataArr[0]: ', dataArr[0])
    console.log('dataArr[1]: ', dataArr[1])
    result.news = dataArr[0]
    result.weather = dataArr[1]
    return result
  })
}

여기서 실행을 했을때 이상하게 마지막 then에서 받아온 인자 dataArr를 console.log찍어봤는데 undefined가 나온다.

그냥 undefined라면 모를까 두번째 console.log("last then dataArr:", dataArr) 이부분은 또 잘 나온다... 아마 promise.all사용법을 몰라서 이상하게 꼬아서 생기 문제이긴 하지만 참 신기한 문제였다... json(), fetch()와 같은 비동기 함수를 다룰때에는 조심해야겠다.

실행되는 코드:

var newsURL = 'http://localhost:5000/data/latestNews';
var weatherURL = 'http://localhost:5000/data/weather';

function getNewsAndWeatherAll() {
  // TODO: Promise.all을 이용해 작성합니다
  return Promise.all([ fetch(newsURL), fetch(weatherURL) ])
    .then((responses) => {
      return Promise.all(responses.map((response) => response.json()))
    })
    .then((responses) => {
      let result = {}
      // console.log(responses[0])
      result = { news: responses[0].data, weather: responses[1] }

      return result
    })
}
if (typeof window === 'undefined') {
  module.exports = {
    getNewsAndWeatherAll
  }
}

맵리듀스(MapReduce)란?

: 대용량 데이터를 처리를 위한 분산 프로그래밍 모델

- 구글에서 2004년 발표한 소프트웨어 프레임워크

- 타고난 병행성(병렬 처리 지원)을 내포

- 누구든지 임의로 활용할 수 있는 충분한 서버를 이용하여 대규모 데이터 분석 가능

- 흩어져 있는 데이터를 수직화하여, 그 데이터를 각각의 종류 별로 모으고(èMap),

Filtering과 Sorting을 거쳐 데이터를 뽑아내는(èReduce)

하는 분산처리 기술과 관련 프레임워크를 의미

맵리듀스는 맵(Map) 단계와 리듀스(Reduce) 단계로 처리 과정을 나누어 작업
각 단계는 입력과 출력으로써 키-값 쌍을 가지고 있고, 그 타입은 프로그래머가 선택합니다. 또한, 맵과 리듀스 함수도 프로그래머가 직접 작성하게 됩니다

Map은 흩어져 잇는 데이터를 Key, Value의 형태로 연관성 있는 데이터 분류로 묶는 작업

Reduce는 Map화한 작업 중 중복 데이터를 제거하고 원하는 데이터를 추출하는 작업

l  MapReduce Logical Data Flow

맵(map)은 흩어져 있는 데이터를 관련 있는 데이터끼리 묶는 작업을 통해서 임시 데이터 집합으로 변형되며, 리듀스(Reduce)는 맵 작업에서 생성된 임시 데이터 집합에서 중복 데이터를 제거하고 원하는 데이터를 추출하는 작업을 진행합니다.

출처: https://over153cm.tistory.com/entry/맵리듀스MapReduce란-1 [빅데이터는 넘커]

Closure은 함수(A) 내에 함수(B)를 선언하여 A함수의 지역변수등을 활용함으로써 클래스처럼 활용을 할 수있게 해준다.

var makeCounter = function() {
  var privateCounter = 0;
  function changeBy(val) {
    privateCounter += val;
  }
  return {
    increment: function() {
      changeBy(1);
    },
    decrement: function() {
      changeBy(-1);
    },
    value: function() {
      return privateCounter;
    }
  }
};

var counter1 = makeCounter();
var counter2 = makeCounter();

counter1.value(); // returns 0
counter1.increment(); // adds 1
counter1.increment(); // adds 1
counter1.value(); // returns 2
counter1.decrement(); //subtracts 1
counter1.value(); // returns 1
counter2.value(); // returns 0

위의 코드처럼 변수 counter1과 counter2는 서로에게 독립적인 참조와 변수를 갖는다.

Currying은 일종의 함수 패턴으로 함수가 즉시 다른 함수를 리턴 하는것이다. 기존에 특정 값(String이나 Number)을 리턴하는게 아닌 함수 그자체를 리턴하여 할당되는 변수가 함수처럼 작동하도록 하는것이다.

let greeting = function (a) {
    return function (b) {
        return a + ' ' + b
    }
}

let hello = greeting('Hello')
let morning = greeting('Good morning')

hello('Austin') // returns Hello Austin
hello('Roy') // returns Hello Roy
morning('Austin') // returns Good morning Austin
morning('Roy') //returns Good Morning Roy

Currying은 함수형 프로그래밍의 일부로 간주되며 화살표 함수를 사용하여 보다 깔끔한 코딩이 가능하다.

let greeting = (a) => (b) => a + ' ' + b

greeting('Hello There')('General Kenobi')
//returns Hello There General Kenobi

반복할 조건을 초기화, 조건식, 증감문 순으로 넣어준다.

기억해야할 falsy 값들:

false

null

undefined

0

NaN (Not a Number)

''

OR 연산자는 truthy한 값을 만나면, 그 값을 출력한다.

평가순서:

------->

undefined || 10 --> 10 (true)

5 || 10 --> 5

5 || console.log('실행되지않음') --> 5

둘다 falsy 할 경우, 뒤에 있는 값을 출력한다.

undefined || false  --> false

AND 연산자는 falsy 한 값을 만나면, 그 값을 출력 합니다.

undefined && 10 --> undefined

5 && false --> false

둘다 truthy 할 경우, 뒤에 있는 값을 출력한다.

5 && 10 --> 10