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..

직장에서 디자인을 위해 아코디언 UI 를 구현해야하는 상황이었습니다.구현과정에서 알게된 점들을 적어봅니다.1. height 속성에 Transition 효과 적용하기CSS height 속성은 % 와 같은 상대값이 아닌 px 과 같은 절대값을 부여해야 트랜지션 효과가 적용됩니다.문제는 클라이언트의 디바이스, 폰트 등의 요소에 따라서 height 값이 달라질 수 있기때문에 px 값을 미리 정의해두는 것은 불가능합니다.때문에, max-height 값에다가 트랜지션 효과를 부여하는 대안이 있었습니다.// openmax-height: 100vh (혹은 엄청나게 큰 절대 값, 999px)// cloasemax-height: 0그러나 열리는 모션과 닫히는 모션이 동시에 실행되는 경우, 타이밍이 맞지 않는 문제가 있었습..

오늘은 다음과 같은 text input 컴포넌트를 만들어보고자 합니다. 텍스트 입력 시, 줄바꿈이 자동으로 되는 컴포넌트를 만들어보겠습니다. 어떤 태그를 써야할까?일반적으로 를 사용하지만, 줄바꿈 기능을 지원하지 않습니다. 때문에 태그를 사용합니다. 문제점textarea tag 를 사용하게 되면, 기본적으로 줄바꿈을 해줍니다. 그러나, 자신의 height 이상으로 글 길이가 늘어나면 스크롤이 생기게 됩니다. height 이상으로 영역이 늘어나지 않습니다.해결방법텍스트 입력시 줄바꿈이 생길 경우, textarea 영역의 height를 자동으로 늘려주는 JavaScript 코드를 넣어줍니다.원리는 이렇습니다.textarea 영역의 height 을 1px로 줄여버립니다. 그러면 내부에 있는 글자 영역이 모..

이전 글에서 설명한 개념이 필요합니다. 이전글을 읽지 않았다면 먼저 읽고 오시기를 추천합니다. 2024.02.04 - [프론트엔드] - Sentry 를 알아보자 - (1) Trace, Transaction, Span 이란? 2024.02.05 - [프론트엔드] - Sentry 를 알아보자 - (2) Transaction, Span 직접 생성해보기 오늘은 Transaction, Span 의 개념을 바탕으로 Sentry가 어떻게 성능을 측정하는지 알아보겠습니다. 일반적으로 FE 에서 사용하는 Sentry는 Browser Integration을 사용하며, pageload 단위로 성능 데이터가 수집됩니다. 즉, Pageload 단위로 트랜잭션이 수집됩니다. Pageload 시에 발생하는 하위 이벤트들을 트랜잭션..

* 이전 글을 먼저 읽고 와주세요 2024.02.04 - [프론트엔드] - Sentry 를 알아보자 - (1) Trace, Transaction, Span 이란? 이번 시간에는 Sentry 가 어떠한 단위로 트랜잭션과 스팬을 생성하는지 실습을 통해 알아보도록 하겠습니다. 직접 트랜잭션과 스팬을 생성해보도록 하겠습니다. 트랜잭션 ( Transaction ) 생성해보기 다음과 같이 버튼을 클릭하면 트랜잭션을 생성하고, 2초 뒤에 트랜잭션을 종료하는 코드를 짜보았습니다. 브라우저 코드 ( VueJS 사용 ) 동작 영상 첨부 init 설정을 해두었던 Sentry 객체에서 "startTransaction" 메서드를 통해 트랜잭션을 생성할 수 있습니다. 트랜잭션 역시 스팬의 한 종류이기 때문에, SPAN에 포함되는..

Sentry Docs - Distributed Tracing 을 요약한 내용입니다. Trace 란? Trace 는 추적한다는 의미를 갖고 있는데요, 무엇을 추적한다는 의미일까요? 애플리케이션은 여러가지 서비스로 구성됩니다. 네트워크를 단위로 분리해보면 다음과 같은 서비스들이 있습니다. Frontend (Single-Page Application) Backend (REST API) Task Queue Database Server Cron Job Scheduler 이 서비스들은 다른 언어로 다른 플랫폼들에서 운영됩니다. Sentry SDK를 설치하더라도 개별적으로 운영되기 때문에 전반적인 흐름을 알기에는 어려움이 있습니다. Tracing은 이러한 데이터들을 모아서 전체 흐름을 추적한다는 의미입니다. 만약, ..

안녕하세요 오늘은 모노레포의 기본적인 개념과 자바스크립트 패키지 매니저의 종류에 대해 알아보겠습니다. 모노레포 ( Mono Repository ) 란? 다수의 프로젝트가 하나의 레포지토리에 저장되는 전략을 의미합니다. 이는 코드, 의존성 및 빌드 프로세스를 중앙 집중화하여 개발 생산성과 협업을 증가시키는 목적으로 사용됩니다. 기존에는 모든 프로젝트들이 분리되어 있지 않고 하나의 저장소에 다 들어가있는 Monolith 방식이 사용됐습니다. 그러나 점점 서비스 복잡도가 증가하면서 각각의 서비스 단위로 프로젝트를 생성하는 Multi(Poly) - Repo 방식으로 변화해왔습니다. 최근에는 다수의 프로젝트를 하나의 레포지토리에 모아서 의존성을 공유하는 Mono Repo 전략이 사용되는 경우를 종종 볼 수 있습니..

취준을 마치고 바로 후기를 작성할까 했지만, 미루다가 결국 잊혀졌다.취직한지도 2년이 다 되어가지만, 취업 준비를 하시는 분들께 도움이 되고자 늦게나마 취업준비 후기를 작성해볼까 한다.네이버 부스트캠프 과정이전 글 (https://codeboyed.tistory.com/31) 에서 이야기했지만, 나는 비전공자였고 네이버 부스트캠프로 개발자 취업준비를 시작했다.부스트캠프를 시작하기 직전까지 나의 코딩 경험은 다음과 같았다.교양으로 들었던 Python 기초대학교에서 수강했던 CS 과목들 ( 객체지향프로그래밍, 자료구조, 데이터베이시스 )방학 때 국가기관으로부터 배웠던 Python 데이터 분석위 경험들 덕분에 부스트캠프 입학시험에 합격할 수 있었다. 다만, 웹개발(JavaScript)은 처음이었기 때문에 부스..