본문 바로가기

전체 글47

HTTP/1.0 vs HTTP/1.1 vs HTTP/2.0 vs HTTP/3.0 HTTP/1.0HTTP/1.0은 요청 컨텐츠 마다 3 - 웨이 핸드쉐이크를 계속해서 열어야 함서버에 부담이 많이가고, 응답시간이 길어진다는 단점이러한 문제를 해결하기 위해 이미지 스플리팅, 코드 압축, base64 인코딩이 있음  HTTP/1.1HTTP 1.0에서 발전한 것이 HTTP/1.1이다. 매번 TCP 연결을 하는 것이 아니라 한 번 TCP 초기화 이후에 keep-alive라는 옵션으로 여러개의 파일을 송수신 할 수 있음한 개의 TCP 세션을 통해 여러개의 컨텐츠 요청이 가능하나의 커넥션에서 응답을 기다리지 않고 순차적으로 여러 요청을 연속적으로 보냄 HOL Blocking 단점이 있음, TCP는 신뢰성을 보장하는 프로토콜이기 때문에, 패킷은 무조건 정확한 순서대로 처리되어야 함, 그래서 앞선 요.. 2025. 2. 27.
이미지 스프라이트로 로딩 시간 단축하기 안녕하세요! withMe 서비스의 프론트엔드는 NEXT.JS 프레임워크를 사용하여 웹 페이지를 개발하고 있습니다. 이번에는 이미지 스프라이트로 이미지 최적화 했던 경험을 공유하고자 합니다. 많은 관심과 피드백 부탁드립니다. 🙏    서론 웹 페이지 개발을 하다 보면 로고나 아이콘, 버튼 등에서 이미지 파일을 활용하셨을 겁니다. 작은 이미지를 여러개 보내면 아무래도 네트워크 요청이 많아져 로딩 속도가 느려질 수 있겠죠? 이러한 문제는 이미지 스프라이트 기법으로 해결할 수 있습니다. 이미지 스프라이트란 여러 개의 이미지를 하나의 큰 이미지로 합친 후, CSS background-position 속성을 이용하여 원하는 부분만을 화면에 표시하는 기법입니다. 즉 이미지 파일을 여러 개 호출하지 않고 하나의 이미.. 2025. 2. 27.
NEXT/IMAGE를 활용한 웹 성능 최적화 안녕하세요! withMe 서비스의 프론트엔드는 NEXT.JS 프레임워크를 사용하여 웹 페이지를 개발하고 있습니다.  이번에는 Next/Image를 활용한 이미지 관련 웹 성능 최적화 경험을 공유하고자 합니다. CLS, LazyLoading, 이미지 프로세싱 순으로 다룰 예정입니다. 많은 관심과 피드백 부탁드립니다. 🙏    서론 CLS(Cumulative Layout Shift)란? 사용자가 예상하지 못한 레이아웃 이동이 발생한 정도를 측정한 값입니다.  위 예시를 보게 되면 사용자가 버튼을 클릭하려고 한다고 가정해 봅시다. 클릭하려는 순간 이미지가 추가로 렌더링이 이루어지고 기존 클릭버튼 자리를 이미지가 대체하고 있습니다. 결과적으로 사용자는 버튼이 아닌 이미지를 클릭하고 있네요 위 예시는 단순히 버.. 2025. 2. 27.
CDN으로 NEXT.JS 성능 개선 안녕하세요! withMe 서비스의 프론트엔드는 NEXT.JS 프레임워크를 사용하여 웹 페이지를 개발하고 있습니다. 대규모 트래픽을 처리하거나 성능 개선에 도움이 될 수 있는 주제를 공유하려고 합니다.많은 관심과 피드백 부탁드립니다. 🙏    서론NEXT.JS의 단점 NEXT.JS는 강력한 웹 프레임 워크 중 하나일 만큼 많은 장점들이 있습니다. 크게는 SSR,  이미지, 폰트 최적화, 캐싱 등 다양한 기능을 제공합니다. 하지만, 이러한 모든 일을 NEXT 서버가 혼자 처리한다면 어떨까요?  서버의 부담이 커지면서 성능 저하나 서버 장애로 이어질 수 있습니다. 특히 많은 사용자가 동시에 접속하는 환경에서는 높은 트래픽을 처리할 때 서버 자원이 과도하게 소모될 수 있습니다.   저는 이러한 문제를 해결하기.. 2025. 2. 27.
setInterval로 DB 갱신 여부, WebSocket으로 개선하기 안녕하세요! JSP를 활용한 웹 기반 키오스크 개발 과정에서 겪은 개선사항을 공유하려고 합니다.  많은 관심 부탁드립니다. 🙏     서론고속도로 휴게소 식당에서 식사해 보신 적이 있나요?   손님이 키오스크로 주문하면, 주방에서 주문 목록을 확인하고 조리한 후, 손님은 조리 완료된 음식의 번호를 확인하고 직접 가져갑니다. 아래 이미지를 통해 프로세스를 확인해볼까요?  손님이 번호표를 받고 음식을 픽업하는 과정에서, 주문한 정보가 실시간으로 주방에 전달되어야 합니다.이 과정에서 발생한 문제를 해결한 경험을 공유해보려 합니다.    문제 발생 기존에는 손님이 주문하면 해당 내용이 DB에 저장되고, 주방 페이지에서 이를 실시간으로 갱신하기 위해 setInterval을 사용하여 주기적으로 새로고침하는 방식으.. 2025. 2. 25.
Suspense를 이용한 Dynamic Import 안녕하세요!해당 프로젝트에서 Vite를 사용하였는데요. 간단하게 코드 스플리팅을 활용하여 성능 최적화를 진행해보았습니다 . 서론자바스크립트로 웹 개발을 하신 분이라면 여러개 JavaScript 파일을 만들고 개발하신 경험이 있으실텐데요. 만약 이렇게 여러 개의 자바스크립트 파일을 보내게 되면 비효율적일 수 있습니다. 이런 이유로 자바스크립트 프로젝트에서는 모든 코드를 하나의 번들로 묶어서 만듭니다. 물론 작은 프로젝트는 번들 크기가 작지만, 큰 프로젝트의 경우 번들 크기가 커지게 됩니다. 리액트처럼 SPA는 첫 로딩 시 많은 작업이 필요합니다. 이때 큰 파일이 로드되면 성능에 문제가 발생할 수 있습니다. 그래서 점진적 렌더링이 필요합니다. 즉, 필요한 부분을 우선순위에 따라 로딩하여 최대한 UX.. 2025. 2. 25.

티스토리툴바