FrontEnd/Next.js3 [Next.js] Next.js 에서 aos 사용법 (Animation On Scroll) 1. AOS 설치 yarn add aos yarn add @types/aos 또는 npm i aos --save npm i @types/aos --save 2. AOS Init() import AOS from 'aos'; import 'aos/dist/aos.css'; export default function AOSPage() { useEffect(() => { AOS.init() }, []); return ( 넥스트에서도 AOS 된당!!! ); } 저는 AOS에서 하라는대로 했는데 Next.js라 그런지 자꾸 안되어 Github issue를 뒤져서 방법을 찾아냈습니다. 저 같은 경우 import ‘aos/dist/aos.css’를 하지 않아서 css가 안먹은거였습니다. 아.. 2022. 12. 22. [Next.js] Next.js 특징, 프로젝트 초기 세팅 1. Next.js 시작하기 넥스트는 리액트 프레임웤이다. 라이브러리에 비해 기능도 다양하고 라이브러리 사용하지 않고도 많은 문제들을 해결할 수 있도록 설계해두어서 편리하게 개발이 가능하다. Next.js의 특징 1. SSR Next.js는 SSR을 지원한다. 이를 통해 SPA의 단점이었던 SEO문제가 해결이 되며, 같은 페이지 컴포넌트를 실행할 때 발생하는 무의미한 깜박거림(Flickering) 현상을 방지할 수 있다. 또한 SSR로 미리 생성해 둔 HTML을 그대로 렌더하기에 한층 더 빠르게 화면에 표현해줄 수 있다. 이외에도 Next.js와 Next.js의 개발사인 Vercell에서 제공하는 Next/image, CDN, Edge Computing 등의 라이브러리와 기법들이 존재하는데 이를 통해 강.. 2022. 12. 13. [Next.js] Next.js 초기세팅에서 yarn start 하면 생기는 일 원티드 챌린지 10월 (SSR, CSR, Next.js)에서 내준 과제입니다. 해당 과제를 이해조차 못했는데, 수강하시는 분들 중 좋은 블로그 글이 있어 참고하였습니다. 아니 그냥 거의 따라 해봤습니다. 😭 개발세계엔 대단하신 분들이 많아요~! 존경 존경 과제를 잘 해주셨다고 칭찬받으신 포스팅 Next.js 초기세팅에서 Yarn Start 하면 생기는 일 import '../styles/globals.css' function MyApp({ Component, pageProps }) { return } export default MyApp yarn start를 하면 '_app.js' 파일이 먼저 실행되나 봅니다. 해당 파일은 프롭스로 { 컴포넌트와 페이지 프롭스를 받습니다. }.. 2022. 10. 6. 이전 1 다음
