반응형 크롬 브라우저는 어떻게 작동 할까? - 01 Google Developers 사이트에서 읽은 내용을 정리한 글입니다. CPU, GPU, Memory 그리고 멀티 프로세스 아키텍처 프론트엔드 개발을 공부하면서 가장 친숙하고 자주 사용하는 브라우저. 이 브라우저는 어떻게 우리의 코드를 잘 돌아가는 웹사이트로 변환해주는 것일까? 그 중 크롬을 중심으로 브라우저가 동작하는 방식을 알아보자. 먼저 주요한 컴퓨팅 용어와 컴퓨터의 일부분이 어떻게 동작하는지 알 필요가 있다. 많이 들어보셨죠? 컴퓨터의 중심 CPU와 GPU CPU(Central Processing Unit)란? CPU는 컴퓨터에서 뇌 역할을 담당한다. 다양한 작업들을 들어올 때마다 하나씩 처리한다. 과거에는 CPU가 하나의 칩이었지만(이 당시엔 코어란 같은 칩에 들어 있을 뿐 다른 CPU로 취급.. 2021. 7. 22. Firebase Warning: "It looks like you're using the..." 문구 없애기 웹 앱을 만드는 도중 개발자 도구를 봤는데 이런 문구가 생겼다. "이 문제는 Firebase JS SDK를 사용하면서 생긴 것 같아. 너가 프로덕션에 firebase 앱을 배포할 때는 너가 필요한 것만 import해서 사용하는 것을 추천할게." 개발자 도구 콘솔이 친절하게 알려줬다. SDK 전체를 불러와서 사용하지 말고 내 웹 앱에 필요한 것만 불러와서 사용하는 것을 권장하는 것 같다. import firebase from 'firebase'; const firebaseConfig = { apiKey: process.env.REACT_APP_FIREBASE_API_KEY, authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN, databaseURL: proce.. 2021. 6. 1. 웹 저장소 쿠키와 스토리지 * 틀린 내용이 있다면 언제든지 댓글에 남겨주세요. 환영합니다 🙆🏻♂️ 개발자의 꿈을 꾸기 전에도 쿠키에 대한 존재는 알고 있었습니다. 저와 비슷한 연령대의 분들은 대부분 경험하셨을 것 같은데요. 약 10년전 컴퓨터의 사양이 좋지 않던 시절 어떻게든 인터넷 속도를 높이고 싶어서 브라우저의 쿠키와 캐시 등의 데이터를 지웠던 기억이 있습니다. 그렇다면 이 쿠키는 어떤 역할을 하는 건지 알아보겠습니다. 쿠키 (Cookie) 무상태성(stateless)과 비연결성(connectionless) 쿠키에 대해 알아보기 전에 HTTP의 특성에 대해서 잠깐 설명드리겠습니다. HTTP는 클라이언트와 통신이 끝나면 상태 정보를 저장하지 않는 무상태성(stateless), 요청(request)과 응답(response)이 끝.. 2020. 12. 10. 다사다난한 Open API와 CORS - 1 새로운 프로젝트를 시작했습니다. 지난 날씨 API를 이용한 프로젝트에 이어서 공공데이터인 코로나 API를 불러와서 한국 코로나 현황을 알려주는 프로젝트를 만들어보려고 합니다. 이번엔 약간의 목적을 갖고 프로젝트를 시작했고, 그 목적은 다음과 같습니다. HTML/CSS/JavaScript를 통한 프론트 엔드 개발 능숙도 처음보는 API의 공식 문서를 읽어보고, 구조 파악 및 사용해보기 만드는 과정에서의 공학적 사고 역량 제한된 시간 안에서 완성하기 (일주일) 처음 시작은 무난했습니다. 첫 날은 프로젝트 자체에 고민을 굉장히 많이 했습니다. 일주일이란 시간 안에 완성해야하기 때문에 'Open API를 사용해서 어떻게 재밌고 심플한 웹 사이트를 만들 수 있을까'에 중점을 두고 고민을 했습니다. 그 와중에 국내.. 2020. 11. 29. JSON Viewer로 보기 쉽게 변경하기 JSON을 불러올 때 가독성이 너무 좋지 않아서 방법을 찾던 중 괜찮은 확장 프로그램을 찾아서 공유해봅니다..! 크롬 웹스토어에 들어 가셔서 JSON이라고 검색하시면 나옵니다. 날씨 API로 예를 들어보겠습니다. 크롬이나 웨일 브라우저에서 JSON을 불러오면 위 이미지와 같이 가독성이 좋지 않습니다. 웹 스토어에서 JSON Viewer를 설치하고 새로고침을 하면 아래와 같이 가독성이 좋아집니다. 또한 JSON Viewer 옵션에서 테마를 변경할 수도 있습니다. 훨씬 보기가 편리해져서 만족하며 사용하고 있습니다. 2020. 11. 16. 렌더 트리(Render Tree), CRP(Critical Rendering Path) 렌더 트리(Render Tree)란? DOM과 CSSOM은 독립적인 개체입니다. 하나는 콘텐츠를, 다른 하나는 문서의 스타일 규칙을 설명합니다. 브라우저가 이 두가지를 병합하여 화면에 픽셀을 렌더링 하기 위한 마지막 단계, 최종 보스인 렌더 트리(render tree)에 대해 알아보겠습니다. 렌더 트리는 DOM과 CSSOM을 합한 후 최종적으로 브라우저에 표기될 것들만 렌더 트리에 선별 되어 생성이 됩니다. 이 렌더 트리는 표시되는 각 요소의 레이아웃을 계산하는 데 사용되고 픽셀을 화면에 렌더링하는 페인트 프로세스에 대한 입력으로 처리가 됩니다. 최적의 렌더링 성능을 얻기 위해 이러한 단계를 이해하고 각각을 최적화하는 것이 중요합니다. 브라우저가 렌더 트리를 생성하기 위해 하는 작업은 대략 다음과 같습니.. 2020. 10. 31. CSSOM(CSS Object Model) 웹 브라우저가 페이지를 렌더링 할 때 HTML은 DOM을 생성한다는 것을 알게 됐습니다. CSS가 서운해 할까봐 CSSOM을 공부한 내용을 정리 했습니다. CSSOM(CSS Object Model)이란? HTML과 마찬가지로 CSS도 브라우저가 이해할 수 있는 형식으로 변환해야 합니다. 예제를 통해 살펴보겠습니다. 먼저 HTML은 다음과 같습니다. 브라우저는 DOM을 생성하는 동안 외부 CSS 스타일시트인 style.css를 참조하는 섹션의 를 접합니다. 브라우저는 이 리소스에 대한 요청을 즉시 발송하고 요청합니다. HTML 마크업 내에 직접(인라인) 스타일을 선언하지 않고 CSS와 HTML을 별도로 유지하면 콘텐츠와 디자인을 별도의 항목으로 처리할 수 있습니다. CSS 객체 모델은 브라우저가 DOM을 .. 2020. 10. 30. 이전 1 2 3 4 다음 반응형
