동기 2

JS 실습 - 쇼핑몰 간단하게 만들기

목표 - https://test.api.weniv.co.kr/mall 에서 json 객체를 받아와서 상품들을 html로 보여주고, 클릭했을때 상세 사진 나오게 하기. HTML은 최소한으로 이정도만. https://test.api.weniv.co.kr/mall 의 json 데이터는 이런 모습 여기서부터 js 파일. 일단 js로 화면에 표시될 공간인 main div을 할당해주고, img의 src를 넣기 쉽게 하기위해서 baseURL을 미리 적어둔다. const mainContainer = document.getElementById("main"); const BASE_URL = "https://test.api.weniv.co.kr/" 일단 이렇게 세 함수를 미리 생각해두고 작성을 해보자. function ge..

JS 2023.08.28

JS(14) 동기 비동기 ★★중요

동기 : 순차적으로 동작 like 싱글쓰레드. 마치 계주에서 바통을 가지고있는 사람만 달릴 수 있는것 처럼 다른 함수를 기다리다가 차례가 되면 동작함. 비동기 : 여러명이 일하는것 처럼 like 멀티쓰레드. 한번에 여러일을 할 수 있음. callback 함수 함수에 파라미터로 들어가는 함수. 순차적으로 실행하고 싶을 때 씀. const 버튼 = document.querySelector('.button'); 버튼.addEventListener('click', 콜백함수(){}); // 이렇게 함수에 파라미터로 들어가는 함수가 콜백함수. Promise 비동기 처리에 사용되는 객체 promise의 생성자 함수는 resolve와 reject함수를 인자로 전달받는 콜백함수를 인자로 받음. 성공(fulfilled)되..

JS 2023.08.28