이머시브 코스 TIL 4주차 모음

0315.월

Async Javascript

• JS 엔진은 블록안에 코드를 동기적으로 실행(처리)하기 때문에 비동기 처리를 반드시 해야함

Callback

• async를 제어할 수 있는 함수
• 콜백체인 → 가독성이 안좋다

const printString = (string, callback) => {
	setTimeout(
		() => {
			console.log(string)
			callback()
		},
		Math.floor(Math.random() * 100) + 1
	)
}
const printAll = () => {
	printString("A", () => {
		printString("B", () => {
			printString("C", () => {})
		})
	})
}
printAll()

Promise

• .then() / .catch()
• resolve() : 기능을 정상적으로 수행해서 최종 데이터를 전달하는 콜백함수
• reject() : 기능을 수행하다가 문제가 생겼을 때 호출하게 될 함수
• fulfiled(이행) pending(대기) rejected(거부)
• Promise Chaining으로 Promise Hell이 일어나지 않도록 방지한다

const printString = (string) => {
	return new Promise((resolve, reject) => {
		setTimeout(
			() => {
				console.log(string)
				resolve()
			},
			Math.floor(Math.random() * 100) + 1
		)
	})
}
const printAll = () => {
	printString("A")
	.then(() => {
		return printString("B")
	})
	.then(() => {
		return printString("C")
	})
}
printAll()

async await

• promise를 간편하고 동기적으로 실행되는 것처럼 보이게 만들어주는 API(syntactic sugar)

function gotoCodestates(){
	return new Promise((resolve, reject) => {
		setTimeout(() => {resolve('1. go to codestates')}, 100)
	})
}
function sitAndCode(){
	return new Promise((resolve, reject) => {
		setTimeout(() => {resolve('2. sit and code')}, 100)
	})
}
function eatLunch(){
	return new Promise((resolve, reject) => {
		setTimeout(() => {resolve('3. eat lunch')}, 100)
	})
}
function gotoBed(){
	return new Promise((resolve, reject) => {
		setTimeout(() => {resolve('4. go to bed')}, 100)
	})
}
const result = async() => {
	const one = await gotoCodestates()
	console.log(one)
	const two = await sitAndCode()
	console.log(two)
	const three = await eatLunch()
	console.log(three)
	const four = await gotoBed()
	console.log(four)
}
result()

0316.화

node.js module

• require 구문을 이용하여 모듈 불러오기

const fs = require('fs') // 파일 시스템 모듈을 불러옵니다
const dns = require('dns') // DNS 모듈을 불러옵니다

• fs.readFile 로 로컬파일 읽어오기

fs.readFile('test.txt', 'utf8', (err, data) => {
  if (err) {
    throw err; // 에러를 던집니다.
  }
  console.log(data);
});

fetch

• fetch API : 다양한 네트워크 요청 중, URL로 요청을 가능하게 해주는 API

fetch(url)
  .then(response => response.json()) // 자체적으로 json() 메소드가 있어, 응답을 JSON 형태로 변환시켜서 다음 Promise로 전달합니다
  .then(json => console.log(json)) // 콘솔에 json을 출력합니다
  .catch(error => console.log(error)); // 에러가 발생한 경우, 에러를 띄웁니다

0317.수

Client Server Architecture

• 리소스가 존재하는 곳과 리소스를 사용하는 앱을 분리시킨 것을 2-Tier 아키텍처 또는 클라이언트-서버 아키텍처
• 리소스를 저장하는 공간을 데이터베이스라고 부름(합치면 3티어 아키텍처)
• 클라이언트 앱은 사용자가 눈으로 보고 대면하므로(UI 터치 등 상호작용) 프론트엔드 영역
  서버 앱은 사용자가 눈에 직접 보이지 않게 뒤에서 작동하므로(상품정보 API 노출, 로그인/로갓, 권한관리 등) 백엔드 영역

클라이언트-서버 통신과 HTTP API

• 웹 애플리케이션 아키텍처에서는 클라이언트와 서버가 서로 HTTP라는 프로토콜을 이용한다
  *프로토콜 : 통신규약
• API(Application Programming Interface)
  서버는 클라이언트에게 리소스를 잘 활용할 수 있도록 인터페이스를 제공해줘야한다
• 보통 인터넷에 있는 데이터를 요청할 때에는 HTTP 프로토콜을 사용하며, 주소(URL, URI)를 통해 접근
• HTTP API 디자인을 잘하는 방법
  요청 적절한메서드
  조회(read) GET
  추가(create) POST
  갱신(update) PUT 또는 PATCH
  삭제(delete) DELETE

OSI 7계층(응용계층)

• HTTP : 웹에서 HTML, JSON 등의 정보를 주고받는 프로토콜
• HTTPS : HTTP에서 보안이 강화된 프로토콜
• FTP : 파일 전송 프로토콜
• SMTP : 메일을 전송하기 위한 프로토콜
• SSH : CLI 환경의 원격 컴퓨터에서 접속하기 위한 프로토콜
• RDP : Windows 계열의 원격 컴퓨터에 접속하기 위한 프로토콜
• WebSocket : 실시간 통신, push 등을 지원하는 프로토콜
  (전송계층)
• TCP : HTTP, FTP 통신의 등 근간이 되는 인터넷 프로토콜
• UDP : 양방향의 TCP와는 다르게 단방향으로 작동하는 훨씬 더 단순하고, 빠르지만 신뢰성이 낮은 인터넷 프로토콜

HTTP

• HTTP 요청 메서드 https://developer.mozilla.org/ko/docs/Web/HTTP/Methods
• HTTP 메시지 https://developer.mozilla.org/ko/docs/Web/HTTP/Messages
• HTTP 상태 코드 https://developer.mozilla.org/ko/docs/Web/HTTP/Status

Ajax(Asynchronous JavaScript and XML)

• dynamic web page :
  서버와 자유롭게 통신하면서 ⇒ XMLHttpRequest(XHR)의 등장
  페이지 깜빡임없이 seamless하게 작동하는 ⇒ JavaScript와 DOM 이용
  - JSON.stringify() : 서버로 JSON 보낼떄
  JSON.parse() : 서버에서 받은 JSON

let message = {
  username: '김코딩',
  text: '새 글을 써보겠습니다',
  roomname: '사랑방'
};
const serverURL = 'http://3.36.72.17:3000/kimcoding/messages';
fetch(serverURL, {
  method: 'POST',
  body: JSON.stringify(message), // stringify 과정이 반드시 필요합니다. 왜일까요?
  headers: {
    'Content-Type': 'application/json'
  },
})
.then(response => response.json())
.then(json => {
  console.log(json)
  console.log('새 글을 작성했습니다')
});

0318.목

Browser Security

• 브라우저가 자바스크립트를 구동하기에 위협받고 있다
• 브라우저에서 자바스크립트로 할수있는것들
  1. ajax call을 해서 api 호출
  2. 다이나믹하게 DOM 제어
  3. 인증 정보를 브라우저에 저장
  4. 인증 정보 불러오기
• XSS : 클라이언트가 서버를 신뢰하기 때문에 발생하는 이슈
• CSRF : 반대로 서버가 클라이언트를 신뢰해서 발생하는 이슈

CORS(Cross-Origin Resource Sharing)

• 다른 도메인의 데이터를 불러올 때
• JavaScript Code - xhr.sned() → browser
  broswer - Preflight Request(Actual Request) → server

XSS

• 보안이 약한 웹 어플리케이션에 대한 웹 기반 공격
• 공격의 희생자는 어플리케이션이 아닌 user
• xss 공격에서 해로운 컨텐츠는 javascript를 활용하여 전달됨

0319.금

Node.js 리뷰

• 노드 : v8엔진으로 만들어진 자바스크립트 런타임
  v8 : 자바스크립트를 기계어로 컴파일해준다
  런타임 : 프로그래밍 언어가 구동되고 있는 환경
• 이벤트 기반 및 논블로킹 I/O 모델
  이벤트 : 유저의 버튼 클릭이나 네트워크에 리소스를 요청하는 것 등
  논블로킹 : 다음 함수의 실행이 현재 함수의 종료를 기다리지 않음
  블로킹 : 다음 함수의 실행이 현재 함수의 종료 이후에 이루어 지는 것
  I/O model : input을 주면 output을 반환하는 모델
• node modules : node와 함께 번들링 되어있는 모듈, require('')방식으로 사용
  ex) fs, http, url, path
• npm(Node Package Manager) : 세계에서 가장 큰 오픈소스 라이브러리 생태계 중 하나

const fs = require('fs')
const http = require('http')
fs.readFile('./something.json', (err, data) => {
	console.log(data)
})
http.get('http://localhost:5000/api', (ref) => {
	console.log(res)
})

Package.json 리뷰

• npm을 활용하기 위한 정보들이 모여있는 파일뿐만 아니라 프로젝트 전반에 관한 정보들
• run script : cli에서 해당 코드를 실행시킨다
  ex) "start" : "node index.js" 또는 "nodemon index.js"
• dev-dependency : production과 관계없는 개발만을 위한 dependency
  yarn add @babel/core —dev
npm install @babel/core —save-dev —dev 옵션을 줘서 등록
• dependency : 직접 production과 관련있는 dependency
  yarn add react
npm install —save react npm을 쓸때는 —save 옵션을 줘야함
• npm init 을 해주면 package.json

npm install --save nodemon nodemon index.js index.js가 변경되는대로 바로 반영해서 실행

HTTP advanced + Network Tab

• 브라우저에 url 쳤을때 어떤 행동을 하는지 아주 간단하게 순서
  1. 도메인 이름 탐색
  해당 주소가 실제로 어떤 IP를 갖고있는지 DNS(Domain Name System)에 물어봄
  DNS서버는 요청에 대한 응답으로 IP를 돌려줌
  2. 웹 서버(HTTP) 요청
  웹 서버의 라우팅(routing:주소탐색규칙)에 따라 요청 처리
  서버가 요청에 대한 응답으로 자원(resource:HTML/js 파일등)의 형태로 전달
  서버가 보내주는 자원을 브라우저에서 처리
• 서버와 클라이언트가 주로 HTML 등의 문서를 주고받는 데 사용하는 프로토콜
• 주로 TCP/UDP 80번 포트를 사용
• URI : HTTP 요청은 URI를 통해 할 수 있다
  주소창을 통해 하는 요청은 전부 GET Request
• payload : 전송되는 데이터라는 뜻

CORS 리뷰 및 적용

• cross origin에서 리소스(서버자원)을 요청하여 사용한다
• 보안 상의 이유로 브라우저들은 스크랩트 내에서 초기화되는 cross-origin HTTP 요청을 제안함
  개발자들은 브라우저 벤더사들에게 XMLHttpRequest가 cross-domain 요청을 할 수 있도록 요청
  서버가 허용(allow)한 범위 내에서 cross origin 요청 허용
• 서버에서 allow하는 조건들을 다 맞추고 있는가? 사전에 서버에 확인하는 요청

const defaultCorsHeader = {
  'Access-Control-Allow-Origin': '*',
  'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS',
  'Access-Control-Allow-Headers': 'Content-Type, Accept',
  'Access-Control-Max-Age': 10
};

• 모든 도메인(*)을 허용한다
• 메소드는 GET POST PUT DELETE OPTIONS만 허용한다
• 헤더는 content-type과 accept만 쓸수있다
• preflight request는 10초까지 허용한다