프론트엔드✏️/개인공부

Object.entries() TIL

const happy = { name: { one: "감자", two: "왕감자", }, age: 28, nickname: "hay", today:"조아조아", } for(let[key,value]of Object.entries(happy)) { if(key==="name") { const keyValue = value; if(keyValue.one === "감자") { console.log("포슬포슬") } } } 객체를 map으로 돌리는 느낌~~~! 이렇게 하는거구나. TIL은 마치 무릎을 굽히고 팔을 바닥에 대고 있는 사람 같다.

[redux] props지옥 벗어나기,,, - 도전

하는 방법이 아니라 내 시행착오들을 썼음 store에 어떻게 변형시킬지를 다 때려넣음. 이걸 변형시킬 수 있는 법은 그 변형을 나타내는 액션을 보내는 것 뿐! 어떻게 변형시킬지에 대해 명시하는 것은 reducers를 작성한다-라고 함. function manduing(state = 0, action) { if(action.type === "hot") { return state + 1 } else if(action.type === "cool" { return state -1 } else { return state } } } let mandu = createStore(manduing); mandu.dispatch({type:"hot"}); // 만두 데피기 # NPM npm install redux # Ya..

[자동로그아웃/타이머] setinterval() - ★개인 포폴에 붙여보자

어떤 함수를 몇 밀리초마다 반복적으로 호출해야 할 필요가 있으면 setInterval() 사용 setInterval(func, delay, arg0, ... argN) 실행할 함수, 실행간격, 인자들 const SayHello = (name, text) => { console.log(`${name}님, 오늘도 ${text}!`) } const interval = setInterval(SayHello, 500, "만두", "행복한 하루"); clearInterval(변수 이름)하면 반복이 중단된다. 1분에 한 번 min을 증가시키는 함수를 만들고 그 함수를 setinterval하면 1분마다 min이 올라가겠지! min 증가시키는 함수에 min이 일정 시간을 넘으면 일어나게 할 작업을 셋팅한다. 마우스 움직..

유효성 검사, 정규표현식

RegExp 정규표현식 / /사이에 쓴다. const Validate = (value) => { let check = /[a-zA-Z0-9]/; return check.test(value) } const validation = Validate("만두"); console.log(validation); // false if(!validation) { console.log("엥~") // "엥~" } 영문 대소문자, 숫자만 가능하게 했을 때 한글을 입력하면 console에 false / "엥~"이 뜬다. /\d{3}-\d{3,4}-\d{4}/.test(”010-123-5678”) // true 디짓(숫자) “d”에서 탈출해줘(이스케이프), \ \d → 디짓(숫자) ?하면 한 개 혹은 0개, + 하면 한 개 이..

유효성 검사 - 작성 중

props.onChangeInput(`${props.type}`, event) } value={props.searchWord} text={ props.type === "baseid" ? "숫자만 입력하세요." : "이름 전체를 입력하세요." } /> import { useRef } from "react"; const XInput = ({ text = "검색어를 입력하세요.", ...props }) => { const inputRef = useRef(null); const onClickX = () => { if (inputRef.current?.value) { inputRef.current.value = ""; } }; return ( ); }; export default XInput;

[react-query] QueryClient, - 작성 중

QueryClient는 캐시와 상호작용하기 위해 사용된다. // app.js에서 import { QueryClient } from "react-query"; const queryClient = new QueryClient(); // 사용할 때 import { useQueryClient } from "react-query"; const queryClient = useQueryClient(); queryCache, mutationCache와 상관이 있다. queryClient.resetQueries("쿼리키", { exact: true }); The resetQueries method can be used to reset queries in the cache to their initial state base..

useEffect vs useLayoutEffect

https://pubudu2013101.medium.com/what-is-the-real-difference-between-react-useeffect-and-uselayouteffect-51723096dc19 글을 배꼈다(?) 사용방법(출처) useEffect(() => { // do side effects return () => /* cleanup */ }, [dependancy array]); useLayoutEffect(() => { // do side effects return () => /* cleanup */ }, [dependancy array]); 사용방법은 똑같다. useEffect 렌더링된 요소들이 화면에 프린트된 후 비동기적(asynchronously)으로 실행된다. useLayou..

[react-to-print] 리액트 컴포넌트 프린트하기 💌

컴포넌트만 예쁘게 인쇄할 수 있는 라이브러리~ 실버채가 썼던 것이 생각나서 써보았다. yarn add react-to-print 설치하고 사용할 컴포넌트에서 import ReactToPrint from "react-to-print"; import { useRef } from "react"; ... const componentRef = useRef(null); ... // HTML 부분 프린트} content={() => componentRef.current} /> ref 하나 선언하고 , 프린트 버튼을 만들 부분에서 를 가져온다! 이 부분이 바로 버튼이 되는데, trigger 안에 버튼을 그대로 넣어주면 된다. (지금 나는 emotion을 사용해 커스텀한 버튼을 가져온 것) content엔 위에서 쓴 r..

[react-query, ] invalidateQueries, 에러 박스

리액트 쿼리 const queryClient = useQueryClient(); ... queryClient.invalidateQueries("쿼리키"); useMutation에서는 이렇게해서 해당 쿼리키에 대해 무효화를 시킬 수 있다! 무효화를 하면 이 데이터는 더 이상 싱싱하지 않아...!하고 refetching이 진행된다. useQuery에서처럼 refetch를 꺼내올 수 없기에 당황했었는데, 이런 방법이 있고! 또 어디에서든 할 수 있어서 편하다. 에러 박스 const data = { name: "", age: "", } const CheckError = () => { const errorData: any = { name: false, age: false, } for (let key in data..

[react-query] 검색 기능

react-query엔 신기하고 재밌는 기능이 많은 것 같다. 일단 쿼리키를 의존성 배열로 줄 수 있다는 부분이 굉장히 신기하고! 헷갈리게 한다... 조회 api랑 검색 api가 따로 있고 그래야 되는 건진 모르겠지만 조회, 검색 쿼리를 따로 만들었다. const { data: searchData, refetch: searchRefetch } = useQuery( ["searchInfo", type, searchWord], () => searchInfo({ page: 1, type: type, search: searchWord, }), { enabled: false, } ); 페이지와 검색 타입(이름/번호) 서치 키워드를 인자로 받는다! 검색을 누를때만 refetch()를 시켜서 콜하기 위해서 enabl..

[react-csv] react 엑셀 파일로 내보내기

yarn add react-csv --save; // 또는 npm install react-csv --save; npm i --save-dev @types/react-csv 설치한 후에, CSVLink 또는 CSVDownload 컴포넌트를 import한다. CSVLink - 하이퍼링크를 보여주고 그것을 누르면 다운로드 할 수 있게끔 한다. Props : data, headers, separator, enclosingCharacter filename, onClick import { CSVLink } from "react-csv"; const headers = [ { label: "First Name", key: "details.firstName" }, { label: "Last Name", key: "de..

[공통 컴포넌트,css] select - defaultValue 빈값으로 설정

const DefaultSelect = ({ text = "기본 Select", typeClassName = "", sizeClassName = "", isEdit = true, isNew = false, ...props }) => { return ( {isNew && } // 새로 만드는 경우에만 빈 값 옵션을 넣었다. {props.options?.map((option: { value: string; name: string }) => ( {option.name} ))} {isEdit && ( )} ); }; export default DefaultSelect; Create 컴포넌트에서 불러올때 isNew={true}로 내려주면 된다.