기록하는 개발자

이전 글에서는 NextJs에 TailwindCss를 적용해보았다. 가독성과 재사용성 문제를 개선하기 위해 components를 사용해보자! https://mingmeng030.tistory.com/275 [NextJs] NextJs에 TailwindsCss 적용 하기 https://tailwindcss.com/ Tailwind CSS - Rapidly build modern websites without ever leaving your HTML. Tailwind CSS is a utility-first CSS framework for rapidly building modern websites without ever leaving your HTML. tailwindcss.com 1. 프로젝트 생성 ming..

https://tailwindcss.com/ Tailwind CSS - Rapidly build modern websites without ever leaving your HTML. Tailwind CSS is a utility-first CSS framework for rapidly building modern websites without ever leaving your HTML. tailwindcss.com 1. 프로젝트 생성 - 프로젝트가 없는 경우 프로젝트부터 생성해준다. npx create-next-app my-project cd my-project 2. postcss , autoprefixer와 함께 TailwindCss 설치 npm install -D tailwindcss postcss a..

NextJs+Typescript 환경에서 Swiper를 사용해보자! https://mingmeng030.tistory.com/270 {dataList?.map((item, i) => { return ( ); })} ); } Swiper component를 적용한 Home component import MovieSwiper from "../components/MovieSwiper"; import * as type from "./types"; export default function Home({...}: type.homeProps) { ... return ( ); } swiper button 변경 - nextJs는 global.css에 작성해주면 잘 적용된다. .swiper-button-next::afte..

getStaticProps If you export a function called getStaticProps (Static Site Generation) from a page, Next.js will pre-render this page at build time using the props returned by getStaticProps. → page에서 getStaticProps(SSG)를 통해 함수를 export 하면, Next.js는 getStaticProps를 통해 return된 props를 사용하여 해당 page를 build time에 pre-render 할 것이다. https://nextjs.org/docs/pages/building-your-application/data-fetching/g..

nextJs에서 자동으로 생성되는 파일 중 next.config.js 가 있다. 이 파일에서는 redirects와 rewrites 를 작성할 수 있다. redirects React에서 Router 작성 시 사용했던 Navigate 태그와 유사하다고 생각된다. Source URL을 원하는 Destination URL로 간단하게 Redirect 할 수 있다. const nextConfig = { reactStrictMode: true, async redirects() { return [ { // source로 이동하면 destination으로 가도록 source: "/about/*", destination: "/", permanent: false, }, { // token이 false일 때 "/"로 이동하면..

Page 기반 Routing React 로 처음 개발을 할 때 보통 component 작성 후 router를 만들고 시작한다. nextjs를 처음 배웠을 때 제일 놀라고 편했던 것 router를 작성하지 않아도 된다는 것이다.. nextJs의 기본 폴더 구조이다. pages안에 index.js가 "/" 의 위치이다. npm run dev를 하고 3000 port에서 서버가 열리면 "http://localhost:3000/"에서 index.js를 볼 수 있다. page 폴더 아래 여러 폴더 및 파일을 생성해보았다. index.js(tsx)와 동일한 경로에 있는 genre.tsx는 "/genre" 즉, "http://localhost:3000/genre" 로 이동 시 표시되는 컴포넌트 이다. client-s..

1. Node 설치 - Node 설치가 되어있지 않은 경우 Node 부터 설치 - 이미 Node가 설치되어 있는 경우 2번부터 수행 // node version 확인 node -v [ Mac OS ] - 1) homebrew설치(없는경우) /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)" - 2) node 설치 brew install node [ Window ] - 1) Chocolatey 설치(없는경우) Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtoc..

https://mingmeng030.tistory.com/266 [React] React+typescript에서 chartJs의 update() 사용법 프로젝트를 할 때마다 그래프가 필요할 때 라이브러리 ‘chartJs’의 Bar chart를 사용하였는데, 그냥 javascript가 아닌 react+typescript 환경에서 사용할 때 상태 변경에서 문제가 발생했다. react+typescript mingmeng030.tistory.com 기존에 적용한 chartjs에 data label이 바로 보이도록 추가하고 싶은 경우가 있다. default 로는 아래처럼 data label이 보이지 않다가 마우스가 hover 되었을 때 그래프 위에 툴팁으로 뜬다. 만약 위와 달리 아래처럼 hover 없이도 dat..