es6 모듈 사용하기
import
export 키워드로 내보내진 변수, 함수 등등을 불러올 수 있는 키워드 입니다.
사용법
module-name 내에 export default로 내보내진 것을 가져옵니다.
import defaultExport from "module-name";
module-name 내에서 export 된 모든 것을 모두 가져옵니다. as이후 이름은 중복되지만 않으면 자유롭게 정할 수 있습니다.
import * as allItems from "module-name";
그러나 위의 방식은, 전부 불러오는 것 입니다.
나중에 가면, 다른 외부 라이브러리를 쓸때, 하나의 번들로 합치는데, 쓰지도 않은 함수나 변수까지 들어와서 불편해 집니다.ㅠ
따라서 특정값만 가져오고 싶으면 어떻게 해야 할까요??
특정값만 가져오기
module-name 내에서 export 된 것 중에 특정 값만 가져옵니다.
이렇게 필요한것만 import할 수 있습니다import {loadItem} from "module-name"; //loadItem 만 "module.name" 에서 가져온다.
module-name 내에서 export 된 것 중에 특정 값만 이름을 바꿔서 가져옵니다
import{ loadItem as loadSomething } from "module-name"; //loadItem을 가져오는데, //loadSomthing으로 이름을 바꿔서 "module.name" 에서 가져온다.
export default 된 것과 개별 export 된 것을 한번에 가져올 수도 있다.
import defaultFunction,{ loadItem } from "module-name";
쓰면 좋은점!
스크립트의 의존성을 훨씬 간편하게 관리할수있다.
=>ex)사용하지 않은 스크립트들을 편하게 지울 수 있다.
각 js별로 사용되는 모듈을 명시적으로 import 해오기 때문에
사용되거나 사용되지 않는 스크립트를 추적할 수 있습니다
script 태그로 로딩하는 경우 불러오는 순서가 중요하지만,
import로불러오는 경우 순서에 신경 안써도 됩니다!
비동기 다루기
js 언어는 싱글쓰레드로 돌아감
많은 작업들이 비동기로 돌아간다....!!
그래서 비동기를 잘 알아야한다!
비동기 처리란 무엇일까요?
특정 코드의 연산이 끝날 때까지
코드의 실행을 멈추지 않고
다음 코드를 먼저 실행하는 자바스크립트의 특성을 이야기 합니다
ex) 함수 a=10초 b=10초 c=10초
총 30초가 걸리는데, 쓰레드가 한개라면 a가 처리되는 동안 쓰레드를 못쓴다.
그러나 비동기로 연결하면 작업스케줄러에다가 등록을하고 메인 스레드는 다른작업을 할 수 있다.!
싱글스레드의 방식을 사용하기 때문에 필요하다
예시)
addEventListener함수가 첫번째 예시다
비동기적이 아닌, 무한루프를 돌고있다가, 클릭을하면 처리를하면
효율이 안좋다.
따라서 비동기적으로 클릭이 됫을때만 호출이되어 실행이 된다!
두 번째 인자로 넘겨진 함수는 바로 실행되지 않고,
이벤트 리스너가 정의한 이벤트가 발생할 때 실행이된다
두 번째 예시 setTimeout과 setInterval
첫 번째 인자로 넘겨진 함수는 바로 실행되지 않고,!!(비동기)
setTimeout 혹은 setTimeout의 시간만큼 지난 후에 실행됩니다.
예시!
callback
조건을 등록해두고, 그조건이 실행이되면 !! 실행되는 함수이다. - 'Call back' 다시 불러줘!
아래 코드를 살펴보면, 그냥봤을때, work()함수가 실행되면서, 작업시작->작업중->작업종료의 프로세스로 생각하기 쉽다. 하지만 결과는
<!DOCTYPE html>
<html lang="en">
<head>
<title>CallBackTest</title>
</head>
<body>
<script>
function work(){
console.log('작업시작')
setTimeout(function(){
console.log('작업 중...')
},0)
console.log('작업 종료')
}
work() // settimout에 0을넣어도 워크함수가 실행이 된다음 실행이 된다,
</script>
</body>
</html>
실제 동작은 이렇게 된다.
이유는 위에 나온 예시로써, 첫 번째 인자로 넘겨진 함수는 바로 실행되지 않고...!!(비동기 call back!)
setTimeout 혹은 setTimeout의 시간만큼 지난 후에 실행됩니다.
읽기 불편해용... 동기적으로 쓰면안될까요?
=>
동기 방식으로 사용하게 되면 요청 후 응답이 오기 전까지 브라우저가 굳어버린다.
만약 api 조회에 10초가 걸린다면 10초간 브라우저가 먹통이 될 것입니다.
따라서 비동기방식은 필수!
그러나 계속해서 비동기적으로 진행하려면, callback 함수를 남발 하게 될수도 있다.
ex)서버에서 데이터를 받아와 화면에 표시하기까지 인코딩, 사용자 인증 등을 처리하는데 이것을 비동기적으로 사용한다면....
그렇게 callback을 남발하다보면...
callback 지옥에 빠질 수 있다.
ㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠ
그래서나온 promise와 async를 알아보겠다.
Promise
Promise는 비동기 작업을 제어하기 위해 나온 개념으로,
callback hell에서 어느정도 벗어날 수 있게 해줍니다.
Promise 만들기
const promise = new Promise((resolve,reject)=>{ //promise 내부에서 비동기 상황이 종료될때, resolve 함수 호출 //promise 내부에서 오류 상황일 때 reject 함수 호출 })
Promise에서는 then을 이용해 비동기 작업 이후 실행할 작업을 지정합니다.
function asyncPromiseWork(){ return new Promis((resolve, reject) =>{ return resolve('complete') }) } // then의 result에는 resolve를 호출하며 넘긴 complete가 있음 asyncPromiseWork().then(result=>console.log(result))
이렇게 promise로 정의된 작업끼리는 연결할 수 있으며(체이닝)이를 통해 코드의 depth가 크게 증가지 않는 효과가 있습니다.
promise에 익숙해지셨나요?
async await를 만날 준비가 되었습니다!
promise가 callback depth를 1단계로
줄여주긴 하지만, 여전히 불편한 것은 사실입니다.
여기에 async, await를 이용하면 여러분의 promise를 동기코드처럼 보이게 짤수 있습니다. 실행은 비동기!
async 키워드 함수가 붙은 함수는 실행 결과를 promise로 감쌉니다.
일반적인 hello
function run(){ return 'hello' } cosole.log(run())//hello
async await
async function asyncrun(){ return 'hello' } cosole.log(ayncrun()) //promise가 나옴! asyncRun().then((message)=>console.log(message)) //hello
마치며
새로 알게 된(해본) 것
- 모듈과 비동기처리(callback,promise, async await) 실제사용
- callback과 promise async의 관계
느낀 것
- todolist를 모듈로 나누고, promise 및 async await를 사용하여 비동기 해봤는데, 누군가 시켜서 한번 처음부터 혼자 스스로짜봐라 그러면 못할것 같다. 연습이 필요하고 내 몸에 체화시켜 내것으로 만들어야 겠다는 생각과 함께..끝!
