JavaScript
-
Redux-persist provider 추가하면 컴포넌트 렌더링 안되었던 이유.카테고리 없음 2024. 1. 24. 20:53
_app.tsx 페이지 이동후에도 redux 상태값을 유지하기 위해 redux-persist 설치를 하고 나서 _app.tsx 파일에서 위 처럼 PersistGate provider를 추가했더니 Layout 컴포넌트 부터 렌더링이 안되기 시작했다. _document.tsx 은 렌더링이 되었다. 이것때문에 어제 1~2시간 동안 삽질 했는데 바로 오늘 우연히 persistor 를 console.log로 찍어봤더니 여러번 나오길래 strictMode를 안껐나? 하고 끈 뒤에 다시 새로고침 했더니 잘 나온다................. 혹시나 저 처럼 같은 오류가 발생하신 분들은 strictMode 끄는걸 시도해보시길
-
Nest.JS Jest 의 toBeInstanceOf 메소드 삽질카테고리 없음 2023. 11. 12. 20:59
jest 프레임워크로 테스트 코드를 공부하던 중 위 catch문 처럼 에러 객체가 어떤 Exception 클래스인지 테스트 하는 코드를 작성했는데 service단에선 NotFoundException 으로 예외처리를 했기 때문에 당연히 테스트는 성공한다. 혹시나 다른 exception 클래스를 넣으면 테스트가 실패할까 라는 작은 호기심에 다른 예외 클래스 HttpException 을 넣었더니 다른 예외 클래스를 넣었음에도 테스트가 통과해 그냥 넘어가기엔 너무 찝찝한 상태가 되어버렸다. 예외처리가 안된건지 일부러 예외처리가 되도록 해봐도 결과는 여전히 똑같았고 혹시나 하는 마음에 정의 파일을 열어봤는데 NotFoundException 이 HttpException 클래스를 상속받고 있었다. 아무래도 HttpE..
-
componentDidCatch 으로 전역적으로 에러 핸들링 하기.개발/Next.JS 2023. 5. 5. 14:31
React 16버전 부터 나온 componentDidCatch 라는 라이프사이클 이용해 쉽게 에러 핸들링이 가능해졌다. 클래스형 ErrorBoundary 컴포넌트 안에 componentDidCatch 메소드를 선언해주고 루트 컴포넌트에선 Provider처럼 컴포넌트를 감싸주는 형태를 갖추면 된다. 사용법은 아래와같다. import { Component } from "react"; class ErrorBonudary extends Component { constructor(props) { super(props) this.state = { isError: false, errorMsg: "", } } // 아래에 SomeComponent.tsx에서 발생한 예외를 감지. componentDidCatch(erro..
-
[react-query] useInfiniteQuery 사용법.개발/Next.JS 2023. 4. 19. 01:39
useInfiniteQuery는 데이터를 연속적으로 불러올때 사용하는 메소드이다. ( 예를들어 페이징 ) 간단하게 사용법을 알아보자. const apiCallMethod = async () => { // api call code } const { data, fetchNextPage, refetch, hasNextPage, isStale } = useInfiniteQuery( queryKey, ({ pageParam = 1 }) => apiCallMethod(pageParam), //queryFn { getNextPageParam: (lastPage, allPages) => { } staleTime: 10 * 1000; cacheTime: 10 * 1000; }// 옵션 querKey: 데이터를 가져올때 ..
-
썸네일 이미지를 변경해서 페이지 속도 증가하기개인프로젝트/음악블로그 2022. 9. 17. 03:22
1. img 태그에 loading="lazy"를 옵션을 설정하여 첫 로딩 시 속도 증가시키기 img 태그에 loading="lazy" 속성을 설정하게 되면 첫 로딩 시 화면에 잡히지 않는 이미지들은 로딩되지 않으므로 속도가 늘어나는 효과를 볼 수 있습니다. 2. 이미지 표시 크기 줄이기 이 부분은 말 그대로 용량이 아닌 표시되는 크기를 줄이면 속도 개선이 됩니다. 3. 썸네일 JPG 이미지를 WEBP로 변경하기 구글에서 만든 최신 이미지 확장자. 이름처럼 web에 최적화된 확장자라고 합니다. 아무튼 WEBP 이미지가 다른 JPG나 PNG 같은 이미지들 보다 압축률이 좋아서 용량이 적어 속도 증가에 도움이 될것입니다. 예시로 용량 비교를 해보겠습니다. JPG : 3.4 KB WEBP : 2.6 KB 0.8..
-
Eslint로 배운 자바스크립트 코딩 컨벤션 (에어비엔비 베이스)개발/Javascript 2022. 9. 13. 23:41
괄호 안에는 룰 이름을 적어두겠습니다. 변수 관련 - 변수 네이밍 => camelCase 예시 const someData = { id : 1 } - var 는 사용하지 않을 것 ( no-var ), 권고 방법 : 선언한 변수에 값이 변경되는 일이 없다면 => const 사용, 변경 되는 일이 있다면 => let 사용 함수 관련 1. (class-methods-use-this) 클래스 메소드에서 this 키워드를 사용하지 않을 경우 => static 메소드로 변경해주거나 this 키워드를 사용 2. (arrow-parens) arrow function의 파라미터가 한개일 경우 괄호 제거 권고 const someFunction = (someVar) => { } => 파라미터가 한개일 경우 괄호 제거 권고 권..
-
[Node.js] Cannot set headers after they are sent to the client 오류가 발생하는 이유개발/Node.js 2022. 9. 13. 22:56
Cannot set headers after they are sent to the client 를 해석해보자면 HTTP 헤더를 이미 클라이언트에게 보냈으니 더이상 헤더를 설정할수 없다 라는 뜻입니다. 이 말인 즉슨 HTTP 헤더를 이미 보냈음에도 또 다시 보낼때 발생하는 오류인것을 알 수 있는데요 이 오류가 발생할 수 있는 간단한 코드 예시를 들어보자면 res.send(...send some data).redirect('/') 위 처럼 send에 이어서 redirect를 실행하게 되면 오류가 발생하게 됩니다. 이유는 res.send의 동작방식에 있는데요 res.send 메소드는 response을 보낸 이후 동시에 res.end()로 HTTP 통신을 끝내게 됩니다. 그래서 HTTP 통신은 이미 끝났는데 왜..