본문 바로가기

WEB

(3)
Chrome 브라우저에서 Direct Sockets API 지원: 웹 앱과 네트워크 기기 간 직접 통신 가능해지다 크롬 브라우저가 Direct Sockets API를 새롭게 도입하며 웹 앱과 네트워크 기기 간 직접 통신이 가능해졌습니다. 이를 통해 TCP와 UDP를 사용하여 다양한 프로토콜을 사용하는 장비들과 직접 연결할 수 있습니다. 이번 포스트에서는 Direct Sockets API와 격리된 웹앱(Isolated Web Apps, IWA) 개념을 중심으로 이번 변화가 어떤 의미를 가지는지 살펴보겠습니다.Direct Sockets API란?기존 웹 기술인 XMLHttpRequest, WebSocket, WebRTC 등은 모두 보안과 관련된 여러 제약으로 인해 네트워크 기기나 특정 시스템과의 직접적인 TCP/UDP 통신을 지원하지 않았습니다. 이러한 제한으로 인해 많은 네트워크 기기들은 원활한 통신을 위해 별도의 서..
웹 렌더링의 모든 것: 클라이언트 사이드 vs 서버 사이드 vs 사전 렌더링 웹 개발을 하다 보면 클라이언트 사이드 렌더링, 서버 사이드 렌더링, 그리고 사전 렌더링이라는 용어를 자주 접하게 됩니다. 하지만 이들이 정확히 무엇을 의미하고, 어떤 상황에서 어떤 방식을 선택해야 하는지 혼란스러우실 수 있습니다. 이번 블로그에서는 이 세 가지 렌더링 방식의 특징과 동작 원리, 그리고 각각의 장점과 제한 사항에 대해 자세히 알아보겠습니다.클라이언트 사이드 렌더링 (CSR)특징 및 동작 방식클라이언트 사이드 렌더링은 말 그대로 클라이언트(브라우저)가 렌더링을 담당하는 방식입니다. 서버는 최소한의 HTML 파일과 필요한 JavaScript 파일을 클라이언트에게 전송하고, 브라우저는 이 JavaScript를 실행하여 동적으로 페이지를 구성합니다.예시: React로 개발된 싱글 페이지 애플리케..
프레임워크의 진화: Next.js로 알아보는 웹 개발의 미래 여러분은 React로 웹 애플리케이션을 개발하면서 복잡한 설정과 반복적인 작업에 지치신 적이 있으신가요? 그렇다면 React 기반의 웹 개발 프레임워크인 Next.js에 주목해 보세요. 오늘은 Next.js가 무엇인지, 어떤 배경에서 탄생했으며, 어떤 특징과 주요 기능을 가지고 있는지 살펴보겠습니다.Next.js란 무엇인가?Next.js는 Vercel에서 2016년에 처음 공개한 React 기반의 웹 개발 프레임워크입니다. React가 UI를 만들기 위한 라이브러리라면, Next.js는 웹 애플리케이션 개발에 필요한 전체적인 틀과 솔루션을 제공합니다. 이를 통해 개발자는 복잡한 설정 없이도 손쉽게 웹 애플리케이션을 구축할 수 있습니다.Next.js의 배경과 등장 이유React로 작성된 애플리케이션은 주로..