Projects

[재료 제로웨이스트] Refactoring : Context 활용하여 props drilling 정리

현 프로젝트에서 props drilling 가장 심한 곳은 Detail 컴포넌트입니다. 아래 이미지를 보면, 최상위 페이지 컴포넌트에서 최하위 SwiperRecipeItem 까지 보내는 데이터가 많습니다. 중간에 사용하지 않는 데이터들이 절반이 넘으므로 불필요한 props drilling이라 판단했고 이를 해결하기 위해 context 를 사용하기로 했습니다. 리액트 공식 문서를 보면 context 를 사용하게 되면 컴포넌트의 재사용성이 떨어지기 때문에 단순히 props drilling 을 피하기 위해서라면 컴포넌트 합성을 권고합니다. 하지만 저희 프로젝트의 경우 Detail 컴포넌트에 한해서만 context를 적용할 것이므로 재사용성이 떨어지지 않을 것이라 판단했습니다. Detail page 컴포넌트에..

[재료 제로웨이스트] axios interceptors 사용 이유

axios interceptors 사용 이유 1) base url 중복 방지 2) 요청마다 동일한 content-type , token 같은 헤더값 처리 3) 응답 리턴값 설정과 오류 발생에 대한 처리 export const instance = axios.create({ baseURL: process.env.REACT_APP_API, headers: { "Content-Type": "application/json", withCredentials: true, }, }); instance.interceptors.request.use( function (config) { const accessToken = getCookie("accessToken"); const refreshToken = getCookie("..

[재료 제로웨이스트] Refactoring : 소셜 로그인 중복 코드 제거

현재 진행하고 있는 프로젝트는 세 종류의 소셜 로그인이 가능합니다. 카카오, 네이버, 구글 로그인입니다. 각 로그인 기능을 위해 로그인 버튼과 리다이렉트 페이지로 보내는 컴포넌트 (3개) 가 있고 로그인 api 요청하고 사용자 정보를 쿠키에 저장하는 컴포넌트 (3개) 가 있습니다. 쿠키에 저장하는 부분을 util 함수로 따로 빼고 그 외 중복되는 부분들도 정리해서 2개의 컴포넌트로 정리했습니다. 중복 코드 제거 전 중복 코드 제거 후 중복 코드 제거하고 쿠키를 세팅해주는 부분을 따로 뺐더니 가독성도 좋아지고 코드도 깔끔해졌습니다! 로그인 api 를 보내는 것도 컴포넌트에서 분배하는 것이 아닌 request.js 에서 작업했습니다. 처음부터 깔끔하게 코드를 작성하면 좋지만, 프로젝트를 진행하다 보면 기능 ..