2023-11-13 본 캠프 28일차 / 47일차 TIL

2023-11-13 본 캠프 27일차 / 46일차 TIL

주요 진행사항

- 알고리즘 문제풀이

- 리액트 숙련과정 개인과제 완료

 

리액트 숙련과정 개인과제 완료

DEMO : https://react-baseballteampage.vercel.app/

프로야구 Talk

 

- 디테일 페이지 UI 제작 및 라우터로 전환 기능 추가

- 디테일 페이지 수정, 삭제 기능 추가

- localStorage 연동

- 리펙토링 (Context, Redux)

 

캐시 문제 발생

개인과제 완료 후 vercel로 배포를 진행하는 과정에서, 로컬에서는 잘 나오던 이미지가 나오지 않는 문제를 겪었다.

이미지는 외부 url로 가져오고 있었는데 문제는 다른 브라우저(Edge)나 다른 분들은 이미지가 잘 출력되었다.

 

관련하여 튜터님께 질문을 하였고, 같이 고민을 하던중 Cache 삭제를 진행하였다.

Cache  삭제를 진행하였더니 놀랍게도 나오지 않던 이미지가 잘 출력되었다.

 

따라서 관련한 내용을 정리하고자 한다.

 

브라우저  Cache 란? 

숨기다 라는 의미를 가진 단어로, 웹사이트, 웹 서버, 브라우저 및 응용 프로그램의 로드를 지원하기 위해 임시 파일을 축적하는 지정된 임시 저장 영역

 

브라우저는 우리가 사용하는 웹사이트의 정보를 캐시, 쿠키 형태로 저장하며, 다음 방문 시 더 빠르게 웹사이트를 로딩할 수 있도록 도와준다.

 

여기서 문제가 될 수 있는 것은 데이터가 쌓이게 되는 것이다.

한정된 공간에 캐시 데이터가 누적되면 결국 더이상 쌓일 수 없는 수준에 도달한다.

 

이때부터 이미지 로드, 로딩 속도 등의 문제가 발생된다.

 

따라서 꾸준한 캐시, 쿠키 데이터 등이 필요하다.