json-server?
서버 구현 없이 간단한 CRUD 프로젝트를 구현할 수 있는 npm package.
= 서버 구현 없이 새로 생성한 값을 저장할 수 있다(날아가지 않음).
install
npm i json-server
package.json에 자동 실행 scripts 추가
"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"
},위와 같이 설정한 후 npm run start하면 npm run start와 npm run server가 동시에 실행되어야 하는데 서버 실행은 안됨! 왜..?mac에선 되고 windows에선 안되는건지 구글링해보기 + scripts를 다르게 작성해야할 수도 있음
사용방법
- json형식의 mock data를 생성, data의 경로를 scripts의 server 파일경로에 넣어준다.
- axios 활용시 http request(get,post,patch...)로 데이터를 관리할 수 있다.
세션 진행중 강사님이 작성한 json-server 코드 예시 보고 느낀점
<흐름>
mock data 생성 -> axios 라이브러리와 http request로 데이터 관리
<강사님이 작성한 코드 분석>
포커스 : 디렉토리를 어떻게 구분했는지?, 어떻게 각 파일이 체이닝 되었는지? 단계가 어떻게 나뉘어져 있는지? 현업 종사자는 유지보수 측면에서 어떻게 작성하는지?...
-
mock data는 src/database/databse.json로 저장(package.json scripts 부분에 들어갈 경로는 ./src/database/database.json)
-
axios 인스턴스를 src/services/movieServise.js에서 생성함. axios에 바로 http request를 호출하지 않고, url을 넣은 axios 인스턴스만 만듬. -> 이렇게 만든 axios 인스턴스를 또 외부에서 만든 HttpRequest class의 인자로 전달함으로써 최종적으로 axios와 http request가 이루어지는 movieRequest라는 인스턴스를 생성함.
-
src/http/httpRequest.js에 HttpRequest class를 만들어서 생성자로 service를 초기화 해줌.(service는 axios 인스턴스이다) 그리고 axios를 통해 데이터를 관리할 http request들이 어떻게 동작할건지 재선언해줌. ★이부분이 가장 신박했다★
-
src/models/useMovieModel.js에서는 위에서 만든 movieRequest 인스턴스(axios와 http request 연결된)를 가져와서 실제로 데이터를 가져오는 작업을 진행함. 가져온 데이터는 useState로 관리. 세터함수에 가져온 데이터를 전달하는 작업을 따로 callback함수로 감쌈
★분업화 = 하나의 함수는 하나의 행동만★
getMovies() : axios.get으로 데이터를 가져오는 작업
getMoviesCallback() : 가져온 데이터를 세터함수로 전달하는 작업
patchMovieById() : axios.patch로 데이터를 변경하는 작업(Promise를 반환한다!!)
다같이 return ~> (custom hooks 같이!)
- App.jsx에서 위에 만든 useMovieModel.js의 메서드들을 import해서 마운트시 getMovies() 호출하게 하고, 임의의 DOM요소를 만들어준후 onclick 이벤트로 onClickImageCallback을 달아서 patchMovieById()를 호출해준 후 Promise를 반환하면 then으로 받아서 getMovies를 다시 호출
-> 왜 함수명만 전달했더라??? 고민해보고 업데이트 하기!!!
<내가 작성한 mock data 관리 코드 스타일(사전 과제)>
//MainPage.jsx에 모두 작성
//json-server 사용 안함
const api = "/data/sampleFeed.json";
const getFeed = async (url) => {
const {
data: { feeds },
} = await axios.get(url);
setFeeds({ feeds: feeds });
};
...
useEffect(() => {
if (user) {
getFeed(api);
} else return;
}, []);<강사님이 작성한 코드와 비교해보고 느낀 차이점>
- 1) 데이터가 있는 경로 지정 2) axios 라이브러리 적용 3)http request(여기서는 get) 로 단계를 분리해서 보면,
2)와 3) 모두 getFeed라는 함수 하나에서 다 진행함.
= 클린 코딩과는 멀게 작성한 것 같다. getFeed함수가 하나의 행동만 하지 않기 때문. - 함수가 너무 노출되어있다고 생각했다. 강사님은 전체적인 흐름 기준으로 단계를 나눠서 각 단계별로(
체이닝된 느낌?으로(의존성있게?))전부 파일을 분리하여 만드심. 그렇게 만드니 각 함수가 무슨 일을 하는지는 함수명을 통해 알아야하고 실제 함수의 코드는 숨겨진 느낌이 들었다. - 콜백함수 사용이 적다. 다시말해 유지보수 측면은 전혀 고려하지 않은 것 같다.
- 강사님은 주로 인스턴스화 시켜서 사용하심.
- 비동기적인 부분도 신경써서 작성함. 나는 전혀 고려하지 않은 것 같음.
<강사님 코드에서 나는 다르게 구현하고 싶었다 하는 부분이나 이해안가는 부분>
- useMovieModel hooks가 디렉명이 왜 model인지 모르겠음.
- App 컴포넌트에서 onclick이벤트로 patch후 promise 반환시 왜 then으로 getMovies 함수명만을 전달했는지????
- patch 요청시 페이지 새로고침이 필요한가?(살짝 언급되고 실행에 문제없어서 그냥 넘어갔던 것 같음)
<강사님 코드 보면서 추가로 공부한 내용>
- axios.get과 axios.create 무엇을 사용해야하는가?
서버요청은 매우 자주 일어나므로 유지보수를 항상 고려해야한다. axios.create()로 인스턴스 제작 + http request 분리 하는 방식이 해당 면에서 더 효율적임.(그런것 같음) - 머릿속 async/await의 개념 수정
async = 무조건 Promise 객체를 반환함. -> return된 Promise는 await으로 처리해도 되고 then으로 처리해도 됨.
await = 단독으로 사용 불가능. Promise 객체를 return하는 함수에서만 사용 가능. - ★옵셔널 체이닝!!
기호 : ?.
?.'앞’의 평가 대상이 undefined나 null이면 평가를 멈추고 undefined를 반환합니다.
예)
movie && movie.map(()=>{...}) //undefined나 null인 값을 map하면 오류가 나므로 이렇게 걸르던것을
=> movie?.map(()=>{...}) //옵셔널 체이닝으로 더 짧게 표현가능해짐