새로운 프로젝트 1일차, 기한은 일주일, TS로 프로젝트 진행해야함.
<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
npm i json-server
{
"total-report": {
"daily":[
{
"imp":~~,
"click:~~,
...
}
]
},
"channel-report":{
"daily":[
{
"channel": "google",
"date": "2022-02-1",
...
}
]
},
"ad-list":{
"count":4,
"ads":[
{
"id": 1,
"adType": "web",
...
}
]
}
}
export class HttpRequest {
constructor(service) {
this.service = service;
}
get(url) {
return this.service.get(url);
}
put(id, data) {
return this.service.put(`/${id}`, data);
}
}
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);
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,
};
};
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;
"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를 한곳에서 관리하는것을 추천하시기에 원래 방식대로 진행하기로 하였다.
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를 정확히 이해하고 사용하였는지
✅ 내가 구현하지 않은 부분에 대해 설명할 수 있을 정도로 이해하였는지