Next.js를 사용하여 게이머태그 생성기 앱을 만드는 방법

게이머태그 생성기 앱을 만드는 것은 게이머가 실제로 사용할 수 있는 것을 구축하는 동시에 Next.js 기술을 발휘할 수 있는 재미있는 실습 프로젝트가 될 수 있습니다.

게이머태그 생성기는 만들기가 매우 간단하며 구성 요소, 양식 및 간단한 무작위 작업을 수행할 수 있는 훌륭한 방법을 제공합니다.

이 과정이 끝나면 몇 가지 입력 기본 설정을 기반으로 게이머를 위한 멋지고 고유한 이름을 생성할 수 있는 작동하는 앱을 갖게 됩니다. Next.js를 사용하여 단계별로 설정을 살펴보겠습니다.

이 프로젝트에 Next.js가 필요한 이유는 무엇입니까?

Next.js는 이러한 유형의 애플리케이션을 구축하는 데 탁월한 선택입니다. 라우팅을 쉽게 만들고, 서버 측 렌더링을 제공하며(확장할 경우 유용할 수 있음), API 경로에 대한 지원이 내장되어 있는 강력한 React 프레임워크입니다. 게다가 이미 JavaScript와 React에 익숙하다면 쉽게 배울 수 있습니다.

프로젝트 설정

코드를 살펴보기 전에 컴퓨터에 Node.js와 npm(또는 Yarn)이 설치되어 있는지 확인하세요. 그렇지 않다면 Node.js로 가서 최신 버전을 다운로드하세요. 설정이 완료되면 다음 단계를 따르세요.

1. 새 Next.js 프로젝트 만들기
   
   터미널을 열고 다음을 실행하세요.

   npx create-next-app gamertag-generator
   

   로그인 후 복사

   로그인 후 복사

   gamertag-generator라는 폴더에 새로운 Next.js 프로젝트가 생성됩니다. 설치가 완료되면 프로젝트 디렉터리로 이동하세요:

   cd gamertag-generator
   

   로그인 후 복사

   로그인 후 복사

2. 개발서버 시작
   
   개발 서버를 실행하여 모든 것이 실행되고 있는지 확인하세요.

   npm run dev
   

   로그인 후 복사

   로그인 후 복사

   이렇게 하면 http://localhost:3000에서 Next.js 앱이 시작됩니다. 브라우저에서 해당 URL을 열어 실행 중인지 확인하세요.

게이머태그 생성기 설계

우리 앱은 사용자가 몇 가지 옵션(예: 선호하는 길이 또는 테마)을 선택할 수 있는 간단한 양식과 게이머태그를 생성하는 버튼으로 구성됩니다. "생성"을 클릭하면 선택 사항에 따라 무작위 게이머태그가 표시됩니다.

우리가 다룰 내용은 다음과 같습니다.

• 사용자 기본 설정에 대한 양식을 설정합니다.
• 무작위 이름 생성 기능을 생성합니다.
• 생성된 게이머태그를 표시합니다.

각 부분을 세분화해 보겠습니다.

사용자 인터페이스 구축

시작하려면 Pages/index.js를 엽니다. 홈페이지의 기본 파일입니다. Next.js와 함께 제공되는 기본 코드를 지우고 새로 시작할 수 있습니다. 시작하기 위한 간단한 템플릿은 다음과 같습니다.

import { useState } from 'react';

<p>export default function Home() {<br>
  const [gamertag, setGamertag] = useState('');<br>
  const [length, setLength] = useState(8);<br>
  const [theme, setTheme] = useState('random');</p>

<p>const generateGamertag = () => {<br>
    // We'll create this function in the next section<br>
  };</p>

<p>return (</p>
<div class="highlight js-code-highlight">
<pre class="highlight plaintext">  Gamertag Generator
  Create a unique gamertag based on your preferences!



      Gamertag Length:
       setLength(e.target.value)} 
        min="4" 
        max="15" 
      />



      Theme:
       setTheme(e.target.value)}>
        Random
        Fantasy
        Tech
        Animals


  Generate

  {gamertag &amp;&amp; (

      Your Gamertag:
      {gamertag}

  )}

);
}