jfmam 개발 블로그

HTTP 메시지란? HTTP 어플리케이션간 주고받은 데이터 블록들이다. 데이터 블록은 메시지의 내용(바디)과 의미를 설명하는 텍스트 메타정보(헤더)로 이루어져있다 용어정리 인바운드: 메시지가 클라이언트에서 서버 방향으로 이동하는 것 아웃바운드: 메시지가 서버에서 클라이언트로 이동하는 것 다운스트림: 현재 위치의 서버를 기준으로 데이터를 송신 또는 내보내는 흐름 업스트림: 현재 위치의 서버를 기준으로 데이터를 수신 또는 받아들이는 흐름 ex) 현재 서버가 클라이언트로 부터 데이터를 받으면 클라이언트에서 부터 메시지가 온 흐름은 업스트림이 된다. 현재 서버가 클라이언트로 데이터를 response 하게되면 그 흐름이 다운스트림이 된다. 모든 흐름은 다운스트림이 된다. 메소드 종류 HEAD 문서에 대한 헤더만 ..

인터넷의 리소스를 가르키는 표준 이름 웹에서 식별할 수 있는 모든 자원을 가르킨다 (Content-Type) 스킴: 어떻게 리소스에 접근하는가? → 프로토콜 호스팅: 어디에 위치해있는가? → 도메인 주소 리소스 경로: 서버에서 무엇을 불러오는가? 💡 브라우저에 필요한 모든 정보를 url을 통해 접근하여 요청한다. URL 문법 스킴, 호스팅, 리소스 이외의 문법에 대해 알아보자 ://사용자이름: 비밀번호 @ 호스팅: 포트번호 / 리소스 주소;파라미터 ?쿼리 # 프레그먼트 사용자이름 : 리소스 접근을 위한 사용자 이름 패스워드: 접근하려는 사용자의 비밀번호 포트: 리소스를 호스팅 하는 서버거 열어놓은 포트번호 파라미터: (;) 를 이용하여 파라미터를 기술한다. 호스트와 경로정보만으로 부족할 때 쿼리: 리소스..

http란? 💡 신뢰성 있는 데이터 전송 프로토콜로 전송 중 손상되거나 꼬이지 않음을 보장한다 웹 클라이언트와 서버 웹 서버란? 인터넷의 데이터를 저장하고 http 클라이언트가 요청한 데이터를 제공한다. 도메인에 접근해 http요청을 인터넷 도메인 주소로 서버에 요청한다 해당 리소스를 찾고 성공했다면 해당 리소스를 클라이언트에 반환한다. 그냥 간단히 말해서 http프로토콜을 사용하는 인터넷 주소에 접근하면 request response 하는거다. 리소스 웹서버에서 관리하는 콘텐츠 정적콘텐츠, 동적콘텐츠로 분리된다. 파일시스템에 저장되는 파일은 정적 콘텐츠로 분리된다 특정 정보에 따라 변할 수 있는 콘텐츠는 동적콘텐츠로 분린된다 콘텐츠의 종류는 한가지로 정의할 수 없다. 즉 어떤 종류의 콘텐츠도 리소스가 ..

덩어리 콘텐츠 빨리그리기 (LCP 최적화) 뷰포트(above page)의 컨텐츠 중 가장 큰 영역을 차지하는 이미지나 텍스트 사용자 중심의 페이지로드 속도를 판단하는 지표로 사용 그렇다면 어떻게 해야 빠르게 파싱하여 LCP를 줄일 수 있을까? css 최적화 이미지최적화 LCP 문제해결 방법 라이브러리 의존 줄이기 → 렌더 차단리소스 줄이기 youmightnotneed (https://youmightnotneed.com/date-fns ) 해당사이트를 방문하면 사용하지 않는 라이브러리를 제거해서 사용하는법을 알려준다. 웹폰트 preconnect, css preload preconnect: 미리 연결해서 준비를 해놓고 필요한 내용을 나중에 사용할 수 있게한다. DNS, TCP, TLS 왕복에 필요한 시간을 ..

개요 LCP와 CLS에 용어에 대해 이해하고 브라우저 렌더링을 최적화 시키는 방법에 대해 알아보자 CLS란? 사용자 경험을 측정하는 대표지표로 개발자 도구(lighthouse)를 통해 검사 할 수 있다. cumulative layout shift라는 의미로 페이지거 랜더링 되고 나서 새로운 DOM이 추가 되는 등에 의한 요인으로 페이지 콘텐츠가 흔들리는 경우 발생하게 된다. 이러한 문제는 사용자가 예를 들어 버튼을 누르려다가 밀리면서 다른 버튼을 누르게 되는 등 사용자 경험을 떨어뜨리기 때문에 CLS를 방지하는 것은 중요하다. CLS 발생 요인 DOM이 추가 되는 경우: DOM이 추가 되면서 사용자가 다른 버튼을 누르게 되는 경우 FOUT, FOIT: 스타일 되지 않는 폰트가 나오다가 스타일이 뒤늦게 일..

핵심 사용하지 않는 css를 제거하고 css가 렌더링을 차단하지 않게 설정한다 사용하지 않는 css 제거하는 방법 구글 light house 활용하기 문제 Remove unused css 이슈 발생 해결방법 vertical dots에서 coverage tab을통해 unused css를 찾을 수 있다. purgecss를 통해 빌드 시 사용하지 않는 클래스들을 삭제한다. 추후에 자세한 사용방법에 대해 알아봐야겠다 렌더 블록킹 리소스 제거 defer html parsing 중단없이 빠르게 진행하며 script 다운로드를 동시에 실행한다 HTML parsing이 중단없이 진행되기 때문에 화면에 나타나는 것이 빠르다 script 실행은 parsing이 끝난 후에 실행된다. async 다운로드가 끝나면 스크립트를 ..

크로스 브라우징이란? 다양한 브라우저에서 UI가 깨지지 않고 나오게 한다. 브라우저마다 제공하는 기능에 차이가 생기는 경우 기능이 제대로 동작하지 못하는 경우가 발생 할 수 있다 프로젝트를 진행하면서 safari, firefox, chrome, samsung internet, edge 에서 정상적으로 작동하는 웹을 만들고자 사용한 방법들에 대해 정리한다. 크로스 브라우징 적용방법 caniuse에서 지원하는 기능인지 검색하기 css초기화를 통해 모두 같은 UI를 보여줄 수 있게 한다.caniuse 검색하기프로젝트 코드 작성 시 브라우저 환경에 따라 제공하는지 안하는지 알려주는 사이트이다. 링크: https://caniuse.com/css 초기화 하기대부분의 초기화 css 코드는 쓸모없거나 덮여 쓰여지기 때..

이미지 마크업 최적화 브라우저에서 이미지를 불러와 다운로드하게 될 때 용량이 작을수록 최적화를 할 수 있다. 최적화 하는 방법에 대해 알아보자 정적이미지 최적화 히어로이미지 같은 정적이미지의 경우 확장자를 webp로 사용하여 저장하거나 Tinypng 사이트를 이용하여 용량을 줄인적 있다. webp 변환 TinyPng 사이트 이용하기Webp 확장자 사용하기webp확장자를 사용할 경우 png나 jpg 확장자 보다 일반적으로 50%의 용량을 줄일 수 있게된다. 현재 거의 모든 브라우저에서 지원함으로 사용할 수 있다. 현재 ie를 제외한 모든 브라우저에서 지원함으로 webp를 사용하자 sharp 라이브러리를 사용하여 확장자를 webp로 변경 할 수 있다. 링크: https://www.npmjs.com/packa..