div.log('Code Trail')

[JavaScript] 한 시간 전 날짜 구하기 (getTime() 매서드 사용)

기상 API를 사용해서 웹을 만들었는데, 지금까지 찾아내지 못했던 버그가 있었다.API를 호출하는 링크에서 현재 접속 시간에 맞게 날짜와 시간을 유동적으로 바꿔주는 코드를 작성했는데, 이게 0시 ~ 1시까지 작동하지 않는 문제가 있었다.원래부터 DB 업데이트가 정각에 이루어지지 않아서 그런지 매 시간 정각에 API 호출 오류가 있어 '현재시간 - 1'을 기준 시간으로 잡았는데, 생각해보니 0시에 접속하면 기준 시간이 -1시가 되버리기 때문에 오류가 발생할 수밖에 없었다. // 한 시간 전의 시간을 구하기 위한 기존 코드const hour=new Date().getHours-1; 즉 시간을 먼저 구하고 그 값에 -1을 주었기 때문에 오류가 발생한 것이다. 개선된 코드getTime() 매서드는 1970년 1..

포트폴리오 제작 중 CSS 애니메이션을 활용해 문장이 물결치는 듯한 효과를 내고 싶었다.예전에 물결 효과를 구현할 땐 HTML에서 모든 글자를 하나하나 span 태그로 감싸서 각각 애니메이션과 딜레이를 적용했는데, 이러면 두 가지 문제가 있었다.HTML 코드가 너무 길어져 비효율적임텍스트가 바뀌면 수정이 번거로움따라서 HTML에 span 태그를 사용하지 않고 JS로 구현할 방법을 찾아보았는데, 애니메이션을 적용할 요소의 내용을 span 태그로 감싼 상태로 바꿔주면 된다. Hello Words!/* CSS */h1 span{animation:wave_animation 1s ease-in-out infinite;}@keyframes wave_animation{ 0%, 50%{transform: tran..

이전 포스팅에서 찜하기 기능을 구현했는데, 브라우저를 껏다 켜면 내가 찜한 목록이 사라지는 문제가 있었다.App.jsx가 렌더링 될 때마다 찜한 목록의 id를 담고있는 state가 빈 배열로 초기화되기 때문에 그렇다.이번 포스팅에선 그 문제를 해결하기 위해 localStorage를 사용해보려 한다. https://duski96.tistory.com/8 [React] 찜하기 기능 구현하기 (관심 매물 등록)인터넷 쇼핑을 하다보면 소위 말하는 위시리스트, 즉 찜하기 기능을 접할 수 있다.상품을 바로 구매하지 않더라도 나중에 쉽게 찾아볼 수 있게 해주는 편리한 기능이기 때문에 물건을 판매하는duski96.tistory.com https://developer.mozilla.org/ko/docs/Web/API/W..

이전에 리액트 카테고리의 포스팅 내용에서 검색 구현 중 검색 조건을 최적화하기 위해 사용한 방법이다. (3번 항목) https://duski96.tistory.com/5 [React] React에서 select box를 활용한 검색 구현이전 포스팅에서 select box 구현에 대해 포스팅했는데 궁극적인 목적은 검색 구현이었다.select box에서 검색 조건을 선택하고 최종적으로 조건에 맞는 결과들을 출력하는 것이다.검색은 아래 5단계duski96.tistory.com 사실 대단한 내용은 아니고 단순히 5개의 검색 조건들 중 값이 null이 아닌 조건만 추려서 결과를 반환하겠다는 얘기였다.아래 코드는 지난 포스팅때 사용한 검색 조건을 담는 코드의 일부이다.import { useState } from '..

홈페이지를 만들다보면 스크롤 이벤트를 활용하는 경우가 많다.EventTarget.addEventListener() 메서드와 Element.getBoundingClientRect() 메서드를 사용해 기준이 되는 요소의 위치에 따라 스크롤 여부를 감지해 효과를 줄 수 있지만 이 방식은 성능에 지장을 줄 수 있다.싱글스레드 언어인 JavaScript의 특성 때문인데 이 부분은 추후 기회가 되면 포스팅해보겠다. Intersection Observer API가 뭔데?https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API Intersection Observer API - Web APIs | MDNThe Intersection Observ..