오늘은 브라우저가 어떻게 화면을 렌더링 하는지를 알아보고자 합니다. 아마 흔히 보셨을 내용이지만 기억해두기 위해 책과 여러 사이트를 참고하여 정리해보았습니다. (compositor thread까지 다루는 심화편이 있으니 같이 보시면 더 풍부한 이해를 하실 수 있습니다 🤓 ) 본격적인 내용으로 들어가기 전에 과정을 간단히 보여드리겠습니다. 브라우저의 렌더링은 아래와 같은 순서로 이루어집니다.서버에서 HTML 파일을 수신HTML 파싱DOM 트리 생성CSSOM 트리 생성자바스크립트 파싱 및 실행DOM과 CSSOM을 결합하여 렌더트리 생성레이아웃페인트1. 서버에서 HTML 파일을 수신우리가 www.example.com이라는 주소로 접근한다고 가정해봅시다. 이렇게 호스트명으로만 구성된 요청에 대해 서버는 암묵적..

브라우저의 렌더링 과정에서 빼놓을 수 없는 부분이 HTML 파싱입니다. 오늘은 HTML 파싱에 어떤 과정들이 필요한지 차근차근 알아보도록 하겠습니다. 설명에 앞서 이해를 도울 수 있는 그림을 준비했습니다. 사용자가 페이지에 접속했을 때 브라우저는 서버에 HTML 파일을 요청합니다. 이때 서버는 메모리에 바이트 단위로 저장된 HTML 파일을 응답하게 됩니다. 10110100... 같은 형태로 보내게 되는 것이죠. 브라우저의 HTML 파서는 이 바이트 형태의 문서를 문자열로 변환합니다. 이때 response header에 담긴 content-type을 참고합니다. 예를 들어 content-type: text/html; charset=utf-8라고 되어있다면 utf-8 방식으로 인코딩을 하는 것이죠. cont..

alt는 이미지가 제대로 렌더링되지 않았을 경우 혹은 스크린 리더를 사용하는 유저를 위해 필요한 속성입니다. 지금부터 alt text를 잘 작성하기 위한 원칙을 알아보겠습니다.alt text를 잘 작성하기 위한 원칙단순히 decoration용인 이미지에도 alt=""를 적어준다.꼭 유저가 알아야 할 필요가 없는 정보성이 아닌 이미지에도 alt를 적어줘야 한다고 합니다. alt가 없는 경우 스크린 리더가 정보를 읽을 때 종종 src를 alt 대신 읽기 때문입니다. 그렇게 되면 유저가 정보를 읽어나가는 데 필요없는 정보를 주게되어 불편하게 만들 수 있으니 꼭 적어줘야합니다. 🙂 짧게 묘사한다alt text는 아무리 길어도 100자 이하로 끝내야 한다고 합니다. 너무 길면 사용자 경험에 좋지 않을 수 있으니..

안녕하세요 오늘은 tailwind css를 사용할 때 classname을 정렬하는 방법에 대해 알아보겠습니다. yarn berry Pnp mode를 사용할 때 흔히 겪을 수 있는 문제점과 해결방안도 함께 소개해드리겠습니다!tailwind를 사용하다보면 개발자마다 className을 적는 순서가 달라질 수 있습니다.똑같은 코드를 누군가는 아래처럼 적기도 하고누군가는 아래처럼 적기도 합니다.이렇게 코드를 작성하다보면 코드의 일관성이 떨어지고 불필요한 변경점이 생길 수 있습니다. 저희가 코드 컨벤션을 잘 맞춰두어야 하는 이유이기도 하죠.저희 프로젝트에서는 이 부분을 방지하기 위해 두가지 방법을 두고 고민했습니다.1. IDE에서 제공하는 tailwind formatter 플러그인을 사용하는 것2. prettie..

지난 시간에는 공통 라이브러리의 문서화에 대해 다뤘습니다. 이번에는 공통 라이브러리를 배포해보고 install하는 방법까지 알아보도록 하겠습니다. 만약 저희 라이브러리가 public한 repository에 있었다면 간단한 명령어들로 배포가 가능했을 것입니다. 하지만 private한 repository에서 관리되고 있었기 때문에 몇단계를 더 거쳐야했습니다.github packages패키지 배포를 위해서는 패키지 레지스트리 서비스를 사용해야합니다. 우리가 흔히 알고 있는 npm 등이 있습니다. 이중 저희는 GitHub Packages를 이용하는 방식을 선택했습니다. GitHub Packages는 GitHub에서 제공하는 서비스로 private한 패키지를 무료로 배포할 수 있게 해주기 때문입니다. (npm은 ..

회사에서 코드 중복을 작성을 피하고 공통 이슈 대응을 용이하게 하기 위해 프론트엔드 공통 코드 라이브러리를 만들게 되었습니다. 가이드 문서를 만드는 과정과 검색기능을 제공하기 위해 algolia를 사용하며 겪은 시행착오를 기록하였습니다.Docusaurus저희는 토스 슬래시 라이브러리처럼 문서화를 하고 싶었고 github 저장소를 들여다본 결과 Docusaurus를 사용한다는 것을 알게되었습니다.문서 작성하기토스는 공통코드에 대한 설명을 코드가 작성된 폴더에서 markdown으로 함께 작성합니다. 저희도 개발 편의성과 이해도를 높이기 위해 같은 방식을 사용했습니다.Docusaurus 세팅 및 스크립트 추가저희는 모노레포를 사용하고 있으므로 프로젝트 내에 docusaraus라는 패키지를 추가해주었습니다. 공..