코딩핑

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

컴퓨터의 핵심 부품은 CPU(중앙처리장치), 메모리(주기억장치), 보조기억장치, 입출력장치이다.  CPU? 컴퓨터의 두뇌로 메모리에 저장된 명령어를 읽고, 해석하고, 실행하는 부품이다.CPU는 ALU(산술논리연산장치), 제어장치, 여러 레지스터로 구성되어 있다.제어장치는 컴퓨터 부품을 관리하고 작동시키기 위한 제어 신호(ex: 메모리 읽기, 메모리 쓰기)를 내보내고 명령어를 해석하는 장치이다. ALU는 계산을 하기 위한 부품이다. 컴퓨터 내부에서 수행되는 계산을 도맡아 수행한다.레지스터는 프로그램을 실행하는데 필요한 값들을 임시로 저장하는 고속의 휘발성 메모리이다. 일반 메모리보다 빠른 속도로 데이터에 접근할 수 있다.  메모리? 현재 실행되는 프로그램의 명령어와 데이터를 저장하는 부품이다.메모리에 ..

프로젝트 개요 기간은 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 속성을 넣어 부모 크기를 채우도록 이미지를 조정해준다!현재 반응형 웹을 만..

위와 같은 warning이 뜨는 이유? styled-components를 사용할 때, DOM요소가 이해하지 못하는 사용자 정의 props가 DOM 요소에 전달되면서react가 경고 메세지를 보낸 것이다  ex) props를 전달 받아 스타일을 다르게 적용해주려고 할 때 다음과 같이 하면 one, two라는 사용자 정의 props에 의해 경고 발생const Wrapper = styled.div` display:flex; width:100dvw; height:100dvh; flex-direction: column; justify-content: center; align-items: center;`;const Wing = styled.div` height: 100px; wi..