next.js, gemini AI를 이용한 한국인 캐릭터 생성기 - 1

오늘은 next 14와 gemini를 이용해서 간단한 페이지를 만들어보도록 하겠습니다.

저도 공부하면서 하는지라 아직 게시글이 부족합니다. 하지만 알고 있는 지식으로 최대한 만들어보겠습니다.

 

우선 프로젝트를 만들어야겠죠. 우리는 next.js를 사용할껀데, vercel에서 사용방법을 아주 잘 설명해놨습니다.

개발할 루트 폴더에서 아래 명령어를 실행해주세요.

npx create-next-app@latest

 

여담으로 위 처럼 새로운 프로젝트나 모듈을 시작할 때 초기 구조를 자동으로 설정하는 과정이나 도구를 스캐폴딩 (Scaffolding)이라고 합니다. 가장 대표적인 건 현재는 지원이 종료된 create-react-app이 있겠네요.  

 

혹시나 면접 과정에서 위 질문을 묻는다면 이제 스캐폴딩이라고 답할 수 있겠습니다. 이제 면접때 누가 물어보기만 하면 되겠네요.

 

위 명령어를 실행하게 되면 다양한 옵션이 나오게 됩니다. 

What is your project named? my-app
Would you like to use TypeScript? No / Yes
Would you like to use ESLint? No / Yes
Would you like to use Tailwind CSS? No / Yes
Would you like your code inside a `src/` directory? No / Yes
Would you like to use App Router? (recommended) No / Yes
Would you like to use Turbopack for `next dev`?  No / Yes
Would you like to customize the import alias (`@/*` by default)? No / Yes
What import alias would you like configured? @/*

 

next js 홈페이지에서 퍼왔구요. 위 질문들을 간단하게 번역해본다면 이런 말이 되겠네요.

 

1. 프로젝트 이름은 뭘로 할까요?
2. Typescript를 사용하시겠습니까?
3. ESLint를 사용하시겠습니까?
4. Tailwind CSS를 사용하시겠습니까?
5. src 폴더 안에 코드를 넣으시겠습니까?
6. app router를 사용하시겠습니까?
7. 터보팩 쓰시겠습니까?
8. imprort를 커스터마이즈 할까요? (기본이 '@/*') 
9. 어떤 import 별칭을 설정할까요?

1번부터 4번은 다 아실 내용이니까 패스 하겠습니다.

5번은 말 그대로 src 폴더를 생성할꺼냐는 내용입니다. 생성하면 next.js의 구조가 src 폴더 내부에서 이루어지게 됩니다.

6번의 app router는 next.js 13 버전부터 생긴 라우트 입니다.

app/ 디렉토리 내부에서 라우팅을 생성할 수 있으며, 내부의 page.js가 해당하는 경로의 페이지 컴포넌트가 됩니다.

 

좀더 쉽게 예를 들자면.

app/list/page.tsx(page.jsx)

 

http://localhost:3000/list

 

page.tsx가 index.tsx의 역할을 한다고 보면 되겠네요.

app router는 추후에 다시 한번 설명할 예정이니까 여기서 넘어가겠습니다.

어쨌든 13이후 부터는 app router를 사용하는 걸 추천합니다. 저는 app router를 사용하도록 하겠습니다.

 

주의할 사항은 13이전의 버전들은 전부 page router를 사용하고 있습니다. 오래된 인터넷 강의, 혹은 디렉토리에 app이 아닌 pages를 사용하고 있다면 page router입니다. 

 

7번의 터보팩은 vite, webpack과 같은 번들러입니다. webpack보다 700배 빠른 업데이트 속도와 vite 대비 10배 빠른 업데이트 속도라는데 취향껏 선택하시면 됩니다. 저는 no를 선택했습니다.

 

8번과 9번은 alias를 이용한 절대 경로 수정입니다. 

import { Button } from '../../../components/Button'

 

위와 같이 import의 절대 경로의 depth가 깊어지는 걸

import { Button } from '@/components/Button'

쉽게 퉁칠 수 있죠. 저는 @/로 바꿨습니다. yes 선택 후, 따로 입력하지 않으면 기본이 @/*로 바뀝니다.

 

위 옵션들을 모두 마치게 되면 프로젝트 폴더가 만들어집니다.

다음 게시글에선 본격적으로 페이지를 만들어보도록 합시다.