07.29 캐싱 전략 및 라우팅.. 등 고민거리

천영석·2021년 7월 29일
1

우테코 미션 중 사용자는 항상 최신 버전을 볼 수 있어야 한다가 있었다. 도대체 무슨 말인지 알 수가 없었다. 최신 버전을 배포하면 당연히 사용자는 최신 버전을 보는 것이 아닌가?? 라는 생각이었다. 하지만 HTTP 캐시라는 존재를 잊고 있었다.

캐시는 효율성을 위해 html, css, js와 같은 정적 파일들을 미리 메모리에 저장해두고 저장된 파일이 있을 경우 해당 파일을 사용하는 것이다. 즉, 서버에 저장되어 있는 파일을 가져오는 것이 아니라 메모리에 저장되어 있는 파일을 가져온다는 것이 중요하다.

지금 A라는 사이트에 접속해있고, A라는 사이트의 html, css, js가 캐싱되었다고 생각해보자. 다음에 A라는 사이트에 접속했을 때, 해당 파일들이 메모리에 저장되어있기 때문에 바로 가져다가 쓸 것이다. 이때, 서버에는 최신 파일이 올라가 있어도 사용자는 이전 버전의 파일을 보고 있는 것이다. 이 경우 문제가 될 수 있다.

우리의 전략으로는(전략이라고 할 것도 없다.) html을 no-cache로 만들어두고, js 파일의 이름에 버전을 적어서 js파일을 변경하는 것이다. 이렇게 되면 최신 버전이 배포되었을 때 html을 서버에서 가져오고, js파일의 이름이 변경되었기 때문에 캐싱이 되어있지 않아서 js파일도 서버에서 가져오게 될 것이다. 이렇게 하면 아마 최신 상태를 볼 수 있을 것이다. Etag도 있다고 하는데, 이 부분은 공부를 조금 더 해보고 도전해보려고 한다.

라우팅에 대해서도 고민이 많다. 라우팅은 쉬운 것인줄 알았는데, 꽤나 신경써야 할 부분이 많다. 사용자를 생각하다보니 코드가 복잡해지고, 생각해야 할 부분이 정말 많다는 것을 느낀다.

지금 고민하고 있는 부분은 다음과 같다. A, B, C페이지가 있을 때, A -> B -> C까지 이동 후 C에서 어떤 작업을 완료하면 B로 이동한다. 즉, A -> B -> C -> B이다. 여기에서 뒤로가기를 누른다면 C로 갈 것이다. 하지만 C는 이미 사용자가 작업을 마친 페이지이기 때문에 보여줄 필요가 없다. 그래서 C -> B를 replace로 변경하면 A -> B -> B가 돼서 뒤로가기를 하면 B가 다시 나타나게 된다. 그래서 B -> C로 갈 때 replace를 하게 되면 A -> C가 돼서 C에서 뒤로가기를 하면 A가 된다. 딜레마에 빠졌다. 하나를 포기해야 하는 것일까?

이전에는 popstate 이벤트도 이용해보고, 페이지를 모달로 만들기도 해보고 했는데, 이제는 피하면 안될 것 같다. 라우팅 전략이 잘못된 것인지 아니면 다른 방법이 있는 것인지, 불필요한 페이지가 많은 것인지부터 생각을 해봐야 할 것 같다. 빠르게 기능을 구현하기 위해서 페이지를 많이 만들고, 컴포넌트도 재사용을 목적으로 두기 보다는 일단 분리하면서 만들고 있어서 발생한 것일 수도 있다.

마지막으로 생각했던 것 보다는 기능 구현도 잘 되고 있고, aws도 마무리했고, 캐싱 전략 및 테스트 환경 설정도 모두 끝내서 기분이 좋다. 하지만 페이지와 컴포넌트, 커스텀 훅, 리코일 상태 등 정말 이전 미션과는 비교할 수 없을 정도로 많아지고 있어서 흐름을 놓치면 안될 것 같다는 생각이 들고 있다. 이제는 기능을 구현하는 것보다 리팩토링과 테스트 코드를 통해 앱의 안정성과 확장성을 높이는 것에 집중할 때가 된 것 같다. 그리고 PWA도 도입해서 사용자들이 앱처럼 사용할 수 있도록 하는 것도 목표이다.

profile
느려도 꾸준히 발전하려고 노력하는 사람입니다.

0개의 댓글