1. 들어가며 사용자 경험(UX)에서 실시간성은 이제 필수적인 요구사항입니다. 특히 대기룸과 같은 기능은 즉각적인 피드백과 안정적인 통신이 필수적입니다. 이번 글에서는 대규모 트래픽을 처리할 수 있는 WebSocket 기반 대기룸을 프론트엔드 관점에서 설계하고 구현한 경험을 공유합니다. 또한 개발 과정에서 직면한 메모리 릭 발생 위험과 이를 해결하기 위한 접근 방법도 포함합니다. 2. WebSocket이 필요한 이유 기존의 HTTP 폴링 방식은 실시간 상태를 확인하기 위해 정기적으로 요청을 보내는 방식입니다. 그러나 이는 다음과 같은 문제가 있습니다 네트워크 과부하: 요청-응답 간의 불필요한 데이터 전송 응답 지연: 실시간성을 요구하는 시스템에서 한계 이에 비해 WebSocket은 지속적인 양방향 연결을 제공하며, 클라이언트와 서버 간의 실시간 데이터 전송이 가능합니다. 대기 상태를 실시간으로 사용자에게 전달하는 대기룸의 특성상 WebSocket이 적합하다고 판단했습니다. 3. 프…

1. FOUC(Flash of Unstyled Content)란? FOUC란 의 약자로, 페이지가 로드될 때 스타일이 적용되지 않은 상태의 콘텐츠가 잠깐 깜빡이는 현상을 뜻합니다. 주로 서버 사이드 렌더링(SSR) 환경에서 발생하며, HTML이 먼저 렌더링되고 이후에 CSS가 로드되기 때문에 발생합니다. 예시: 로딩 애니메이션이 있는 페이지가 있을 때, FOUC가 발생하면 스타일이 적용되지 않은 HTML이 잠깐 노출될 수 있습니다. 이는 사용자 경험에 좋지 않은 영향을 줄 수 있어, 초기 스타일을 잘 적용해 깜빡임을 최소화하는 것이 중요합니다. 2. Emotion 사용 시 FOUC 발생 원인 Emotion과 같은 CSS-in-JS 라이브러리는 SSR 환경에서 자주 FOUC 문제를 일으킵니다. SSR에서는 서버가 HTML을 먼저 렌더링한 후, 클라이언트에서 JavaScript로 CSS를 동적으로 로드합니다. 이 때문에 초기 렌더링 시 클라이언트와 서버 간의 스타일 불일치가 발생하여 …

브라우저 렌더링 과정 브라우저 렌더링 과정은 웹페이지를 표시하는 데 필요한 리소스를 다운로드하고 화면에 표시하는 과정을 크게 4단계로 나눌 수 있습니다. DOM + CSSOM 생성 DOM (Document Object Model): HTML 파일을 분석하여 브라우저가 이해할 수 있는 DOM 트리를 만듭니다. 각 HTML 요소가 노드로 변환되어 트리 구조를 형성합니다. CSSOM (CSS Object Model): CSS 파일을 분석하여 CSSOM 트리를 생성합니다. 이 트리는 CSS 규칙을 이해하고 각 DOM 요소에 스타일을 적용할 수 있도록 도와줍니다. Layout DOM과 CSSOM 트리를 조합하여 렌더 트리를 생성합니다. 각 요소의 위치와 크기를 계산하고 화면에 요소들을 배치합니다. 이 과정을 통해 브라우저는 각 요소가 화면에서 어디에 위치할지 결정합니다. Paint 레이아웃 과정에서 배치된 요소에 색을 칠하고, 그림자나 테두리 같은 시각적 스타일을 적용합니다. 이 단계에서 …

글또 10기를 시작하면서 매번 바쁘다는 핑계로 지난 기수에서는 글또 활동을 충분히 하지 못했다. 이번 기수는 마지막이라는 생각에, 그동안 아쉬웠던 부분을 채우고, 적극적으로 참여하고자 한다. 특히 이번 글또를 통해 글쓰는 즐거움을 찾고 싶다. 글을 자연스럽게 표현하는 것이 개발뿐만 아니라 삶에도 큰 도움이 될 것이라고 믿기 때문이다. 글또 10기가 끝났을 때 나의 모습 1. 글쓰기 매력을 느낀다. 개인적으로 좋아하는 개발자 분들이 글쓰기의 중요성을 강조하는 것을 보고, 나 역시 공감했다. 단순한 의무감이 아니라 글쓰기의 매력을 발견하고, 이를 통해 개발뿐만 아니라 삶 전반에도 긍정적인 변화를 줄 수 있다고 생각한다. 그리고 언젠가는 많은 사람들에게 좋은 영향을 주는 글을 써보고 싶다. 2. 개발관련 글쓰기를 2주안에 최소 1번 작성한다. 솔직히 말하면, 개발과 관련된 글을 쓰는 것이 어렵게 느껴진다. ‘혹시라도 내가 쓴 글에 잘못된 내용이 있으면 어떡하지?‘라는 두려움때문에 더욱 …