02/13 51회차 JavaScript 수업 노트 정리(동기 비동기)

https://cotak.tistory.com/103

[Node.js] 모듈화에 사용되는 module.exports와 exports의 차이

1. 모듈이란?

모듈은 특정한 기능을 하는 함수나 변수들의 집합이다.

코드의 길이를 줄이고, 유지보수를 용이하게 할 수 있다는 장점이 있다.

이러한 모듈을 export하는 두 가지 방법인 module.exports와 exports의 차이점을 알아보자.

 

 

 

 

반드시 package.json에 type : "module"을 추가해준다.

 

 

/* 
  호이스팅이슈
  1.var
  2.head태그안에 선언한 함수
  3.import문- module사용(ES6, 브라우저 지원)

  함수선언
  1)선언형함수
  2)익명함수-콜백함수->나중에 실행시켜줄게
    callback->자바 스크립트는 동기적이다. 순서대로 실행이 된다.
    자바는 비동기적이다. 함수 선언이 뒤에 있어도 함수 호출된다.
  3)대입함수 - 전제조건 : 자스에서는 함수도 객체이다.
    -일급함수 : 파라미터가 함수 const func =()=>{}
    -고차함수 : 리턴이 함수. 리덕스(리액트에서 상태를 관리를 구현한것)를 만드는데 결정적 역할
  4)즉시실행함수
    ES6이전에 호이스팅 해결방법. 괄호두개 앞이 선언 뒤가 호출
*/

 

자바스크립트에서 객체는 일급 객체이다. 함수 또한 객체로 표현하기 때문에 일급 함수도 만족한다.

즉 함수를 변수에 할당할 수도 있고 객체에 추가할 수도 있으며  다른 함수에 인수로 전달하거나 함수에서 함수를 반환할 수도 있다. 참조 값을 쓸 수 있는 곳이라면 어디든 함수도 사용할 수 있다.

 

일급 시민(first class citizen)

 

일급 시민의 조건

1. 변수에 담을 수 있다.

2. 파라미터로 전달할 수 있다.

3. 리턴값으로 전달할 수 있다.

 

일급 객체(first class object)

: 객체를 일급 시민으로 취급한다는 것이다.

 

일급 함수(first class function)

: 함수를 일급 시민으로 취급한다는 것이다.

 

확장프로그램-vscode JavaScript REPL

nodemon으로 mian찍었을때와 같이 결과값이 옆에 바로 출력된다.

 

 

1.카카오맵 폴더 만들기!!

1)npm init -y 로 만들어준다.

2) npm i parcel로 npm parcel번들러를 설치해준다.

 

심심해서 chat GPT한테 물어봄

그렇다고 한다...

 

chat GPT  한국말도 잘하네

 

"동기"와 "비동기"는 프로그래밍에서 중요한 개념입니다.

• 동기 (Synchronous): 동기 코딩은 코드의 실행이 순차적으로 일어나는 것을 의미합니다. 즉, 한 줄의 코드가 실행되고 끝날 때까지 기다리면서, 다음 줄의 코드가 실행됩니다.
• 비동기 (Asynchronous): 비동기 코딩은 코드의 실행이 병렬적으로 일어나는 것을 의미합니다. 즉, 한 줄의 코드가 실행되면서, 다음 줄의 코드도 동시에 실행될 수 있습니다.

예를 들어, 동기 코딩의 경우 요청을 하고 데이터가 도착할 때까지 기다렸다가 다음 코드를 실행합니다. 비동기 코딩의 경우에는 요청을 한 후, 데이터가 도착할 때까지 기다리지 않고 다음 코드를 실행할 수 있습니다. 데이터가 도착하면, 이벤트 핸들러 또는 콜백 함수가 호출된다.

 

자바스크립트는 기본적으로 동적처리이다.

 

콜백 함수(Callback function)은

프로그래밍에서 함수의 특정 동작이 끝난 후, 다른 함수를 호출하는 것을 의미합니다. 즉, 특정 함수가 실행되고 끝난 후에, 다른 함수를 호출하는 것입니다. 이는 비동기 프로그래밍에서 많이 사용됩니다.

예를 들어, 웹 페이지에서 데이터를 가져오는 AJAX 요청을 할 때, 요청이 완료되면 콜백 함수가 호출되어 처리할 수 있습니다. 즉, 요청이 완료되면 데이터를 처리할 수 있는 함수가 정의되고, 요청이 완료되면 해당 함수가 호출됩니다.

콜백 함수는 비동기 프로그래밍에서 중요한 개념입니다. 코드의 실행 순서를 제어하고, 비동기적으로 데이터를 처리할 수 있게 해줍니다.

 

chat GPT가 내가 넣은 예제를 알뜰살뜰하게 분석해줬다.

넘 똑똑하네

google대체할만한듯하다.,...

 

 

자바스크립트에서

Promise는

비동기 작업의 최종 완료 또는 실패를 나타내는 객체입니다. 이는 네트워크 요청이나 파일 I/O 같은 즉시 완료되지 않을 수 있는 작업을 처리하는 방식입니다. Promise는 비동기 작업이 완료되거나 오류가 발생할 때 알림을 받을 수 있는 콜백을 등록하는 방법을 제공합니다.

Promise는 다음 중 하나의 상태에 있을 수 있습니다.

• Pending: 비동기 작업이 아직 완료되지 않았습니다.
• Fulfilled: 비동기 작업이 성공적으로 완료되어 Promise가 resolved라고 합니다.
• Rejected: 비동기 작업이 실패했으며 Promise가 rejected라고 합니다.

resolve라고 되면 잘 문제없이 되었다는 뜻.

 

When a Promise is created, it is given a function called an executor, which is responsible for performing the asynchronous operation. The executor function takes two parameters, resolve and reject, which are used to signal the completion or failure of the operation. For example:

javascriptCopy code

 

const myPromise = new Promise((resolve, reject) => { setTimeout(() => { resolve('The operation completed successfully'); }, 1000); });

Once a Promise is resolved or rejected, its value can no longer change. You can attach callbacks to a Promise using its then and catch methods. The then method is called when the Promise is resolved, and it receives the resolved value as an argument. The catch method is called when the Promise is rejected, and it receives the rejection reason as an argument. For example:

javascriptCopy code

 

myPromise.then((result) => { console.log(result); // logs 'The operation completed successfully' }).catch((error) => { console.error(error); // not called in this example });

Promises provide a convenient way to handle asynchrony in your code, and they play an important role in modern JavaScript development. They are widely used in conjunction with fetch and other APIs that return asynchronous results.

//Promise prototype 활용
let myFirstPromise = new Promise((resolve, reject) => {
  // 우리가 수행한 비동기 작업이 성공한 경우 resolve(...)를 호출하고, 실패한 경우 reject(...)를 호출합니다.
  // 이 예제에서는 setTimeout()을 사용해 비동기 코드를 흉내냅니다.
  // 실제로는 여기서 XHR이나 HTML5 API를 사용할 것입니다.
  setTimeout( function() {
    resolve("성공!")  // 와! 문제 없음!
  }, 250)
})

const goodSearch = () =>{
  //resolve 성공시 콜백, reject함수는 실패시에 콜백
  return new Promise((resolve, reject)=>{  //고차함수-반환으로 함수

    setTimeout(()=>{
        console.log("상품조회")
        resolve();
      },2000)
    });
};

const cart = () => console.log("카트담기");

//goodSearch함수 호출될때 
//콜백에서 cart함수를 호출하면 순서가 보장된다.
goodSearch().then(()=>{
  cart();
});

 

추상화 = 확장

 

babel은 브라우저에 없는 새로운 문법을 추가해주는 트랜스 파일러이다.

브라우저 환경에서 안전하게 자바스크립트를 사용하기위해 사용한다. 트렌스 파일럴한 한 언어로 작성되 소스 코드를 비슷한 수준의 추상화를 가진 다른 언어로 변환하는 것을 의미한다. 컴파일은 한 언어로 작성된 코드를 다른 언어로 변화하는 것이다.

 

/* 
package.json에는 의존관계 라이브러리 등록
(개발자 의존 -D -실제 운영 서버에는  미배포, 배포용)

외부 스크립트 사용 방법
1. commonjs-디폴트(생략되어있음-package.json->npm init -y) 
  const http=requires('http')

2.module
import {,,,} from './XXX/js'

리액트 수업 공통사항
authLogic.js-리액트 수업 활용

export - 여러개 가능 {}
export default - 하나만 가능

호이스팅 대상
1.var
2.함수선언
3.import문
세가지는 가장 먼저 실행된다. 먼저 읽는다. 먼저 스캔된다.
이걸 미루는 예약어-defer
-다운로드가 끝나고 브라우저(태그를 통역해줌)가 DOM Tree그린다. 그때까지 기다려.
->DOM Tree가 완성되면 DOM API를 사용할 수 있다.
->document.querySelector/ document.querySelectot(배열)
->브라우저는 같은 이름이 두 개 이상이면 자동으로 배열 전환이 된다.
checkbox name=hobby 두개이상이면 배열된다.
배열-데이터셋과 직결-json

누가제공?-서버가 제공한다.
유투브 API
OpenWheather
HackerNews
이러한 정보를 내려 받으려면 시간이 걸린다.-비동기 처리 발생-지연발생
따로따로 처리하다가 먼저 처리가 되면 ->then(()=>{})



const temp = JSON.stringify(response.json())
const jsonDoc=JSON.parse(temp) 문자열을 배열로 바꿈

mime type
text/javascript ---->require/ import 절대 안됨.
text/modoule--->import
text/common--->require
서로 호환되지 않는다.

반복해서 수련한다.


*/

 

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

실행은 동기로 된다.

그렇지만 결과는 비동기로 나온다.

 

비동기-순서가 맞지않는것

동기-서로 맞춘다.

 

비동기는 기다려주지않고 뒤죽박죽 먼저되는걸 먼저하는....

그러나 업무적으로는 동기로 처리할일이 더 많다.