far

프로젝트를 하던 도중 로컬 서버에서는 잘 돌아갔는데 production레벨에서 api 통신을 하기만 하면 에러가 발생했다. 처음에는 cors에러인가 싶었는데 그것도 아니었고, 배포시 .env를 잘못 등록했나 싶었는데 그것도 아니었다.이것저것 삽질을 한 결과 Github Action의 빌드창을 확인해봤더니...Cannot get final name for export 'QueryClient' of ./node_modules ......라는 에러가 발생하고 있었다. 이 에러는 React-Query의 QueryClient를 사용중인곳에 'use client'를 붙이지 않아서 생기는 문제인데, 나의 경우 Provider로 사용중인 QueryClient말고 다른곳에 테스트용으로 만들어둔 QueryClient에 '..

이 글은 Next.js 14, App Router를 기준으로 작성되었습니다.Cookie와 도메인쿠키는 기본적으로 생성된 도메인과 서브도메인에서만 사용이 가능합니다. 예를들어 domain.com이라는 도메인에서 domain.com에 대한 쿠키가 생성되는 경우, domain.com과 서브 도메인인 blog.domain.com에서는 사용이 가능하지만 testdomain.com에서는 사용이 불가능합니다. 또한 서브도메인에서 생성된 쿠키는 메인 도메인에서 사용할 수 없습니다. 즉 blog.domain.com에서 생성되는 쿠키는 domain.com에서 사용할 수 없다는 뜻입니다. 그래서 멀티도메인 사용시 domain.com에서 쿠키가 생성되도록 하는게 효율적이라 할 수 있습니다만, 프로젝트 자체가 login.dom..

Next.js는 태그를 사용해 이미지를 삽입하게 되는데 가끔씩 Image with src has either width or height modified, but not the other. If you use CSS to change the size of your image, also include the styles 'width: "auto"' or 'height: "auto"' to maintain the aspect ratio. 라는 warning이 뜬다. 문제를 해결하지 않아도 작동은 되지만, 에러가 많이 쌓이면 성능에 문제가 있을수도 있고 console창에 계속 에러가 뜨기 때문에 해결하는 방법을 알고 있으면 좋다. images.tsx const Images = () => { return ( )..

1. Next.js란? React에서 사용가능한 오픈소스 자바스크립트 웹 프레임워크이며 리액트에서 서버 사이드 렌더링(SSR), 정적 사이트 생성(SSG)나 증분 정적 재생성(ISR)을 쉽게 구현할 수 있도록 도와준다. 2.1 Pre-rendering Next.js는 기본적으로 클라이언트 사이드 자바스크립트로 모든 작업을 수행하는 대신 각 페이지의 HTML을 미리 만들어주는 Pre-rendering 방식과 클라이언트 사이드 렌더링(CSR)을 혼용하는 하이브리드 방식이며, Pre-rendering을 사용할 경우 검색엔진최적화(SEO)에 유리하다. 프리 렌더링을 사용할 경우와 사용하지 않을 경우 2.2 Static Generation(SSG) Next.js의 프리렌더링은 Static Generation과 S..

나의 경우 HTML에 __NEXT_DATA__도 생성되는걸 확인했고 Javascript를 끄고도 HTML렌더링이 되는것 까지 확인 했음에도 불구하고 Preview에 미리보기가 생성되지 않았다. (즉 SSR이 동작하지 않았다.) 정확한 원인을 몰라서 하나하나씩 코드를 지우다 보니 TailwindCSS를 SSR하기 위해 package.json에 작성했던 prebuild가 문제였다. "prebuild": "tailwindcss-cli build -o styles/tailwindSSR.css" // 이 부분 그래서 prebuild와 _document파일을 제거했더니 Preview에 미리보기가 생성되면서 SSR이 작동하는걸 확인했다. 물론 tailwindCSS의 SSR을 살리면서 빌드하는 방법도 있었겠지만, pr..

Next의 경로폴더(Pages) 안에 경로파일이 아닌 다른 파일이 들어있는경우에 나는 에러. 공식문서에도 나와있고 진짜 별거 아니지만 이 오류 때문에 조금 삽질을 했기에..

1. CORS란 CORS(Cross Origin Resource Sharing)란 한 도메인 또는 Origin의 웹 페이지가 다른 도메인을 가진 리소스에 액세스 할 수 있게 해주는 보안 매커니즘이다. 2. CORS에러가 생기는 이유 간단히 말해 브라우저에서 다른 도메인에 요청을 보낼때 생기는 오류이다. 예를들어 port가 3000인 브라우저가 port가 3080인 백엔드 서버에 요청을 보낸다면 도메인이 다르므로 브라우저가 차단을 해버린다. 이를 해결하는 방법은 여러가지가 있지만 이 글에서는 서버와 서버간의 통신에는 CORS에러가 생기지 않는다는 점을 이용해 브라우저와 도메인이 같은 프론트 서버로 도메인을 보낸 뒤 프론트 서버와 백엔드 서버가 통신하는 방법을 사용한다. (Proxy) 참고로 요청 받을 주소..

React.Children.only expected to receive a single React element child. 안에 태그를 안 넣어서 에러가 났다. (스택 오버플로우 검색 해보니 태그와 태그 사이에 공백이 있어도 같은 에러가 나는 듯 하다)