far

백엔드와 React를 연결하기 위해 데이터를 fetch 시켜야 한다. 만약 백엔드 작업이 되어 있지 않다면 axios는 건너뛰고 더미 데이터 넣어주면 된다. npm i axios npm i react-query react-query를 선택한 이유는 redux가 redux-toolkit으로 오면서 보일러플레이트가 많이 줄었다고는 하나, 전역 상태를 관리하기 때문에 여전히 코드량이 많았다. 그래서 서버 스테이트를 관리하는 react-query를 사용해보고 싶었다. 아직 조금밖에 사용해보지 않았기에 장단점은 잘 모르겠으나, 확실히 코드는 많이 간결해졌다. // configs/config.ts export const backUrl = 'http://localhost:3065'; configs폴더를 만들고 안에 ..

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..

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