반응형 개발/브라우저와 네트워크24 브라우저에 url 치고 엔터누르면 메모용 --- 지금까지 웹 브라우저에서 URL을 입력했을 때, 일어나는 일들을 간단하게 살펴보았습니다. 웹 브라우저에 URL을 입력하고 Enter 키를 누릅니다. 웹 브라우저가 도메인의 IP 주소를 조회합니다. (먼저 캐시를 찾고, 그다음 DNS를 검색합니다.) 웹 브라우저가 찾은 IP 주소를 기반으로 서버와의 TCP 연결을 시작합니다. 웹 브라우저가 HTTP 요청을 서버로 전송합니다. (필요한 경우, HTTPS 보안 통신이 진행됩니다.) 웹 서버가 요청을 처리하고 응답을 다시 웹 브라우저로 전송합니다. 웹 브라우저가 전송 받은 콘텐츠를 렌더링합니다. 2024. 1. 10. 내가 보려고 적어두는 크로스브라우징 내가 보려고 적어두는 크로스브라우징 내가 보려고 적어두는 크로스브라우징이다. input,textarea의 width width가 font-size에 비례하여 넓어지는데, 넓어지는 비율이 크롬과 사파리가 상이하다. 예를들어 font-size:12px일때 input의 width는 크롬에서 135px, 사파리에서 153px이다. reset.css에서 해결할 수 없는 것 같다. 내가 생각한 해결책은 input,textarea에 width를 명시해주기 IOS 계열과 안드로이드 계열의 font color 기본값 IOS는 blue, 안드로이드는 black이다. 해결책 : reset.css에 color 설정하기 잊지말자 사파리에서 복사기능 구현할때 주의할점 아래와 같이 하면 사파리에서 catch가 실행된다. const.. 2023. 12. 23. 캐시 ㅎㅎ 이 글 읽고 복습겸 씁니다. 캐시 캐시는 웹사이트 로딩시간을 줄이는데 사용된다. 어떤 데이터를 서버에서 받아온 후, 서버보다 가까운 곳에 저장하여 필요할때마다 더 빠르게 불러오는 프로세스이다. 캐시를 무분별하게 사용하면 stale한 데이터(최신화가 필요한 과거 데이터)를 노출하게 되므로 적절히 사용해야 한다. 브라우저 캐시의 Cache-Control 브라우저 캐시는 브라우저나 HTTP 요청을 하는 클라이언트에 의해 이루어지는 캐시이며 HTTP캐시라고도 하는데, 단일 유저를 대상으로 하는 Private Cache이다. 클라이언트에서 데이터를 받아오는 가장 빠른 방법은 서버에서 받아오지 않는 것이다. 그럼 최신화되지 않은 데이터를 굳이 서버에서 받아오지 않고 캐싱해서 쓰는 것이 현명한 방법이다. 이런 관점에.. 2023. 11. 30. 컴포넌트 사전로딩을 통한 렌더링 최적화 https://link.coupang.com/a/9xSf2 이 책을 보고 알게 된 내용이다. 프론트엔드 성능 최적화 가이드:웹 개발 스킬을 한 단계 높여 주는 COUPANG www.coupang.com 컴포넌트 사전로딩을 통한 렌더링 최적화 모달은 유저가 처음 보는 view port에 필요 없는 컴포넌트다. 초기 렌더링 소스에서 모달 컴포넌트를 제외하여 브라우저의 렌더링 성능을 최적화해보자. 1. 모달을 지연로딩한다. suspense와 lazy를 이용한다. const LazyImageModal = lazy(() => import("./components/ImageModal")); function App() { const [showModal, setShowModal] = useState(false); re.. 2023. 9. 12. 이전 1 2 3 4 ··· 6 다음 반응형
