이번 포스팅에선 프론트엔드 개발자로 실무를 경험하면서 만났던 브라우저 캐시문제에 대해 이야기 해보려 한다. 현재 회사에서 교육플랫폼을 서비스하고있는데 중간에 교육생들의 출석을 관리할수 있는 기능이 필요하여 급하게 기능을 추가하였는데 반영이 안되는 문제가 발생하였다. 브라우저에서 코드가 바뀐것을 감지하지 못하고 캐싱된 파일을 불러와서 적용이 안되는 문제였다. 개발자 도구에서 강력한 새로고침을 하면 해당 문제는 해결이 되지만 모든 교육생에게 “강력한 새로고침 부탁드립니다.” 라고 할수도 없지않은가.. 그래서 근본적인 해결방법을 찾기로 했다. 코드로 해결할 수 있는 방법들 Html 에 아래와 같은 캐시컨트롤을 넣어준다. Cache-Control: no-cache, no-store, must-revalidate..
[React.js] React-query 도입이유 및 사용법
최근 회사에서 Props로 관리하던 코드를 react-query를 도입하면서 느꼈던 react-query의 장점과 간단한 사용법을 공유하기 위해 글을 작성하게 되었다. 왜 React-query를 도입하게 되었나? 서론에서 말했다시피 우리 회사에선 따로 상태 관리를 하지 않고 props를 이용하여 데이터를 관리하였다.(+약간의 contextAPI) 그러다 보니 여러 컴포넌트에서 prop drilling 이 발생하였고, 서비스가 커지면 커질수록 코드는 많아지고 유지보수는 더욱 힘들어졌다. 사실 contextAPI를 사용해도 되지만(이미 로그인 부분에서 사용하고 있다) contextAPI는 상위 컴포넌트의 데이터가 업데이트되면 하위 컨포넌트가 re-rendering 되어버려 렌더링 최적화에 좋지 않다. 다음으..
- Total
- Today
- Yesterday