프론트엔드 개발자로써 가장 중요한 역량중 하나로 재사용성이 높은 컴포넌트를 개발하는것이라고 생각합니다. 보통 버튼은 하나의 프로젝트뿐만아니라 다른프로젝트나 여기저기 많이 사용될 가능성이 높습니다. 또한 협업할때 개발생산성을 높이기위해 공통컴포넌트를 만드는것은 중요합니다. 만약 디자이너가 프로젝트 전체의 버튼을 초록색으로 바꿔주세요! 라고 했을때 공통컴포넌트를 사용하지않고 각자 만들었다면 어떨까요..? 각자 맡았던 버튼 컴포넌트를 찾아 수정을 해야할것입니다. 이는 개발생산성을 낮추게 되는것이죠. 단순 색상변경이 아니라 더 어려운 작업이라면... 아찔 그 자체일것입니다. 이제 필요한 이유는 알았으니 Button 공통 컴포넌트 디자인 시스템을 구축해보겠습니다. 재사용성 높은 Button 컴포넌트 만들어보기 i..
https://taejinii.tistory.com/50 FrontEnd - React-query 를 이용한 무한스크롤 구현하기 - (1) 무한스크롤 이란? 무한 스크롤은 웹사이트나 애플리케이션에서 사용되는 사용자 경험 기법 중 하나입니다. 일반적으로 긴 목록이나 콘텐츠가 있는 페이지에서 스크롤을 내리면, 새로운 콘텐츠 taejinii.tistory.com 첫번째 글을 안보신분들은 해당 글을 보고 오시면 됩니다. 첫번째 글에 이어 두번째 글에서는 데이터를 계속 불러와줄수있는 트리거를 해주는 Observer 에 대해서 설명하겠습니다. const Observer = () => { const [ref, inView] = useInView({ threshold: 0 }); useEffect(() => { if ..
무한스크롤 이란? 무한 스크롤은 웹사이트나 애플리케이션에서 사용되는 사용자 경험 기법 중 하나입니다. 일반적으로 긴 목록이나 콘텐츠가 있는 페이지에서 스크롤을 내리면, 새로운 콘텐츠가 자동으로 로드되어 사용자가 페이지를 더 이상 끝까지 스크롤하지 않고도 계속해서 내용을 볼 수 있게 됩니다. 무한 스크롤은 사용자가 페이지를 일일히 다음 페이지로 이동하지 않고도 계속해서 콘텐츠를 탐색할 수 있도록 합니다. 이는 특히 소셜 미디어 피드, 뉴스 웹사이트, 온라인 상점 등 콘텐츠가 계속해서 업데이트되는 경우에 유용합니다. 사용자는 스크롤을 하면서 새로운 콘텐츠가 자동으로 로드되기 때문에, 일정한 페이지 간격을 넘어갈 필요가 없고 보다 빠르고 원활한 사용자 경험을 제공합니다. 무한스크롤 왜 사용하였나? 저는 사이드..
이번에 개인 프로젝트로 NFT 거래소를 만들고 있는데, 최근에는 성능 최적화에 관심이 많이 생겨서 여러 가지 성능 최적화를 시도해 보았습니다. 성능 최적화는 주로 Next.js의 기능들을 활용하여 이루었는데, 정말 잘만들어진 프레임워크라는걸 다시 한번 느낄수 있었습니다. 1. Next 의 Image 를 활용한 최적화 next.config.js를 통해 이미지 최적화 옵션을 설정할 수 있습니다. 예를 들어, 이미지 파일 형식을 avif로 변경할 수 있습니다. 기본적으로 Next.js는 이미지를 webp 형식으로 변경해주는데, avif로 변경하면 인코딩에는 약간의 시간이 더 걸리지만, webp에 비해 압축률이 더 좋습니다. 따라서 처음 요청할 때는 avif가 약간 더 느리지만, 이후에는 캐싱된 상태이기 때문에..
