🔥 Mock & map

복사 & 붙여넣기 ... 복사 & 붙여넣기 ... 이 지겨운 반복행위를 어떻게 하면 줄일 수 있을까. 그리고 백엔드에서 아직 API를 만들지 못했다고 하는데... 화면이 잘 나오는지 어떻게 알 수 있을까? 또 하드코딩인가!? 이런 고민을 해결하기 위해서 좋은 방법이 바로 Mock 데이터와 map 을 이용하는 방법이다. 반복 행위를 어떻게 줄일 수 있을지 알아보자.

💾 상수 데이터

상수 데이터란?

상수 데이터는 변하지 않는 정적인 데이터를 말한다. 그렇기 때문에 백엔드와 API를 통해서 가져오지 않는 정적인 데이터들의 경우 상수데이터를 만들어서 효율적으로 구성할 수 있다.

상수 데이터를 사용하는 이유?

인스타그램 클론코딩을 하면서 불편했던 부분은 스토리 피드, 친구 추천, 피드 등을 만드는 과정에서 하드 코딩을 이용하다보니 엄청나게 긴 코드가 나오게 되는 점이었다. 이는 나중에 원하는 부분을 찾기도 어렵게 만들었을 뿐 아니라 전혀 개발자스럽지 못하다는 느낌이 들었다.(복사 & 붙여넣기의 반복...)

이런 UI 부분을 상수 데이터와 map() 메소드를 이용하면 간단하게 표현할 수 있다. 수정이 필요한 경우에도 상수 데이터만 수정하면 반영이 되므로 유지보수에도 큰 장점이 있다.

상수 데이터를 사용하고 싶은 경우에는 JS 파일을 이용하여 작성하고 이를 import 해서 필요한 곳에서 사용하면 된다. 상수 데이터의 경우에는 구별을 위해서 대문자와 _ 를 사용하는 것을 권장한다.

📲 Mock 데이터

Mock 데이터란?

Mock 데이터는 가짜 데이터를 의미한다. 쉽게 말하면 백엔드 API로부터 데이터를 받아오기 전에 닮은 모습의 가짜 데이터를 말한다.

Mock 데이터를 사용하는 이유

개발을 진행하다 보면 많은 일이 발생하게 된다. 특히, 백엔드의 API가 아직 만들어지지 않은 상황임에도 불구하고 프론트엔드 개발도 계속 진행되어야 하는 경우도 있다.

이때, 데이터 값을 받아올 수 없기 때문에 하드코딩을 진행하여 화면을 구현하고 나중에 데이터를 이용하기 위해 바꿔야 한다면 정말... 답답한 일이 될 것이다.

데이터는 매일 먹는 아침 같은 것이 아니다. 프론트엔드 개발자는 API가 아직 없더라도 데이터를 화면에 예쁘게 보여주는 것이 중요하다. 그렇기 때문에 책임감을 가지고 Mock 데이터를 이용해보는 것이 좋다.

💡 주의할 점!!
Mock data 혼자서 만들고 화면으로 구현한다고 모든 문제가 해결되지는 않는다. 만약 백엔드와 소통 없이 Mock data 를 만들고 결국 key 값들이 다르다면 무수한 에러들을 만나게 될 것이다. 꼭 사전에 소통하여 받을 데이터와 같은 key 들을 가질 수 있도록 하자.

🖨 Mock 데이터 활용하기

Mock 데이터 예시

// json 파일
[
  {
    "id": 1,
    "profile": "/images/cheoljinJu/food.jpeg",
    "userName": "CheoljinJu",
    "url": "/images/cheoljinJu/food.jpeg",
    "comments": [
      {
        "id": 1,
        "userName": "현재님",
        "comment": "안녕하세요!",
        "isUser": false
      },
      {
        "id": 2,
        "userName": "동희님",
        "comment": "오히려 좋아",
        "isUser": false
      },
      {
        "id": 3,
        "userName": "영현님",
        "comment": "이 노래 좋아합니다!",
        "isUser": false
      },
      {
        "id": 4,
        "userName": "무현님",
        "comment": "말만 하세요.",
        "isUser": false
      }
    ]
  },
  {
    "id": 2,
    "profile": "/images/cheoljinJu/cat.jpeg",
    "userName": "CatCat",
    "url": "/images/cheoljinJu/cat.jpeg",
    "comments": [
      {
        "id": 1,
        "userName": "승찬님",
        "comment": "반갑습니다!",
        "isUser": false
      },
      {
        "id": 2,
        "userName": "성환님",
        "comment": "감사합니다.",
        "isUser": false
      },
      {
        "id": 3,
        "userName": "세준님",
        "comment": "자전거 타고 싶습니다!",
        "isUser": false
      },
      {
        "id": 4,
        "userName": "연우님",
        "comment": "킥오프 기다리셨죠?",
        "isUser": false
      }
    ]
  }
]

위는 인스타그램 내에서 피드들을 가지고 있는 데이터를 간단하게 작성해본 예시이다. 데이터를 보면 2개의 피드가 있고 그 안에 userName, profile, url 등의 정보와 댓글들의 정보를 가지고 있는 comments 로 구성되어 있음을 알 수 있다.

Array.map() 이용하기

 <section className="main__feeds">
              {this.state.feeds.map(feed => (
                <Feed key={feed.id} feed={feed} comments={feed.comments} />
              ))}
            </section>

우리는 여러 개의 feed 를 map() 을 이용해서 렌더링 할 예정이다. 그렇기 때문에 현재 main 페이지의 state 에서 feeds 를 가져와서 렌더링을 한다. 이때 고유한 key 값을 받을 수 있도록 props 로 전달했다.

componentDidMount = () => {
    fetch('http://localhost:3000/data/CommentDataCJ.json', {
      method: 'GET',
    })
      .then(result => result.json())
      .then(feeds => {
        this.setState({
          feeds,
        });
      });
  };

위의 코드는 우리가 만든 json 데이터를 받아오는 fetch 함수이다. componentDidMount() 를 이용해서 컴포넌트가 화면에 렌더링 된 후에 데이터를 받고 이를 setState() 를 통해서 리렌더링이 일어나도록 했다.

이때, 우리는 데이터를 요청해서 받아만 올 예정이기 때문에 method 로 GET 를 사용했다.

✨ 마치며

이렇게 우리는 fetch 를 이용해서 데이터를 받아오는 방법과 componentDidMount 가 언제 발생하게 되는지, 그리고 Mock 데이터와 map() 을 활용해서 어떻게 반복되는 작업을 줄이고 간결하게 만들 수 있는지 정리했다.

바닐라 JavaScript와 HTML 을 사용해서 인스타그램을 만드는 과정에서 정말 코드가 길어지고 가독성이 나빠졌던 경험을 했는데 이번 내용들을 통해서 이를 많이 개선할 수 있어서 좋은 경험이었다.

Mock 데이터 와 map() 경우에는 정말 많은 활용성을 가지고 있기 때문에 꼭 기억하고 많은 활용을 해볼 예정이다.