react

배경메인서비스에서 사용자가 이미지를 자주 추가하거나 변경합니다.이미지를 입력받으면, 각 이미지에 대해 Presigned URL을 요청하고, 최적화(용량 압축 및 리사이징) 과정을 거친 후 서버에 업로드합니다. 서버에 올리기 전에 이미지 최적화가 필요하고, 또한 유저는 업로드한 이미지를 즉시 미리보기로 확인할 수 있어야합니다. 문제 상황처음에는 react-image-file-resizer를 사용하여 이미지 최적화를 구현했습니다. (기존에 팀원이 사용하고 있어서)하지만 이 라이브러리는 리사이징 중심이기 때문에 반드시 파일 이미지의 width, height를 명시해야합니다.프로필 이미지와 같이 크기가 항상 동일한 파일은 상관이 없지만, 아래와 같이 이미지 파일의 크기가 제각각인 경우에는 이미지 크기를 명확하게..

생각보다 사용법은 너무 쉬워서 공식문서에서 만드는 것만으로도 사용 가능하다playground에서 만든 걸 붙여넣기하면 된다~! 공식문서에서 코드를 빌려보자면, 2가지 조건만 지키면된다.필요 조건1. ToastContainer 를 한번 렌더링한다. (루트에서 렌더링하는 것이 가장 좋다)2. import 'react-toastify/dist/ReactToastify.css'; 로 스타일을 불러와야한다.  import React from 'react'; import { ToastContainer, toast } from 'react-toastify'; import 'react-toastify/dist/ReactToastify.css'; // minified version is also included ..

cva란?cva는 class-variance-authority 라이브러리의 함수로, 조건부로 CSS 클래스 이름을 생성하고, 일관성 있는 UI 정의와 관리를 하기 위해 사용된다.이 라이브러리는 다양한 변형(variants)을 정의하고, 이러한 변형을 기반으로 동적으로 클래스 이름을 생성할 수 있게 한다.이를 통해 CSS 클래스 이름을 조합하고 조건부로 적용하는 작업을 간편하게 처리할 수 있다! cva(baseStyle, {option}) 함수먼저 코드를 보면 cva 함수를 사용해서 컴포넌트에서 사용할 스타일을 만든다 (보통 이름은 "사용할 컴포넌트Variant") 첫번째 인자에는 공통적으로 사용될 스타일두번째 인자에는 옵션 객체를 넣으면 된다const buttonVariant = cva("rounded ..

function Input({ label, ...props }: InputProps) { return ;} 예시 코드는 props를 받아서 label 속성을 제외하고, 나머지 속성을 props객체로 받아서 input 태그에 전달해 주는 코드이다 리액트에서 컴포넌트는 하나의 객체 (props)를 매개변수로 받기 때문에 구조분해로 가져올 수 있다 매개변수에 사용된 것은 rest 연산자매개변수를 input 태그에 전달하는 spread 연산자이다 생긴 게 비슷하고, 이름을 원하는대로 지을 수 있어서 헷갈리는 개념인 것 같다 Rest 파라미터 (나머지 매개변수)나머지 매개변수들을 하나(배열)로 모으는 역할주로 함수 매개변수, 배열 구조 분해, 객체 구조 분해에서 사용된다. 1. 함수 매개변수 = 매개변수를 ..

다른 페이지로 이동할 때 Link 태그를 사용한다이때 Link 태그의 state에 전달할 값을 넘기면, useLocation을 사용해 값을 가져올 수 있다let { state } = useLocation();  실제로는 이렇게 사용했다 const location = useLocation();const { place_name: shop_name, road_address_name } = location.state;

useParamsurl 경로에서 동적 세그먼트( /user/:useId) 를 가져오는데 사용된다url 경로 매개변수인 userId를 추출하여 UserProfile 컴포넌트에서 사용할 수 있다import { BrowserRouter as Router, Routes, Route, useParams } from 'react-router-dom';function UserProfile() { const { userId } = useParams(); return User ID: {userId};}function App() { return ( } /> );}export default App; url이 /user/123 인 경우, useParams는 {userId..