![]()
개요북마크나 검색버튼등 여러 아이콘을 SVG로 가져올려고 하는데 이미지 형식이 아닌 컴포넌트 형식으로 가져와야 할 경우가 발생했습니다. React에서는 import { ReactComponent as 컴포넌트명 } from "이미지.svg" 이 형식으로 불러왔었는데 Next.js는 다른 방식으로 불러오는 것 같았습니다. 해결방안가져오기에 앞서 @svgr/webpack을 패키지매니저로 설치해주고 next.js에서는 next.config.mjs에서 설정을 해줘야합니다.const nextConfig = { webpack(config){ config.module.rules.push({ test : "/\.svg$/, use : ["@svgr/webpack"] ..
![]()
개요개인 프로젝트를 통해서 카카오 로그인기능이 필요할 것 같아 카카오 로그인을 구현해 볼려고 합니다.Next-auth 라이브러리를 통해서 카카오 로그인을 간편하게 구현할 수 있어 Next-auth을 사용할 겁니다. Next-auth 설치 전Next-auth을 설치하기 전에 Next는 14 버전을 사용합니다 Router 방식은 Pages Router로 해볼려고 합니다.다음에 기회가 된다면 App Router 버전으로도 올려볼까 합니다. Next.js 프로젝트를 설치해 줍니다.npx create-next-app@latest기본설정은 이렇게 했습니다. 원하는 설정으로 하시면 될 것 같아용 Next-auth 설치npm install next-auth next-auth을 설치를 해주시고 pages rout..
![]()
개요저는 React 프로젝트를 진행할때 RTK 나 Recoil을 자주 사용하는 편입니다.그 중 간단한 프로젝트를 진행할때에는 Recoil을 많이 사용하는데 Next.js도 Recoil을 사용할려고 할때는 React와 동일할까요? Next.js SSR , CSR을 구분해서 작성하기 때문에 거의 동일하지만 조금 다르다고 생각하고 있습니다. 그래서 블로그에 작성해 볼려고 합니다. Recoil 설치하기npm install recoil공식문서에 나와있는데로 recoil을 설치해줍니다. 그리고 부모 트리에 RecoilRoot> 컴포넌트를 넣어줘야하는데 Next.js에서의 최상단 부모 트리는 루트 layout.tsx 입니다. (Next.js 14기준)export default function RootLayout(..
![]()
개요저는 tailwindcss나 bootstrap 보다는 styled-components을 자주 사용하는 편입니다.팀 프로젝트에서 Next.js을 사용해 볼 수 있는 경우가 발생해서 사용해 보기로 했는데 Next.js는 Styeld-component 설정이 조금 달라서 블로그를 작성해 보려고 합니다. styled-components 설치하기npm install styled-components styled-components을 설치해 주고 Next.js의 공식문서를 따라가 보면next.config.js 에 compiler을 넣어줘야 합니다. /** @type {import('next').NextConfig} */const nextConfig = { compiler : { style..
![]()
개요Next.js 가장 최신인 14 버전을 사용했고 Toast ui는 @toast-ui/react-editor 3.2.3 버전을 사용했습니다. Toast ui 설치하기Next.js로 모든 세팅이 끝난다는것을 가정하고 Toast ui를 설치하겠습니다.https://www.npmjs.com/package/@toast-ui/react-editor @toast-ui/react-editorTOAST UI Editor for React. Latest version: 3.2.3, last published: a year ago. Start using @toast-ui/react-editor in your project by running `npm i @toast-ui/react-editor`. There are 3..
