createElement, innerHTML
-
innerHTML이 가독성이 좋다
바닐라 JS에서도 JSX와 비슷하게 코드 스타일을 구성 할 수 있어서 아무래도 유지보수는 훨씬 편하긴하다. -
createElement가 성능은 더 좋다
innerHTML을 사용할 경우 기준이 되는 요소의 DOM 내부를 전부 재분석하기 때문에 createElement에 비해서 성능이 떨어진다. -
innerHTML이 비교적 불안정하다.
innerHTML의 경우에는 데이터베이스처럼 신뢰할 수 있는 소스에서만 사용되어야만하며 만약 불안정한 소스로 부터 데이터를 받는다면 악성코드가 심어질 수도 있다.
fetch 함수
원격 api 호출하면 제일 먼저 떠오르는 것이 request나 axios. jQuery와 같은 라이브러리일 것입니다. 브라우저에서 fetch() 함수를 지원하기 이 전에는 클라이언트 단에서 직접 http 요청하고 응답을 받는 게 상당히 복잡해서 이러한 라이브러리를 사용하는 것이 합리적이었다. 하지만 요즘에는 라이브러리의 도움 없이도 브라우저에서 내장된 fetch() 함수를 이용하면 대부분의 경우 충분하기 때문에 오히려 이러한 라이브러리를 사용하는 것이 자바스크립트 번들(bundle) 파일의 크기만 늘려서 낭비가 될 수 있다.
fetch 사용법
fetch 함수는 첫번째 인자로 url, 두번째 인자로 옵션 객체를 받고, Promise 타입의 객체를 반환한다. 반환된 객체는, api 호출이 성공했을 경우에는 응답(response) 객체를 resolve하고, 실패했을 경우에는 예외(error) 객체를 reject합니다.
fetch(url, options)
.then((response) => console.log("reponse:", response))
.catch((error) => console.log("error:", error))옵션(options) 객체에는 http 방식(method), http 요청 헤더(headers), http 요청 전문(body) 등을 설정해줄 수 있다. 응답(response) 객체로부터는 http 응답 상태(status), http 응답 헤더(headers), http 응답 전문(body) 등을 읽어올 수 있다.
참고로 fetch() 함수는 엄밀히 말해, 브라우저의 window 객체에 소속되어 있기 때문에 window.fetch() 로 사용되기도 한다.
get 호출
fetch() 함수는 디폴트로 GET 방식으로 작동하고 GET 방식은 요청 전문을 받지 않기 때문에 옵션 인자가 필요가 없다
fetch("https://jsonplaceholder.typicode.com/posts/1").then((response) =>
console.log(response)
);POST 호출
원격 API에서 관리하고 있는 데이터를 생성해야 한다면 요청 전문을 포함할 수 있는 POST 방식의 HTTP 통신이 필요할 것이다.
동일한 API를 대상으로 이번에는 새로운 포스팅를 생성하기 위해서 fetch() 함수를 사용해보겠습니다. method 옵션을 POST로 지정해주고, headers 옵션을 통해 JSON 포맷을 사용한다고 알려줘야 하며, 요청 전문을 JSON 포맷으로 직렬화화여 가장 중요한 body 옵션에 설정해준다.
HTML 제어와 관련된 메소드
.affter()
해당 요소 뒤에 내용(html()과 같은 기능)을 추가한다.
.before()
선택된 대상의 전에 html을 삽입한다.
해당 요소 앞에 내용을 추가한다.
.html()
.text() 메소드와 기능은 유사하지만 삽입하는 내용에 html 태그가 있다면
태그가 적용되며 text가 변경된다.
.prepend()
가리킨 대상의 자식 요소의 맨 앞에 내용을 추가한다.
.append()
선택된 대상의 자식 객체 제일 마지막에 html삽입한다.
.wrap()
wrap의 타겟이 된 요소를 해당 요소로 감싼다. = 선택된 요소의 부모 요소를 생성한다.
.unwrap()
선택한 요소의 부모 요소를 삭제한다 = 선택한 요소의 부모 요소를 삭제한다
.remove()
태그를 포함한 요소 전체를 제거한다.
.empty()
해당 요소의 내용만을 지운다.
.detach()
잘라내기 기능과 같다.
잘라낸 부분을 다른 변수에 저장 가능하다.
.on()
동적으로 html을 생성시 인식되지 않을 경우 사용하며 이벤트 바인딩을 해준다.
.ready()
작성한 html이 웹에 로딩이 완료가 되면 매개 변수로 전달된 함수를 실행하는 메소드이다.
더 추가적으로 말하면 페이지에 모든 외부 리소스가 아닌 DOM 객체만 로드가 되어도 실행이 된다.
.load()
ready()와 다르게, 해당 페이지의 모든 외부 리소스가 포함된 모든 요소가 브라우저에 로드 되어야 실행하는 메소드이다.
