NextJS6

• 

  [Next/SVGR] NextJS에서 SVGR 다루기 1. SVGR이란 svgr이란 svg 이미지를 react에서 쉽게 다루기 위해서 만들어진 webpack 설정이자 babel 설정이다. SVGR을 이용하면 SVG파일을 react에서 컴포넌트화 하여서 사용할 수 있다. Svg 파일은 png,jpg, jpeg파일들과 다르게 크기와 상관없이 일정한 화질을 유지하며 무한한 확장 축소가 가능하고 색상과 테두리 선의 두께, 색상과 같은 속성들도 그 때 그 때 변경이 가능하다. 사실 svg 이미지는 xml이라는 마크업 언어로 쓰여진 language의 일종이기 때문에 완벽한 이미지라고 보는 것에는 무리가 있다. 나는 내가 프로젝트를 진행하면서 이 svg이미지를 어떻게 다루었는 지를 기록할 것이다. 우선 나는 NextJS에서 SVGR을 사용하기 위해 @svgr/webpa.. front-end/Nextjs 2022. 9. 17.

• 

  [NextJs] React-Query로 ServrSide Rendering 구현하기 1. 무엇을 하려하는가? NextJS가 강력한 이유 중 하나는 SSR(server-side-Rendering)을 제공하기 때문이다. 서버 단에서 미리 데이터를 포함한 html파일을 렌더링한 후 프론트 쪽으로 보내주기 때문에 한 번 사이트가 로딩 된 후에는 거의 로딩시간이 걸리지 않는다는 장점이 있고 검색엔진이 사이트들을 방문할 때 많은 데이터가 이미 렌더링 된 html에 포함되어 있으므로 검색 엔진 최적화에도 유리하다는 장점이 있다. 나는 이 ServerSide Rendering을 React-Query라이브러리를 사용하여 구현해보고자 한다. 2. 구현 1. _app.tsx import Footer from "components/Layout/Footer"; import Header from "compone.. front-end/Nextjs 2022. 7. 30.

• 

  [NextJS] 동적 라우팅 (with React-Query) 1. 무엇을 하려고 하는가? 나는 개인 블로그를 만들고 있다. 이 중에 블로그 글을 작성하여 업로드를 하면 /Album페이지에 작성된 블로그 글을 React-Slick을 이용해 carousel형태로 보여주고 이 Carousel에 들어있는 이미지를 누르게 되면 해당하는 블로그 글 상세 페이지로 이동하는 기능을 구현하려고 한다. 이 기능을 NextJS에서는 dynamic Routing 즉, 동적 라우팅이라는 기능으로 제공하고 있는데 거의 프론트 엔드 업무를 진행할 때는 필수적인 기능이라 기록해두고자 한다. React에서는 useParams훅을 이용해 query의 파라미터를 받아오고 이를 통해 다른 데이터 페칭 요청을 보냈다. (axios등 이용) NextJS에서는 pages폴더 안에 [변수명].tsx , [.. front-end/Nextjs 2022. 7. 6.

• 

  [NextJS + Express] Express에 저장된 이미지 불러오기 (외부 이미지 불러오기) CORB문제 1. 나의 상황 나는 현재 localhost3001번 포트에서 next js를 이용한 프론트 엔드 서버를 localhost:5000번에서는 express를 이용한 백엔드 서버를 구현하였다. 또한 express에서는 mongoDB와 연동을 통해 백엔드 서버를 구축하였다. 2. 문제 상황 localhost:3001번 포트와 localhost:5000번 포트는 서로 포트 번호가 다르다. 따라서 Cross-Origin-Resource Sharing(CORS)정책을 만족하지 못했다. 따라서 앞선 포스팅에서 proxy설정을 해주어 이 api문제를 해결해주었다. 하지만 여전히 이미지 파일은 불러오지 못하는 문제가 존재했다. 3. 이미지 불러온 방법 nextJS - localhost:3001 axios g.. back-end/express.js 2022. 7. 5.

• 

  [NextJS] NextJS에서의 proxy설정 1. React와는 다른 설정 CRA+Typescript조합에서의 proxy설정은 매우 간단했다. 앞선 포스팅에도 언급했듯이 그저 package.json파일에 "proxy": "http://localhost:5000/" 다음과 같은 한 줄만 추가하면 되었다. 저기서 주소는 내가 설정한 백엔드 서버의 주소로 port번호가 5000이 아니어도 괜찮다. 나는 express서버를 5000번 포트에서 열기로 했으므로 다음과 같이 설정해주었다. 하지만 nextjs에서는 proxy설정이 조금 달라진다. 2. next.config.js의 수정 nextjs에서 proxy설정을 해주려면 다음과 같은 코드만 작성해주면 간단히 끝난다. 1. next.config.js module.exports = { async rewrite.. front-end/Nextjs 2022. 7. 1.

• 

  [NextJS] NextJS에서 Styled-components사용할 때 오류 해결 1. Styled-Components라이브러리 styled-components를 nextjs에 적용하던 중 문제가 발생했다. 화면이 정말 미친듯이 깜빡이기 시작한 것이다. 먼저 styled-components를 사용하던 분이 nextjs에서 styled-components가 문제가 발생할 수 있다고 귀띔해준 것이 기억나서 이것이 그 문제인가보다 하고 바로 구글링에 들어갔다. 2. 왜 화면이 깜빡거리는가? NextJS는 서버에서 미리 Meta태그 등이 포함되어 있는 HTML을 먼저 만들어 놓은 후 보여주는 ServerSide Rendering 을 제공하기 때문에 HTML에는 손을 댈 수가 없다. 따라서 그 후에 JavaScript를 추가해주어야하는데 Styled-components라이브러리는 css-in-.. front-end/Nextjs 2022. 6. 30.