Frontend (2) 썸네일형 리스트형 컴포넌트의 책임? 이번에 프로젝트를 진행하면서, 상품 등록이나 사용자 간 채팅에 이미지 업로드 기능이 필요하게 되었다. 이미지를 업로드하는 순간 비동기적으로 Amazon S3에 파일을 먼저 업로드하고, 상품 등록 (게시글 등록) 을 하거나 채팅을 전송할 때 반환된 이미지 ID를 포함해 요청하는 식으로 플로우를 설계했다. 그래서 S3에 이미지를 업로드하고, Progress Bar 표시나 프리뷰 이미지 표시를 대신해줄 ImageUploader 컴포넌트를 직접 만들었고, 컴포넌트 외부에서 이미지를 관리하도록 이벤트 기반으로 구현했다. interface ImageUploaderProps { children?: ReactNode; className?: string; disabled?: boolean; onUploadRequeste.. 코드 스타일 통일을 위한 prettier-plugin-tailwindcss 도입기 도입 이유 tailwind의 className의 스타일이 달라 코드리뷰할 때 확인이 어려웠습니다. 정리가 되어 있지 않아 중복이 있었지만 한눈에 확인하기 어려움 className="flex items-center w-64 place-content-around rounded-full box-border border-none bg-white1 bg-opacity-70 px-4 w-64" 정리가 되어 있어 확인이 가능 className="box-border flex w-64 w-64 place-content-around items-center rounded-full border-none bg-white1 bg-opacity-70 px-4" 방법 1. VSCode의 확장에서 Prettier 설치 2. prett.. 이전 1 다음
