Next.js 강의를 잘 수강하고 정리도 깔끔하게 한 것 같다. 알고리즘 연습도 시작해서 앞으로 시간분배를 제대로 해보려고 한다.
오늘의 나는 무엇을 배웠을까?
Next.js
- redirecting
- /products/:id와 같은 주소를 쓰다가, /items/:id같은 주소로 바꾼다고 할 때, 이전 주소를 즐겨찾기 해놓은 사람들이 products로 들어갔을 때 items로 이동시키려 할 때 redirecting을 하면 된다.
- next.config.js파일에서 redirects 함수를 정의함으로써 가능하다.
/** @type {import('next').NextConfig} */ const nextConfig = { reactStrictMode: true, ... async redirects() { return [ { source: "/products/:id", // products/ 로 들어오면 destination: "/items/:id", // items / 로 리다이렉트 permanent: false, // 리다이렉트 결과를 캐싱할 것인가 }, ]; }, }; - 설정 후 서버를 재시작하고 확인해보면, products주소를 주소창에 입력하면 items주소로 이동되는 것을 확인할 수 있고, network탭에도 다음과 같이 temporary redirect(permanent false이기 때문에 temporary라고 뜨는것)를 확인할 수 있다.
- 404페이지 만들기
- pages폴더 안에 404.js라는 페이지를 만들면 next.js가 알아서 404 페이지로 활용해준다.
- _app.js
- _app.js는 리액트의 Layout과 같은 역할을 한다. 모든 페이지에 적용될 코드를 적고 싶으면 _app.js에 작성하면 된다.
import "@/styles/globals.css"; export default function App({ Component, pageProps }) { return <Component {...pageProps} />; } - Component는 쉽게 말해 우리가 작성한 페이지들을 묶은 컴포넌트다. pageProps또한 우리의 페이지들의 props들이다. 만약 헤더나 푸터를 추가하고 싶다면 이렇게 하면 된다.
import "@/styles/globals.css"; export default function App({ Component, pageProps }) { return ( <Header /> <Component {...pageProps} /> <Footer /> ); }
- _app.js는 리액트의 Layout과 같은 역할을 한다. 모든 페이지에 적용될 코드를 적고 싶으면 _app.js에 작성하면 된다.
- _document.js
- _document.js는 html의 뼈대를 잡는 역할을 한다. 서버에서 렌더링 하는 데 필요하며, 클라이언트단에서는 이 페이지를 사용하지 않는다. 따라서 _document.js에서는 window객체에 접근한다거나, useEffect, useState를 쓴다거나, 온클릭 이벤트 핸들러같은 인터랙티브한 기능을 넣을 수 없다. 그래서 리액트를 넘어서는 부분, html 랭귀지 등을 수정할 때 사용한다.
import { Html, Head, Main, NextScript } from "next/document"; export default function Document() { return ( <Html lang="ko"> <Head /> <body> <Main /> <NextScript /> </body> </Html> ); }
- _document.js는 html의 뼈대를 잡는 역할을 한다. 서버에서 렌더링 하는 데 필요하며, 클라이언트단에서는 이 페이지를 사용하지 않는다. 따라서 _document.js에서는 window객체에 접근한다거나, useEffect, useState를 쓴다거나, 온클릭 이벤트 핸들러같은 인터랙티브한 기능을 넣을 수 없다. 그래서 리액트를 넘어서는 부분, html 랭귀지 등을 수정할 때 사용한다.
- Image 컴포넌트
- Next.js에서는 Image라는 이미지 최적화를 위한 컴포넌트를 제공한다.
- Image 컴포넌트를 사용하면 원본 이미지가 Next.js 서버를 한 번 거쳐 최적화된 상태로 렌더링 된다.
- Image 컴포넌트는 이미지가 실제로 화면에 필요한 순간에만 import되는 lazy loading 기능이 기본적으로 구현되어 있다.
- Image 컴포넌트를 사용하려면 이미지 사이즈를 꼭 지정해야한다. width, height로 지정할 수도 있고, fill 속성을 이용하여 부모 태그에 맞게 렌더링할 수 있다.
- fill 속성을 이용하는 경우 부모 태그는 positioning이 되어 있어야 한다. relative를 많이 사용한다. 이미지 비율을 고정하려면 style속성에 objectFit:cover라는 css속성을 넣어주면 된다.
- src에 넣어준 url이 public폴더에 있는 사진이 아니라 외부에 있는 것이라면, next.config.js에 따로 설정이 필요하다. 외부에서 가져올 소스들을 미리 next에게 알려주는 설정과 같다.
const nextConfig = { reactStrictMode: true, images: { remotePatterns: [ { protocol: "https", hostname: "learn-codeit-kr-static.s3.ap-northeast-2.amazonaws.com", port: "", pathname: "/codeitmall/**", }, ], },
오늘의 나는 어떤 어려움이 있었을까?
알고리즘 연습을 위한 환경 세팅이 초반에 너무 오래걸렸다. replit을 쓰고 있었는데, replit에서 모든 기존 replit 리포지토리를 nix환경으로 강제로 포팅해버리는 바람에 환경이 달려져서인지 git 명령어가 안듣는 사태가 발생했다. git을 사용하려면 GLIBC 2.34 not found라는 메세지만 반복해서 나오고 내 replit의 우분투 버전을 확인해보면 GLIBC 2.35가 포함되어 있는데 왜 안되는건지 몰랐다. 찾아보다가 도저히 답이 안나와서 새로운 replit을 파고 깃허브에 올려둔 리포지토리를 pull 받아서 진행했다. 환경상의 문제로 뭔가 안될 때 호기심과 고집이 많은 편이라 최대한 원인을 찾아서 해결해보려고 하는데, 결국 해결을 못하고 시간만 낭비하게 된 것 같아 힘들었다.
내일의 나는 무엇을 해야할까?
- 알고리즘 3문제 풀기
- 북스터디 준비
- 발표 준비 시작해보기
Let's get after it