sec 16 (실습) 가짜 데이터 만들기

데이터베이스와 서버를 구축하는 부분까지 다룰 수 없기 때문에 가짜 데이터를 생성해야 함.

 

data.json 코드 작성

[
    {
        "id": 1,
        "title": "리액트에서 리스트 렌더링하기",
        "content": "안녕하세요, 소플입니다.\n이번 글에서는 리액트에서 리스트를 렌더링하는 방법에 대해서 배워보겠습니다.\n리스트를 렌더링하기 위해서는 자바스크립트 배열에서 제공하는 map함수를 사용합니다.",
        "comments": [
            {
                "id": 11,
                "content": "실제로 개발하다보면 map함수를 진짜 많이 쓰는 것 같아요😄"
            },
            {
                "id": 12,
                "content": "적용해보니 코드가 정말 간결해지네요ㅎㅎ"
            },
            {
                "id": 13,
                "content": "key를 꼭 넣어줘야 하는군요~"
            },
            {
                "id": 14,
                "content": "생산성이 확 올라가는 느낌입니다ㅋㅋ"
            },
            {
                "id": 15,
                "content": "오늘도 좋은 글 감사합니다!👍"
            }
        ]
    },
    {
        "id": 2,
        "title": "리액트의 조건부 렌더링이란?",
        "content": "안녕하세요, 소플입니다.\n이번 글에서는 리액트의 조건부 렌더링에 대해서 배워보도록 하겠습니다.\n조건부 렌더링은 말 그대로 조건에 따라서 렌더링을 다르게 한다는 의미입니다.",
        "comments": [
            {
                "id": 21,
                "content": "이렇게 사용하는 방법이 있었군요!"
            },
            {
                "id": 22,
                "content": "좋은 글 감사합니다ㅎㅎ"
            },
            {
                "id": 23,
                "content": "항상 ?만 사용했었는데, 이제 &&도 사용해봐야 겠네요."
            },
            {
                "id": 24,
                "content": "쉬운 설명 감사드립니다😁"
            },
            {
                "id": 25,
                "content": "바로 코드에 적용해보겠습니다!!"
            }
        ]
    },
    {
        "id": 3,
        "title": "리액트 Hook에 대해서 배워볼까요?",
        "content": "안녕하세요, 소플입니다.\n이번 글에서는 리액트의 Hook에 대해서 배워보도록 하겠습니다.\nHook은 리액트의 함수 컴포넌트의 흐름에 끼어들어서 다양한 작업들을 처리하기 위해서 사용합니다.",
        "comments": [
            {
                "id": 31,
                "content": "뭔가 어려운 개념이었는데, 글을 읽고 조금 정리가 된 것 같습니다."
            },
            {
                "id": 32,
                "content": "Hook이 뭔가 했더니 이런거였군요. 알려주셔서 감사합니다ㅎㅎ"
            },
            {
                "id": 33,
                "content": "처음에 훅을 접했을 때 너무 어려웠는데 감사합니다!👍"
            },
            {
                "id": 34,
                "content": "앞으로는 잘 사용할 수 있을것 같아요"
            },
            {
                "id": 35,
                "content": "이름부터 너무 어려운 훅...🥲"
            }
        ]
    },
    {
        "id": 4,
        "title": "리액트 컴포넌트 개념 소개",
        "content": "이번 글에서는 리액트의 컴포넌트에 대해서 설명을 해보려고 합니다.\n리액트가 컴포넌트 기반이라는 것은 리액트를 조금만 공부해보신 분들도 다 알고 계실겁니다.\n그렇다면 컴포넌트는 도대체 뭘까요?",
        "comments": [
            {
                "id": 41,
                "content": "헷갈렸던 개념을 확실히 이해할 수 있어서 좋네요ㅋㅋ"
            },
            {
                "id": 42,
                "content": "컴포넌트에 대한 쉬운 설명 감사드려요👏"
            },
            {
                "id": 43,
                "content": "컴포넌트를 제대로 이해하지 않은 상태로 사용하기만 했는데 확실히 개념을 잡을 수 있어서 좋습니다!👍"
            },
            {
                "id": 44,
                "content": "리액트는 컴포넌트 기반이라서 재사용성도 높고 정말 좋은것 같아요"
            },
            {
                "id": 45,
                "content": "리액트 최고!!👍"
            }
        ]
    },
    {
        "id": 5,
        "title": "처음 만난 리액트 강의 소개",
        "content": "안녕하세요, 소플입니다.\n오늘은 제가 만든 리액트 강의를 소개해드리려고 합니다.\n강의 이름은 '처음 만난 리액트'입니다.\n강의 이름에서 이미 느끼셨을텐데, 리액트 초보자분들을 위한 강의입니다.",
        "comments": [
            {
                "id": 51,
                "content": "강의 너무 좋아요~!"
            },
            {
                "id": 52,
                "content": "초보자도 쉽게 이해할 수 있어서 좋습니다😃"
            },
            {
                "id": 53,
                "content": "실습도 따라하면서 하는데 좋아요"
            },
            {
                "id": 54,
                "content": "좋은 강의 감사드립니다👍👍"
            },
            {
                "id": 55,
                "content": "오 이런 강의가 있었군요~"
            }
        ]
    },
    {
        "id": 6,
        "title": "안녕하세요 소플입니다.",
        "content": "제 블로그에 오신 것을 환영합니다.\n앞으로 유익한 글들을 자주 올리도록 하겠습니다!",
        "comments": [
            {
                "id": 61,
                "content": "많이 올려주세요!👍"
            },
            {
                "id": 62,
                "content": "와 좋습니다ㅎㅎ"
            },
            {
                "id": 63,
                "content": "리액트 너무 어려워요ㅠㅠ😂"
            },
            {
                "id": 64,
                "content": "소플님 강의 잘 듣고 있습니다~!"
            },
            {
                "id": 65,
                "content": "꾸준히 블로그 활동 해주세요!!😀"
            }
        ]
    }
]