visualViewportvisualViewport는 브라우저의 Visual Viewport API를 통해 제공되는 객체로, 사용자가 현재 보고 있는 웹 페이지의 뷰포트에 대한 정보를 제공합니다. 이 API는 특히 모바일 장치에서 유용하며, 사용자가 페이지를 확대하거나 축소할 때 뷰포트의 크기와 위치를 추적할 수 있습니다.visualViewport 객체는 다음과 같은 주요 속성을 제공합니다:width: 사용자가 보고 있는 뷰포트의 너비 (CSS 픽셀 단위)height: 사용자가 보고 있는 뷰포트의 높이 (CSS 픽셀 단위)offsetLeft: 뷰포트의 왼쪽 가장자리와 레이아웃 뷰포트의 왼쪽 가장자리 사이의 거리 (CSS 픽셀 단위)offsetTop: 뷰포트의 상단 가장자리와 레이아웃 뷰포트의 상단 가장자..

현대 웹 애플리케이션은 실시간 데이터 전송이 중요한 요소로 자리잡고 있습니다. 이 글에서는 두 가지 주요 기술, 웹소켓(WebSocket)과 서버 전송 이벤트(Server Sent Event, SSE)를 비교하고, 각각의 장단점을 살펴보겠습니다.웹소켓(WebSocket) 과 서버 전송 이벤트(Server Sent Event, SSE)?웹소켓은 HTML5 표준의 일부로, 클라이언트와 서버 간의 양방향 통신을 가능하게 합니다. 초기 HTTP 핸드셰이크 후, 지속적인 연결을 유지하며 데이터를 주고받을 수 있습니다. SSE는 서버에서 클라이언트로 일방향으로 데이터를 전송하는 기술입니다. 클라이언트는 HTTP 연결을 통해 서버로부터 지속적으로 데이터를 받을 수 있습니다. 자세한 인터페이스는 MDN 문서를 참조할..

안녕하세요. 프론트엔드 개발 관련 포스팅 입니다.온라인으로 무언가를 신청할 때, 신청서를 작성하게 됩니다.개발하면서 신청서 양식을 만드는 것은 아마 많은 분들이 경험해보셨을 것 같습니다. 이번에는 신청 폼을 만들면서 고려해야할 사항들에는 어떤 것들이 있을지 알아보겠습니다.기왕 만드는거 처음부터 리스크를 고려하면 좋으니까요 Form 데이터 관리Form 데이터를 가져오고 손쉽게 업데이트하기 위해서는 객체("{}") 형태로 관리할 필요가 있습니다.그러나 객체의 경우 순서가 보장되지 않기 때문에 객체 Key 값들의 순서를 배열("[]") 형태로 가지고 있어야합니다. 예를 들어 Profile 정보를 입력하는 폼을 만든다고 가정해보겠습니다.const profile = { lastName: '', firs..