미고렝 코딩

npm install

모듈 설치

안될 시

/bin/bash -c "$(curl -fsSL https://codestates-content.s3.ap-northeast-2.amazonaws.com/npm-registry/registry.sh)"

npx codestates-submission ls

나의 제출 확인

바뀐 쉘로 인해 nvm실행 안될 시

사용중인 쉘 파일에 추가:

export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm

npm run submit

과제제출

npm init

npm 패키지를 활용하는 파일로 정의하겠다 → package.json파일 생성

package.json 에서 scripts 부분에 “start” : “node 파일명”을 입력해주면

npm start를 통해 해당 파일을 실행 할 수 있다.

npm install --save 패키지명

--save를 해줘야 package.json에 해당 dependency에 대한 정보가 추가됨.

npm install --save nodemon

파일을 저장할때마다 자동으로 파일을 실행시켜준다.

nodemon 사용법:

nodemon 파일명

이런식으로 추가 한 후 터미널에 npm run auto를 실행시키면 정상작동된다.

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

상태코드:

2xx: Success

3xx: Redirect

• 301 Moved Permanently, 302 Found

4xx: Client errors

• 404 Not Found, 403 Forbidden, 400 Bad Request

5xx: Server errors

• 500 Internal Server Error, 502 Bad Gateway

요청메서드:

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

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