찾다

집  >  기사  >  웹 프론트엔드  >  Next.js 인터뷰 숙달: 필수 질문(6부)

Next.js 인터뷰 숙달: 필수 질문(6부)

Patricia Arquette
Patricia Arquette원래의
2024-11-17 17:00:02109검색
Next.js Interview Mastery: Essential Questions (Part 6)

Next.js 인터뷰 가이드: 성공을 위한 100가지 질문과 답변(무료)

Next.js 인터뷰 가이드: 성공을 위한 100가지 질문과 답변으로 Next.js 마스터의 잠재력을 최대한 발휘해 보세요. 이제 막 개발자로 시작하는 사람이든, 자신의 기술을 다음 단계로 끌어올리려는 숙련된 전문가이든 관계없이 이 포괄적인 전자책은 Next.js 인터뷰에 합격하고 자신감을 갖고 취업 준비를 하는 데 도움이 되도록 설계되었습니다. 개발자. 이 가이드는 다양한 Next.js 주제를 다루므로 귀하가 발생할 수 있는 모든 질문에 잘 대비할 수 있습니다. 이 전자책에서는 SSR(서버 측 렌더링), SSG(정적 사이트 생성)와 같은 주요 개념을 살펴봅니다. ) ?, 증분 정적 재생성(ISR) ⏳, 앱 라우터 ?️, 데이터 가져오기 ? 등이 있습니다. 각 주제를 철저하게 설명하고 실제 사례와 가장 자주 묻는 인터뷰 질문에 대한 자세한 답변을 제공합니다. 질문에 답하는 것 외에도 가이드에서는 Next.js 애플리케이션 최적화, 성능 개선⚡ 및 확장성 보장을 위한 모범 사례✅를 강조합니다. Next.js가 지속적으로 발전함에 따라 React 18, 동시 렌더링 및 Suspense ?와 같은 최첨단 기능에 대해서도 자세히 알아봅니다. 이를 통해 귀하는 항상 최신 발전 사항을 확인하고 면접관이 찾고 있는 지식을 얻을 수 있습니다. 이 가이드를 차별화하는 것은 실용적인 접근 방식입니다. 이론만 다루는 것이 아니라 프로젝트에 직접 적용할 수 있는 실행 가능한 통찰력을 제공합니다. 보안?, SEO 최적화? 및 배포 방법?️도 자세히 살펴보므로 전체 개발 수명 주기에 대비할 수 있습니다. 최고의 기술 회사에서 기술 인터뷰를 준비하든, 보다 효율적인 구축을 모색하든, 확장 가능한 애플리케이션을 활용하는 이 가이드는 Next.js 기술을 연마하고 경쟁에서 두각을 나타내는 데 도움이 될 것입니다. 이 책이 끝나면 기본 개념부터 전문가 수준의 과제에 이르기까지 모든 Next.js 인터뷰 질문에 자신있게 답할 준비가 될 것입니다. Next.js 개발자로서 뛰어난 지식을 갖추십시오. 자신있게 다음 직업 기회를 잡으세요!

Next.js 인터뷰 숙달: 필수 질문(6부) cyroscript.gumroad.com

51. Next.js와 함께 GraphQL을 어떻게 사용할 수 있나요?

GraphQL은 Next.js에서 헤드리스 CMS 또는 GraphQL 엔드포인트의 콘텐츠를 쿼리하는 데 사용할 수 있습니다. Next.js를 사용하면 정적 생성(getStaticProps 사용), 서버 측 렌더링(getServerSideProps 사용) 또는 클라이언트 측(Apollo Client 또는 URQL과 같은 후크 사용) 중에 GraphQL에서 데이터를 가져올 수 있습니다.

  1. getStaticProps 또는 getServerSideProps와 함께 GraphQL 사용: graphql-request 또는 Apollo Client와 같은 라이브러리를 사용하여 GraphQL 데이터를 가져와 페이지에 props로 삽입할 수 있습니다.

graphql-request의 예:

import { request } from 'graphql-request';

export async function getStaticProps() {
  const query = `{
    posts {
      id
      title
      content
    }
  }`;

  const data = await request('<https:>', query);

  return {
    props: {
      posts: data.posts,
    },
  };
}

export default function PostsPage({ posts }) {
  return (
    <div>
      {posts.map(post => (
        <div key="{post.id}">
          <h2>{post.title}</h2>
          <p>{post.content}</p>
        </div>
      ))}
    </div>
  );
}

</https:>

52. Apollo Client를 Next.js 애플리케이션에 어떻게 통합할 수 있나요?

Apollo Client는 GraphQL 작업에 널리 사용되는 라이브러리입니다. Next.js 애플리케이션에 쉽게 통합되어 서버측과 클라이언트측 모두에서 데이터를 가져올 수 있습니다.

Apollo 클라이언트 통합 단계:

  1. 종속성 설치:

    npm install @apollo/client graphql

  2. Apollo 클라이언트 설정:
    apolloClient.js 파일을 생성하여 Apollo 클라이언트를 구성합니다:

    // lib/apolloClient.js
import { ApolloClient, InMemoryCache, HttpLink } from '@apollo/client';

const client = new ApolloClient({
  link: new HttpLink({ uri: '<https:>' }),
  cache: new InMemoryCache(),
});

export default client;

</https:>

  3. 페이지에서 Apollo 클라이언트 사용:
    getStaticProps, getServerSideProps와 함께 Apollo 클라이언트를 사용하거나 Apollo의 useQuery 후크를 사용하는 클라이언트에서 사용하세요.

getStaticProps 사용 예:

import { ApolloClient, InMemoryCache, gql } from '@apollo/client';
import client from '../lib/apolloClient';

const GET_POSTS = gql`
  query GetPosts {
    posts {
      id
      title
    }
  }
`;

export async function getStaticProps() {
  const { data } = await client.query({ query: GET_POSTS });

  return {
    props: {
      posts: data.posts,
    },
  };
}

export default function PostsPage({ posts }) {
  return (
    <div>
      {posts.map(post => (
        <div key="{post.id}">
          <h2>{post.title}</h2>
        </div>
      ))}
    </div>
  );
}

53. Next.js에서 서버 측 리디렉션을 어떻게 수행할 수 있습니까?

Next.js에서는 페이지 수준 리디렉션을 위해 getServerSideProps 또는 generateStaticParams의 리디렉션을 사용하여 서버측 리디렉션을 수행할 수 있습니다.

  1. getServerSideProps 사용: SSR 수행 중 조건에 따라 리디렉션을 처리해야 하는 경우 리디렉션 키를 사용할 수 있습니다.

예:

export async function getServerSideProps(context) {
  // Check some condition, like user authentication
  const isAuthenticated = false;

  if (!isAuthenticated) {
    return {
      redirect: {
        destination: '/login',
        permanent: false, // Optional: set to true for permanent redirects
      },
    };
  }

  return {
    props: {}, // Will pass to the component
  };
}
  1. 전역 리디렉션에 next.config.js 사용: 전역적으로 리디렉션을 처리하려면 next.config.js의 리디렉션 키를 사용하여 사용자 리디렉션 규칙을 설정할 수 있습니다.

예:

// next.config.js
module.exports = {
  async redirects() {
    return [
      {
        source: '/old-page',
        destination: '/new-page',
        permanent: true,
      },
    ];
  },
};

이 구성은 배포 시 /old-page를 /new-page로 영구적으로 리디렉션합니다.

이러한 방법을 사용하면 서버 측 조건과 Next.js의 정적 구성을 기반으로 리디렉션을 처리할 수 있습니다.

54. Next.js에서 useRouter 후크를 어떻게 사용합니까?

Next.js의 useRouter 후크는 기능 구성 요소의 라우터 개체에 액세스하는 데 사용됩니다. 현재 경로, 쿼리 매개변수, 경로 이름 및 탐색 방법에 대한 액세스를 제공합니다. 일반적으로 현재 경로에 대한 정보를 얻거나 프로그래밍 방식으로 다른 경로로 이동하는 데 사용됩니다.

사용 예:

'use client'; // Required for client-side hooks

import { useRouter } from 'next/router';

export default function MyComponent() {
  const router = useRouter();

  const handleClick = () => {
    // Navigate programmatically to another route
    router.push('/about');
  };

  return (
    <div>
      <p>Current Path: {router.pathname}</p>
      <button onclick="{handleClick}">Go to About Page</button>
    </div>
  );
}

공통 속성 및 방법:

  • router.pathname: 페이지의 현재 경로입니다.
  • router.query: 객체로서의 쿼리 문자열 매개변수입니다.
  • router.push(url): 새 URL로 이동합니다.
  • router.replace(url): 새 URL로 이동하되 기록 스택의 현재 항목을 바꿉니다.
  • router.back(): 이전 페이지로 돌아갑니다.

55. Next.js에서 어떻게 프로그래밍 방식으로 탐색할 수 있나요?

useRouter 후크 또는 링크 구성 요소를 사용하여 Next.js에서 프로그래밍 방식으로 탐색할 수 있습니다.

  1. useRouter 후크 사용:
    router.push() 메소드를 사용하면 프로그래밍 방식으로 새 페이지로 이동할 수 있습니다.

    예:

    import { request } from 'graphql-request';

export async function getStaticProps() {
  const query = `{
    posts {
      id
      title
      content
    }
  }`;

  const data = await request('<https:>', query);

  return {
    props: {
      posts: data.posts,
    },
  };
}

export default function PostsPage({ posts }) {
  return (
    <div>
      {posts.map(post => (
        <div key="{post.id}">
          <h2>{post.title}</h2>
          <p>{post.content}</p>
        </div>
      ))}
    </div>
  );
}

</https:>

  2. Link 구성 요소 사용(선언적 탐색용):

    npm install @apollo/client graphql

  3. router.replace() 사용:
    브라우저 기록 스택에 새 페이지를 추가하지 않고 탐색하려면 router.replace()를 사용하세요.

56. next-i18next는 무엇이고, Next.js에서는 어떻게 사용되나요?

next-i18next는 Next.js에 대한 국제화(i18n) 지원을 제공하는 인기 라이브러리입니다. 여러 언어에 대한 번역을 관리하는 데 도움이 되고 현지화 설정 프로세스가 단순화됩니다.

next-i18next 사용 단계:

  1. 패키지 설치:

    // lib/apolloClient.js
import { ApolloClient, InMemoryCache, HttpLink } from '@apollo/client';

const client = new ApolloClient({
  link: new HttpLink({ uri: '<https:>' }),
  cache: new InMemoryCache(),
});

export default client;

</https:>

  2. next-i18next 구성:
    next.config.js에서 지원되는 로캘과 기본 언어를 구성합니다.

    import { ApolloClient, InMemoryCache, gql } from '@apollo/client';
import client from '../lib/apolloClient';

const GET_POSTS = gql`
  query GetPosts {
    posts {
      id
      title
    }
  }
`;

export async function getStaticProps() {
  const { data } = await client.query({ query: GET_POSTS });

  return {
    props: {
      posts: data.posts,
    },
  };
}

export default function PostsPage({ posts }) {
  return (
    <div>
      {posts.map(post => (
        <div key="{post.id}">
          <h2>{post.title}</h2>
        </div>
      ))}
    </div>
  );
}

  3. 번역 파일 만들기:
    프로젝트에서 public/locales라는 폴더를 생성하고 각 언어에 대한 JSON 파일을 추가하세요.

    export async function getServerSideProps(context) {
  // Check some condition, like user authentication
  const isAuthenticated = false;

  if (!isAuthenticated) {
    return {
      redirect: {
        destination: '/login',
        permanent: false, // Optional: set to true for permanent redirects
      },
    };
  }

  return {
    props: {}, // Will pass to the component
  };
}

  4. 구성요소에서 번역 사용:
    번역을 얻으려면 next-i18next에서 제공하는 useTranslation 후크를 사용하세요.

    // next.config.js
module.exports = {
  async redirects() {
    return [
      {
        source: '/old-page',
        destination: '/new-page',
        permanent: true,
      },
    ];
  },
};

57. Next.js에서 현지화를 어떻게 구현하나요?

Next.js의 현지화는 앱 콘텐츠 번역을 처리하는 next-i18next를 사용하여 구현할 수 있습니다. 간략한 안내는 다음과 같습니다.

  1. 질문 74에서 언급한 대로 next-i18next를 설정합니다.

  2. 언어별 파일 만들기:
    각 언어에는 public/locales 디렉토리에 자체 번역 파일이 있습니다. 예를 들어 영어와 스페인어의 경우:

    'use client'; // Required for client-side hooks

import { useRouter } from 'next/router';

export default function MyComponent() {
  const router = useRouter();

  const handleClick = () => {
    // Navigate programmatically to another route
    router.push('/about');
  };

  return (
    <div>
      <p>Current Path: {router.pathname}</p>
      <button onclick="{handleClick}">Go to About Page</button>
    </div>
  );
}

  3. useTranslation을 사용하여 번역에 액세스:
    useTranslation 후크를 사용하여 모든 구성 요소의 번역에 액세스하세요.

    import { useRouter } from 'next/router';

function NavigateButton() {
  const router = useRouter();

  const handleNavigation = () => {
    router.push('/new-page'); // Navigates to a new page
  };

  return <button onclick="{handleNavigation}">Go to New Page</button>;
}

  4. 언어 전환 설정:
    사용자가 언어를 전환할 수 있도록 언어 전환기를 제공할 수 있습니다.

    import { request } from 'graphql-request';

export async function getStaticProps() {
  const query = `{
    posts {
      id
      title
      content
    }
  }`;

  const data = await request('<https:>', query);

  return {
    props: {
      posts: data.posts,
    },
  };
}

export default function PostsPage({ posts }) {
  return (
    <div>
      {posts.map(post => (
        <div key="{post.id}">
          <h2>{post.title}</h2>
          <p>{post.content}</p>
        </div>
      ))}
    </div>
  );
}

</https:>

58. next-seo란 무엇이며, Next.js에서는 어떻게 사용되나요?

next-seo는 Next.js 애플리케이션에 SEO 메타데이터를 추가하는 작업을 단순화하는 라이브러리입니다. 제목, 설명, 오픈 그래프 태그와 같은 SEO 메타데이터를 관리하기 위한 일련의 구성요소와 유틸리티 기능을 제공합니다.

next-seo 사용 단계:

  1. 패키지 설치:

    npm install @apollo/client graphql

  2. 페이지에 SEO 메타데이터 추가:
    NextSeo 구성 요소를 사용하여 각 페이지에 SEO 메타 태그를 추가할 수 있습니다.

    // lib/apolloClient.js
import { ApolloClient, InMemoryCache, HttpLink } from '@apollo/client';

const client = new ApolloClient({
  link: new HttpLink({ uri: '<https:>' }),
  cache: new InMemoryCache(),
});

export default client;

</https:>

  3. 글로벌 SEO 설정:
    Pages/_document.js에서 전역 SEO 설정을 구성하여 모든 페이지에 기본 SEO 설정을 적용할 수 있습니다.

59. Next.js 프로젝트에 Google Analytics를 어떻게 추가할 수 있나요?

Google Analytics를 Next.js 프로젝트에 추가하려면 next/script 구성요소를 사용하여 Google Analytics 스크립트를

귀하의 페이지 중

단계:

  1. Google Analytics 계정을 만들고 추적 ID(예: UA-XXXXXX-X)를 획득하세요.
  2. next/script 구성 요소를 설치합니다(Next.js에 내장되어 있음).
  3. 페이지/_document.js 또는 next/head의 헤드 구성 요소에 Google Analytics 스크립트를 추가하세요.

예:

import { ApolloClient, InMemoryCache, gql } from '@apollo/client';
import client from '../lib/apolloClient';

const GET_POSTS = gql`
  query GetPosts {
    posts {
      id
      title
    }
  }
`;

export async function getStaticProps() {
  const { data } = await client.query({ query: GET_POSTS });

  return {
    props: {
      posts: data.posts,
    },
  };
}

export default function PostsPage({ posts }) {
  return (
    <div>
      {posts.map(post => (
        <div key="{post.id}">
          <h2>{post.title}</h2>
        </div>
      ))}
    </div>
  );
}

참고:

  • 'YOUR_TRACKING_ID'를 실제 Google Analytics 추적 ID로 바꾸세요.
  • 페이지 조회수와 기타 이벤트를 추적하려면 애플리케이션 코드에서 gtag('event', ...)를 사용할 수 있습니다.

59. Next.js에서 SSR과 CSR의 차이점은 무엇입니까?

SSR(Server-Side Rendering)과 CSR(Client-Side Rendering)은 Next.js의 두 가지 렌더링 방법입니다.

  • SSR(서버측 렌더링):
    SSR에서는 요청 중에 페이지가 서버에 미리 렌더링됩니다. 이는 HTML이 서버에서 생성되고 완전히 렌더링된 페이지가 클라이언트로 전송된다는 의미입니다. SSR은 동적 콘텐츠를 표시해야 하고 검색 엔진에서 색인을 생성해야 하거나 빠른 초기 페이지 로드가 필요한 페이지에 유용합니다.

    • Next.js에서 SSR을 사용하는 방법: 앱 라우터에서 getServerSideProps를 사용하여 각 요청에 대해 서버 측 데이터를 가져옵니다. 
    export async function getServerSideProps(context) {
  // Check some condition, like user authentication
  const isAuthenticated = false;

  if (!isAuthenticated) {
    return {
      redirect: {
        destination: '/login',
        permanent: false, // Optional: set to true for permanent redirects
      },
    };
  }

  return {
    props: {}, // Will pass to the component
  };
}

  • CSR(클라이언트측 렌더링):
    CSR에서 페이지는 전적으로 클라이언트 측에서 렌더링됩니다. 서버에서 제공되는 초기 HTML은 최소한이며(일반적으로 뼈대 또는 로딩 페이지) JavaScript가 콘텐츠 렌더링을 담당합니다. CSR은 사용자 상호 작용에 따라 콘텐츠가 자주 변경되는 애플리케이션에 유용합니다.

    • Next.js에서 CSR을 사용하는 방법: React 후크를 사용하여 클라이언트 측에서 데이터를 가져올 수 있습니다(예: 클라이언트 측 데이터 가져오기를 위해 Axios 또는 SWR과 함께 useEffect 사용).

60. Next.js 앱을 PWA와 호환되게 만들려면 어떻게 해야 합니까?

Next.js 앱을 프로그레시브 웹 앱(PWA)과 호환되게 만들려면 서비스 워커와 매니페스트 파일을 사용하고 앱이 설치 가능하도록 구성해야 합니다.

  1. PWA 플러그인 설치:
    next-pwa 플러그인을 사용하면 Next.js에서 PWA를 쉽게 설정할 수 있습니다.

    import { request } from 'graphql-request';

export async function getStaticProps() {
  const query = `{
    posts {
      id
      title
      content
    }
  }`;

  const data = await request('<https:>', query);

  return {
    props: {
      posts: data.posts,
    },
  };
}

export default function PostsPage({ posts }) {
  return (
    <div>
      {posts.map(post => (
        <div key="{post.id}">
          <h2>{post.title}</h2>
          <p>{post.content}</p>
        </div>
      ))}
    </div>
  );
}

</https:>

  2. next.config.js에서 next-pwa 구성:

    npm install @apollo/client graphql

  3. 매니페스트 파일 추가:
    앱 아이콘, 테마 색상 및 기타 속성에 대한 public/ 디렉터리에 매니페스트.json을 만듭니다.

    // lib/apolloClient.js
import { ApolloClient, InMemoryCache, HttpLink } from '@apollo/client';

const client = new ApolloClient({
  link: new HttpLink({ uri: '<https:>' }),
  cache: new InMemoryCache(),
});

export default client;

</https:>

  4. 서비스 워커 추가:

    next-pwa 플러그인은 서비스 워커를 자동으로 생성하고 오프라인 지원을 위한 캐싱을 처리합니다.

위 내용은 Next.js 인터뷰 숙달: 필수 질문(6부)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

JavaScript graphql json html edge Static String Object if switch for date Directory using public Event JS default this history web app cms Access SEO excel router axios
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：Blob을 HTML 양식에서 Base64 문자열로 효율적으로 변환하는 방법은 무엇입니까?다음 기사：Blob을 HTML 양식에서 Base64 문자열로 효율적으로 변환하는 방법은 무엇입니까?

관련 기사

더보기