반응형 React22 [Framer] css애니메이션을 더 쉽고 아름답게 만들어주는 framer-motion 우선 애니메이션을 보다 쉽고 아름답게 만들어주는 framer를 사용하려면 우선 모듈부터 다운받아주어야 한다. yarn add framer-motion 예전에 만들어서 내 TIL에도 올렸던 회원가입과 로그인도 framer를 사용한 것이다. 페이지를 옆으로 넘어가게 하는 효과 같은 것과 버튼 모두다 framer를 이용하였다. https://www.framer.com/docs/introduction/ Introduction | Framer for Developers Get started with Motion and learn by exploring interactive examples. www.framer.com 2022. 2. 10. Next.js + TypeScript 사용하기 ! 처음 실행은 npx나 yarn을 사용해서 TypeScript를 이용한 프로젝트를 설정해 줄 수 있다. npx create-next-app@latest --ts # or yarn create next-app --typescript https://nextjs.org/docs/basic-features/typescript Basic Features: TypeScript | Next.js Next.js supports TypeScript by default and has built-in types for pages and the API. You can get started with TypeScript in Next.js here. nextjs.org 2022. 2. 10. [Next.js] Next.js에서 Head 설정하는 방법 💡 Next.js에서 Head 설정하기 우선 아래와 같이 import 시켜준다. import Head from "next/head"; 전체적으로 이름을 정해주려면 우선 _app.js파일로 가서 아래와 같이 지정해준다. 메타태그 또한 같이 지정가능하다. 메타태그는 검색엔진을 검색할 때 중요한 태그가 되니 되도록이면 넣어주도록 하자. 그러나 페이지마다 다른 Head title 설정이 가능하다. import Head from "next/head"; import { getFeaturedEvents } from '../helpers/api-util'; import EventList from '../components/events/event-list'; function HomePage(props) { return .. 2022. 1. 17. useSWR 사용하기. useSWR은 먼저 캐시로부터 데이터를 반환한 후 fetch 요청을 하고 최종적으로 최신화된 데이터를 가져올 수 있다. 또한 useSWR은 한 줄의 코드로 프로젝트 내에서 데이터 가져오기 로직을 단순화 할 수 있다. Next.js에서 만든 팀이 만들었기 때문에 공식문서가 자세하고 편하게 되어있다. 공식문서에 따르면 빠르고, 가볍고, 재사용 가능한 데이터 가져오기 내장된 캐시 및 요청 중복 제거 실시간 경험 전송 및 프로토콜에 구애받지 않음 SSR / ISR / SSG support TypeScript 준비 React Native yarn add swr or npm install swr 자세한 예제는 아래의 공식 문서에서 확인하면 된다. 한글화가 잘 되어 있기때문에 문제 없이 볼 수 있다. https://.. 2022. 1. 17. [Next.js] Pre-Rendering 💡Pre-Rendering이란? Next.js에서는 기본적으로 모든 페이지를 미리 렌더링 한다. Pre-rendering이야 말로 Next.js에서 가장 중요한 개념이라고 할 수 있는데 Next.js는 클라이언트에서 JavaScript로 모든 작업을 수행하는 대신 각 페이지에 대해 미리 HTML을 생성할 수 있다. • 두 가지 형태의 사전 렌더링 Next.js에서는 Static Generation(정적 생성)과 Sever-side Rendering(SSR)의 형태로 두 가지 방법의 사전 렌더링 방식이 존재한다. 🎈 Static Generation(정적 생성) Static Generation은 Next.js에서도 성능상의 이유로 SSR보다 권장하고 있는 방식이고, 또한 많은 사람들이 사용하는 방식이다. 정.. 2022. 1. 12. [Next.js] 파일 기반 라우팅 Next.js 파일기반 라우팅 방법 알아보기 React는 react-router를 사용해서 아래와 같은 형식으로 직접 지정을 해주는 반면에 Next.js는 file을 기반으로 한 라우팅을 사용 할 수 있어 처음 index에서는 우리가 react를 사용할 때 path="/" 해당하는 부분 path="/about"으로 나타내던 부분은 폴더이름 about의 index로 나누어 주면 된다. 저러한 형식으로 만든 파일을 실행하면 서로 라우팅 구조는 다르지만 /about의 주소가 할당되어 페이지가 나타나게 된다. 또한 위의 그림과 같이 [projectid]를 해준 부분은 [projectid]에 해당하는 값을 콘솔에서 찾으려면 router.query를 실행하여 아래와 같이 결과 값이 나온다. console.log(r.. 2022. 1. 7. 이전 1 2 3 4 다음
