넷플릭스 클론코딩 4 Creating files/folders

src/fixtures 폴더를 만들고

src/fixtures/faqs.json

[
  {
    "id": 1,
    "header": "What is Netflix?",
    "body": "Netflix is a streaming service that offers a wide variety of award-winning TV programmes, films, anime, documentaries and more – on thousands of internet-connected devices.\n\nYou can watch as much as you want, whenever you want, without a single advert – all for one low monthly price. There's always something new to discover, and new TV programmes and films are added every week!"
  },
  {
    "id": 2,
    "header": "How much does Netflix cost?",
    "body": "Watch Netflix on your smartphone, tablet, smart TV, laptop or streaming device, all for one low fixed monthly fee. Plans start from £5.99 a month. No extra costs or contracts."
  },
  {
    "id": 3,
    "header": "Where can I watch?",
    "body": "Watch anywhere, anytime, on an unlimited number of devices. Sign in with your Netflix account to watch instantly on the web at netflix.com from your personal computer or on any internet-connected device that offers the Netflix app, including smart TVs, smartphones, tablets, streaming media players and game consoles.\n\nYou can also download your favourite programmes with the iOS, Android, or Windows 10 app. Use downloads to watch while you're on the go and without an internet connection. Take Netflix with you anywhere."
  },
  {
    "id": 4,
    "header": "How do I cancel?",
    "body": "Netflix is flexible. There are no annoying contracts and no commitments. You can easily cancel your account online in two clicks. There are no cancellation fees – start or stop your account at any time."
  },
  {
    "id": 5,
    "header": "What can I watch on Netflix?",
    "body": "Netflix has an extensive library of feature films, documentaries, TV programmes, anime, award-winning Netflix originals, and more. Watch as much as you want, any time you want."
  }
]

src/fixtures/jumbo.json

[
  {
    "id": 1,
    "title": "Enjoy on your TV.",
    "subTitle": "Watch on smart TVs, PlayStation, Xbox, Chromecast, Apple TV, Blu-ray players and more.",
    "image": "/images/misc/home-tv.jpg",
    "alt": "Tiger King on Netflix",
    "direction": "row"
  },
  {
    "id": 2,
    "title": "Download your programmes to watch on the go.",
    "subTitle": "Save your data and watch all your favourites offline.",
    "image": "/images/misc/home-mobile.jpg",
    "alt": "Watch on mobile",
    "direction": "row-reverse"
  },
  {
    "id": 3,
    "title": "Watch everywhere.",
    "subTitle": "Stream unlimited films and TV programmes on your phone, tablet, laptop and TV without paying more.",
    "image": "/images/misc/home-imac.jpg",
    "alt": "Money Heist on Netflix",
    "direction": "row"
  }
]

두 json 파일을 만든다.

그 후 리액트의 꽃이라고 할 수 있는 컴포넌트(components) 넣을 폴더를 src 안에 만들고 그 안에 jombotron 이라는 폴더를 만든다.
그 안에 나머지 파일 구성은 다음과 같이 구성한다.

src/components/jombotron/styles/jombotron.js

일단은 비워둠

src/components/jombotron/index.js

import React from "react";
export default function Jumbotron() {
  return (<p>I am the Jombo!</p>)
}

불러오면 I am the Jombo! 출력

다음과 같이 구성이 되어야 한다.

설명

"Fixtures"

"Fixtures" 폴더는 테스트용 데이터 또는 모의 데이터를 포함하는 곳입니다.
주로 개발 중인 애플리케이션의 다양한 시나리오를 시뮬레이션하기 위해 사용
예를 들어, 가상의 사용자 목록, 테스트용 더미 데이터, API 응답을 모의한 JSON 파일 등을 포함
"Fixtures" 폴더는 특정 컴포넌트의 테스트, 개발 및 디버깅을 위해 사용

"Components"

"Components" 폴더는 리액트 애플리케이션의 재사용 가능한 UI 컴포넌트를 포함하는 곳으로
주로 애플리케이션의 다양한 부분에서 사용되는 컴포넌트를 구현하고 관리
이 폴더는 보통 컴포넌트를 작성하는 데 사용되는 JavaScript 또는 TypeScript 파일들로 구성
일반적으로 컴포넌트 파일은 UI의 구조와 동작을 정의하고, 데이터를 받아서 화면에 렌더링하는 역할
이러한 컴포넌트들은 다른 컴포넌트에서 재사용되며, 화면의 다양한 부분을 구성하는 데 사용

app.js 를 수정하고 테스트를 해본다.

import Jumbotron from "./components/jumbotron";
export default function App() {
  return (
    <div>
      <Jumbotron />
    </div>
  );
}