SimCoding

[React] DarkMode 새로고침시 화면 깜빡임문제 해결 - useLayoutEffect 안녕하세요. 이번 포스팅 에서는 useLayoutEffect Hook에 대해 간단히 소개하고, UseLayoutEffect Hook을 이용해, DarkMode에서 새로고침시 화면이 깜빡이는 문제를 해결하는 방법에 대해 알아보겠습니다. useLayoutEffect & useEffect useLayoutEffect는 기본적으로 useEffect와 형태가 동일합니다. useLayoutEffect(() => { effect(); return () => { cleanup(); }; }, [input]) useEffect와 useLayoutEffect의 차이점 useEffect는 DOM이 화면에 그려진 이후에 호출됩니다...

[JS] axios interceptors 를 이용해 token만료시 refreshToken 요청하기. 안녕하세요. 이번 포스팅에서는, token이 만료됐을 때 refreshToken을 자동으로 요청 하기 위한 axios interceptors 설정에 대해 알아보겠습니다. 과정 요청성공시 return 요청실패시 ( 토큰 만료로 인한 에러 발생시) 에러를 반환하기 전에 interceptor 해서, 서버에 token refresh를 요청합니다. token refresh요청을 통해 받은 새로운 accessToken을 ReduxStore등 본인이 이용하는 저장소에 저장합니다. 새로운 accessToken을 header에 담아, 재요청합니다. 코드 예시 axios.interceptors.response.use( ..

puppeteer access denied 해결 방법 - puppeteer-extra-plugin-stealth 안녕하세요. 이번 포스팅에서는 puppeteer access denied 에러를 해결하는 방법에 대해 알아보겠습니다. 저는 쿠팡 크롤링 과정에서 puppeteer access denied 에러가 발생해.. 아주 고생을 했습니다 ..! 다행히 열심히 구글링한 결과, 해결 방법을 찾을 수 있었습니다 ! 이 문제를 한번에 해결해주는 라이브러리가 있더라구요.. ! 'puppeteer-extra-plugin-stealth' 라이브러리를 이용하면 문제를 해결 할 수 있습니다. 설치하기 npm install puppeteer puppeteer-extra puppeteer-extra-plugin-stealt..

[JS] axios interceptor로 authorization header 설정하는 방법. 안녕하세요, 이번 포스팅에서는 axios interceptor를 활용해 authorization header의 default값을 설정하는 방법에 대해 알아보겠습니다. 토큰이 있을 경우 config.header.Authorization = `Bearer ${token}` 토큰이 없을 경우 config.header.Authorization = "" 예시 코드 axios.interceptors.request.use(function (config) { config.headers.Authorization = token ? `Bearer ${token}` : ""; return config; }); 이렇게 설정해주면, ..

axios interceptor 를 이용해서 요청,응답 커스터마이징 하는 방법 안녕하세요. 이번 포스팅에서는 axios의 interceptor를 이용해서 requset, response를 커스터마이징 하는 방법에 대해서 알아보겠습니다. 인터셉터 인터셉터 사용방법을 예시 코드를 통해 확인해보겠습니다. // 요청 인터셉터 추가 axios.interceptors.request.use( function (config) { // config에는 axios요청시 입력한 config가 들어있습니다. // config를 가공해서 요청하는 것이 가능합니다 ! // 요청을 보내기 전에 수행할 일 // ... return config; }, function (error) { // 오류 요청을 보내기전 수행할 일 // .....

[TS] Property 'name' does not exist on type 'EventTarget' > EvenTarget에 name 속성이 존재하지 않아서 발생하는 타입오류 > 해결 : TypeAssertion을 이용해 해결 할 수 있다.

[TS] Object is of type 'unknown'.ts(2571) (error object) > try-catch문의 error의 타입과 관련해서 발생하는 error > 해결방법 : 아래와 같이 type narrowing기법을 이용해 해결 할 수 있다.

[Next.js] Nextjs build 할 때, dynamic route 404 error 해결하는 방법 안녕하세요, 이번 포스팅에서는 Nextjs환경에서 build할 때, dynamic route를 처리하는 방법에 대해 알아보겠습니다 ! NEXTJS 개발환경에서는 분명, dynamic route에 정상적으로 접근이 됐었는데 .. build하고 배포를 하면 접근이 안되는 문제가 있었습니다.. NEXTJS Build과정에서, 정적페이지를 생성할 때 DynamicRoute의 경우에는 따로 처리를 해줘야 하는 것 같더라구요.. 저는 NEXTJS 에서 제공하는 getStaticPaths, getStaticProps를 활용해서 DynamicRoute를 처리해주었습니다. 예시코드를 통해 방법을 확인해보세요 ! 간..