Java Script 중급 2

박새롬·2023년 10월 28일

1. import / export를 이용한 파일간 모듈식 개발

자바스크립트 코드가 길어지면 다른 파일로 쪼개는게 좋은 관습이다.
다른파일로 쪼개놓고 그걸 첨부해서 사용하는 방법을 알아보자,
ES6 Import/export를 쓰면 내가 원하는 변수,함수,class만 다른파일로 보낼 수 있다.
(참고) import 해온 변수, 함수는 사용은 가능하지만 수정은 불가능하다. read-only 이다.▲HTML 파일 안에서 ES6 import 문법을 쓰시려면 저렇게 script 태그 안에 type을 module로 설정해줘야 한다.

1-1. export default / import 를 쓰면

다른 파일에 있는 변수 등을 가져다 쓸 수 있다.
변수 함수 class 전부 가능하다.
js 파일에서는 특정 변수를 다른 파일에서 이용 할 수 있게 내보내고 싶으면
export default 변수명 이라고 적으면 된다.

그리고 그 변수를 가져다 쓰고싶으면
다른 파일에서 import 어쩌구 from '경로' 해주면된다.
(import시 어쩌구라는 변수명은 아무렇게나 작명이 가능하다.)

1-2. 여러개를 export 할 수도 있다.

js파일에서 변수를 여러개 만들고 그걸 다 내보내고 싶으면
export라는 키워드를 여러번 사용 하면 된다.근데 export라고 쓸 땐
export{변수명1,변수명2...}이렇게 담아주어야 한다.
export 키워드로 내보낸 것들을 import 할 땐
import {변수명1, 변수명2 ...} from '경로' 이렇게 가져와야한다.

export default와 차이점은..

export default는 한번만 쓸 수 있고 import시엔 변수명을 새롭게 작명가능하다

export는 {변수명1, 변수명2 ...} 이렇게 담아야하고 import 할 때도 정확히 변수명을 써줘야한다
라는 특징이 있다.

1-3. 그럼 export와 export default 동시에 사용하면?

이렇게 import 해오면 된다.
export default 한건 맨 왼쪽에 써주면 되고
그 다음부터 이제 {} 중괄호 안에 export 했던 변수들을 적어주면 된다.

2. 동기/비동기처리와 콜백함수

2-1. 자바스크립트는 항상 동기식처리 (synchronous)

동기식 처리가 뭐냐면 한번에 코드 한줄씩 차례차례 실행된다는 소리이다.
자바스크립트를 실행하는 웹브라우저는 stack이라는 코드 실행 공간이 있는데
거기서 코드를 한줄한줄 차례로 실행한다.
이걸 전문용어로 동기적이다~(synchronous)라고한다.
거의 대부분의 프로그래밍 언어들은 이런 특징을 가지고 있다.

2-2. 비동기처리(asynchoronous)라는것도 가능하다.

자바스크립트는 보통 프래그래밍 언어들과 생각하는 방식자체가 다르다.
자바스크립트 실행머신인 웹브라우저는
특수한 코드들을 발견하면 약간 제쳐두고 다른코드부터 실행 하려고한다.

이러한 처리방식을 바로 비동기(asynchronous)라고한다.
실행이 오래걸리는 그런코드들은 잠깐 대기실에 제쳐두고,
실행이 바로바로 가능한 코드들부터 처리하는 방식을 뜻한다.
이건 자바스크립트 언어 자체의 기능이아니라
자바스크립트 실행을 도와주는 웹브라우저 덕분에 가능한 것이다.

잠깐 코드를 제쳐두는 대기실
실행을 미루고 옆으로 잠깐 제껴둘 수 있는 코드들은 미리 정해져있다.
setTimeouet,addEventListener,ajax관련 함수들이 바로 그것이다.
setTimeouet,addEventListener,ajax관련 함수들은 1초대기,클릭대기 이런걸 하는 코드들인데
이런코드들의 특징은 읽는 시점과 동작시점이 차이가있다.
자바스크립트를 실행하고, 해석하는 크롬은 이런 특별한 코드들을만나면
1.참깐 대기실에 제껴두고 2.준비가 완료되면 다시실행시킨다.

2-3. 콜백함수를 이용한 순차적 실행

자바스크립트는 비동기상황 등에서 코드를 순차적으로 실행하고 싶을 때 콜백함수를 적극 활용한다.
이런식으로 실행시킬 수 있게 만들어놓으면 순차적으로 실행가능하다.
다만 순차적으로 실행하려고 콜백함수를 여러개 사용하면 단점이 있다.
코드가 옆으로 길어진다는 것이다.

콜백함수란?
함수안에 들어가는 함수를 전부 콜백함수라고 말한다.

3. Promise

3-1. promise 생김새

이제 프로미스라는 변수에다가 then()을 붙여서 실행 가능하다

프로미스 안의 코드가 실행이 완료가 되었을때 then()함수 내의 코드를 실행시켜준다.
코드가 실행이 실패했을 경우엔 catch()함수 내의 코드를 실행시켜준다.

이런식으로 코드를 차례로 실행할 수 있게 도와주는 디자인 패턴이 바로 Promise이다.

Promise가 콜백함수보다 좋다고 하는 이유는 두개가 있다.
1. 콜백함수와는 다르게 순차적으로 뭔가를 실행 할 때 코드가 옆으로 길어지지 않는다.
2. 콜백함수는 불가능한 '실패시 특정 코드를 실행해주세요~'라고 코드를 짤 수 있다.(catch)

3-2. promise의 정확한 뜻과 사용법

성공하면 then(),실패하면 catch()를 실행해주세요~
라는 코드를 짤 수 있게 도와주는게 바로 promise이다.
그러기위해서 promise는 성공과 실패 상황을 알려줘야한다.
promise를 쉽게 정의하자면 성공 & 실패 판정 기계이다.

promise 기계 안에는 아무거나 다 집어넣을 수 있다.1+1 같은 어려운 연산이 끝나면 성공판정 내려주세요~
페이지 내의 <버튼>을 누르면 성공으로 판정해주세요~
Ajax 요청으로 서버의 데이터를 가져오면 성공판정,에러나면 실패판정해주세요~
아무거나 다 집어넣을 수 있다.

Promise 안에서 성공/실패를 판정하는 방법을 알아보자.
성공()이라고 첫째 파라미터를 함수형태로 작성하면 성공판정이 되고,
실패()라고 둘째 파라미터를 함수형태로 작성하면 실패판정이 된다.
위의 코드는 뮤조건 성공()을 실행하게 되어있으니 무조건 성공을 판정내리면
그 후엔 then()코드가 실행이 될 것이다.

3-2. promise의 몇가지 특징

일단 new Promise()로 생성된 변수를 콘솔창에 출력해보면 현재 상태를 알 수 있다.
성공/실패 판정전에는 < pending > 이라고 나오며
성공 후엔 < resolved >
실패 후엔 < rejected > 이런 식으로 나온다
이렇게 프로미스 오브젝트들은 3개 상태가 있다.
그리고 성공을 실패나 대기상태로 다시 되돌릴 순 없다.
Promise는 동기를 비동기로 만들어주는 코드가 아니다.
promise는 비동기적 실행과 전혀 상관이없다
그냥 코딩을 예쁘게 할 수 있는 일종의 디자인패턴일 뿐이다.
예를들면 promise 안에 10초 걸리는 어려운 연산을 시키면 10초동안 브라우저가 멈춘다.
10초 걸리는 연산을 해결될 때까지 대기실에 제껴두지않는다.

(원래 자바스크립트는 평상시엔 동기적으로 실행이 되며 비동기 실행을 지원하는 특수한 함수들 덕분에 가끔 비동기적 실행이 될 뿐이다.)

3-2. promise 예시

4. async/await

Promise가 어렵다면 그보다 훨씬 쉽게 쓸 수 있는 ES8 문법이 있다.
async, await이라는 키워드인데 각각 Promise와 then을 매우 쉽게 만들어주는 문법이다.

4-1. async 키워드를 쓰면 Promise 오브젝트가 저절로 생성된다.

async 키워드를 사용하면 이 함수 자체가 Promise가 되어버린다.
그래서 이 함수를 실행할 때 뒤에 then을 붙일 수 있다.
이 키워드는 function 선언 앞에만 붙일 수 있다.
(함수를 실행하면 그자리에 Promise 인스턴스(new Promise()로만든 오브젝트)가 남는다.)이제 Promise 만들 때 했던거 처럼 then을 붙여서 더하기() 함수가 성공한 뒤에 뭔가를 실행시킬 수 있다.

함수안에서 연산한 결과를 then안에서 사용하고 싶다면
이렇게 하면된다.
return 오른쪽에 결과를 적어주면 된다. 그럼 then함수 까지 전해진다.

4-2. then()함수가 귀찮다면 await 키워드를 사용하자.

async 키워드를 쓴 함수 안에서는 await을 사용가능하다.
await은 그냥 프로미스.then() 대체품으로 생각하면 된다.
하지만 then보다 훨씬 문법이 간단하다.

어떤 function 안에서 어려운 연산을 실행한 뒤에 성공/실패를 판정해주는 promise를 만들어보자.

(혹은 Promise 만들기 귀찮으면 어려운연산을 함수로 만든 후 async를 쓰면된다.)
그럼 이제 어려운연산.then()이렇게 성공시 특정 코드를 실행할 수 있다.
근데 then()이게 너무 복잡해서 보기 싫으면
await이라는 키워드를 사용하면된다.
어려운연산.then()과 매우 유사한 문법이다.
정확한 뜻은 어려운연산 Promise를 기다린 다음에 완료되면 결과를 변수에 담아주세요 이다.