뉴히의 개발 로그

React Query Lifecycle queury가 stale하면 상한, 유통기한이 만료 되었다는 뜻, 그래서 데이터를 새로 받아오기위해 값을 요청한다. fresh 상태는 새로 요청하지 않음 * default config (기본 설정) 기본설정 의미 staleTime: 0 useQuery 또는 useInfiniteQuery에 등록된 queryFn 을 통해 fetch 받아온 데이터는 항상 stale data 취급 refetchOnMount: true useQuery 또는 useInfiniteQuery 가 있는 컴포넌트가 마운트 시 stale data 를 refetch 자동 실행 refetchOnWindowFocus: true 실행중인 브라우저 화면을 focus 할 때 마다 stale data를 refet..

이번주차는 개인과제를 진행했다. 여유(?)아닌 여유를 부리며 진행했는데 그래서 퀄리티가 높지 못하다 ㅠㅠ 완성을 못할까바 처음 기획에서 조금 단순하게 잡아버린것도 ... 하고싶은 기능을 넣어서 작업해보자. 결국 다 내 피와 살이 될테니.. 이번주 왜 좀더 조급해 하지 않았나? 평소보다 빡세게 하지 못한것같당.... 강의를 꼼꼼히 보는것도 좋고 공부를 꼼꼼히 하는것도 좋지만 빠르게 많이 해보는 것도 중요한것같다. 작은 디테일보다는 크게 진행 스케줄을 잡고 추가로 디테일하게 들어가며 진행하는 걸류 결국 토큰사용해서 로그인 유지해보는건 아직 진행못했는데 오늘도 다갔네.... 빨리 해보자 ^^ 그만 밍기적거리고 ㅎㅎㅎ Array.fill() arr.fill(value[, start[, end]]) value:배..

필수 입력 정규식 let reg_required = /.{1,}/; 이름 관련 정규식 let reg_name1 = /^[가-힣]+$/; // 한글만 let reg_name2 = /^[a-zA-z]+$/; // 영문만 let reg_name3 = /^[a-z]+$/; // 영문 소문자만 let reg_name4 = /^[A-Z]+$/; // 영문 대문자만 let reg_name5 = /^[가-힣a-zA-Z]+$/; // 한글 + 영문만 아이디 관련 정규식 let reg_id1 = /^[a-z0-9_-]{4,20}$/; // 소문자 + 숫자 + 언더바/하이픈 허용 4~20자리 let reg_id2 = /^[A-Za-z]{1}[A-Za-z0-9_-]{3,19}$/ // 반드시 영문으로 시작 숫자+언더바/하이픈..

React Query patch 인자값을 넘겨줄때, id랑 update할 데이터 이렇게 두개의 인자로 넘겨줬다. 그런데 계속 안됨.... 알고보니 인자값을 두개를 넘겨줄 수 없다! 하나의 객체 형태만 넘겨줄 수 있음 ㅠㅠ ▼ 잘못된 코드 const updateTodo = async ({ id, updateData }) => { console.log('updateData', updateData); await axios.patch(`${process.env.REACT_APP_SERVER_URL}/todos/${id}`, updateData); }; // todo api const updateTodo = async (id, updateData) => { await axios.patch(`${process.en..

매우매우 간단한 jsonserver 배포하기! glitch 서버에 접속후 구글이나 깃허브로 가입! 상단 우측에 new project 클릭하고 맨아래 import from github 클릭 그런다음 prompt 에 github 레포 주소를 넣으면 끝!! 대시보드에 들어가면 project에 시간별로 올라와 있다. 들어가서 우측 상단 share 버튼 클릭하면 live site 링크를 복사할 수 있다. https: 프로토콜이라 vercel과 연동도 매우잘됨!

errorrrrrrrrrrrrrrrrrrrrr..... 첫 랜딩시 data를 불러오지 못한다. null값, filter코드를 지우면 데이터를 잘 가져옴!! 코드 실행 순서의 문제!!!! 예외처리로 해결할 수있다. const { isLoading, isError, data } = useQuery('todos', getTodos); react query는 usequery를 통해서 데이터를 어디서든 불러와서 쓸수 있다. 다만, useQuery 데이터를 불러오는 순서는 동기함수들이 전부 끝난 뒤에 서버에 'todos'이름 쿼리 있니? 그럼 데이터에 'todos'쿼리 데이터 저장해줘 하고 그 다음 data에 데이터를 할당해서 아래에서 불러와 쓸수 있다. 그렇기 때문에 예외처리를 해줘야한다! 1. 옵셔널 체이닝(?..

1. svg 파일 구해서 img 태그로 넣어주기 2. 원하는 색의 hex 값 알아내기 https://www.color-hex.com/ 3. filter 값 계산하기 https://codepen.io/sosuke/pen/Pjoqqp 위의 페이지에서 Target color 에서 hex 값 넣고, filter 값 알아내기 4. img 태그나 선택자를 이용하여, css filter 속성에 3번에서 알아낸 값 붙여넣기 const StDelImg = styled.img` filter: invert(82%) sepia(25%) saturate(1197%) hue-rotate(186deg) brightness(99%) contrast(101%); `; 검색해보니 동일한 모양의 색갈이 다른 여러 개의 파일을 준비하여 필..

리덕스를 사용하지 않고 json-server에 데이터 저장후 리액트 쿼리로 app.jsx에 로 감싸주면 전체 파일에서 query에 접근해서 사용할 수 있다. // App.jsx const queryClient = new QueryClient(); const App = () => { return ( ); }; api폴더에 전체 모듈을 모아 작성해주고 // axios 요청이 들어가는 모든 모듈 import axios from 'axios'; //조회 const getTodos = async () => { const response = await axios.get(`${process.env.REACT_APP_SERVER_URL}/todos`); return response.data; }; // 추가 const..