코딩

제품 목록을 표시하고 검색 및 필터링 기능을 만들겠습니다!  모든 상품 리스트가 보이는 동적 상품 목록 생성하기! 먼저 product의 id, title, image, price을 개별 변수로 만들고 그 후 동적으로 보여지기 위해서 변수들을 불러오도록 하고 join해주고 displayProducts()로 보여지도록 합니다. const productsContainerEl = document.querySelector('.products-container');const displayProducts = () => { productsContainerEl.innerHTML = filteredProducts.map((product) => { const { id, title, image, pri..

callback을 사용하는 다양한 메소드들이 배열 아이템의 순서대로 독립적으로 불러지기 때문에 하나가 끝날때까지 기다리는게 아니라 다른 그다음이 실행이 된다. 그래서 배열에 있는 것들이 순서대로 나올 수 없다.async function getMoviese(movieNmae){ const res = await fetch('http://omdbapi.com/?apikey=7035c60&s=${movieNmae}') return await res.json()}const titles = ['범죄도시1', '범죄도시2', '범죄도시3'];titles.forEach(async (title, index) => { const movies = await getMoviese(title) console..

메뉴 클릭할 때마다 해당 리스트가 보이게 된다.   먼저 리스트를 만들어줍니다.const menu = [ { id: 1, title: "pancakes", category: "breakfast", price: 3000, img: "./images/item-1.jpeg", desc: `Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nihil repellendus repellat exercitationem commodi! Cumque perferendis molestias iste aliquam, nulla, qui reprehenderit ea, sequi eveniet..

요청(Request)                             --------------------->      클라이언트                                              서버                                                          응답(Response)  요청(Requeset) url : 요청 서버 주소 method : 요청 종류 (GET, POST, PUT, DELETE) header: 요청 메타 정보 body: 요청 데이터fetch('주소',{ method : 'POST', // Get은 기본이라서 없어도 상관없다. headers : { 'Content-Type': 'application/js..

아이콘을 클릭할 때마다 해당 유저의 정보를 가지고 오고 random user를 클릭하면 새로운 유저들을 가지고 오도록 만들었습니다. 파일 구조  getElement.js요소 지정  모듈먼저 getElement.js에서 요소를 지정해주기 전에 만약에 요소가 없다면 error문을 반환시킵니다.const getElement = (selection) =>{ const element = document.querySelector(selection); if(element) return element; throw new Error('없는 요소입니다.')}export default getElement;  fetchUser.js유저데이터 모듈  url에 사용자 정보를 제공하는 api를 가져오고 fetch를..

예외처리실행중인 프로그램에서 예기치 못한 상황이 발생하여 더이상 진행하지 못 할때 처리할 수 있도록 한다.  만약에 서버 주소가 잘못되어 있다면 try catch 문을 통해 예외처리를 할 수 있다.  const h1El = document.querySelector('h1');const ulEl = document.createElement('ul');ulEl.classList.add('users');document.body.append(ulEl);h1El.addEventListener('click', async () => { const loaderEl = document.createElement('div'); loaderEl.classList.add('loader'); ulEl.innerHTML = ..

Async & Awaitasync는 함수의 앞에 붙여서 해당 함수가 비동기 함수임을 나타내며, await는 비동기 함수의 실행 결과를 기다리는 키워드이다. then 대신 await 사용하면 된다.const h1El = document.querySelector('h1')const ulEl = document.createElement('ul')ulEl.classList.add('users')document.body.append(ulEl)h1El.addEventListener('click', () => { // h1El을 클릭했을때 ulEl.textContent = 'Loading...' //ulEl에서는 Loading...이 보인다. fetch('주소') // 서버로 데이터로 가지러 가서 데이터를..

Event Listener() 버튼을 클릭할 때는 클릭 "이벤트"가 발생할 때 어떤한 액션을 위한 함수를 호출하는데 그 함수가 이벤트 리스너입니다. 이벤트 리스너를 호출 시에 이벤트 리스너를 해당 객체나 요소에 등록해야 합니다.  객체, 요소에 등록하는 방법1) addEventListener() 이벤트 리스너 사용const aElement = document.querySelector('a');aElement.addEventListener('click', () => } alert('a element clicked')}); 2) 자바스크립트 코드에서 프로퍼티 등록window.onload = function() { let text = document.getElementById("text"); text...

콜백과 콜백 지옥 콜백 예시 1 특정한 비동기 함수를 호출할 때 콜백함수를 전달 해줘서 정확하게 어느 위치에서 실행할 지 지정해야한다.  timer.js  콜백이라는 매개변수에 함수 데이터를 받아서 cosole.log(1)를 출력한 다음에 callback()함수가 호출되도록 했다.export function timer(callback) { setTimeout(() => { console.log(1) callback() }, 2000)}  main.js콜백 함수안에서 cosole.log(1)이 실행된 다음에 cosole.log(2)이 출력되는 걸 확인할 수 있다.import { timer { from ' ./timer.js'timer(() => { console.log(2)}) 콜백 예시 2..

비동기 코드  작성된 순서대로 실행되지만, 특정 작업이 끝나기 전에 다음 작업이 시작 될 수 있다.  비동기 코드 예시 1 setTimeout console.time('Loop')까지는 동기처럼 처리하지만 setTimeout부터 비동기 코드이기 때문에 실행되고 있지만 끝날떄까지 기다리는게 아닌, 그다음 console.log(4)이 콘솔 창에 나오는 걸 볼 수 있다. 그 후 setTimeout이 끝난 후  콘솔 창에 뜨는 걸 볼 수 있다. console.log(1)console.log(2)console.log(3)console.time('Loop')setTimeout(() => { for(let i = 0; i  비동기 코드 예시 2요소에 이벤트  h1El이 실행이 되었지만, 사용자가 언제 클릭할 지..