Eden의 새로운 한걸음

이번 포스팅에선 프론트엔드 개발자로 실무를 경험하면서 만났던 브라우저 캐시문제에 대해 이야기 해보려 한다. 현재 회사에서 교육플랫폼을 서비스하고있는데 중간에 교육생들의 출석을 관리할수 있는 기능이 필요하여 급하게 기능을 추가하였는데 반영이 안되는 문제가 발생하였다. 브라우저에서 코드가 바뀐것을 감지하지 못하고 캐싱된 파일을 불러와서 적용이 안되는 문제였다. 개발자 도구에서 강력한 새로고침을 하면 해당 문제는 해결이 되지만 모든 교육생에게 “강력한 새로고침 부탁드립니다.” 라고 할수도 없지않은가.. 그래서 근본적인 해결방법을 찾기로 했다. 코드로 해결할 수 있는 방법들 Html 에 아래와 같은 캐시컨트롤을 넣어준다. Cache-Control: no-cache, no-store, must-revalidate..

최근 회사에서 Props로 관리하던 코드를 react-query를 도입하면서 느꼈던 react-query의 장점과 간단한 사용법을 공유하기 위해 글을 작성하게 되었다. 왜 React-query를 도입하게 되었나? 서론에서 말했다시피 우리 회사에선 따로 상태 관리를 하지 않고 props를 이용하여 데이터를 관리하였다.(+약간의 contextAPI) 그러다 보니 여러 컴포넌트에서 prop drilling 이 발생하였고, 서비스가 커지면 커질수록 코드는 많아지고 유지보수는 더욱 힘들어졌다. 사실 contextAPI를 사용해도 되지만(이미 로그인 부분에서 사용하고 있다) contextAPI는 상위 컴포넌트의 데이터가 업데이트되면 하위 컨포넌트가 re-rendering 되어버려 렌더링 최적화에 좋지 않다. 다음으..

1. 챌린지 주제 이번 주제는 숏폼(15분미만)영상 서비스 플랫폼 제작이었다. 이전에 토이프로젝트로 sns를 만들어 보았지만 영상플랫폼을 만들어 보는건 처음이라 굉장히 설레였다 2. 챌린지 기간 3. 프로젝트 자신이 정한 목표 카테고리에 영상을 올리고 사람들과 공유함 7일 연속 영상을 업로드하면 뱃지(보상)를 받을 수 있고, 혼자 하는 것보다 사람들과 영상을 공유하면서 함께 의지를 다지기위한 목적을 가지고있다. 4. 기술스택 1. Next.js 2. Typescript 3. React-query 4. React-hook-form 5. Docker, Docker-compose 5. 주요로직 - Infinite Scroll 처음 무한 스크롤을 offset과 page를 사용하여 구현하였는데 스크롤을 할 때 영..