[TIL] 내일배움캠프 React 과정 2023.02.04

Today I Learend

• 노마드코더 Next.js 강의 수강
• Programmers 문제 풀기

 

---

Next.js 강의 수강 내용

Redirects

// next.config.js
module.exports = {
  async redirects() {
    return [
      {
        source: '/about',
        destination: '/',
        permanent: true,
      },
      {
        source: '/old-blog/:path*',
        destination: '/blog/:path*',
        permanent: false
     }
    ]
  },
}

• request 경로를 다른 destination 경로로 Redirect할 수 있다. 
• redirects은 source, destination 및 permanent 속성이 있는 객체를 포함하는 배열을 반환하는 비동기 함수이다.
• source: 들어오는 request 경로 패턴 (request 경로)
• destination: 라우팅하려는 경로 (redirect할 경로)
• permanent: true인 경우 클라이언트와 search 엔진에 redirect를 영구적으로 cache 하도록 지시하는 308 status code를 사용하고, false인 경우 일시적이고 cache되지 않은 307 status code를 사용한다.
• 공식문서 https://nextjs.org/docs/api-reference/next.config.js/redirects
  
  

Rewrites 

// next.config.js
const API_KEY = process.env.API_KEY;

module.exports = {
  async rewrites() {
    return [
      {
        source: "/api/movies",
        destination: `https://api.themoviedb.org/3/movie/popular?api_key=${API_KEY}`,
      },
    ]
  },
}

• Rewrites를 사용하면 들어오는 request 경로를 다른 destination 경로에 매핑할 수 있다.
• source: is the incoming request path pattern.
• destination: String is the path you want to route to.
• 공식문서 https://nextjs.org/docs/api-reference/next.config.js/rewrites
  
  

Server Side Rendering

export async function getServerSideProps() {
  const { results } = await (await fetch(`http://localhost:3000/api/movies`)).json();
  return {
    props: {
      results
    }
  }
};

• page에서 서버 측 랜더링 함수인 getServerSideProps함수를 export하는 경우 Next.js는 getServerSideProps에서 반환된 데이터를 사용하여 각 request에서 이 페이지를 pre-render한다.
• getServerSideProps는 서버 측에서만 실행되며 브라우저에서는 실행되지 않는다.
• 공식문서 https://nextjs.org/docs/basic-features/data-fetching/get-server-side-props
• 언제 getServerSideProps를 사용해야 하나요?
  request time에 반드시 데이터를 fetch해와야 하는 페이지를 pre-render해야 하는 경우에 getServerSideProps를 사용한다. 데이터를 pre-render할 필요가 없다면 client side에서 데이터를 가져오는 것을 고려할 수 있다.

 

Dynamic Routes 

• http://localhost:3000/movies -> index.tsx
• http://localhost:3000/movies/all -> all.tsx
• http://localhost:3000/movies/222 -> [id].tsx
• Next.js에서는 page에 대괄호([param])를 추가하여 Dynamic Route를 생성할 수 있다.
• /movies/1, /movies/abc 등과 같은 모든 경로는 pages/movies/[id].js와 일치한다.
• 공식문서 https://nextjs.org/docs/routing/dynamic-routes

Catch all routes
대괄호 안에 세 개의 점(...)을 추가하여 모든 경로를 포착하도록 Dynamic Routes를 확장할 수 있다. pages/movies/[...id].js는 /movies/1와 일치하지만 /movies/1/2, /movies/1/ab/cd 등과도 일치한다. 일치하는 매개변수는 페이지에 쿼리 매개변수로 전송되며 항상 배열이므로 /movies/a 경로에는 다음 쿼리 개체가 있다.
ex) { "id": ["a"] }
https://nextjs.org/docs/routing/dynamic-routes#catch-all-routes

 

---

Programmers 문제 풀기

문자열 내 p와 y의 개수

나의 풀이

function solution(s){
    let p = 0;
    let y = 0;
    s.split("").filter((str) => str.toLowerCase() === "p" ? p += 1 : str.toLowerCase() === "y" ? y += 1 : null )
    return p === y ? true : false 
}

 

다른 사람의 풀이

function numPY(s){
    return s.toUpperCase().split("P").length === s.toUpperCase().split("Y").length;
}

굳이 filter 돌릴 필요 없이 그냥 split.length 써서 한 줄로 풀 수 있는 거였구나.! 그리고 return 결과에 따라 자동으로 boolean이 출력될 테니 삼항으로 true, false를 설정해 줄 필요도 없었다. 

 

 

---

회고

노마드코더 Next.js 강의를 들었다. 공부할수록 참 유용한 기능이 많은 거 같다. 

그리고 ZEP에서 열기구를 샀다. 이것이 천 원의 즐거움...