주특기 재정비 프로젝트
CheerUp 앱
MOCK API를 사용하기
백엔드에서 api와 db를 만들어주기 전에 가상의 데이터를 만들어서 뷰에 뿌려보기 위한 목적.
// /shared/response.js
const RESP = {
ARTICLE: {
articles: [
{
id: "1",
username: "임꺽정",
content: "내용",
saying: "명언이다",
createdAt: "12:33",
},
{
id: "2",
username: "홍길동",
content: "팀장님이 이상해요",
saying: "이 또한 지나가리",
createdAt: "12:33",
},
],
},
};
export default RESP;
// /redux/modules/articles.js
import RESP from "../../shared/response";
...
const resp = RESP.ARTICLE;
for (let i=0; i<resp.length; i++) {
....
}
axios
HTTP 비동기 통신 라이브러리로 axios를 사용해보았다.
yarn add axios
// shared/Request.js
import axios from "axios";
...
const instance = axios.create({
baseURL: "요청보낼 서버 도메인" // 요청을 www.aa.com/user로 보낸다면, www.aa.com까지 기록
});
// 가지고 있는 토큰 넣어주기!
// 로그인 전이면 토큰이 없으니 못 넣어요.
// 그럴 땐 로그인 하고 토큰을 받아왔을 때 넣어줍시다.
instance.defaults.headers.common["Authorization"] = USER_TOKEN;
export default instance;
// /redux/modules/someModule.js
import instance from "../../shared/Request";
...
// 어떤 미들웨어
const getSomeData = () => {
return function(dispatch){
// 만들어둔 instance에 보낼 요청 타입과 주소로 요청합니다.
instance.get("/some").then((res) => {
//요청이 정상적으로 끝나고 응답을 받아왔다면 수행할 작업!
}).catch(err => {
// 요청이 정상적으로 끝나지 않았을 때(오류 났을 때) 수행할 작업!
console.log("에러 났어!");
})
}
}
Author And Source
이 문제에 관하여(주특기 재정비 프로젝트), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@uvula6921/주특기-재정비-프로젝트저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)