Type something to search...
to navigateto selectESC to close

01. GOFLIX 프로젝트 소개와 개발환경 설정

요약

  1. npx gemini
  2. 1
    React 19 + Vite + Tailwind CSS 4 프로젝트를 생성해줘. 프로젝트 이름은 [프로젝트명]이야. react-router, axios, @fortawesome/react-fontawesome, @fortawesome/free-solid-svg-icons, swiper 패키지도 함께 설치해줘. .env 파일 예시와 vite.config.js도 작성해줘.

1. GOFLIX 프로젝트 소개

이번 시리즈에서는 GOFLEX라는 넷플릭스 스타일의 영화 웹 애플리케이션(애플리케이션)을 처음부터 끝까지 직접 만든다. 완성하면 이런 기능이 동작한다.

  • TMDB API에서 실시간 영화 데이터를 가져와 화면에 표시
  • 현재 상영작, 인기작, 최고 평점 영화를 카드 형태로 나열
  • 영화를 클릭하면 상세 정보 + 예고편 보기
  • 카테고리별 목록 + 페이지네이션
  • AI 챗봇과 대화

완성된 프로젝트의 기술 스택(Tech Stack, 기술 구성)은 다음과 같다.

요약

**컴포넌트(Component)**란? 레고 블록처럼, 화면을 구성하는 작은 조각이다. 버튼 하나, 카드 하나, 헤더 하나가 각각 컴포넌트이다. 이 조각들을 조립하면 전체 페이지가 완성된다.

기술역할
React 19 (리액트)UI 컴포넌트 구성
Vite (비트)빌드 도구, 개발 서버
Tailwind CSS 4 (테일윈드)유틸리티 기반 스타일링
React Router 7 (리액트 라우터)페이지 이동(라우팅)
Axios (액시오스)HTTP 요청
Font Awesome (폰트어썸)아이콘
Swiper (스와이퍼)슬라이드/캐러셀

2. 관련링크

요약

3. Node.js 설치 확인

터미널(Terminal, 명령창)을 열고 아래 명령어를 입력한다. 버전 번호가 출력되면 이미 설치된 상태이다.

Terminal window
1
node -v
2
npm -v

요약

Node.js가 설치되어 있지 않다면 https://nodejs.org 에서 LTS 버전을 다운로드하여 설치한다.

4. 프로젝트 생성

  1. 프로젝트 폴더를 만든다
  2. 프로젝트 폴더를 VSCODE에서 루트로 연다
  3. VSCODE 터미널을 열고 아래 명령어를 입력한다.
Terminal window
1
npm create vite@latest .
  1. 아래 영상대로 선택한다.

5. 필요한 패키지 설치

  1. VSCODE 터미널을 열고 아래 명령어를 입력한다.
Terminal window
1
npm install axios react-router tailwindcss @tailwindcss/vite @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons @fortawesome/react-fontawesome swiper
패키지역할
axios서버에 HTTP 요청을 보내는 도구
react-routerURL에 따라 다른 페이지를 보여주는 라우팅 라이브러리
tailwindcss, @tailwindcss/viteCSS를 클래스명(class)으로 빠르게 작성하는 도구
@fortawesome/*아이콘을 React 컴포넌트로 사용하는 도구
swiper터치 슬라이드/캐러셀 라이브러리

6. Vite 설정 파일 작성

vite.config.js
1
import { defineConfig } from "vite";
2
import react from "@vitejs/plugin-react";
3
import tailwindcss from "@tailwindcss/vite";
4


5
export default defineConfig({
6
  plugins: [react(), tailwindcss()],
7
});
줄설명
1Vite의 설정 함수 defineConfig를 가져온다.
2React 플러그인을 가져온다. JSX 문법을 사용할 수 있게 해준다.
3Tailwind CSS 플러그인을 가져온다.
5-7plugins 배열에 React와 Tailwind 플러그인을 등록한다.

7. CSS 초기 설정

src/index.css 파일을 열고 기존 내용을 모두 지운 뒤 아래를 작성한다.

src/index.css
1
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css");
2


3
@import "tailwindcss";
4


5
@theme {
6
  --font-sans: "Pretendard Variable", sans-serif;
7
}
줄설명
1Pretendard(프리텐다드) 한글 웹폰트를 CDN(씨디엔, 콘텐츠 전송 네트워크)에서 불러온다. 한글이 예쁘게 보이려면 폰트가 필요하다.
3Tailwind CSS의 모든 유틸리티 클래스를 불러온다. 유틸리티 클래스란, text-white(흰 글자), bg-black(검정 배경)처럼 하나의 역할만 하는 짧은 클래스이다. CSS 파일을 따로 만들지 않고 HTML에 직접 클래스를 붙여서 디자인한다.
5-7@theme으로 Tailwind의 기본 폰트를 Pretendard로 변경한다. 이 설정 하나로 프로젝트 전체의 글꼴이 한꺼번에 바뀐다.

Tailwind CSS 4에서 도입된 새로운 테마 설정 방식이다. 기존 tailwind.config.js의 theme.extend 역할을 CSS 파일 안에서 직접 처리한다. --font-sans를 설정하면 font-sans 클래스에 Pretendard 폰트가 자동으로 적용된다.

주의

기존에 Vite가 자동 생성한 CSS 코드는 모두 삭제해야 한다. 남겨두면 스타일이 충돌할 수 있다.

8. 폴더 구조 정리

src 폴더 안에 다음과 같은 구조를 만든다.

1
frontend/
2
├── public/
3
│   └── video.mp4            ← 히어로 영상 (선택)
4
├── src/
5
│   ├── api/
6
│   │   └── axios.js         ← API 통신 설정
7
│   ├── components/
8
│   │   ├── Card.jsx         ← 영화 카드
9
│   │   ├── Category.jsx     ← 카테고리별 목록
10
│   │   ├── ErrorPage.jsx    ← 404 에러 페이지
11
│   │   ├── Footer.jsx       ← 하단 푸터
12
│   │   ├── Header.jsx       ← 상단 헤더 + 검색
13
│   │   ├── Home.jsx         ← 메인 페이지
14
│   │   ├── MovieDetail.jsx  ← 영화 상세
15
│   │   ├── Section.jsx      ← 영화 목록 섹션
16
│   │   └── UI.jsx           ← 공통 UI 컴포넌트
17
│   ├── App.jsx              ← 레이아웃 + 데이터 로딩
18
│   ├── index.css            ← Tailwind + 폰트 설정
19
│   └── main.jsx             ← React 앱 시작점
20
├── index.html
21
├── vite.config.js
22
└── package.json

정보

components와 api 폴더는 직접 만들어야 한다. 터미널에서 mkdir src/components src/api 명령어를 실행하면 된다.

9. 개발 서버 실행

Terminal window
1
npm run dev

터미널에 http://localhost:5173 같은 주소가 표시되면 성공이다.

요약

개발 서버를 종료하려면 터미널에서 Ctrl + C를 누르면 된다.

10. TMDB API 키 발급

  1. https://www.themoviedb.org 에 회원가입한다.
  2. 로그인 후 Settings(설정) → API 메뉴로 이동한다.
  3. API Key(API 키)를 복사한다.

프로젝트 루트에 .env 파일을 만들어 저장한다.

.env
VITE_TMDB_API_KEY=여기에_발급받은_키를_붙여넣기
줄설명
1VITE_ 접두사가 붙어야 Vite가 이 값을 코드에서 사용할 수 있게 해준다.

주의

.env 파일은 비밀 정보이다. .gitignore에 .env를 추가하여 GitHub에 올라가지 않도록 반드시 확인한다.

11. 전체 코드