위 이미지를 보면 드레스 or 원피스를 입력한 후 나오는 예시이다.이 때 product.json의 데이터 형식이 아래와 같다. 원피스로 키워드를 입력 시에는 name에 있는 변수에 포함되어 있는지 includes()함수를 통해 확인하면 되지만 드레스를 입력할 경우에는
Canvas HTML의 `` 태그와 Javascript를 사용하면 다양한 그래픽 요소를 만들 수 있다! 단순한 도형을 그리는 것은 물론, 데이터 시각화, 애니메이션, 웹 게임 등을 사용하기에 따라 무궁무진한 콘텐츠를 만들어 낼 수 있다! 이제 기본적인 캔버스 사용법부
React와 Recoil을 이용하여 데이터를 로컬 스토리지에 저장해야하는 기능을 맡았다. 🤯🤯🤯 하지만! 하나씩 차근차근해보쟈!우선 로컬스토리지에 대해서 알아보쟈!로컬스토리지는 웹 스토리지 객체이다! 즉, 웹에서 데이터를 저장하는 공간(?)이라고 이해하면
차트는 Canvas, DIV(html, css), SVG 등 크게 3가지 방법으로 만들 수 있다. Canvas 비트맵 영역을 활용 즉, 자바스크립트 코드로 화면 위에 픽셀을 그려 넣는 방법 👎) 픽셀을 다루게 되어 도형의 크기에 따라 해상도를 따로 고려해야 하는
오늘 날짜 구하기 new Date()를 이용하면 오늘 날짜를 쉽게 구할 수 있다! 한달 전 날짜 구하기 한달 전 날짜를 구하기 위해서는 setMonth()와 getMonth()를 이용해서 작성하면 된다! 이때 new Date().getMonth()를 구하면 현재의 달
Intersection Observer API란? > 쉽게 말해서 무한스크롤을 할 때 필요한 내장 브라우저 api이다. MDN에서는 IntersectionObserver(교차 관찰자 API)는 타겟 엘레멘트와 타겟의 부모 혹은 상위 엘레멘트의 뷰포트가 교차되는 부분을
예전에 프리온보딩을 통해서 별점을 만들어놓고... 까먹지 않기 위해서 블로그를 작성해본댜~사실 까먹어서 지금 작성함... ㅎ다섯 개의 별을 그리기 위해서 const starArr = \[1, 2, 3, 4, 5]; 배열을 작성한 후반복해서 별을 출력해주