public에 mock data파일을 만들어 접속해 사용 할 수 있다.
public폴더에 commentData.json파일을 만들어 놓고
useEffect(() => {
fetch('http://localhost:3000/data/commentData.json', {
method: 'GET',
})
.then(res => res.json())
.then(data => {
setCommentsList(data);
});
}, []);
위와 같은 문법으로 가지고 올 수 있다. 바로 연결을 하는 것이 아니라
fetch
자바스크립트를 사용하면 필요할 때 서버에 네트워크 요청을 보내고 새로운 정보를 받아오는 일을 할 수 있습니다.
- 주문 전송
- 사용자 정보 읽기
- 서버에서 최신 변경분 가져오기
- 등등
를 사용 하여 연결을 해준다 가져와야 하는 정보에 따라 method의 내용이 달라진다 지금은 데이터를 읽고 가져오기만 하면 되기 때문에
GET을 사용 하였다.
GET
GET 메소드는 주로 데이터를 읽거나(Read) 검색(Retrieve)할 때에 사용되는 메소드이다. 만약에 GET요청이 성공적으로 이루어진다면 XML이나 JSON과 함께 200 (Ok) HTTP 응답 코드를 리턴한다. 에러가 발생하면 주로 404 (Not found) 에러나 400 (Bad request) 에러가 발생한다.
출처: https://im-developer.tistory.com/166 [Code Playground]
메서드들은 다음 블로그를 참고 하자
1.then() 메서드는 Promise를 리턴하고 두개의 콜백 함수를 인수로 받습니다. 이때, 인수로 들어온 콜백함수의 리턴값이 promise객체일 때, then()이 콜백함수의 리턴값인 promise객체를 받습니다.
useEffect는 한번만 실행 되면 되기 때문에 함수의 끝에 []를 넣어준다.
다 연결한 후 내가 만들어 놓은 데이터 객체의 key들을 mockdata와 동일 하게 만들어 준다.
다음 작업은
1. 메인피드 컴포넌트화 하기
2. 메인피드 목데이터 만들어서 연결하기
