기록하는 개발자

nextjs+typescript+tailwindcss 환경에서 영화 api를 사용한 토이 프로젝트를 진행중이다. (영화 api https://developer.themoviedb.org/reference/intro/getting-started) https://mingmeng030.tistory.com/270 axios .get(`${config.api}/api/search/${keywordToShow}/${pageParam}`) .then((res) => { return res; }); api 호출 결과 response - data 객체 내 현재 페이지 번호(page) , 영화 리스트(results), 전체 페이지 수(total_pages), 전체 결과 수(total_results)가 있다. (2) us..

이전 글에서는 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..