개발
-
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..
-
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..
-
[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: 데이터를 가져올때 ..
-
[react-query] getServerSideProps에서 prefetchQuery 사용법개발/Next.JS 2023. 4. 19. 01:18
api 요청 캐싱을 위해 react-query를 공부하던중에 다시 SSG SSR 개념을 복습하다가 기존에 페이지 로딩 후 api 요청을 해서 데이터를 렌더링 해주는 방식에서 SSR 방식으로 변경해야 겠다고 생각되었다. react-query는 클라이언트단에서 실행되기 때문에 react-query를 getServerSideProps와 같이 사용하려면 react-query의 prefetchQuery 함수를 사용해야 했다. 서버에서 미리 prefetchQuery 메소드로 데이터를 불러와 캐싱하고 렌더링 단계에서 다시 useQuery를 사용하면 캐싱된 데이터를 가져와 빠르게 데이터 fetching이 가능하다. (useInfiniteQuery 와 prefetchInfiniteQuery 도 있다) // reactQu..
-
Next.js Context 사용법개발/Next.JS 2023. 3. 21. 22:05
Next.js 개발할때 부모컴포넌트에서 자식컴포넌트로 props를 넘겨야 할 일이 다분합니다. 단순하게 부모->자식 컴포넌트로 넘길땐 괜찮지만 firstComponent -> secondComponent -> thirdComponent 이런식으로 여러 컴포넌트를 거쳐 props를 넘기게 되면 나중에 유지보수하기도 힘들고 복잡하고 머리아프죠 이럴때 사용하는게 Context 입니다. 보통 로그인한 유저 데이터나 전역 어디서든 사용할 수 있는 데이터를 불러올때 Context를 사용합니다. 저같은 경우엔 axios instance를 Context에 담았습니다. 사용법을 알아봅시다. // SomeContext.ts import { createContext } from "react"; export default c..