コード状態7週目-[JS/Nude]非同期/[HTTP/ネットワーク]基礎/[HTTP/ネットワーク]練習

今週は先週よりずっとよくなった.先週、急に難易度が高くなったことを学び、今回はどんなに難しいことを学べるか心配でしたが、幸いでした.前に学んだ部分とは少し違うネットワークを学び、どのように構築し、情報を受信し、要求するかを学び、不思議で面白いと思います.しかし、これまで、これらの内容を具体的にどのように使用するかは不明だった.もっと概念的な部分を勉強しましたが、実習として使うともっと簡単で、理論的な部分よりも実戦で使い方を教えてほしいです.自分で理解しなければならない.😂
今週はフェアと一緒に過ごす時間がたくさんありましたが、フェアと一緒に勉強することは何もありません.まだ公平な時間がたくさんありますし、いっそ一緒にやったことがない時間もありますし、学習者と一緒に勉強したほうが効果的です.たくさんの実習をして、好きな人と一緒に勉強して、気持ちがいいです.

7週間勉強した内容の中で整理したい内容

[JS/Node]非同期

동기와 비동기?JavaScriptは非同期->昇格からコード作成順に実行

callback

*콜백체인의 문제점 => 가독성 저하, 디버깅이 어려움, 유지보수가 안됨*
  

_.each = function(collection, iteratee) {
  
  if(Array.isArray(collection)) {
    for(let i = 0; i < collection.length; i++) {
      iteratee(collection[i], i, collection);
    }
  } else {
    for(let key in collection) {
      iteratee(collection[key], key, collection);
    }
  }
}



_.reduce = function(arr, iteratee, iniVal) {
  
  let acc = initVal;
  
  _.each(arr, function(el, idx, src) {
    if(initVal === undefined) {
      acc = el;
    } else {
      acc = iteratee(acc, el, idx, src)
    }
  })
  return acc;
}
                                 

Promise-JSが提供する非同期コードを簡単に処理できるobject
-state:pending(保留)->完了(履行済み)または拒否(拒否済み)
- .そしてすぐに値を渡すこともPromiseに戻ることもできます
- .catchを使用してエラーを制御できます->最後に作成したほうがいいです

async-使用時に関数のコードブロックを自動的にPromiseに変換
-awaitはasync関数でのみ使用可能

Promise, Async / Await

function getNewsAndWeather() {
  let result = {};
  
  return fetch(newsURL)	=> URL로 요청하는 걸 가능하게 해주는 API
  
  .then((response => response.json()) => Promise형식으로 이뤄짐. 
  .then((news) => {			 자체적으로 json()메소드가 있어 응답을 JSON형태로 변환시켜 다음 Promise로 전달
    result.news = news.data
    return fetch(weatherURL)
  })
  .then((response) => response.json())
  .then((weather) => {
    result.weather = weather
    return result
  })
  

* Promise.all = 한번에 병렬적으로 이뤄짐
* Promise.race = 비동기처리 중 먼저 리턴하는 값 출력


async function getNewsAndWeather() {
  let result = {};
  
  let news = await fetch(newsURL).then((response) => response.json())
  let weather = await fetch(weatherURL).then((response) => response.json())
  
  result.news = news.data
  result.weather = weather
  
  return result
  
  


async가 아닌 함수에서 async함수 호출하기

async function wait () {
  await new Promise (resolve => setTimeout(resolve, 1000));
  return 10;
}
  function f() {
    wait().then(result => alert(result));
  }
  
  f();               

[HTTP/ネットワーク]ベース

HTTP API 디자인:HTTPリクエストを指定する場合の方法音声に関する行為を指定する(CRUD)

適切なメソッドクエリを要求POST更新PUTの追加またはPATCH DELETEの削除

URLネットワーク上のWebページ、画像、ビデオなどのファイルが置かれている情報を表します.

                     http://www.google.com:86/search?q=Javascript

- scheme : 통신방식(프로토콜) 결정 => 일반적 웹브라우저는 http(s)
- hosts : 웹서버 이름, 도메인, IP사용하여 주소 나타냄
- url-path : 웹서버에서 지정한 루트 시작으로 위치한 경로, 파일명
- query : 웹서버에 보내는 추가적 질문

IP:インターネット上で使用されるアドレス体系(IPv 4=>IPv 6)

Port:IPアドレスが示すPC接続チャネル.使用済みポートは再使用不可
他のプログラムが番号を使用している場合は、異なるポート番号で実行する[22:SSH 80:HTTP 443:HTTPS]

Domain:IPがIPアドレスであり、IPが道路名アドレスである場合、ドメイン名は建物名である.すべてのIPアドレスにドメインがあるわけではありません

DNS:開発したデータベースシステムは、ホストのドメイン名をIPアドレスに変換したり、その逆も可能

SSR / CSR

  
SSR : 서버에서 웹페이지를 렌더링. 서버에서 웹페이지를 브라우저로 보내기 전에 서버에서 완전히 렌더링

브라우저가 서버의 URI로 GET요청 => 서버는 정해진 웹페이지 파일을 브라우저로 전송 => 서버의 웹페이지가 브라우저에 도착하면 완전히 렌더링


웹페이지의 내용에 데이터베이스의 데이터가 필요하면?
	* 서버는 데이터베이스의 데이터를 불러온 다음 웹페이지를 완전히 렌더링 된 페이지를 변환 후 브라우저에 응답보냄

사용자가 브라우저의 다른 경로로 이동하면?
	* 브라우저가 다른 경로로 이동할 때 마다 서버는 작업을 다시 수행






CSR : SSR의 반대. 클라이언트에서 웹페이지를 렌더링. AJAX 사용

브라우저의 요청을 서버로 보냄 => 웹페이지의 골격이 될 단일 페이지를 클라이언트에 보냄 (웹페이지와 JavaScript파일도 같이 보냄) => 클라이언트가 웹페이지를 받으면 완전히 렌더링 된 페이지로 바꿈


데이터베이스에 저장된 데이터면?
	* 브라우저는 데이터베이스에 저장된 데이터를 가져와서 웹페이지에 렌더링 (API사용-API요청으로 해소)

브라우저가 다른 경로로 이동하면?
	* 서버가 웹페이지를 다시 보내지는 않음. 브라우저가 요청한 경로에 따라 페이지를 다시 렌더링. 이때 보이는 웹페이지의 파일은 맨 처음 서버로부터 전달 받은 웹페이지 파일





[차이점은 페이지가 렌더링 되는 위치. 브라우저는 사용자가 다른 경로를 요청할 때 마다 페이지를 새로고침 하지 않음 => 동적으로 라우팅 관리]





* HTTP message : 서버와 클라이언트 사이에서 데이터 교환되는 방식 *
요청(Requests) => 클라이언트가 서버에 보내는 메세지 / 응답(Responses)

CORS-クライアントとサーバが異なるソースに存在する
-サーバ側は、クライアントにリソースを提供するかどうかを決定します.
-同じソースから取得しようとすると、CORSの問題は発生しません.

                     http://velog.io:3000/エンコーディング7週間

- 프로토콜, 호스트(domain), 포트번호, URL pathname으로 구성
- origin(출처) 구분하는 기준 : 프로토콜, 호스트(domain), 포트번호

preflight request-実際のリクエストの前にOPTIONSメソッドで発生
-サーバが実際の要求が安全かどうかを事前に判断できるようにする方法
-すべてのcrossoriginリクエストはpreflightリクエストを発行しません