chocoboy

useQuery is a React Hook provided by the react-query library, which allows for easy and efficient data fetching and caching. useQuery 는 리액트 훅 인데, 라이브러리 이고, 쉽고 효과적으로 데이터를 보내고, 저장 할 수 있는 녀석이다. useQuery automatically handles data caching and provides a range of other features, such as automatic refetching of data on mount or on specified intervals, polling for new data, and more. use query 는 자동적으로 ..

css 스타일 width: ${(props) => (props.width != null ? `${props.width}px !important` : '250px !important')}; 다음처럼 사용하고 싶다면 export const CommonSegment = styled(Segment)` min-height: ${(props) => (props.minHeight != null ? `${props.minHeight}px !important` : '50px !important')}; ${(props) => props.marginLeft && css` margin-left: ${props.marginLeft}px !important; `} ${(props) => props.width && css` wid..

다음에러는 https://chocoboy.tistory.com/manage 다음처럼 되어야 정상적으로 작동하겟지만, https://chocoboy.tistory.com//manage 다음처럼 // 가 두개 들어간것을 말한다. (당연히, 두개 들어가면 정상작동 안한다.) 고로 URL를 Request하는 코드에서 수정해주면 된다. To be continued..

How can we select in react? (어떻게 조회할까 리액트에서?) Method import 'semantic-ui-css/semantic.min.css'; import React, { useState } from 'react'; import { Table } from 'semantic-ui-react'; import { HttpRequest } from '@utils/Http'; import { useLayoutEffect } from 'react'; interface DataRow { ID: number; TITLE: string; ATTACH_FILE: string; NAME: string; REGIST_DATE: string; manualData: DataRow[]; } const ..

정답은 textAlign : center Method 일반적으로 margin 으로 줄것이라고 생각을 하겠지만 페이지 네이션은 textAlign: center로 줘야지 가운데로 잡힌다. To be continued..

리액트에서 을 사용하는 이유가 뭔지해가지고 찾아보았다. Method React fragment 가 뭐임 ? 아 그그 리액트에서 허용하는 여러 자식을 하나로 묶는 녀석임 처럼 묶는것과 같음 fragement 라고 부르는데 를 사용하면 element를 생성해야 되는데 그게 싫을 때는 로 사용하고 있음 근데 이건 리액트에서 만 사용이 가능함 다음 처럼 있을 자리에 을 보통 사용하는데 는 영역이 오른쪽 끝까지 포함이 되잖음? 이 녀석은 처럼 딱 이 요소만 들어가도록 함. To be continued..

In this case , You have to change a line (이 경우 줄 바꿈 하라는것이다.) Definitely, This button isn't a problem according to the code Now It's working correctly To be continued..

오늘은 export 사용 예제를 해보도록 하겠다. export usage 1 이런식으로 서브 파일의 export 를 해줄 수 있다. 다른 방법으로는 export를 직접하는것인데 export usage 2 이렇게 바닥에 있는 export { }; 를 지워주고 직접 함수 앞에 export를 선언한다면 import 해서 사용 할 수 있다. 다음 처럼 import해서 이용 할 수 있도록 하는것이 export 기능이다. 이것은 React 뿐만 아니라 Javascript에서 지원하느 기능이라고 한다. To be continued..

진짜 이거 뭔 애러인지 한참 고생했다. Insert 하라고하는데 공간이 없는데 무엇을 Insert 하라는건지 참, Prettier That's bullshit 이었다. Cause 원인은 44번 줄에서 맞췄다고해서 끝내지 말고 Enter 한번 쳐달라는거다. 다음 그림처럼 Enter을 한번 Click 하면 45 line 이 생겨난다. 그럼 정상 작동이 아주 잘된다. 하... 프리티어 너란 녀석.. 내 가슴을 아프게하는구나.... To be continued..

웹 리액트가 각광받고, 많은 스타트업에서 사용하고 있을까? 오늘은 그 이유에 대해서 공부해보자한다. Web Browse Dom (웹 브라우저 돔) 실제 웹 프라우저가 웹 페이지를 띄어주는 과정이라고 보면 되겠다. 웹 킷에서 attach method (동기작업) 를 통해서 attachment를 이룬다. 그리고 display . Virtual Dom (가상 돔) 내가 이해 하기로는 이렇다. 가상 돔이 있는데, 일반적으로 우리가 사용하는 자바스크립트에서는 가상 돔을 쓰지 않고 Real Dom 을 계속해서 사용하여 반복 랜더링을 해야 하기 때문에 비용적으로 손해 보는것은 당연하다고 느껴진다. 그래서 React에서 사용하는 Virtual Dom 이 있음으로 오프라인에서 가상의 돔 역할을 해줘 랜더할 비용을 줄여주..