뇌 채우기 공간

1. react-query https://yrnana.dev/post/2021-08-21-react-query-redux react-query가 redux같은 전역 상태관리 라이브러리를 대체할 수 있을까 `react-query`는 전역 상태관리 라이브러리가 아니라 서버와 클라이언트 간의 비동기 작업을 쉽게 해주는 라이브러리다. yrnana.dev https://www.zigae.com/react-query-key/ React Query Key 관리 queryKey는 React Query에서 중요한 개념이다. 내부적으로 데이터를 캐시하고 쿼리에 대한 종속성이 변경될 때 자동으로 다시 가져올 수 있게 한다. www.zigae.com 2. react-query useInfiniteQuery https://sh..

1. http.interceptors.request.use 라는 코드를 알게 되었다. https://velog.io/@skyepodium/axios-인터셉터로-API-관리하기 https://third9.github.io/posts/Axios다양하게_활용하기-interceptor/ https://hydev.tistory.com/3 https://velog.io/@subanggu/axios-interceptor-적용하기 axios interceptor 적용하기 interceptor를 왜 적용했냐? 답은 바로 귀찮아서!!!!!!!!!!!!!!! 게다가 연구 초창기에 테스트를 위해서 주먹구구 사용하던 코드로 계속 개발을 진행하다 보니 아래와 같은 문제점이 있었음! 1) api 호출 velog.io 2. next..

1. react with typescript 2021.12.10 - [WEB/REACT] - [REACT] react with typescript/ 리액트를 타입스크립트로 작성하기1탄 - 설치, 컴포넌트 props타입 지정 [REACT] react with typescript/ 리액트를 타입스크립트로 작성하기1탄 - 설치, 컴포넌트 props타입 지정 이제는 타입 스크립트가 대세! 타입스크립트를 사용하면 타입 추론을 개발할 때 오류를 줄여주고 코드를 작성하기 쉽게 도와준다. 전에는 리액트를 js로 작성했지만 이제는 타입스크립트로 하 sso-feeling.tistory.com 2021.12.10 - [WEB/REACT] - [REACT] react with typescript/ 리액트를 타입스크립트로 작성..

1. react-query https://blog.rhostem.com/posts/2021-02-01T00:00:00.000Z blog.rhostem.com 프론트엔드 웹 개발 기술 블로그 blog.rhostem.com https://shindongri.dev/blog/react-query-14/ React Query：Mutations 쿼리와 달리 뮤테이션은 데이터 CUD 에 사용된다. 이 목적으로 리액트 쿼리는 useMutation 훅을 제공한다. function App() { const mutation = useMutation(newTodo => axios.post('/todos', newTodo)) return ( {mutation.isLoading ? ( shindongri.dev https://..

1. react hook form with yup https://codesandbox.io/s/react-hook-form-apply-validation-q5m00?file=/src/index.js react-hook-form-apply-validation - CodeSandbox react-hook-form-apply-validation by bluebill1049 using react, react-dom, react-hook-form, react-scripts codesandbox.io 2. position absolute align center position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); 3. local환경에 ..

1. react table editable https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/editable-data tannerlinsley/react-table: editable-data - CodeSandbox tannerlinsley/react-table: editable-data using namor, react, react-dom, react-scripts, react-table, styled-components codesandbox.io https://react-table.tanstack.com/docs/examples/editable-data Examples: Editable Data Subscrib..

리액트에서 사용하는 라이브러리들 1. classnames https://www.npmjs.com/package/classnames https://chanhuiseok.github.io/posts/react-14/ [React] 리액트 classnames 활용하기 (classnames, !! 연산자) 컴퓨터/IT/알고리즘 정리 블로그 chanhuiseok.github.io 2. react-query https://maxkim-j.github.io/posts/react-query-preview https://merrily-code.tistory.com/76 https://blog.doitreviews.com/development/2021-08-27-react-query-tutorial-01/ 2021-08-..

1. react table https://www.daleseo.com/react-table/ React Table로 테이블 UI 구현하기 Engineering Blog by Dale Seo www.daleseo.com 2. react css https://hello-bryan.tistory.com/114 [React 따라하기 #13] React 에서 css 적용하기 React CSS 크게는 inline styling 과 .css 파일을 이용하는 방법이 있습니다. - inline styling 이용 class MyJob extends React.Component { render() { return ( Hello Style! ); } } html 에서 tag 안에 직접 s.. hello-bryan.tisto..

1. redux toolkit https://blog.woolta.com/categories/1/posts/204 redux-toolkit 을 사용해 redux 작성 하기 (createAction, createReducer, createSlice, createAsyncThunk) woolta 블로그 ver2.0 기술 개발 블로그 blog.woolta.com https://redux-toolkit.js.org/api/createslice createSlice | Redux Toolkit redux-toolkit.js.org 2. moment.js https://flamingotiger.github.io/javascript/momentjs/ 날짜 라이브러리 moment.js 사용법 시작하기날짜를 손쉽게 다룰..

1. ant design https://ant.design/ Ant Design - The world's second most popular React UI framework ant.design ant design은 처음 써본다. 회사에서는 무조건 ui를 직접 만드는 줄 알았는데 이런 편리한 라이브러리를 사용하는구나. rules={[ { required: true, message: '이메일이 형식에 맞지 않습니다.', type: 'email', }, ]} 정말 좋은 것은 이렇게 타입을 이메일로 정하면 정규식을 직접 지정해주지 않더라도 이메일 형식 유효화 검사를 할 수 있다는 점이다! 오늘 시간 기록을 보니 대부분을 다른 사람들과 대화하는데에 썼다. 이제 실무를 해야하는데 일이 너무 없었다. 나한테 주어진..