[DAY 15] VanillaJS를 통한 자바스크립트 기본 역량 강화 I (4)

송히·2023년 10월 9일

TIL

[데브코스 프론트엔드] TIL & MIL & 회고

목록 보기

9/27

Today I Learn📖

Module (강의)

비동기 (callback) (강의)

ES6 Module

웹팩, 번들러 없이 사용 가능함
-> html에서 첫 번째로 불러오는 script에는 type="module" 넣어줘야 함
(차피 html의 script로 불러오는 애는 걔밖에 없을 테니까.,, 처음만 넣는 건 당연한 것)
장점
1. 각 JS별로 사용되는 모듈을 명시적으로 import 해와서 스크립트를 쉽게 추적 가능 (스크립트 의존성 관리 쉬움)
2. import로 불러오는 경우는 순서 무관
3. script로 불러오는 것과 다르게 전역오염이 일어나지 않음
사용 조건
1. 웹 서버 필요 (파일 시스템에서는 동작 안 함)
2. from 이후 까먹지 않고 .js 붙여야함

import: export로 내보내진 변수, 함수 등을 불러올 수 있는 키워드
- export default 된 것을 통으로 꺼내오면 {} 없이 사용, 개별적으로 export된 것들을 가져오면 {}안에 가져올 것들 적어서 사용
  -> 두 개 섞어서 사용도 가능
- 별도의 모듈 바인딩 없이 불러오기만 하는 것도 가능 (불러오는 것만으로도 효과가 있는 는스크립트의 경우)
- as [원하는 변수명]로 module-name 내에서 export된 것중에 특정 값만 이름을 바꿔 가져옴
- *로 module-name 내에서 export된 모든 것을 가져옴 (as 이후 이름은 중복되지만 않으면 자유롭게 정해 사용)
```
import loadFunction, { loadItem } from "module-name"; // 섞어 쓰기
import "module-name"; // 별도의 모듈 바인딩 없이 불러오기
import { loadItem as loadSometing } from "module-name"; // 변수명 바꾸기
import * as allItems from "module-name"; // 모두 가져오기
```
export: 개별적으로 내보내고 싶을 때 사용, 각 변수, 함수, 클래스 앞에 적음
-> import할 때 {} 안에 각 이름 적어야함
export default: 한 파일(=모듈) 당 하나만 사용 가능 (해당 모듈의 기본 값이 됨)
-> 주로 하나의 컴포넌트를 내보낼 때 사용됨 (하나의 파일에 하나의 컴포넌트가 권장되니까~ 그래서 이름도 주로 파일명 = 컴포넌트명)

document.write(): ()안을 화면에 출력함

window.alert(): ()안을 alert으로 출력함

$선택자.innerHTML = "": ""안을 선택자 안에 출력함

비동기 처리

JS는 싱글 쓰레드여서 많은 작업들이 async(비동기)로 이루어짐
=> sync(동기)방식은 요청 후 응답이 오기 전까지 브라우저가 먹통됨 (사용자 경험 나쁨)

비동기 처리: 특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지않고 다음 코드를 먼저 실행하는 자바스크립트의 특성

ex) 아래는 비동기의 예시

addEventListener("click", onButtonClick) // 두번째 인자 함수는 바로 실행되지 않고 선언된 이벤트가 발생할 때 실행됨

--- 

setTimeout (console. log ('work!'), 1000) // 1초 뒤에 1번 실행
setInterval (console. log ('work!'), 5000) // 5초마다 실행
console. log ("work process")

// 비동기로 실행하면
   1. "work process" 출력됨
   2. 1초 뒤 "work!" 출력됨
   3. 5초마다 "work!" 출력됨

// 동기로 실행하면 순서대로 실행되니까
   1. 1초동안 멈춰있다가 "work!" 출력됨
   2. 5초마다 동작해야하니 밑으로 못 내려감

---

XMLHttpRequest(XHR) // 화면의 새로고침 없이 서버에서 데이터 받아오기 가능 (잘 안 씀^^...)

function request (url, successCallback, failCallback) {
  const xhr = new XMLHttpRequest()
  xhr.addEventListener ("load", (e) => {
    if (xhr.readyState === 4) {
      if (xhr.status === 200) {
        successCallback(JSON.parse (xhr .responseText))
      } else failCallback(xhr.statusText);
  })
  xhr.addEventListener('error', (e) => failCallback(xhr.statusText))

  xhr.open('GET', url)
  xhr.send()
}

XMLHttpRequest을 의존적으로 여러 번 사용하는 경우 (ex. 1 실행 성공 ➡️ 1-1 불러옴 ➡️ 1-1 렌더링 ➡️ ...)
-> 일반적인 callback 패턴 사용하면 콜백이 중첩됨 (호출마다 depth 증가해 depth가 깊어짐 => callback hell ㅠㅠ)
callback: 전통적인 비동기 처리 방식

API: "Application Programming Interface"의 약어, 프로그램이 서로 상호 작용하기 위한 규칙을 정의하는 인터페이스
(여러 기능을 사용할 수 있는 도구 상자 -> 상자 안의 도구들을 사용해 프로그램을 만들거나 다른 서비스와 소통, 기존의 도구들 재사용해 효율적 개발)