개요
저번에 json-server를 이용하여 API 연동 연습 및 테스트를 하는 과정을 기록했었다.
하지만 다른 파일을 열고 작성해야하는 불편함과 동시에 두개의 에디터를 열어 두 개의 포트를 사용하면서 연결해야하는 복잡성이 있어서 이를 간단화하고 API적용 연습까지 하며 더욱 효율성 있는 데이터 출력을 시도해보고자 새로운 기술들을 익혀보려고 한다.
Mockdata
1-1 Mockdata란 무엇인가?
mock의 뜻은 모조품이라는 뜻으로 즉 가짜라는 것을 의미한다. 협업을 할 때 원래라면 백엔드에서 받아온 url에 API연동을 통하여 정보를 나타내야하지만, 백엔드에서 받아온 정보들이 아닌 모조품의 정보들을 나타내며 필요에 의해 프론트엔드 개발자에 의해 생성될 수 있다.
1-2 Mockdata가 왜 필요한가?
-> 프론트엔드가 프로젝트를 진행하게 될 때 보통은 View 화면 구현 따로 API 연동 작업을 따로하여 작업한다. 이렇게 두 번 나누어서 작업을 진행하게되면 봤던 코드를 다시 한 번 봐야하기 때문에 효율성이 떨어지고, 미리 받아올 데이터의 형태들을 예측할 수 없기에 이를 확인하고 대비해놔야한다.
-> 더불어 백엔드에서부터 어떠한 정보의 형태가 올지 미리 예측할 수 있기 때문에 효율적으로 작업할 수 있다.
.json 파일 형태
개요
기존의 .js의 파일 형태로 데이터파일을 가져와서 출력하고 싶은 곳에서 나타낼 수 있는 방법이 있다. 아래와 같은 간단한 과정을 겪는다.
- 데이터파일(data.js)파일 만들기
- 원하는 파일에서 데이터파일을 import 하기
- 데이터파일에서 배열 이름을 가져와 useState 등의 Hook을 통해 저장하기
- map 함수를 통해 데이터파일 안의 내용을 출력하기
이 또한 물론 좋은 데이터를 분리하여 가져오는 방법에 속하지만, API연동을 미리 하고싶은 사람에겐 적합하지 않는다.
이와 같은 이유로 .json파일의 형태를 mockdata로 가져오는데에 채택하였다.
어디에 만들어야해?
그렇다면 data.json파일을 어느 경로에 만드는게 좋을까?
기존의 데이터파일들은 전부 src을 통해 만들었었다. 하지만 src안 파일 어딘가에 담겨 있다면 .js 형태의 데이터파일과 똑같은거 아닐까?, URL로 확인할 수 없지 않을까? 라는 의문이 생겼다.
public파일안에 json파일 위치의 경우
src파일안에 json파일 위치의 경우
(기존의 App.js화면이 나타나는 모습)
이러한 테스트를 직접 진행해보니 public파일안에 데이터를 만들어야 url로 .json파일을 볼 수 있다는 것을 알게되었다.
그렇다면 왜, src안과 public의 차이는 무엇일까?
src디렉토리 내에 .json 파일을 생성하게되면 Webpack에 의해 빌드과정중에 하나의 js파일로 만들어버려서 url로 조회가 안되고,
.json파일을 public 디렉토리에 만들게 되면 webpack에 의해 빌드가 되지 않는 파일이 되고, 이를 url을 통해 직접 액세스할 수 있다는 것이다.
json파일 활용하기
그렇다면 직접 .json파일을 받아와 출력해보자!
데이터파일은 아까 만든 파일을 참고하겠다.
app.js파일에서 useState을 통해 받아온 데이터를 담아줄 변수배열을 만들어주고,
.json파일이 담긴 url에서 fetch를 통해 response에 담아주고 이를 data이름의 변수에 저장하여
setDatas(data)를 통해 기존의 useState를 이용해 만들어놓은 변수배열에 넣는다.
map함수를 통해 출력하면 다음과 같은 화면이 나타난다.
이와 같이 데이터를 미리 가져와 출력하는 연습을 하고싶을때 적극적으로 .json파일을 만들어서 미리 받아온 정보의 형태를 참고하여 데이터를 넣고, URL을 통해 가져오는 형식으로 연습해보았다. 다음 프로젝트를 진행할땐 미리 .json을 구성하여 데이터를 가져와 넣는 작업을 하여 개발기간을 아껴 효율적으로 할 수 있겠다!
