오늘은 효율적으로 코드 관리하는 방법을 기록해 보겠다.
(전체적인 뜻과 흐름은 이전 포스팅에 나름 자세히 적어놨으니 생략)
예시로 로그인 한 회원 정보를 아래와 같이 fetch 절로 서버 데이터를 불러 왔었다.
<기존, 서버에 데이터 요청 구문>
export const callGetMemberAPI = ({memberId}) => {
const memberRequestURL = `http://localhost:8080/api/v1/member/${memberId}`;
return async (dispatch, getState) => {
const result = await fetch(memberRequestURL,{
method : 'GET',
headers: {
'Content-Type' : 'application/json',
Accept: '*/*',
Authorization : 'Bearer' + window.localStorage.getItem('accessToken'),
},
}).then((res) => res.json());
console.log('callGetMemberAPI result : ', result);
dispatch({type: GET_MEMBER, payload:result});
}
}
하지만 로그인 한 회원의 정보 말고, 상품 페이지 / 문의 페이지 등 각종 데이터를 불러 오려면,
method,headers 등등... fecth절을 일일이 작성을 해야하는 단점을 발견했다.
어떻게 하면 효율적으로 관리할지 찾아보다가 이전에 학습한 axios가 해답이었다.
Axios의 가장 큰 장점으로는 요청과 응답 데이터를 자동으로 JSON으로 변환해 주므로, 개발자가 수동으로 변환할 필요가 없다.
예시로 then절 생략 가능!! .then((res) => res.json()) 할 필요가 없다.
[데이터를 그대로 가져와서 객체 형식으로 담김]
1. .env 생성
# SecretKey
REACT_APP_KEY=asdfjp298pafo1320efqw0udvnh0er0h412r08byfdq9dsvh02143908hfeqwn80fdqs0nfdqs0n412013rq0nqefn08dfas0das730732g86923
REACT_APP_LOCAL_BACKEND=http://localhost:8080/api/v1
env 파일은 package.json의 위치와 동일하게(src 밖에) 생성하고 왼쪽에는 사용할 변수 , 오른 쪽은 서버쪽 URL을 작성한다.
보통 변수는 위와 같이 REACT_APP 이런 식으로 작성하는게 일반적이라고 한다.
2. api.js 생성
import axios from 'axios';
import decodeJwt from '../utils/tokenUtils';
const LOCAL_BACKEND = process.env.REACT_APP_LOCAL_BACKEND;
console.log('process.env.REACT_APP_BACKEND_PROXY',process.env.REACT_APP_BACKEND_PROXY);
const api = axios.create({
baseURL: 'http://localhost:8080/api/v1',
headers: {
'Content-Type': 'application/json',
Accept: '*/*',
authorization: `Bearer ${localStorage.getItem('accesstoken')}`,
},
});
axios.create를 이용하여 url과 headers 정보 , 권한에는 토큰을 담아주고, api라는 변수에 담는다.
!! 참고로 baseURL을 보안상의 이유로 LOCAL_BACKEND 변수에 담아서 보내줘야 하는데, 계속 찾을 수 없다는 에러가 발생하여 일단 문자열 형식으로 주소를 적어두었다. (나중에 다시 찾아볼 예정) !!
(원래는 암호화 필수!!)
3. <axios 변경, 서버에 요청 구문>
// 로그인 한 회원의 대한 정보를 불러오는 구문
export const callGetMemberAPI = ({memberId}) => {
return async (dispatch) => {
const result = await api.get(`/member/${memberId}`)
console.log('로그인한 회원 정보 resposne : ', result);
dispatch({type: GET_MEMBER, payload:result.data});
};
};
api라는 변수에 위의 정보가 담겨있고, getMapping 요청을 보낼거니 get 을 적어주고 (post면 post 등등...)
내부에는 'http://localhost:8080/api/v1', 이후에 들어갈 url을 입력해주면 끝!
토큰을 이용하여 서버에서 데이터를 필요로 한다면 2번과 같이 미리 담아둔 데이터 api에 . ~~~ 작성만 해주면 된다.
4. reducer 동작
import { createActions, handleActions } from 'redux-actions';
// 초기값 설정
const initialState = {
user: {
memberId: '',
memberRole: '',
email: ''
}
};
// 액션 정의
export const POST_REGISTER = 'member/POST_REGISTER';
export const POST_LOGIN = 'member/POST_LOGIN';
export const GET_MEMBER = 'member/GET_MEMBER';
const actions = createActions({
[POST_REGISTER]: () => { },
[POST_LOGIN]: () => { },
[GET_MEMBER]: () => { }
});
const memberReducer = handleActions({
[POST_REGISTER]: (state, { payload }) => {
},
[POST_LOGIN]: (state, { payload }) => (
{ token: payload.token }
),
[GET_MEMBER]: (state, { payload }) => (
{
...state,
user: {
memberId: payload.results.result.memberId,
memberRole: payload.results.result.memberRole,
email: payload.results.result.email
}
}
)
}, initialState);
export default memberReducer;
memberId, memberRole, email 등 key값을 찾아 . . . 으로 들어가 꺼내주기
<결과>
하 하 하...
axios를 사용하지 않았다면 일일이 fetch문을 작성해야 할텐데 완전 효율적이다~!
내일 팀원들에게 공유해줘야겠다.