코딩배우는고양이

주요 개발 환경 Next.js 13.4.19 TypeScript Emotion Error message Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{ default: string; danger: string; outline: string; }'. No index signature with a parameter of type 'string' was found on type '{ default: string; danger: string; outline: string; }'.ts(7053) 배경 Next.js + Typescript 를 기반으로 개발 환경을 구성하였고 CS..

개념 input 타입에 onChange 이벤트를 걸어서 state의 변화를 준다면 사용자가 input창에 무언가를 입력할 때마다 이벤트 핸들러가 호출됩니다. scroll event의 경우도 마찬가지입니다. 만약 무한 스크롤 기능을 스크롤 이벤트로 구현한다면 스크롤이 맨 아래에 위치했는지 여부만 체크하면 되는데 스크롤을 움직일 때마다 이벤트가 연속적으로 호출됩니다. 댓글을 작성해서 submit 하는 것이나 스크롤이 맨 아래에 위치했는지 여부를 확인해야 하는 경우에 필요한 것보다 훨씬 많은 이벤트 호출이 발생하게 됩니다. Debounce와 Throttle은 이러한 연속적으로 호출되는 이벤트 핸들러의 실행 빈도를 제어함으로써 성능상의 유리함을 가져오기 위한 개념입니다. Debounce 연이어 발생한 이벤트를 ..

사이드바 메뉴 리팩토링 파이널 프로젝트가 끝나고 틈틈이 리팩토링을 진행하고 있는데 단순히 하나의 tsx 파일에 들어있는 코드를 컴포넌트로 분리해서 가독성을 향상시키는 것 외에도 로직 자체를 변화시켜서 개선할 수 있는 부분도 많이 보였습니다. 이번에는 사이드바 메뉴쪽을 개선시켜본 후에 정리를 해보았습니다. 개선 전 전체 코드 import defaultImage from "/images/cat.jpg"; import * as S from "./style"; import * as H from "../Header/styled"; import Logout from "../../assets/icons/Logout"; import product from "../../assets/product.svg"; import ..

개요 무한스크롤을 구현하는 방법에는 스크롤의 높이와 클라이언트(화면)의 높이를 계산하는 스크롤 이벤트 기반 구현 방식도 있지만 (참고 사이트1,참고 사이트 2) 저는 IntersectionObserver 라는 WebAPI를 이용해서 무한스크롤을 구현해보았습니다. 스크롤 이벤트 기반 방식은 스크롤이 될 때마다 자바스크립트 엔진이 계속해서 함수를 호출하게 되는데 Intersection observer는 브라우저단에서만 동작하고 필요할 때만 자바스크립트 코드를 불러오므로 성능상에서도 이점이 있고 무한 스크롤 외에도 여러 곳에서 사용할 여지가 있는 확장성이 있는 API라는 생각이 들었기 때문입니다! 동작 방식 IntersectionObserver의 동작 방식은 매우 직관적이고 심플합니다. 관찰자(observer..

우선 피그마로 그려본 페이지 프로토타입 입니다. 해당 페이지에서는 사용자가 수거 신청을 할 의류의 이미지를 등록하고 물품의 내용을 적어서 보낼 수 있는데 상품 추가를 통해 한 번에 여러 개를 묶어서 보낼 수도 있습니다. 요구 사항 하나의 물품당 하나의 이미지만 등록이 가능합니다. 이미지가 등록이 되어있지 않거나 상세 내용 중 하나라도 빠진 곳이 있으면 에러가 나야합니다. 상품 추가 버튼을 누르면 새로운 등록 폼이 등장하고 추가로 입력해서 한 화면에서 여러 개의 물품을 한 번에 보낼 수 있어야 합니다. 입력하던 폼의 삭제 버튼을 누르면 해당 폼은 사라지고 요청에서 제외됩니다. 요청은 formData 형식으로 보내며 productlist 라는 key로 물품의 상세 내용 배열을 문자열로, 각 이미지 파일은 f..