로컬 스토리지를 이용한 최근 본 상품 기록하기
서비스 제품을 제공하는 웹 플랫폼에서 최근 본 제품들을 시각적으로 보여주는 기능들이 있다. 현재 진행 중인 회사 프로젝트 서비스에서도 조회했던 상품들을 보여줘야 하는 기능이 있어, 이번 시간 어떻게 구현하였는지 소개하고자 한다. 최근 본 상품들 기록하는 방법 조회했던 제품들을 저장하기 위해서 세 가지 방법이 있다....
As a front-end developer, I focus on building impactful web experiences. I believe that UI/UX is the most essential element of a successful website.
서비스 제품을 제공하는 웹 플랫폼에서 최근 본 제품들을 시각적으로 보여주는 기능들이 있다. 현재 진행 중인 회사 프로젝트 서비스에서도 조회했던 상품들을 보여줘야 하는 기능이 있어, 이번 시간 어떻게 구현하였는지 소개하고자 한다. 최근 본 상품들 기록하는 방법 조회했던 제품들을 저장하기 위해서 세 가지 방법이 있다....
흔히 코드 작업을 하다 10에 8할은 에러를 맞닥뜨려 조치하는 작업에 많은 시간을 기울이고 있다. 여기서 발생한 에러가 컴파일 혹은 런타임 환경에서 발생하였는지 구분 짓는 것은 매우 중요하므로 두 가지 차이점에 대해 알아보자. 컴파일 환경 소스코드를 작성한 후 실행 과정을 통해 기계어코드로 잠시 변환 되며, 이...
useEffect Hook 사용하던 중 아래의 오류가 발생하였다. 그대로 해석하면, React Hook "useEffect"는 조건부로 호출됩니다. React Hooks는 모든 구성 요소 렌더링에서 정확히 동일한 순서로 호출되어야 합니다. useEffect는 아래와 같은 코드로 작성하였을 경우 에러가 발생한다. ...
보통 웹팩의 번들링 통합 과정으로 인해 개발 모드로 작업을 확인하기 번거로운 시간이 소비되는 경우가 종종 있다. (npm module 용량 또한 비효율적으로 많다.) 이런 불편한 점을 해소하고자 esbuild 기술을 활용하여 미리 bundle 처리를 한 vite의 설치 과정을 알아보자. 1 설치 명령어 npm c...
스크롤 이벤트 처리를 할 경우, 일반적인 순수 Y축 값을 통해 측정, setTimeout을 사용하여 throttle 처리, requestAnimationFrame 3가지 방법을 각각 비교하여 어떤 차이가 있는지 비교하자. 순수 스크롤 이벤트를 통한 Y축 값 측정 const [scrollFlag, setScrollFl...