저번주보다는 한결 괜찮았던 일주일이였다. 저번주에 갑자기 난이도가 올라간 내용을 배우게 되니 이번에는 얼마나 더 어려운 내용을 배울지 걱정했지만 다행이였다. 여태 배웠던 부분이랑 조금 다른 부분인 네트워크를 배우면서 어떻게 구축되어 있고, 정보를 받아오고 요청하는지 공부해보니 신기하고 재밌었다. 하지만 아직까지는 정확하게 어떤 방식으로 이 내용들을 사용할지는 잘 모르겠다. 개념적인 부분들을 더 많이 공부하는데 실습으로 사용해보니 훨씬 더 간단했고, 이론적인 부분 보다는 실전으로 어떤 식으로 사용하는지 많이 알려줬으면 좋겠지만 그렇지 않다는 걸 깨달았다. 스스로 알아가야 한다는 것을😂
이번 주는 페어 분과 함께 보내는 시간이 많이 있었음에도 불구하고 페어 분과 함께 공부한게 뭐가 없다. 페어시간이 많이 남게 되고 아예 같이 한 게 없던 시간도 있었는데 스터디원들과 함께 공부하니 더 효율적이였다. 이것저것 실습도 많이 해보고 그래도 마음 맞는 사람들과 공부하니까 편하고 좋았다.
7주차 배운 내용 중 정리하고 싶은 내용
[JS/Node] 비동기
-
동기와 비동기?
JavaScript는 비동기적 -> hoisting이 된 이후부터 코드가 작성된 순서대로 실행
-
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(보류) -> fulfilled(이행) or rejected(거부)
- .then은 값을 바로 전달할 수도 있고, 리턴으로 Promise를 전달해도 됨
- .catch로 error를 핸들링 가능 -> 가장 마지막에 작성하면 좋음
-
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) 지정
| 요청 | 적절 메소드 |
|---|---|
| 조회(Read) | GET |
| 추가(Create) | POST |
| 갱신(Update) | PUT or PATCH |
| 삭제(Delete) | DELETE |
URL
네트워크 상에서 웹페이지, 이미지, 동영상 등의 파일이 위치한 정보를 나타냄.
http://www.google.com:86/search?q=Javascript
- scheme : 통신방식(프로토콜) 결정 => 일반적 웹브라우저는 http(s)
- hosts : 웹서버 이름, 도메인, IP사용하여 주소 나타냄
- url-path : 웹서버에서 지정한 루트 시작으로 위치한 경로, 파일명
- query : 웹서버에 보내는 추가적 질문-
IP: 인터넷상에서 사용하는 주소체계(IPv4 => IPv6) -
Port: IP주소가 가르키는 PC에 접속할 수 있는 통로. 이미 사용 중인 포트 중복 사용 불가
만약 다른 프로그램에서 번호 사용 시 다른 포트 번호로 실행 [ 22:SSH 80:HTTP 443:HTTPS ] -
Domain: 일종의 IP주소를 대신한 이름으로 IP가 도로명 주소 같은거라면 Domain은 건물이름. 모든 IP주소가 Domain을 갖지는 않음 -
DNS: 호스트의 도메인 이름을 IP주소로 변환하거나 반대의 경우를 수행할 수 있도록 개발 된 데이터베이스시스템
SSR / CSR
SSR : 서버에서 웹페이지를 렌더링. 서버에서 웹페이지를 브라우저로 보내기 전에 서버에서 완전히 렌더링
브라우저가 서버의 URI로 GET요청 => 서버는 정해진 웹페이지 파일을 브라우저로 전송 => 서버의 웹페이지가 브라우저에 도착하면 완전히 렌더링
웹페이지의 내용에 데이터베이스의 데이터가 필요하면?
* 서버는 데이터베이스의 데이터를 불러온 다음 웹페이지를 완전히 렌더링 된 페이지를 변환 후 브라우저에 응답보냄
사용자가 브라우저의 다른 경로로 이동하면?
* 브라우저가 다른 경로로 이동할 때 마다 서버는 작업을 다시 수행
CSR : SSR의 반대. 클라이언트에서 웹페이지를 렌더링. AJAX 사용
브라우저의 요청을 서버로 보냄 => 웹페이지의 골격이 될 단일 페이지를 클라이언트에 보냄 (웹페이지와 JavaScript파일도 같이 보냄) => 클라이언트가 웹페이지를 받으면 완전히 렌더링 된 페이지로 바꿈
데이터베이스에 저장된 데이터면?
* 브라우저는 데이터베이스에 저장된 데이터를 가져와서 웹페이지에 렌더링 (API사용-API요청으로 해소)
브라우저가 다른 경로로 이동하면?
* 서버가 웹페이지를 다시 보내지는 않음. 브라우저가 요청한 경로에 따라 페이지를 다시 렌더링. 이때 보이는 웹페이지의 파일은 맨 처음 서버로부터 전달 받은 웹페이지 파일
[차이점은 페이지가 렌더링 되는 위치. 브라우저는 사용자가 다른 경로를 요청할 때 마다 페이지를 새로고침 하지 않음 => 동적으로 라우팅 관리]
* HTTP message : 서버와 클라이언트 사이에서 데이터 교환되는 방식 *
요청(Requests) => 클라이언트가 서버에 보내는 메세지 / 응답(Responses)CORS
- 클라이언트와 서버가 서로 다른 origin에 있는 경우 대비
- 서버쪽에서 클라이언트를 대상으로 리소스 허용 여부를 결정
- 같은 origin에서 fetch시도 하는 경우 CORS 문제 발생하지 않음
http://velog.io:3000/@hjin9902/코딩 7주차
- 프로토콜, 호스트(domain), 포트번호, URL pathname으로 구성
- origin(출처) 구분하는 기준 : 프로토콜, 호스트(domain), 포트번호preflight request
- 실질적인 요청 전, OPTIONS 메서드를 통해 발생
- 실제 요청이 안전한지 서버가 미리 파악할 수 있도록 하는 수단
- 모든 cross origin 요청이 preflight request를 발생하지 않음
