코딩핑

개요처음 프로젝트에 스켈레톤 UI를 적용할 때는 무조건 사용자 경험에 더 좋을거라고 생각하며 데이터를 패칭하는 곳에 다 추가를 해주었다.최적화를 고민하며 계속 확인하던 중 api응답시간이 빠를 때 깜박이듯이 스켈레톤UI가 뜨는 것이 사용자 경험을 더 떨어뜨린다는 생각이 들었다. 이를 고민하던 중 카카오 기술 블로그에 이에 대해 정리해놓은 걸 발견했다!https://tech.kakaopay.com/post/skeleton-ui-idea/ 무조건 스켈레톤 화면을 보여주는게 사용자 경험에 도움이 될까요? | 카카오페이 기술 블로그카카오페이에서 프론트엔드 개발을 하며 스켈레톤 UI와 사용자 경험 향상에 대해 고민한 내용을 공유합니다.tech.kakaopay.com요약하자면 세계적인 UX 리서치 그룹 닐슨 노먼의..

프로젝트 개요 기간은 2024.5.29 ~  2024.8.14로 약 2개월 반에 걸쳐 프로젝트를 진행했다.keynut은 팀원의 키보드애 대한 애정으로부터 시작된 전자기기 중고거래 사이트이다.키보드만을 대상으로한 중고거래 사이트를 만들 생각으로 시작해 이름은 keyboard + nut으로키보드에 열정적인 사람들의 모임으로 지었다.  주요 기능은 상품 등록, 상품 관리, 상품 조회 ,인기 상품 조회, 찜 등이다. 프론트엔드 두명이서 진행하여 역할을 따로 분담하지 않았지만 진행하다 보니 내가 프론트를 많이 맡아서 하게 됐고 서버쪽을팀원이 대부분 맡았다. 기술적 배움이번 프로젝트에서는 React Query, Tailwind, MongoDB 등 처음 사용하는 기술이 많았다. 소셜 로그인도 처음 경험해 보았다.Re..

Infinite Scroll에서 Skeleton 컴포넌트 적용하기현재 프로젝트에서 infinite scroll시 데이터가 받아오는 시간에 돌아가는 svg를 띄워 로딩 중임을 나타냈는데 많은 사이트들에서 데이터를 가져오는 동안 스켈레톤 컴포넌트를 띄워주는 것을 확인했다. 그래서 나도 더 나은 사용자 경험과 더 이쁜 UI를 위해 Skeleton을 추가하기로 결정했다!   Skeleton 구조 만들기 우선 이미 상품을 띄우는 코드는 작성되어 있기 때문에 같은 레이아웃으로 Skeleton 컴포넌트를 만들어주었다const Skeleton = () => { return ( );}; 로딩 중 총 8개의 Skeleton 컴포넌트를 표시하기 ..

중고 거래 사이트를 제작하면서 사용자 경험 개선을 위해 상품들에 infinite scroll을 적용하기로 결정하였다!나는  스크롤의 마지막을 감지하기 위해 react-intersection-observer 라이브러리를 사용하고 데이터 요청에는 react-query를 사용했다.  그 전에 infinite scroll을 적용하지 않고 prefetchQuery와 useQuery를 사용해 데이터를 불러오던 코드가 있었기 때문에 이를 prefetchInfiniteQuery와 useInfiniteQuery로 수정을 해주었다. prefetchInfiniteQuery에는 데이터를 불러올 때  페이지 파라미터를 설정해주는 옵션이 필요하다. 0부터 시작하게 설정을 해주었다 await queryClient.prefetchI..

현재 프로젝트에서 상품들을 필터링에 따라 쿼리스트링을 짜서 서버에서 데이터를 새로 받아오도록 구현을 하고자 했다.사용자가 필터를 선택할 때마다 요청이 들어가면 비효율적이므로 사용자의 필터 선택이 끝났다고 판단되는 시점에 데이터를 가져오고자 디바운스를 1초로 설정하려고 했다. 이때 문제가 발생했다!! 디바운스란?연속적으로 발생하는 이벤트를 마지막 호출만 유효하게 처리하도록 지연시키는 기술이다처음 작성한 코드는 다음과 같다 디바운스 함수는 wait시간 만큼 func 실행을 지연시키고 createQueryString() 인자로 받아야하므로 인자를 받도록 작성했다export default function debounce(func, wait) { let id; return function (...args) {..

nextjs에는 이미지 최적화를 위해 기존 img 태그가 아닌 next/image의 Image태그를 사용한다.Image 태그에는 다양한 속성이 있는데 기본적으로 요구되는 것은 src, width, height, alt 이다. 이 경우에는 따로 어떠한 설정을 해주지 않아도 이미지가 최적화되어 가져와진다import Image from 'next/image' export default function Test() { return ( )}단, fill 속성을 사용할 경우 width와 height가 필요없고, 이 경우 이미지를 반응형으로 설정할 수 있다.부모에 position:relative을 설정하고 fill 속성을 넣어 부모 크기를 채우도록 이미지를 조정해준다!현재 반응형 웹을 만..