{"id":39249068,"url":"https://github.com/umsungjun/algorithm-cs","last_synced_at":"2026-01-18T00:01:28.396Z","repository":{"id":173905478,"uuid":"651126496","full_name":"umsungjun/Algorithm-CS","owner":"umsungjun","description":"알고리즘과 CS지식을 공부합니다.","archived":false,"fork":false,"pushed_at":"2026-01-12T12:52:59.000Z","size":56255,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2026-01-12T19:48:55.910Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/umsungjun.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2023-06-08T14:51:56.000Z","updated_at":"2026-01-12T12:53:03.000Z","dependencies_parsed_at":"2025-12-15T04:05:22.427Z","dependency_job_id":null,"html_url":"https://github.com/umsungjun/Algorithm-CS","commit_stats":null,"previous_names":["umsungjun/js_algorithm"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/umsungjun/Algorithm-CS","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/umsungjun%2FAlgorithm-CS","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/umsungjun%2FAlgorithm-CS/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/umsungjun%2FAlgorithm-CS/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/umsungjun%2FAlgorithm-CS/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/umsungjun","download_url":"https://codeload.github.com/umsungjun/Algorithm-CS/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/umsungjun%2FAlgorithm-CS/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28523033,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-17T23:53:28.710Z","status":"ssl_error","status_checked_at":"2026-01-17T23:52:20.131Z","response_time":85,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2026-01-18T00:01:03.229Z","updated_at":"2026-01-18T00:01:28.310Z","avatar_url":"https://github.com/umsungjun.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 브라우저의 렌더링 원리\n\n브라우저가 화면에 나타나는 요소를 렌더링 할 때, `웹킷(Webkit)`이나 `게코(Gecko)` 등과 같은 렌더링엔진을 사용합니다.\n\n\u003cbr\u003e\n\n1. **HTML을 [파싱] 후, `DOM트리`를 구축합니다.**\n2. **CSS를 파싱 후, `CSSOM`트리를 구축합니다.**\n3. **Javascript를 실행합니다.**\n   - 주의! HTML 중간에 스크립트가 있다면 HTML 파싱이 `중단`됩니다.\n4. **DOM과 CSSOM을 조합하여 `렌더트리`를 구축합니다.**\n   - 주의! `display: none` 속성과 같이 화면에서 보이지도 않고 공간을 차지하지 않는 것은 렌더트리로 구축되지 않습니다.\n5. **뷰포트 기반으로 렌더트리의 각 노드가 가지는 정확한 위치와 크기를 계산합니다. `(Layout 단계)`**\n6. **계산한 위치 / 크기를 기반으로 화면에 그립니다. `(Paint 단계)`**\n\n\u003cbr\u003e\n\n---\n\n# Reflow와 Repaint가 실행되는 시점\n\n\u003cbr\u003e\n\n### `Reflow`\n\n- 생성된 DOM 노드의 레이아웃 수치(너비, 높이, 위치 등) 변경 시 영향 받은 모든 노드의(자신, 자식, 부모, 조상) 수치를 다시 계산하여, `렌더 트리를 재생성하는 과정`\n\n### `Reflow 예시`\n\n- DOM 엘리먼트 추가, 제거 또는 변경\n- CSS 스타일 추가, 제거 또는 변경\n- CSS 스타일을 직접 변경하거나, 클래스를 추가함으로써 레이아웃이 변경될 수 있습니다. 엘리먼트의 길이를 변경하면, DOM 트리에 있는 다른 노드에 영향을 줄 수 있습니다.\n- CSS3 애니메이션과 트랜지션, 애니메이션의 모든 프레임에서 리플로우가 발생합니다.\n- offsetWidth와 offsetHeight의 사용. offsetWidth와 offsetHeight 속성을 읽으면, 초기 리플로우가 트리거되어 수치가 계산됩니다.\n- 유저 행동, 유저 인터랙션으로 발생하는 hover 효과, 필드에 텍스트 입력, 창 크기 조정, 글꼴 크기 변경, 스타일시트 또는 글꼴 전환들을 활성화하여 리플로우를 트리거할 수 있습니다.\n\n### `Repaint`\n\n- Reflow 과정이 끝난 후 재 생성된 렌더 트리를 다시 그리게 되는데 이 과정을 Repaint라고 합니다.\n\n### `Repaint 예시`\n\n- 가시성이 변경되는 순간(opacity, background-color, visibility, outline 등등)\n- Reflow가 실행된 순간 뒤에 실행됩니다.\n\n\u003cbr\u003e\n\n# 주소창에 google.com을 입력하면 일어나는 일\n\n1. 사용자가 웹 브라우저를 통해 google.com 을 입력하면 URL 주소 중 도메인 네임 부분을 `DNS` 서버에서 검색합니다.\n2. DNS 서버에서 해당 도메인 네임에 해당하는 `IP` 주소를 찾아 사용자가 입력한 `URL` 정보와 함께 전달합니다.\n3. 브라우저는 `HTTP 프로토콜`을 사용하여 요청 메시지를 생성하고 HTTP 요청 메시지는 TCP/IP 프로토콜을 사용하여 서버로 전송됩니다.\n4. 서버는 `response` 메시지를 생성하여 다시 브라우저에게 데이터를 전송합니다.\n5. 브라우저는 `response`를 받아 파싱하여 화면에 렌더링합니다.\n\n\u003cbr\u003e\n\n# 호이스팅(hoisting)이란?\n\n- 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미합니다. `var`로 선언한 변수의 경우 호이스팅 시 `undefined`로 변수를 초기화합니다. 반면 `let`과 `const`로 선언한 변수의 경우 호이스팅 시 변수를 초기화하지 않습니다.\n\n```\nconsole.log(name); // undefined\nvar name = \"sungJun\";\nconsole.log(name); // sungJun\n```\n\n- 위의 예제에서는 `var name = \"sungJun\"`가 작성되기 전 `console.log(name)`은 초기화 된 `var name;`을 출력한다는 의미로 `undefined`를 출력하는 것이다.\n\n- `var`는 선언, 초기화가 동시에 이루어지기 때문에 `undefined`를 출력하지만 `let, const`는 선언단계만 호이스팅 되기 때문에 `Reference Error`를 출력합니다.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fumsungjun%2Falgorithm-cs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fumsungjun%2Falgorithm-cs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fumsungjun%2Falgorithm-cs/lists"}