미고렝 코딩

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
  }
}

app이라는 객체안에 function onClickButton()이 있다고 가정하자.

let button = document.querySelector('#buttonSubmit');

let app = {
	init:()=>{
    	button.onclick = app.onClickButton
	}
	onClickButton: ()=>{
    	console.log('button clicked');
	}
}
app.init()

이렇게 코딩을 한다면 app.init()을 통해 button.onclick에 정상적으로 함수가 붙을거 같지마 결과는 그렇지 않았다.

따라서 

let button = document.querySelector('#buttonSubmit');

let app = {
	init:()=>{
    	button.onclick = onClickButton()
	}
	foo: ()=>{
    	console.log('button clicked');
	}
}
function onClickButon(){
	app.foo()
}
app.init()

이런식으로 app객체의 밖에 따로 함수를 만들어서 붙여주니까 해결이 되었다.

웹서비스의 기본 아키텍처를 구성하는 요소들은 다음과 같이 있다.

• 브라우저
• 클라이언트
• 서버
• 데이터베이스
• HTTP

1.브라우저

브라우저는 노드와 마찬가지로 V8이라는 자바스크립트 엔진이 구동될수 있는 환경이다.
즉 우리가 자바스크립트로 작성한 클라이언트 코드를 브라우저 상에서 구동해서 우리가 볼수 있는 view단은 환성시키는 역할을 주로 진행한다.

2.클라이언트

직역하면 고객인데 이 단어로는 쉽게 설명하기 어렵다. 대신 client가 주로 쓰는 부분이라고 이해하면 조금더 편하다고 한다. 주로 유저와 interaction하는 기능을 보유하고 있다. 예를들어 버튼을 클릭하면 컨텐츠를 요청해서 가져오는것, 탭을 클릭하면 다른페이지로 넘어가서 다른 페이지를 보여주는 등 유저의 동작에 따라 반응하는 기능들을 주로 보유하고 있다. 하지만 클라이언트는 컨텐츠 혹은 데이터 등으로 불리는 리소스 자체를 직접 가지고 있지는 않기 때문에 우리가 유저에게 어떠한 데이터를 보여주는 웹서비스를 기획한다고 한다면 그 데이터를 가지고 있는 주체(데이터베이스)와 해당 데이터를 다뤄서 우리가 필요한 데이터로 만들어주는 과정을 해주는 로직을 돌리는 주체(서버)가 필요하다. HTTP통신에서 주로 요청을 담당하게된다.

3. 서버

데이터는 저장하고 불러오는것 뿐만 아니라 꺼내온 데이터를 핸들링하고 권한이 있는 사용자인지, 우리의 회원이 요청하는 것인지, 나쁜집단이 우리 자료를 빼내가려고 하는 요청이 아닌지를 검색하는 관문이 필요하다.
나는 이 관문을 node서버로 만들게 될 것이다. 그리고 구현을 편하게 하기 위해 Express라는 프레임워크를 활용할 것이다.
이렇게 만들어진 서버는 크게 두가지 역할을 갖게된다.

1. 클라이언트의 요청을 받는다.
2. 요청을(request) 처리하기 위해 필요한 데이터들을 만들기 위해서
   데이터베이스와 통신하여 데이터를 꺼내와 응답(response)한다.

결론적으로 서버가 하는 역할은 클라이언트가 필요하다는 요청을 받고, 데이터베이스에서 해당자료를 꺼내와서 조립해서 응답해주는 것이다. 콜센터 혹은 물류센터와 비교하면 좋을것 같다.

4. 데이터베이스

이름에서부터 의미가 느껴진다. 우리 서비스의 모든 리소스들을 저장하는 공간이다. 어려운 개념같지만 간단하게 생각해보면 잘 저장하고 잘 꺼내쓰는것이다. 이것들을 잘하기 위해 처음에는 query문을 배우게된다. 이 query문은 어렵고 생소하며 작성자의 코드스타일에 영향을 많이 받기 때문에 ORM이라는 개념으로 획일화된 코드를 작성하게된다. 어렵게생각하지말자 하는일은 잘저장하고 잘꺼내오는 일이고 이 일을 잘하기 위해 query, ORM등 다양한 시도를 하는것이다.

5.HTTP

HTTP(HyperText Transfer Protocol) 초본문전송규약, 하이퍼본문전송규약 말이 어렵다.
앞의 단어는 이해가 어렵지만 protocol이라는 것은 알수있다. 즉 통신규약이다.
웹아키텍처에서 클라이언트와 서버가 정보를 주고받을때 사용하는 통신규약이라고 이해하면 될 것 같다.
우리가 일상생활에서 견적서를 쓰거나 물건을 주문할 때 양식을 지켜서 주문,발주를 해야하는것과 같다.
'서버로 무엇인가 요청할 때에는 헤더와 바디의 형식을 갖춘 요청을 양식에 맞게 보내라 !'

클라이언트는 인터넷에 연결된 사용자의 디바이스, 또는 웹에 접근할 수 있는 소프트웨어를 뜻한다. 대표적인 예로 [A]가 있는데, [A]는 HTML, CSS, JavaScript 등으로 작성된 코드를 내부 엔진으로 해독하여 사용자가 쉽게 이해할 수 있는 형태의 컨텐츠로 보여주는 역할을 한다.
- 서버는 클라이언트가 어떤 자원을 요청하면 해당 요청을 적절하게 처리하는 역할을 한다. 클라이언트는 서버의 자원을 어떻게 사용할 수 있는지 명시해 둔 인터페이스 [B]에 따라 요청을 전송한다.
- 이렇게 클라이언트와 서버가 서로 요청과 응답을 주고받을 수 있는 것은 [C]라는 통신 규약 덕분이다.

정답:

browser,api,http

function fibonacci(n, memo = []) {
  // TODO: 여기에 코드를 작성합니다.
   if(memo[n] !== undefined) return memo[n];
		// 이미 해결한 하위 문제인지 찾아본다
    if(n === 0) return 0
    if(n <= 2) return 1;
    let res = fibonacci(n-1, memo) + fibonacci(n-2, memo);
		// 없다면 재귀로 결과값을 도출하여 res 에 할당
    memo[n] = res;
		// 추후 동일한 문제를 만났을 때 사용하기 위해 리턴 전에 memo 에 저장
    return res;
}

let output = missHouseMeal(["eggroll", "kimchi", "fishSoup"]);
console.log(output);
/*
[ [], 
  [ 'eggroll' ], 
  [ 'eggroll', 'fishSoup' ], 
  [ 'eggroll', 'fishSoup', 'kimchi' ], 
  [ 'eggroll', 'kimchi' ], 
  [ 'fishSoup' ], 
  [ 'fishSoup', 'kimchi' ], 
  [ 'kimchi' ]
] 
*/

function missHouseMeal(sideDishes) {

  // 결과를 담을 배열을 선언합니다.
  let result = [];
  // sideDishes를 사전식 순서로 정렬합니다.
  sideDishes.sort();

  // 모든 조합을 검사하는 재귀 함수를 작성합니다.
  const sidePowerSet = (idx, sideDish) => {

    // 재귀 함수이기 때문에 탈출 조건을 만듭니다.
    if (idx === sideDishes.length) {
      // 만약, idx와 sideDishes의 길이가 같다면(마지막까지 검토한 경우) result에 sideDish를 삽입하고 push합니다.
      result.push(sideDish);
      return;
    }

    // idx번째 요소가 포함되지 않는 경우
    sidePowerSet(idx + 1, sideDish);

    // idx번째 요소가 포함되는 경우
    sidePowerSet(idx + 1, [...sideDish, sideDishes[idx]]);
  };

  // 0 번째 인덱스와 빈 배열을 인자로 받는 재귀 함수를 실행합니다.
  sidePowerSet(0, []);

  // 결과를 사전식 순서로 정렬합니다.
  return result.sort();
}

let A = 4;
let N = 8;

let output = divideChocolateStick(A, N);
console.log(output) 
// [[1, 4, 8], [4, 1, 2], [2, 2, 4]] 또는,
// [[1, 4, 8], [2, 2, 4], [4, 1, 2]] 
// 순서는 상관없습니다

// 최대 공약수(유클리드 호제법: Euclidean algorithm)
function gcd(A, N) {
     return (A % N) === 0 ? N : gcd(N, A % N); 
}

function divideChocolateStick(A, N) {
    const result = [];
    let value = 0; // 최대공약수를 담을 변수
    let temp = 0; //

    if(A > N) value = gcd(A, N); // A가 N보다 큰 경우
    else value = gcd(N, A); // N이 A보다 큰 경우

    // 제곱근 까지만 반복해도 된다.
    // 최대 공약수가 36이라면 36의 약수는 1, 2, 3, 4, 6, 9, 12, 18, 36이다.
    // 이는 1 * 36 = 2 * 18 = 3 * 12 = 4 * 9 = 6 * 6 이다.
    // 즉, 제곱근을 기준으로 양쪽의 값 하나씩 곱했을 때 36이 되기 때문에
    // 제곱근 보다 큰 약수는 이미 제곱근보다 작은 약수에서 구할 수 있다.
    // 따라서 제곱근까지만 비교해 주면 된다.
    for(let i = 1; i * i <= value; i++) {
        if(value % i === 0) { // 최대공약수의 약수인 경우 중 제곱근 보다 작은 약수의 경우
            result.push([i, A / i, N / i]);
            if(i !== value / i) { // 제곱근이 아닌 경우(제곱근 보다 작은)
                temp = value / i; // 최대 공약수를 제곱근이 아닌 수로 나누면 제곱근 보다 큰 약수를 구할 수 있다.
                result.push([temp, A / temp, N / temp]);
            }
        }
    }
    
    return result;
}

let output = orderOfPresentation(3, 3);
console.log(output); // [2,3,1]

let output = orderOfPresentation(3, [2, 3, 1]);
console.log(output); // 3

function orderOfPresentation(n, k) {
  // TODO: 여기에 코드를 작성합니다.
  let numbers = []
  for(let i = 1; i<=n ; i++){
    numbers.push(i)
  }
  //obj에다가 key를 경우의 수로 두고 value를 boolean으로 줘서 이미 사용했던 숫자인지 판별
  //만들었던 숫자이면 for문 안에서 numbers의 인덱스를 올려서 숫자 조합하기.
  //n이 몇이 될지 모르니까 재귀를 통해서 구현해야한다.
  //조합한 숫자는 result에 담고 obj에 키로 추가
   //사용했던 카드의 정보를 담아야한다
  
  let result = []
  // let rec = (obj = {} ,combinated = '') =>{
  //   for(let i = 0; i < numbers.length; i++){//카드들을 순회   
  //     //카드를 선택하기전에 사용가능한 카드인지 확인         
  //     if(obj[numbers[i]] === true || obj[numbers[i]] === undefined){//사용 가능한 카드
  //       combinated += numbers[i]//카드를 선택하고
  //       obj[numbers[i]] = false //사용했던 카드로 표시
  //       console.log('combinated: ', combinated)
  //       console.log('obj[numbers[i]]: ', obj[numbers[i]])

  //       //그다음 카드를 선택하기 위해 재귀
  //       if(combinated.length < n){
  //         console.log("재귀-----------")
  //         combinated = rec(obj,combinated)
          
  //       }
  //       else{//카드가 다 만들어지면 체크 
  //       let strArr = combinated.split('')
  //       let numArr = strArr.map((el)=>Number(el))
  //       //result에 넣기전에 숫자로 변환시키기
  //       result.push(numArr)              
  //       console.log('result: ', result)
  //       }
  //       combinated = combinated.slice(0,-1) //다음 숫자 확인을 위해 썼던거 뺴주기
  //       obj[numbers[i]] = true //재귀가 끝났으니 다시 사용 가능하게 해줌
  //     }
  //     console.log("obj: ", obj)
  //     console.log('end of for loop @@@@@@@@@@@@@@@@@@@@')
            
  //   }    
  //   return combinated
  // }
  // rec()
  //위의 코드는 나의 코드인데 아래 코드처럼 순회해야하는 배열 자체를 줄여주면 더 효율적으로 순회할 수 있다
  const permutation = (arr, m = []) => {
    // 탈출 조건을 생성합니다.
    // arr의 length가 0일 때 result에 만들어진 발표 순서 배열을 담습니다.
    if (arr.length === 0) {
      result.push(m);
    } else {

      // 순열의 재료가 담긴 배열을 순환합니다.
      for (let i = 0; i < arr.length; i++) {
        // 현재 배열을 카피합니다. (원본을 건드리면 모든 경우의 수를 찾을 수 없습니다.)
        let currentArray = arr.slice();
        // 제일 앞에 있는 요소를 가지고 와서 변수에 할당합니다.
        let element = currentArray.splice(i, 1);
        // 제일 앞에 있는 요소가 사라진 배열 ([1, 2, 3]이었다면 현재는 [2, 3])을 arr 인자에 넣고, m 배열과 element를 합쳐서 m 인자에 넣습니다.
        permutation(currentArray.slice(), m.concat(element));

        // 이렇게 되면 다음은 [2, 3]을 카피하고, element가 [2]가 될 것이며
        // 제일 앞에 있는 요소가 사라진 배열 [3]이 arr에 들어갈 것이고, element는 m과 다시 합쳐져 [1, 2]를 만들 것입니다.
        // 이렇게 계속 재귀를 돌려서 m이 [1, 2, 3]이 되면, arr의 lenght는 0이 될 것이고, 재귀에서 빠져나옵니다.
        // arr === []일 때(m이 [1, 2, 3]) result에 push를 하여 함수를 종료하고, 그다음 arr === [3]일 때(m이 [1, 2]) for문의 길이가 1이었으므로 함수를 그대로 종료하고,
        // arr === [2, 3]일 때(m이 [1]) for문은 arr.length에 따라 2번 돌기 때문에 2를 지나 3이 될 것입니다.
        // [1] => [1, 3] => [1, 3, 2] => (1의 모든 경우의 수를 다 돌았으니 2로 진입) [2] => [2, 1] => [2, 1, 3] ...
      }
    }
  };

  permutation(numbers);
  console.log('final result: ', result)
  //리턴
  if(Array.isArray(k)){
    return result.findIndex((el)=>{
      return String(el) === String(k)
    })    
  }else{
    return result[k]
  }
}

let output = ocean(50, [10, 20, 50]);
console.log(output); // 4

let output = ocean(100, [10, 20, 50]);
console.log(output); // 10

let output = ocean(30, [5, 6, 7]);
console.log(output); // 4

// function ocean(target, type) {
//   // TODO: 여기에 코드를 작성합니다.
//   let sorted = type.sort((a,b)=>a-b)
//   let count = 0
//   let calledCount = 0
//   let rec = function(sum = 0, curr= sorted[0]){
//     calledCount++;
//     for(let i =0;i<sorted.length; i++){      
//       if(sorted[i] >= curr){//자신보다 크거나 같을 때만
//         if(sum + sorted[i] < target){ //아직 target에 미치지 못함
//           //rec(sum + sorted[i], sorted[i])
//         }
//         else if(sum + sorted[i] === target){
//           console.log('target에 도달')
//           console.log('sum: ', sum)
//           console.log('curr: ', curr)
//           console.log('sorted[i]: ', sorted[i])          
//           count++ //target에 도달
//         }
//       }
//     }
//   }
//   rec()
//   console.log('calledCount',calledCount)
//   return count
// }
//내가 한 위의 방법은 시간복잡도가 높아 5천이상만 되도 시간이 오래걸린다.

function ocean(target, type) {
  // 0 을 만들 수 있는 경우는 아무것도 선택하지 않으면 되기 때문에 bag[0] = 1 로 초기값 설정
  let bag = [1];
  // 경우의 수를 저장하기 위해 초기값은 모두 0으로 만들어 준다
  for(let i = 1; i <= target; i++)
    bag[i] = 0;
  // 돈의 종류가 담겨있는 배열을 순차적으로 탐색   
  for(let i = 0; i < type.length; i++) {
  // target 금액까지 순차적으로 1씩 증가하면서    
    for(let j = 1; j <= target; j++)
  // bag의 인덱스가 type[i] 보다 큰 구간만
  // (작은 구간은 type[i]로 만들 수 없는 금액이기 때문에 탐색할 필요가 없다)    
      if(type[i] <= j)
  // 기존 경우의 수에 type[i]를 뺀 금액을 만들 수 있는 경우의 수를 더해준다     
  // 정말 이런식의 풀이 방법은 어떻게 생각해 내는걸까....  
        bag[j] += bag[j-type[i]];
  }
  // bag 의 target 인덱스에 target 금액을 훔칠 수 있는 경우의 수가 쌓이므로
  // 해당 값을 리턴해 준다
  return bag[target];
}