광고 플랫폼 대시보드 프로젝트 - 1일차 초기 셋팅 및 json-server 구축

Seuling·2022년 7월 14일
광고플랫폼 대시보드원티드프로젝트프리온보딩
0

프로젝트

목록 보기
2/7
post-thumbnail

오늘 한 일

새로운 프로젝트 1일차, 기한은 일주일, TS로 프로젝트 진행해야함.

기능정의 요구사항 분석

  • 차트 라이브러리 : Recharts 라이브러리 사용하기로함
  • 데이트 라이브러리 : Data fns
  • 헤더 : 기능 없어도 된다.
  • 서버 : jsonserver라이브러리
    - gte lte (greater than, less than) 부분 확인
  • 주간에 대한 쿼리 요청해서 데이터 받아옴
  • 수정하기 -> 저장 후 PUT
  • database Key이름은 마케팅용어임으로 검색해보기
  • 라우팅 처리 레이아웃 따로 존재해야한다.
  • 내부부분 컨텐트 부분만 스크롤이 되야한다.
  • 이벤트 전파, 이벤트 버블링 : 주간 데이터 요청 후 받아올 때 까지 다른부분 클릭되면 안됨(css는 최후의 수단)
  • react router dom outlet 처리 확인 (https://ui.dev/react-router-nested-routes)

레이아웃

  1. Menu
  2. Header
    • 반응형 (480px) MobileMenu 햄버거 아이콘 등장
  3. Contents
    • 주 단위의 데이터 먼저 받아와서 그걸 통합 광고 현황에 보여줄 데이터로 가공
      • Dashboard
        • TotalAdStaus
          • LineChart
          • 두 가지 드랍다운 수치 비교하여 큰 값으로 Y축 생성
        • ChannelStatus
          • StackedBarChart
            • Stacked Bar
          • 전체 데이터 표 생성
      • AdList
        • Todo list 만드는 것과 동일
        • AdList
        • AdItem
        • AdItem 생성시
          • 상태, 광고 생성일 → 드롭다운으로 구현
          • 나머지는 단위만 맞춰서 기본 템플릿 구현

기능 분리

  1. 홈 페이지 + 광고관리 페이지 → 반응형 레이아웃
  2. 대쉬보드 페이지 - 통합 관리 현황
  3. 대쉬보드 페이지 - 매체현황
  4. 리액트 아울렛으로 라우팅
    일단 인원이 3명임으로 1,2,3 맡아서 기능 개발 후 합치며 리액트 라우팅 부분 같이해보기
    먼저, 컴포넌츠를 6개로 만들어 각각 2개의 컴포넌트를 개발하기로 했다.
    - <AdItem/>&<AdList/>
    - <ChannelStatus/>&<Header/>
    - <Menu/>&<TotalAdStatus/>

프로젝트 트리구조

src
 ┣ components
 ┃ ┣ AdItem.js
 ┃ ┣ AdList.js
 ┃ ┣ ChannelStatus.js
 ┃ ┣ Header.js
 ┃ ┣ Menu.js
 ┃ ┗ TotalAdStatus.js
 ┣ database
 ┃ ┗ database.json
 ┣ http
 ┃ ┗ httpRequest.js
 ┣ models
 ┃ ┣ useAdListModel.js
 ┃ ┣ useChannelStatusModel.js
 ┃ ┗ useTotalAdStatusModel.js
 ┣ pages
 ┃ ┣ AdList.js
 ┃ ┣ Dashboard.js
 ┃ ┗ Home.js
 ┣ services
 ┃ ┣ adListService.js
 ┃ ┣ channelStatusService.js
 ┃ ┗ totalAdStatusService.js
 ┣ App.css
 ┣ App.tsx
 ┣ index.css
 ┗ index.tsx

database 를 src안에 넣었는데, 지난 주 피드백을 보니 src외부로 빼는것을 추천해주셔서 다시 정리 될 것같다!

서버구축

처음 서버를 직접 구축해보며 어려움을 많이 느꼈다.

 ┣ database
 ┃ ┗ database.json
 ┣ http
 ┃ ┗ httpRequest.js
 ┣ models
 ┃ ┣ useAdListModel.js
 ┃ ┣ useChannelStatusModel.js
 ┃ ┗ useTotalAdStatusModel.js
 ┣ services
 ┃ ┣ adListService.js
 ┃ ┣ channelStatusService.js
 ┗ ┗ totalAdStatusService.js

서버 구축 순서

0. 초기셋팅

Install
npm i json-server

1. database/database.json 생성

{
	"total-report": {
      "daily":[
        {
        	"imp":~~,
          	"click:~~,
          	...
        }
      ]
    },
	"channel-report":{
      "daily":[
        {
          	"channel": "google",
          	"date": "2022-02-1",
          	...
        }
      ]
    },
  	"ad-list":{
        "count":4,
        "ads":[
        {
        	"id": 1,
        	"adType": "web",
        	...
        }
      ]
    }
}

2. http/httpRequest.js 생성

export class HttpRequest {
  constructor(service) {
    this.service = service;
  }
  get(url) {
    return this.service.get(url);
  }
  put(id, data) {
    return this.service.put(`/${id}`, data);
  }
}

3. services/adListService.js, channelStatusService.js, totalAdStatusService.js 생성

import axios from 'axios';
import { HttpRequest } from '../http/httpRequest';

export const adListService = axios.create({ baseURL: 'http://localhost:8000/ad-list' });
export const adListRequest = new HttpRequest(adListService);

4. models/useAdListModel.js, useChannelStatusModel.js useChannelStatusModel.js, useTotalAdStatusModel.js 생성

import React from 'react';
import { adListRequest } from '../services/adListService';
export const useAdListModel = () => {
  const [adList, setAdList] = React.useState(null);

  const updateAdList = (response) => {
    setAdList(response.data);
  };

  const getAdList = async () => {
    const response = await adListRequest.get('');
    updateAdList(response);
  };

  const putAdItemById = async (id, data) => {
    return await adListRequest.put(id, data);
  };

  return {
    adList,
    getAdList,
    putAdItemById,
  };
};

5. App.js에서 확인

import React from 'react';
import { useAdListModel } from '../src/models/useAdListModel';
import { useChannelStatusModel } from '../src/models/useChannelStatusModel';
import { useTotalAdStatusModel } from '../src/models/useTotalAdStatusModel';

function App() {
  const { adList, getAdList, putAdItemById } = useAdListModel();
  const { channelStatus, getChannelStatus } = useChannelStatusModel();
  const { totalAdStatus, getTotalAdStatus } = useTotalAdStatusModel();

  React.useEffect(() => {
    getAdList();
    getChannelStatus();
    getTotalAdStatus();
  }, []);

  console.log({ adList, channelStatus, totalAdStatus });
  return <div>Hello</div>;
}

export default App;

6. package.json 에 스크립트 추가

"scripts": {
		"start": "react-scripts start & npm run server",
		"build": "react-scripts build",
		"test": "react-scripts test",
		"eject": "react-scripts eject",
		"server": "json-server --watch [파일경로 =>]./src/db/db.json --port 8000"
  				//"json-server --watch ./src/database/database.json --port 8000"
	},
🚨 문제 발생

트러블 슈팅

원래, db를 따로 분리했었다.

 ┣ database
 ┃ ┣ adList.json
 ┃ ┣ channelStatus.json
 ┃ ┣ totalAdStatus.json

여기서 문제 발생 : 세개의 json파일을 어떻게 한번의 스크립트로 부르지 ???
아무리 검색해도 여러개의 파일을 불러와서 사용하는 경우가 없나보다....
처음에 해결하려고 든 생각은, Package.json -> scripts부분을 보면,
"start": "react-scripts start & npm run server",이렇게 되어있기에 sever 또한 마찬가지로 해주면 되지않을까 ? "server" : "json-server --watch (./src/database/adList.json.json &./src/database/channelStatus.json ) --port 8000 해결 안됨...
✅ 그럼 db파일을 3개로 분리하는게 아닌 1개로 통합하자.
"json-server --watch ./src/database/database.json --port 8000"
근데, 계속 안됨. 로직상으로는 맞는데,, 왜??
서버 내용을 바꾸면 껐다 켜줘야하는데 그부분을 하지않음..! 정말 기초적인 부분을 몰랐다..
껐다 키니까 제대로 작동함

그런데, db를 원래 생각대로 분리해서 사용을 할 수는 없나?? 아님 그런식으로는 사용을 하지 않는걸까?
먼저, 멘토님께 여쭤보니 추천은 안하지만 방법을 알려주셨다.

"server": "json-server --watch ./src/database/database.json --port 8000 & json-server --watch ./src/database/databasecopy.json --port 8001 & json-server --watch ./src/database/databasecopy2.json --port 8002"

포트번호를 바꿔줬어야 했군! 생각은 맞았다.
하지만 db를 한곳에서 관리하는것을 추천하시기에 원래 방식대로 진행하기로 하였다.

7. 실행

npm run start

더 논의해 볼 사안

GitHub Issue는 다음 프로젝트부터 도입해보기
JS로 작성하고 TS로 리팩토링해볼까?
-> 멘토님은 비추하셨다! 리팩토링 과정에서 수많은 에러를 만날것이기에.... 아예 TS로 시작해야겠다!

내가 해야하는 부분

광고관리 페이지를 담당하게되었다.

요구사항

  • 광고 관리 페이지 상단의 드랍다운으로 전체, 현재 진행중인 광고, 종료된 광고를 filtering 하여야 합니다.
  • 수정 버튼을 클릭하여 수정 할 수 있고, 광고 만들기로 생성할 수 있어야 합니다.

database.json에 있는 기본 데이터들을 불러올 수 있어야하고, 새롭게 생성하여 수정 저장 기능을 만들어야겠다.
또한, 광고 내용을 filterling 하는 기능을 구현해야한다.
CRUD해야하는 TodoList가 제일 먼저 떠올랐다.

1차 목표 : TS로 todolist를 구현해보고, jsonserver와 통신하며 렌더링해보는 것을
2차 목표 : 필터링 기능 구현
3차 목표 : mui 적용

또한, jsonserver관련 공부를 더 해봐야겠다.
코드를 보면 React.useEffect, React.useState() 와 같이 되어있는데, import를 사용하지 않은이유는 뭐지..? 더 알아보고 리팩토링이 필요하겠다.

프로젝트 끝나고 회고해야할 부분

✅ 1,2,3차 목표를 계획대로 해결해 나갔는지
✅ 매일매일의 트러블슈팅 기록 (아주 작은 문제더라도, 해결해나가는 생각의 흐름 드러나도록!)
✅ jsonserver를 정확히 이해하고 사용하였는지
✅ 내가 구현하지 않은 부분에 대해 설명할 수 있을 정도로 이해하였는지

profile
Seuling
프론트엔드 개발자 항상 뭘 하고있는 슬링
이전 포스트

React-TS-Calendar (Without Library)

다음 포스트

광고 플랫폼 대시보드 프로젝트 - 2일차 데이터 연결

0개의 댓글