카심
81
2020-10-18 19:23:47
2
170

사이트 클론을 하고 싶은데, 백엔드 데이터는 어떻게 하시나요???


취업을 위해서 사이트 클론하려고 합니다.


학원다닐때는 백엔드 부분을 백엔드 담당 학생들이 해줘서 목업데이터로 구성하고 그랬는데,


이젠 혼자하니까 백엔드 데이터를 어떻게 가져와야하나 고민입니다.

어떻게해야 해당 사이트의 백엔드 부분을 만드셔서 클론하시나요???

1
  • 답변 2

  • 프로야근맨
    224
    2020-10-18 20:16:53

    데이터를 제공하는 API를 개발하시면 됩니다...


    세세하게 백앤드 구성을 하고 싶지 않으면  단순하게 노드js로 API 서버 생성하셔서 거기다고 호출하는 방식으로 하셔도 됩니다. 이전에 제가 작성한 코드 올려 드릴께요 (노드 문외한이라서 구린 코드인 점 양해 부탁드립니다.)


    아니면 정말 간단하게 api 서버를 생성 할 수 있는 json-server를 사용하셔도 됩니다.

    https://github.com/typicode/json-server


    /*
      @author pjw vim@kakao.com
      @since 20200108
      Express를 사용한 간단한 REST API 서버입니다.
     */
    const express = require('express');
    const bodyParser = require('body-parser');
    const app = express();
    const port = 3000;
    app.use(bodyParser.json());
    
    let nextId = 4;
    
    // 더미데이터
    let datas = [
      {
        id: 1,
        name: 'aaa'
      },
      {
        id: 2,
        name: 'bbb'
      },
      {
        id: 3,
        name: 'ccc'
      }
    ];
    
    // 전체 data 배열을 반환한다.
    app.get('/', (req, res) => {
      setTimeout(() => {
        if (datas.length < 1) {
          return res.status(400).json({ error: 'No data' });
        }
    
        return res.status(201).send(datas);
      }, 1000);
    });
    
    // id에 따른 특정 data를 반환한다.
    app.get('/:id', (req, res) => {
      const data = datas.find(d => d.id == req.params.id);
    
      if (!data) {
        return res.status(400).json({ error: 'No data' });
      }
    
      return res.status(201).send(data);
    });
    
    // 기존 data배열에 새로운 data를 추가한다.
    app.post('/', (req, res) => {
      // ES6 syntax : Spread Operator
      //           { id: id         , name: name }
      const data = { id: getNextId(), ...req.body };
    
      // 기존 배열에 담긴 데이터 다음 인덱스에 데이터를 추가한다.
      datas = [...datas, data];
    
      return res.status(201).send(datas);
    });
    
    // data배열 전체 삭제
    app.delete('/', (req, res) => {
      if (datas.length == 0) {
        return res.status(404).send({ error: 'not exist data' });
      }
    
      datas.splice(0, datas.length);
      return res.send(datas);
    });
    
    // id에 따른 특정 data 삭제
    app.delete('/:id', (req, res) => {
      const id = Number(req.params.id);
      const dataIndex = datas.findIndex(d => d.id == id);
    
      if (isNaN(id)) {
        return res.status(400).json({ error: 'plz input num' });
      } else if (datas[dataIndex]) {
        datas.splice(dataIndex, 1);
    
        return res.status(201).send(datas);
      } else {
        return res.status(404).json({ error: 'not exist data' });
      }
    });
    
    // id에 따른 특정 data 수정
    app.put('/:id', (req, res) => {
      const id = Number(req.params.id);
      const dataIndex = datas.findIndex(f => f.id == id);
    
      if (dataIndex > -1) {
        const todo = { ...datas[dataIndex], ...req.body };
    
        datas = [...datas.slice(0, dataIndex), todo, ...datas.slice(dataIndex + 1)];
        return res.status(201).send(datas);
      } else {
        return res.status(404).json({ error: 'not exist data' });
      }
    });
    
    app.listen(port, () =>
      console.log(`Simple REST API server listening on port ${port}!`)
    );
    
    // 데이터 추가 시 id값 증가를 위한 함수
    function getNextId() {
      return nextId++;
    }


  • 카심
    81
    2020-10-18 20:40:51

    @프로야근맨 // 답변감사합니다. 크롤링해서 만들어봐야겠네요.

    node.js 서버 굴려서 타입스크립트, 리덕스 적용해보겠습니다.


    답변 감사합니다.

  • 로그인을 하시면 답변 을 등록할 수 있습니다.