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번 작성한다. 솔직히 말하면, 개발과 관련된 글을 쓰는 것이 어렵게 느껴진다. ‘혹시라도 내가 쓴 글에 잘못된 내용이 있으면 어떡하지?‘라는 두려움때문에 더욱 …

🌈 1. 읽은 계기 우연히 본 유튜브를 통해 작가님을 알게 되었다. 말씀도 잘하시고 무엇보다 자수성가하여 지금의 자리까지 어떠한 가치관과 행동을 통해 세부적으로 말씀해주시는 부분이 인상깊었었다. 그러다가 우연히 작가님 책을 발견하게 되었고 작가님의 생각을 조금 더 깊게 알고 싶어 책을 구매하게 되었다. 💡 2. 인상깊은 내용 개인적으로 인상깊은 내용들이 많았다. 특히 무의식에 대해 많은 이야기를 해주셨는데, 곰곰히 생각해보면 나도 모르게 한 행동들이 무의식에 내재된 부분이 발현되어 나타난 행동임을 알게 되었다. 1장. 가난했지만 꿈을 잃지 않았던 이유 관념이 바뀌어야 내가 사는 세상이 변하게 된다. 무의식의 의도와 당신의 의도가 일치할 때, 무의식은 공명이 되어 현실에 드러난다. 마음이 나를 통해 세상 이미지로 드러나고 있다. 그게 우리 세상이다. 무의식에 있는 자신의 이미지를 바꿔라.(p.40-41) 가난한 현실 속에 머물러 있다면 그 이유는 하나다. 무의식이 가난으로 채색되었기…