개발자_승딱 개발자_승딱

window.open = jest.fn(); describe('link test', () => { it('move link', () => { const { getByRole } = render( ); userEvent.click(getByRole('button', { name: /click link/i })); expect(window.open).toHaveBeenCalledWith(testUrl); }); });​ Object.defineProperty(window.'location ~~ 이거랑 spyOn 개념 까먹었다. jest.spyOn(Object.getPrototypeOf(window.localStorage,'removeItem) 이게 mocking 하는건데 추적하기 용이한 막킹이였나

react-query 에서 데이터의 상태에 관하여 이전에 문서에 적혀있는 데이터가 리페칭 되는 경우(refetchOnWindowFocus)를 보자 Stale queries are refetched automatically in the background when: 쿼리 마운트의 새 인스턴스 창이 다시 초점을 맞춥니다. 네트워크가 다시 연결됩니다. The query is optionally configured with a refetch interval.(인터벌 옵션설정시) 위 4가지 경우에 내부적으로 리페치과정이 진행된다. refetchOnWindowFocus 에 의해서 데이터가 리페치되는 경우 이러한 과정은 로딩과정 없이 진행된다. 또한 리페치 에 의한 데이터가 캐시된 데이터가 다르지 않다면 해당 컴포넌..

리덕스 : 서버상태 > 클라이언트 상태화 > 상태접근 ==> 클라이언트 상태와 서버상태를 혼합해서 사용 react-query : 서버상태 > 캐시 > 사용 , 클라이언트 상태 > 상태접근 ==> 클라이언트 상태와 서버상태를분리 해서 사용할수 있음 서버상태를 클라이언트 상태화 해서 사용하지 않고 캐시한 이후에 캐시데이터를 사용할수 있도록 지원 그리고 주기적으로 서버상태를 동기화를 지원해주는 라이브러리 그러고 보니 예전에 부트캠프 프로젝트할때 상태관리도구 없이 props drilling 형태로 상태관리 하다가 아 이래서 상태관리 도구 사용해야하는거구나 느낀적이 있었는데ㅎㅎ 그때 그냥 드릴링 안하고 요청한번 더 넣으면 되는거 아니야 생각한적 있었는데 react-query 가 약간 그런식 이다 대신에 캐싱을 통..

brew install mkcert mkcert -install (mkcert = 로컬환경에서 신뢰가능한 인증서를 만들수 있는 도구 설치하세요) mkcert -key-file key.pem -cert-file cert.pem localhost 127.0.0.1 (mkcert 로 키파일 이름은 key.pem, 인증서 이름은 cert.pem 으로 localhost 랑 127.0.0.1 에서 사용할수 있는 키 생성) 만들어진 .pem 을 cert 폴더 만들어서 그냥 옮겨둠 이거는 편하실 대로 하시면 됨 그다음에 package.json 에가서 "start": "HTTPS=true SSL_CRT_FILE=~/cert/cert.pem SSL_KEY_FILE=~/cert/key.pem react-scripts sta..

brew 랑 잘 깔려있는데 왜 brew install mkcert 가 위의 경고가 뜨면서 안됨 brew doctor git -C $(brew --repo homebrew/core) checkout master 이거 하니까 되긴하는데 왜그런지는 모름ㅎ 일단 적어둠 https://stackoverflow.com/questions/41113448/homebrew-error-no-formulae-found-in-taps

https://velog.io/@lllen/AWS-S3%EC%99%80-Cloudfront%EB%A5%BC-%EC%82%AC%EC%9A%A9%ED%95%9C-%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C-%EB%B0%B0%ED%8F%AC

리덕스 데브툴에서 특정액션이나 상태를 변환해서 보여줄수도 있고 보여주지 않도록 설정할수 있다. 로드유무만 확인이후 해당객체를 사용만 하지 새롭게 저장하는 대상이 아닌경우 사용 할수있음 actionSanitizer (function) - function which takes action object and id number as arguments, and should return action object back. See the example bellow. stateSanitizer (function) - function which takes state object and index as arguments, and should return state object back. const actionSaniti..

rem : root element (최상위)의 fontsize 를 기준으로한다. em : 해당 element 의 fontsize를 기준으로한다. rem사용 : 반응형으로 제작하는 경우 rem 과 미디어쿼리를 사용하여 크기에 따라 루트엘리먼트의 폰트를 조작하여 전체적인 사이즈에 영향을 주도록 할수있다. em사용 : 요소의 폰트크기는 해당요소의 padding 이나 margin 과 상호작용 해야 하는 요소 임으로 이러한 상관관계가 보여져야 하는 경우 em단위 를 사용 할수 있다. 줄바꾸기 : word-wrap 속성을 이용하여 글자의 길이가 width 를 벗어났을때 어떻게 할것인지 정할수 있고, word-break 속성을 이용하여 글자단위로 줄바꾸기가 실행이 될지 단어단위로 이루워질지 정할수 있다.