모듈
-
특정 데이터의 집합
-
importexport키워드를 통해 모듈을 가져오거나 내보낼 수 있다. -
기본 내보내기
export default 123과 같이default키워드를 이용해 데이터를 단 하나 내보낼 수 있다.import num from './module'과 같이 괄호 없이 이름을 지정하여 가져올 수 있다.
-
이름 내보내기
export const str = "ABC"와 같이 변수명으로 지정하여 여러 데이터를 내보낼 수 있다.import {str} from './module'같이 가져와서 사용하는 쪽에서도 변수 명을 명시해주어야 사용할 수 있다.
-
가져오기
import * as abc from './module'- 내보내는 데이터를 변수에 한 번에 가져올 수 있다.
import num, { str: strd } from './module'- 기본 내보내기는 괄호 없이 가져오고, 이름을 재설정하여 가져올 수 있다.
-
동적으로 모듈 가져오기
import키워드는 파일의 최상단에 위치해야 하기 때문에 필요할 때 동적으로 가져오기가 불가능하다.import()함수를 통해 동적으로 가져올 수 있다.import('./module.js').then(abc=>{console.log(abc})- 전체 모듈을 가져와 출력하는 문장
- 비동기로 동작한다.
동기와 비동기
- 동기(Synchronous)
- 순차적으로 코드 실행하는 것
- 비동기(Asynchronous)
- 순차적으로 코드 실행하지 않는 것
setTimeout등의 함수를 통해 코드의 비동기 동작을 확인할 수 있다.- 콜백 패턴(Callback)
- 콜백을 통해 비동기 제어
- 콜백 지옥
- 콜백으로 코드의 실행 순서를 보장하기 위해 연속적으로 콜백을 사용하는 것
- 해석에 무리가 있다.
//콜백 지옥 const a = (callback) => { setTimeout(() => { console.log(1) callback() }, 1000) } const b = (callback) => { setTimeout(() => { console.log(2) callback() }, 1000) } const c = (callback) => { setTimeout(() => { console.log(3) callback() }, 1000) } const d = () => console.log(4) a(() => { b(() => { c(()=> { d() }) }) }) //실행결과 1 2 3 4
- Promise (콜백 지옥 해결 방법)
return new Promise(resolve=>{실행 코드})형식으로 작성한 후then메서드로 호출하면 콜백 지옥보다 깔끔하게 비동기 처리를 할 수 있다.
- Async / Await 패턴
await키워드 뒤에 있는 메서드의 종료를 기다렸다가 다음 코드를 실행하는 방식await키워드는async키워드로 감싸진 메소드 안에서 사용해야 한다..then방식보다 간단하게 사용할 수 있다.return new Promise형식으로 구성된 함수 앞에 붙여주어야 한다.
- Resolve, Reject, 에러 핸들링
- 에러 핸들링 : 에러가 발생하였을 때와 정상 작동의 실행 코드 부분을 구분하는 것.
- 이 때
promise키워드를 통해 에러 핸들링을 위해 매개변수를resolvereject로 가져가 사용하여 핸들링 할 수 있다. resolve: 정상 작동할 때 실행할 코드 부분.then과 연결하여 사용reject: 에러 상황시 작동할 코드 부분.catch와 연결하여 사용- 둘 중 하나만 실행 될 수 있는 구조이다.
- 반복문에서 비동기 처리
- 배열의 각 요소에 대해
forEach를 사용할 때await을 사용하더라도 한 번에 요소를 처리한 후 기다리기 때문에 불가능하다. for반복문 안에await을 사용하고 그걸 감싸는wrap단위에서async하는 방식으로 사용하면 된다.
- 배열의 각 요소에 대해
- fetch()
-
fetch(주소, 옵션): 네트워크를 통해 자원의 요청 및 응답을 처리하고Promise인스턴스를 반환한다. -
fetch('https://naver.com').then()을 하게 되면 then에서 반환되는Promise인스턴스를 받고 그 내부에.json()이 포함되어 있기 때문에 사용할 수 있다.fetch('https://www.naver.com') .then(res => res.json()) //fetch의 반환 값인 Promise 인스턴스의 .json() 결과 값 반환 .then(json => console.log(json)) //.json() 반환 값을 받아 console.log(json) 반환 //async await 패턴 const wrap = async () => { const res = await fetch('https://www.naver.com') // 과정에서 네트워크 속도로 인한 비동기 제어 const json = res.json() console.log(json) } wrap() -
옵션 살펴보기
method: 서버와 통신하는 방식GET,POSTheaders:Content-Type등 지정body: 서버와 데이터를 주고 받을 때 사용하고 문자 형태로 제공해야함. (JSON.stringfy)
-
DOM (Document Object Model)
- Node vs Element
- 둘 다 DOM을 사용하여 HTML을 제어하는 방법이다.
- Node : HTML 요소, 텍스트, 주석 등 모든 것을 의미
NodeList객체로 표현된다. (forEach사용 가능하다.)- Element보다 더 상위 개념이다.
- Element : HTML 요소만을 의미
HTMLCollection으로 표현되며NODE의 하위 개념이다.
- 검색과 탐색
- JS에서 DOM API를 사용해 HTML을 제어할 수 있다.
document.getElementById: id 속성 값으로 요소를 검색하여 반환한다.document.querySelectorAll: css 선택자로 모든 요소를NodeList로 반환한다.NodeList.parentElement: 노드의 부모 요소를 반환한다.Element.closest: 자신 포함 조상 요소 중 css 선택자와 일치하는 요소를 반환한다.NodeList.previousSibling NodeList.nextSibling: 노드의 이전 / 다음 형제 노드를 반환Element.previousElemntSibling: 요소의 이전 형제 요소를 반환Element.children: 요소의 모든 자식 노드를 반환
- 생성, 조회, 수정
document.createElement('div'): 메모리 상에 HTML 요소를 생성해 반환한다.Element.prepend(), append(): 메모리 상에 생성된 요소를 한 개 이상 첫 번쨰 혹은 마지막 자식으로 삽입Element.remove(): 요소를 제거한다.대상_요소.insertAdjacentElement(위치, 새로운요소): 대상 요소의 지정한 위치에 새로운 요소를 삽입한다.NodeList.inserBefore(노드, 참조 노드): 부모 노드의 자식인 참조 노드의 이전 형제로 노드를 삽입한다.NodeList.textContent:노드의 텍스트를 반환 혹은 변경Element.innerHTML: HTML 내용을 문자로 얻거나 지정Element.dataset: 요소의data-로 시작하는 속성의 값을 얻거나 지정Element.id: 요소의 id 속성 값을 얻거나 지정Element.className: 요소의 class 속성 값을 얻거나 지정Element.classList: 요소의 class 속성을 제어.add.remove.toggle.contains를 제공
Element.style:style속성의 값을 얻거나 지정Element.get(set)Atrribute(속성명, 값): 속성 값을 조회, 지정
- 크기와 좌표
window.scrollX(Y): 현재 화면의 수평 혹은 수직 스크롤 위치 확인window(Element).scrollTo(x,y,behavior): 지정된 좌표로 대상을 스크롤Element.clientWidth(Height): 테두리 선을 제외한 요소의 크기를 얻음.Element.offsetLeft(Top): 페이지의 최상단 기준, 요소의 위치를 얻는다.Element.getBoundingClientRect: 테두리 선을 포함한 요소의 크기 & 화면에서 상대 위치 정보
Events
.addEventListener(종류, 지정 함수): 대상에 이벤트 Listen을 등록 후 발생했을 때 지정한 함수가 호출된다..removeEventListner: 대상의 이벤트 Listen을 제거한다.이벤트 객체: 대상에서 발생한 이벤트 정보를 담고 있다.event를 매개 변수로 들어가 지정 함수에서 이벤트 정보를 확인할 수 있다.
- 기본 동작 방지 : 이벤트가 발생해도 기본 동작이 일어나지 않도록 방지할 수 있다.
event.preventDefault()
- 버블링과 캡쳐링
- 버블링 : 이벤트 발생한 위치에 따라 최상단 조상 요소까지 이벤트가 전파되는 것.
- 이벤트가 발생한 위치에 따라 포함된 영역 (부모, 자식 등) 으로 전파되는 것을 막는다.
event.stopPropagation()
- 캡쳐링 : 이벤트 발생 위치에서 하위 요소에 이벤트를 전파하는 것.
2. Code Snippets
//Resolve, Reject 에러 핸들링
const dA = index => {
return new Promise((resolve, reject) => {
setTimeout(() => {
if (index > 10) {
reject(`${index} > 10`)
return
}
console.log(index)
resolve(index + 1)
},1000)
})
}
dA(13)
.then(res => console.log(res)) //정상 작동 시
.catch(err => console.error(err)) //에러 발생 시
const wrap = async () => {
try{
const res = await dA(13)
console.log(res)
} catch(err){
cosnole.log(res)
} //reject 실행 시 res가 실행하지 않는다.
}//async, await 패턴
const wrap = async () => {
await a()//a의 동작이 종료될 때까지 기다림. 이 때 반드시 감싸는 함수는 async 키워드를 넣어줘야함.
b()
}//promise
const a = () => {
return new Promise(resolve => {
setTimeout(() =>
{
console.log(1)
resolve()
}, 1000)
})
}
const b = () => {
return new Promise(resolve => {
setTimeout(() =>
{
console.log(2)
resolve()
}, 1000)
})
}
const c = () => {
return new Promise(resolve => {
setTimeout(() =>
{
console.log(3)
resolve()
}, 1000)
})
}
const d = () => console.log(4)
a()
.then(b)
.then(c)
.then(d) //promise를 then으로 호출하여 비동기 패턴 관리//콜백 패턴
const a = (callback) => {
setTimeout(() => {
console.log(1)
callback()
}, 1000)
}
const b = () => console.log(2)
a(() => {
b()
}) //a가 1초 뒤 실행되고 callback인 b가 나중에 실행된다.
Hello World !