Hello World:-)

fetchHTTP 요청 전송 기능을 제공하는 클라이언트 사이드 Web APIHTTP 요청을 전송할 URL과 HTTP 요청 메서드/헤더/페이로드 등을 설정한 객체를 전달HTTP 응답을 나타내는 Response 객체를 래핑한 Promise 객체를 반환const promise = fetch(url [, optinos]);fetch 함수는 HTTP 응답을 나타내는 프로미스를 반환, 후속 처리 메서드 then을 통해 프로미스가 resolve한 Response 객체를 전달받을 수 있음Response 객체는 HTTP 응답을 나타내는 다양한 프로퍼티를 제공Reponse.prototype에는 Response 객체에 포함되어 있는 HTTP 응답 몸체를 위한 다양한 메서드를 제공response.text(): 응답을 읽고 텍..

URL에서 쿼리 문자열 추출 방법// 현재 페이지의 URL에서 쿼리 문자열 추출const queryString = window.location.search;console.log(queryString); // ?item=yoyo// URLSearchParams 객체 생성const searchParams = new URLSearchParams(queryString);// 특정 키(key)에 해당하는 값 가져오기const item = searchParams.get("item");console.log("item: ", item); // 값이 없으면 null URLSearchParams methods 예제 코드// URLSearchParams 객체 생성// const searchParams = new URLSea..

Q 어떤 문제가 있었는지미니 프로젝트의 방명록 페이지 구현에서 수정 버튼과 삭제 버튼의 클릭 이벤트가 버튼을 두 번 클릭했을 때 작동하는 문제가 있었다.수정 버튼과 삭제 버튼을 구현한 코드는 다음과 같다.document.addEventListener("click", async (e) => { if (e.target.className === "delete") { const deleteItems = document.querySelectorAll(".delete"); deleteItems.forEach((item) => { item.addEventListener("click", async function () { // 삭제에 대한 처리 }); ..

Q 어떤 문제가 있었는지미니 프로젝트의 방명록 페이지를 구현하면서 기존에 작성된 데이터를 불러올 때 사용할 태그를 미리 정의하고 사용했다.(아래 이미지와 같이 데이터만 변경되고 사용되는 태그와 스타일이 동일하기 때문에 미리 정의를 해두었음) 초기 작성 코드는 다음과 같다.const selector = (element) => document.querySelector(element);const guestbookTemplate = (id, author, content) => { selector( "#itemList" ).innerHTML += ` ${author} ${content} `; 위 코드를 사용하여 DOM Node에 접근하여 조작할 때 예상과 다른..

Q 어떤 문제가 있었는지미니 프로젝트에서 방명록 페이지를 담당하게 되면서 Cloud Firestore에 데이터를 CRUD를하는 작업을 하게 되었다.Cloud Firestore에 접근하는 js파일(모듈로 만듦) 따로, 화면에서 동작하는 기능을 담은 js파일(일반 js파일로 만듦) 따로 작성해서 테스트를 하는데 데이터를 입력하는 것은 문제가 없었지만 데이터를 가져올 때 다음과 같은 에러가 발생했다.Uncaught SyntaxError: Cannot use import statement outside a moduleUncaught ReferenceError: require is not defined첫 번째는 import 구문으로 모듈js에 있는 파일을 가져올 때 발생했고 두 번째 에러는 import 대신 re..