기록하는 개발자

타입 추론 변수 선언 시 타입을 쓰지않아도 컴파일러가 스스로 판단하여 타입을 넣어주는 것 타입을 추론하는 경우 1. 초기화된 변수 let num = 10; num에 대한 타입을 따로 지정하지 않더라도 10으로 초기화 되었으므로 number로 간주된다. 2. 기본값이 설정된 매개변수 function cook (how = 'cut', ingredient: string): void { console.log(`${how} the ${ingredient}`); } 변수 how는 변수 ingredient와 달리 "cut"으로 기본값이 설정된 매개 변수이다. 이는 typescript에 의해 string으로 타입 추론 되므로 how : string = "cut" 과 같이 작성할 필요가 없다. 3. 반환 값이 있는 함수..

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