inflearn logo
강의

Course

Instructor

Real-world web performance optimization for frontend developers (feat. React) - Part. 2

백엔드에서 캐싱 코드를 헤더에 넣었지만 불안정합니다.

Resolved

345

salus82

11 asked

1

강사님, 안녕하세요? 

현재 백엔드에 캐시 코드를 추가한 상황인데, 3개의 mp3 파일을 받을 때 다음과 같이 네트워크 탭에서 다양하게 기록됩니다.

백엔드에 캐시 코드를 적용했는데, Response Headers에 Cache-Control이 안나옵니다.

두가지가 궁금합니다.

1. 6번 반복적으로 로드하면서, 계속 URL 콜을 하는건지와

2. 3개의 mp3 파일을 받는데, 첫 파일은 282B->0B, 두번째 파일은 disk cache, 세번째 파일은 282B->282B로 6번 진행됩니다. 저는 백엔드의 캐싱이 제대로 적용이 안되었다고 판단되는데, 추가적으로 리액트 프론트엔드(캐시 관련 코드 없음)에 대한 작업이 필요한지 문의드립니다.

react devtools

Answer 4

0

salus82

네 강사님 알겠습니다. 감사합니다.

0

hackurity01

네 맞습니다.

cache-control 지시문이 있어야 캐시 설정이 되어 있다고 볼 수 있습니다.

0

salus82

네, 강사님 알겠습니다. 코드를 다시 살펴보겠습니다.

현재 크롬과 엣지 두 브라우저에서 확인하는데,  둘 다 Response Headers에 Cache-Control이 안나옵니다. (너무 기초 질문인데...) 백엔드 캐시 코드가 제대로 적용되면 Response Headers에 Cache-Control이 나오는 것이 맞는지, 문의드립니다.

0

hackurity01

안녕하세요 salus82님,

크롬 개발자 도구의 네트워크 탭에서 사이즈 표시 이슈에 대해 질문을 주셨는데요,

단순히 올려주신 이미지만 가지고는 정확한 원인을 알 수 없을 것 같습니다.

다만, 몇 가지 조사 및 테스트를 해본 결과, 프로토콜 버전의 문제일 수도 있겠다는 생각이 듭니다.
관련 해서는 아래 링크를 참조하면 좋을 것 같습니다.
(https://softwareengineering.stackexchange.com/questions/211745/why-do-some-websites-showing-0-bytes-in-chromes-developer-tools)

답변이 도움되었기를 바라며, 강의에 관심을 가져주셔서 감사합니다.

예제 프로젝트 관련 질문입니다.

0

73

1

개발환경에 대한 안내

1

162

2

layout shift가 아주 약간 일어나는 부분에 대해

0

312

2

3-4) 이미지 사이즈 최적화 과정에서 img 태그 작동 안되는 문제

0

299

2

Material--icons_4.0.0.woff2

0

211

1

코드 실행 시 에러 관련 질문드립니다!!

1

581

1

npm run serve가 동작하지 않아요

0

705

1

lighthouse 측정에 관해 질문드려요

2

1008

1

webp 확장자질문

1

424

1

이미지 지연 로딩 질문 있습니다!

2

448

1

폰트 포멧에 대한 질문입니다.

1

390

2

궁금한 점이 있어요

1

350

1

css font-face unicode-range

1

361

1

woff2 포멧 IE에서 사용가능 여부

1

422

2

3-3 이미지 지연 로딩 코드 어디서 보나요?

1

328

1

img 태그가 작동이 되지 않습니다.

1

407

1

질문있습니다~

2

223

1

이미지 오류 요청 오류

1

399

1

안녕하세요~ 질문드립니다

1

305

1

궁금한점이 있습니다.

1

228

1

강의자료

1

207

2

안녕하세요 리액트 최적화 관련하여 질문드립니다.

2

1462

1

선생님 질문이 하나 있는데요~~

1

378

2

정말유익해요

2

217

1