안녕하세요

서버에서 query로 검색기능을 구현하는 것과 리액트로 프론트에서 검색기능을 구현할 때 각각의 장단점 서버 검색기능 - 장점 검색 결과의 정확성: 검색 결과가 정확하고 일관성이 있습니다. 대용량 데이터 처리: 서버는 대용량 데이터를 처리하는데 특화되어 있기 때문에, 검색 대상이 많거나 데이터베이스가 큰 경우에도 빠르게 처리할 수 있습니다. 서버에서 데이터를 처리하므로 클라이언트의 부하를 줄일 수 있습니다. 서버 검색기능 - 단점 느린 검색속도: 검색할 때마다 서버와 통신해야 하기 때문에, 검색 속도가 느릴 수 있습니다. 서버 부하 증가: 검색 대상이 많거나 복잡한 검색 로직을 사용할 경우 서버 부하가 증가할 수 있습니다. 동적인 검색 결과 반영 어려움: 서버에서 검색을 하면 새로고침이 필요하거나, 동적으..

React Router Outlet 예시 ; ; ; Outlet을 사용하여 중첩된 라우트를 작성할 수 있습니다. path="/all" 대신에 path="all"로 작성해야 합니다. 위의 코드 예시에서는 /user/profile1, /user/profile2, /user/profile3 이 route 됩니다. : 앱 전체를 감싸고 있는 라우터입니다. : 실제 라우팅 규칙을 정의하는 컴포넌트입니다. : 하나의 경로와 해당 경로에 해당하는 컴포넌트를 매핑하는 라우터 컴포넌트입니다. : 자식 컴포넌트들을 렌더링하는 컴포넌트입니다. 이 컴포넌트를 사용하면 자식 컴포넌트를 중첩해서 사용할 수 있습니다. => ParentComponent 컴포넌트로 Outlet 을 감싼 형태입니다. ; => /user/profile1..

useState에 적용 type PostsObject = { id: number; name: string; hobbyList: any[] }; const [posts, setPosts] = useState([]); => posts state 배열에 들어갈 object의 proeprty type 을 지정 => null, any보다는 명확한 타입 기재 JSDoc에서 매개변수와 return 값 적용 /** * 함수 설명 * @param {PostsObject[]} posts * @return {number} */ const getLowestPrice = (posts: PostsObject[]): number => { console.log(posts) }; => @param {타입} 매개변수이름 => @retu..

styled-component에서 부모컴포넌트에서 자식컴포넌트에 hover 효과 적용하기 hover를 적용하기 위해서는 hover의 대상이 자식컴포넌트일지라도 먼저 선언되어야 합니다. const SupplyName = styled.strong` font-weight: 500; color: #555; `; const SupplyItem = styled.div` width: 180px; font-size: 15px; cursor: pointer; &:hover ${SupplyName} { color: #000; } `; => SupplyItem이 부모컴포넌트이고, SupplyName이 자식컴포넌트입니다. => 흐름상 부모컴포넌트가 위쪽에 위치해야할 것 같지만, hover의 대상이 선언되지 않아 에러가 발생합..