일단 하나를 해보자

nodejs 는 

chrome v8 javascrpit엔진으로 빌드된 javascript런타임이다.

( "자바스크립트 런타임"이란 "자바스크립트 코드를 실행하는 환경"을 말한다. 

자바스크립트는 일반적으로 브라우저에서 실행된다. 

다른 환경에서도 실행될 수 있지만 이를 위해서는 자바스크립트 엔진을 다른 프로그램에 내장하여 자바스크립트 코드를 실행할 수 있는 환경을 만들어야한다. 자바스크립트 엔진과 함께 필요한 라이브러리, 모듈, api 등을 포함하는 것이 자바스크립트 런타임이다. 

)

브라우저에서 실행되는 자바스크립트와 달리 nodejs 는 파일 시스템,네트워크 등과 같은

서버 사이드 기능을 제공하여, 서버 사이드 웹 개발을 위한 환경을 제공한다. 

이를 통해 *비동기식 I/O, 이벤트 기반 처리 모델 등을 활용해 높은 성능의 웹 애플리케이션을 만들 수 있다.

또한 노드js는 npm이라는 패키지 매니저를 제공한다. node package manager

이를 통해 라이브러리, 모듀르 프레임워크 등의 다양한 패키지를 쉽게 설치하고 관리할 수 있다.

(I/O(Input/Output)는 컴퓨터에서 데이터를 읽고 쓰는 작업을 말합니다. 이때, 데이터를 읽고 쓰는 과정에서 CPU는 다른 작업을 수행할 수 없는 차단(blocking) 상태에 빠지게 됩니다. 이러한 문제를 해결하기 위해 비동기식 I/O(Asynchronous I/O)가 등장했습니다.)

+

express는 

노드Js를 위한 웹 프레임워크이다. 간결하고 유연한 구조를 가지고 있는 것이 특징

노드js의 http 모듈을 기반으로하며, 

http 요청

라우팅 및 미들웨어 처리를 쉽게 할 수 있도록 한다.

다음과 같은 기능을 제공한다. 

1. 라우팅: HTTP 요청의 URL을 해당하는 처리기(콜백 함수)에 매핑합니다. 이를 통해 사용자는 특정 URL에 대한 요청에 대한 적절한 응답을 반환할 수 있습니다.
2. 미들웨어: 요청을 처리하기 전에 실행되는 작업을 구성할 수 있습니다. 예를 들어 요청 헤더의 유효성을 검사하거나 로깅을 수행하는 등의 작업을 수행할 수 있습니다. 또한 미들웨어를 사용하여 사용자 정의 라우팅 및 오류 처리 논리를 구현할 수도 있습니다.
3. HTTP 요청 및 응답: Express는 HTTP 요청 및 응답을 쉽게 처리할 수 있는 기능을 제공합니다. 예를 들어 요청 본문을 구문 분석하거나 특정 상태 코드로 응답을 반환할 수 있습니다.
4. 뷰 엔진: Express는 다양한 뷰 엔진을 지원합니다. 이를 통해 사용자는 HTML 및 CSS와 같은 마크업 언어로 페이지를 렌더링할 수 있습니다. 대표적인 뷰 엔진으로는 Pug, EJS, Handlebars 등이 있습니다.

동기처리

순차적으로 실행됨을 의미한다.

요청하면 응답할 때까지 다른 걸 실행하지 않고 기다린다. 

(요청과 응답이 동시에 이뤄진다는 뜻.

주문을 예시로 많이 드는데 떡볶이를 주문하고 떡볶이가 나올 때까지 다른 손님들이 순서대로 줄이 서있다고 상상하면 된다.)

비동기 처리 

동시다발적으로 병렬적으로 실행됨을 의미한다.

요청과 응답이 함께 이뤄지지 않는다.

요청하고 응답을 기다리지 않고 다른 요청들을 한다.

값을 받아오고 사용할 때 

값이 받아오기도 전에 함수가 실행되는 걸 막기 위해서

동기처리로 해결한다. 

그럼 자바스크립트 언어는 동기적 언어인가?

비동기적 언어라고 생각하기 쉬운데

(왜냐면 사실 내가 코드짤 때 병렬적으로 이뤄지는 함수를 동기처리, 순차적으로 실행되게 바꾸게 되니까...  비동기적 언어인가 싶었음 )

자바스크립트는 동기적 언어이다.

하지만! 

자바스크립트를 브라우저에서 구동되고 이때 비동기적으로 이뤄진다. 

Event Loop를 포함해 Browser의 구성요소 역할을 이해했다면, 자바스크립트 언어 자체가 비동기 특성을 제공하는게 아니라 Browser의 구성 요소들이 제공한다는 사실을 이해할 수 있다.

...

그러면 우리가 만든 프로그램의 코드를 실행하라고 JS엔진에게 명령하는 것은 누구일까? 실제로 JS엔진은 고립되어서 수행되는 것이 아니고 호스팅 환경 내에서 수행된다. 대부분의 개발자들에게 이것은 웹 브라우저 혹은 Node.js일 것이다.  이러한 모든 환경에서 적용되는 최대공약수는 호스팅 환경에 내장된 메커니즘인 이벤트루프이다.. 이것은 시간의 흐름에 따라 코드의 수행을 처리하며 그 때마다 JS엔진을 작동시키게된다. 따라서 이벤트루프라는 호스팅 환경 내의 메커니즘으로 인해, JS엔진에게 비동기적 수행을 명령하게 되고, JS가 비동기적으로 실행되게 되는 것이다.


출처: https://hazel-developer.tistory.com/179#recentComments

async await 쓰면

비동기처리를 마치 동기처리처럼 보이게 할 수 있다.

await  키워드는 async 키워드가 붙어있는 함수 내부에서만 사용할 수 있으며 비동기 함수가 리턴하는 Promise로 부터 결과값을 추출해줍니다. 즉, await 키워드를 사용하면 일반 비동기 처리처럼 바로 실행이 다음 라인으로 넘어가는 것이 아니라 결과값을 얻을 수 있을 때까지 기다려줍니다. 따라서 일반적인 동기 코드 처리와 동일한 흐름으로 (함수 호출 후 결과값을 변수에 할당하는 식으로) 코드를 작성할 수 있으며, 따라서 코드를 읽기도 한결 수월해집니다.
출처: https://www.daleseo.com/js-async-async-await/

찾아 읽다 보니 

JS를 비동기적으로 실행하게 해주는 대표적인 방식으로 Callback / Promise / Async & Await 가 있다.

async await를 쓰면 비동기인데 동기적으로 처리한다~라고 이해하면 되겠다.

callback

promise

async/await의 목적은 프로미스의 이용을 쉽게하는 것입니다.
출처: https://engineering.huiseoul.com/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8%EB%8A%94-%EC%96%B4%EB%96%BB%EA%B2%8C-%EC%9E%91%EB%8F%99%ED%95%98%EB%8A%94%EA%B0%80-%EC%9D%B4%EB%B2%A4%ED%8A%B8-%EB%A3%A8%ED%94%84%EC%99%80-%EB%B9%84%EB%8F%99%EA%B8%B0-%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%B0%8D%EC%9D%98-%EB%B6%80%EC%83%81-async-await%EC%9D%84-%EC%9D%B4%EC%9A%A9%ED%95%9C-%EC%BD%94%EB%94%A9-%ED%8C%81-%EB%8B%A4%EC%84%AF-%EA%B0%80%EC%A7%80-df65ffb4e7e

이거 다시 읽어보자..일단 자고 내일 마저 수정해야지..

promise 와 callback차이도 봐야겠엉

axios는

지원하는 브라우저가 더 많고 

에러핸들링이 좋고

자동으로 데이터가 json형태로 되어 넘어간다

Automatic JSON data transformation

As we saw earlier, Axios automatically stringifies the data when sending requests (though you can override the default behavior and define a different transformation mechanism). When using fetch(), however, you’d have to do it manually.

Compare:

// axios
axios.get('https://api.github.com/orgs/axios')
  .then(response => {
    console.log(response.data);
  }, error => {
    console.log(error);
  });

// fetch()
fetch('https://api.github.com/orgs/axios')
  .then(response => response.json())    // one extra step
  .then(data => {
    console.log(data) 
  })
  .catch(error => console.error(error));

fetch는 직접 json화를 해줘야하지만

지원하는 브라우저 문제 등을 충분히  해결할 수 있다.

결론

Axios는 대부분의 HTTP통신 요구사항을 위해 컴팩트 패키지로 사용하기 쉬운 API를 제공한다.

하지만 fetch()메소드를 사용해서도 Axios 라이브러리의 주요기능을 완벽하게 재현할 수 있다.

는 글

https://blog.logrocket.com/axios-vs-fetch-best-http-requests/

https://pridiot.tistory.com/38?category=875371 

0816 수업 빠져서 물어물어 공부

다들 잘 설명해주심..

https://hianna.tistory.com/368

https://wikidocs.net/212

https://velog.io/@max9106/Java-%EB%B0%98%EB%B3%B5%EB%AC%B8-for-while-ffk4a7p2a2

https://mingnol2.tistory.com/86

이건 동기 언니가 알려준 사이트~

https://ko.javascript.info/

http://sinbiweb.co.kr/web/home.php?go=item&sol_num=4 

이것두.. 웹디자인 참고용으로 좋다고 알려줌