성연커밋 : )

ServerSide렌더링 서버사이드렌더링이란? 서버에서 페이지를 그려 클라이언트(브라우저)로 보낸 후 화면에 표시하는 기법을 의미한다. client쪽이 아닌, server쪽에서 작동하여, api같은 경우 모두 준비가 된 이후에 프론트 화면이 보여진다. 사용 이유? 검색 엔진 최적화 빠른 페이지 렌더링 (빈HTML이 아닌, 서버에서 미리 그려서 브라우저로 보내준다) pageProps _app.js 파일에서 Component와 pageProps를 주는 것을 볼 수 있었다. 이것은 getServerSideProps 함수 내에서 객체를 props로 받기 위해 pageProps를 스프레드연산자를 이용하여 사용해준 이유이다. ...pageProps

redirects 유저를 리다이렉트도 시키며, URL이 변한다. next.config.js 파일에서 async redirects() { return [ { source: "/old-blog/:path*", // 사이트주소를 입력하면 destination: "/new-sexy-blog/:path*", // 여기로 도착지가 변경된다. permanent: false, }, ]; }, rewrites 리다이렉트는 시키지만, URL은 변하지 않는다. async rewrites() { return [ { source: "/api/movies", destination: `https://api.themoviedb.org/3/movie/popular?api_key=${API_KEY}`, }, ]; }, /api/movi..

다음 개발을 위해 next.js 노마드코더 강의를 들었다. 지원서 사이트를 하면서 next.js를 사용해보았지만, 공부를 하지 않고 감으로 때려 맞추고, 그때 그때 구글링을 통해 공부를 하였지만, next의 기초를 모른다는 생각이 들었다. Next프로젝트는 yarn create next-app을 통해 next프로젝트를 생성할 수 있다. 만약에 typescript를 쓰고 싶다면? 뒤에 --typescript를 추가하여 작성해준다. yarn create next-app --typescript 프로젝트가 생성이 되면, 위와 같은 파일 구조가 나온다. pages의 폴더 내에 있는 파일들이 next.js를 실행했을 때의 url이 된다. 개발을 하면서 기본이 되는 index.js의 파일이 url의 기본주소가 되며,..