전체 글
-
redux-persist 사용 시 SSR이 안됐던 오류 및 해결법개발/Next.JS 2025. 5. 14. 21:19
먼저 원인을 설명하자면 redux-persist 를 사용하게 되면 persist 패키지에서 localStorage 를 사용하는데 서버에선 localStorage 사용이 당연히 안되니 서버 : localStorage 가 없는 상태에서 HTML 생성 클라이언트 : localStorage가 사용이 가능한 상황에서 HTML 생성 두 환경에서 생성하는 HTML의 차이가 생겨 getServerSideProps에서 dehydrate를 해도 hydration이 되지 않았던것. 그렇기 때문에 이 전달 됐던것이다. 해결법 : 간단하다 이 프로바이더를 클라이언트에서만 불러오게 하면 됨. 이런 느낌으로 작성하면 된다.const [isClient, setIsClient] = useState(false);useEffect..
-
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..
-
vercel 으로 배포한 next 앱에서 api 호출 시 308 에러가 났던 이유개발/Next.JS 2023. 10. 9. 20:30
vercel로 배포한 next 에서 api 서버로 호출을 하지만 계속 308에러가 발생한다. (리다이렉트 관련 그래서 next 단에서 api 호출하는 경로를 직접 브라우저에서 접속을 해보니 프록시를 타서 가는게 아닌 아예 리다이렉트를 하고 있었다. 알고보니 vercel.json vercel 환경설정 파일을 열어보니 rewrites로 프록시 설정한게 아니라 redirects로 잘못 설정했던게 원인이였다. ㅠㅠ 그래서 rewrites로 제대로 설정해주었다. 추가로 www.mydomain.com/api 위처럼 www 도메인 으로 호출해주는게 권장되는 방법이라고 한다.
-
Redux에서 쓰이는 Flux 패턴이란?개발/Next.JS 2023. 7. 30. 02:49
페이스북에서 고안해낸 패턴으로 MVC 패턴은 눈 깜빡할 사이에 구조가 엄청 복잡해진다 하여 (규모가 좀 커지면 컨트롤러와 비즈니스 로직이 문어발처럼 여기저기 연결되기 쉽습니다.) 단방향 데이터 흐름이 핵심인 flux 패턴을 고안해냈습니다. Action -> dispatcher -> store -> reducer 이렇게 단방향으로 reducer까지 액션객체가 전달되어 redux의 상태값이 변경이 됩니다. 코드의 흐름으로 봤을땐 dispatch 에 액션생성함수로 만들어낸 액션객체를 전달하면 dispatch가 store에 액션객체를 전달하고 store가 알맞은 리듀서에 액션객체를 전달하여 상태값을 변경할수 있게 합니다. 하지만 코드를 짤때 매번 액션객체를 생성해주는 함수를 만들고 리듀서에서는 스토어에서 전달받..
-
모듈 [패키지명] 에 대한 선언 파일을 찾을 수 없습니다. 오류 해결방법.개발/Typescript 2023. 5. 8. 22:01
패키지를 분명 설치했음에도 이렇게 빨간줄이 그여져 있는 경우를 종종 볼 수 있다. 무슨 오류인지 확인해보면 이런 메시지를 확인할 수 있는데 타입스크립트는 패키지 마다 .d.ts 로 끝나는 타입 선언 파일을 찾아. 타입 정보를 찾는데 위 오류는 .d.ts 파일이 없어서 생기는 오류이다. 보통 패키지를 설치하면 타입이 선언되있는 선언파일이 같이 설치되는게 보통이지만 js-cookie 패키지의 경우 따로 설치해줘야 했다. 결론은 타입이 선언되있는 패키지를 찾아서 dev dependencies로 따로 설치해주면 된다. js-cookie 패키지의 경우 @types/js-cookie
-
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..