# chrome

109개의 포스트
post-thumbnail

[Fedora 35] Wayland 에서 Chrome 화면 공유

 Yocto Linux 의 빠른 빌드를 위해 데스크탑에 Fedora 35 를 멀티 부팅 시스템으로 설치했다. 리눅스 설치야 원투데이 하는게 아니였으므로 큰 문제는 아니였으나, Wayland 프로토콜에서는 화면의 공유가 제대로 이뤄지지 않는 문제가 있었다. &

3일 전
·
0개의 댓글
·
post-thumbnail

간단하게 자바스크립트를 실행하는 방법

안녕하세요서울 꺼벙 천사입니다 자바스크립트를 독학하고 있습니다

2022년 9월 27일
·
0개의 댓글
·
post-thumbnail

[기타] 개발자도구 - Application panel

브라우저 저장소의 기능현재 로딩된 웹 페이지에서 사용된 모든 리소스를 검사할 수 있는 패널(이미지, DB, 로컬 및 세션 스토리지, 쿠키, 애플리케이션 캐시 등)Storage: 브라우저의 저장소Local Storage: 로컬스토리지의 데이터는 사용자가 지우지 않는 이상

2022년 9월 23일
·
0개의 댓글
·

[기타] 개발자도구 - Console panel, Sources panel

Console panel 자바스크립트 코드 즉시 실행 디버깅 console 창에서 다음 줄에 코드를 작성하고 싶을 때 enter 대신 shift+enter이용 console 창에 여러줄 있을 때 마지막 줄이 return 된다. 다른 pane

2022년 9월 23일
·
0개의 댓글
·

[기타] 개발자도구-Elements panel

페이지 레이아웃 html 확인스타일(css) 검사 및 편집\-> Elements panal에서 내용 수정해보고 원래 코드에 복사해서 붙여넣기도 한다.section tag는 semantic tag중의 하나로 HTML 문서에 포함된 독립적인 섹션(section)을 정의할

2022년 9월 23일
·
0개의 댓글
·
post-thumbnail

터미널 환경에서 chrome, chrome driver 설치

GCP 인스턴스(Ubuntu 20.04)에서 크롤링하기 위해 selenium을 위한 chrome과 driver 설치

2022년 9월 21일
·
0개의 댓글
·
post-thumbnail

브라우저 렌더링 최적화 (feat. Chrome)

렌더링 최적화를 왜 알아야할까? frames per second 1초에 몇 프레임이 그려지는지를 표현한 단위로, 60fps는 1초에 60장의 프레임이 그려지는 것을 뜻한다. 한장의 프레임을 그리는데는 1000/60=16.666... 즉, 16.6ms안에 브라우저가

2022년 9월 17일
·
0개의 댓글
·
post-thumbnail

브라우저 렌더링 (feat. Chrome)

HTML, CSS가 브라우저 렌더링하는데 필요한 전부이고, Javascript는 HTML태그를 동적으로 움직이게 만드는 프로그래밍 언어이다! 생각보다 간단한데..? 과연 그럴지...~ 🤷‍♀️ 브라우저가 어떻게 렌더링되는 되는지 자세히 알아보자 !!🔍 브라우저

2022년 9월 16일
·
0개의 댓글
·
post-thumbnail

[Week3] (Web Crawling) 웹 정보 선별하기

웹 크롤링의 뼈대는 앞선 포스팅을 통해 알아보았으니, 이번엔 웹 데이터를 어떻게 가져오고 선별은 어떻게 하는지를 알아보도록 하겠다.우선, 웹 페이지가 무엇인지 대략적으로 알아야 웹페이지에 있는 특정데이터를 가져올 수 있을 것이다.그렇다면, 웹페이지는 무엇일까?

2022년 9월 7일
·
0개의 댓글
·
post-thumbnail

브라우저에 URL을 입력했을 때 - 2

를 이어서 배워 보려 한다.참고로 본 게시물은 Chrome broswer architecture에 대해 초점을 맞춰서 알아 볼 것이다!위의 이미지는 일반적인 broswer architecture이다. (broswer architecture는 표준이 없다는 특징이 있어서

2022년 9월 6일
·
0개의 댓글
·
post-thumbnail

브라우저에 URL을 입력했을 때 - 1

두 과정으로 나눠볼 수 있다!브라우저가 화면을 그리기 위해 파일을 가져오는 단계가져온 파일들( HTML, CSS, Javascript, 외부 리소스...)을 브라우저가 렌더링하는 단계이 과정들을 자세하게 살펴보자 !!✨브라우저가 화면을 그리기 위해 파일을 가져오는 과

2022년 9월 2일
·
0개의 댓글
·
post-thumbnail

크롬 익스텐션 기본 구조

기본적으로 크롬 익스텐션의 구성 스크립트는 background, contentscript, popup 으로 3개로 구성됩니다.

2022년 9월 2일
·
0개의 댓글
·
post-thumbnail

웹 브라우저의 동작원리 - Navigation부터 Rendering까지

우리가 사용하는 chrome, firefox, safari 등의 웹 브라우저는 어떻게 동작할까? 본 시리즈에서는 URL을 타이핑하는 것에서 시작해서 웹 페이지가 표시되기까지 일어나는 일들을 단계적으로 살펴볼 것이다.

2022년 8월 19일
·
0개의 댓글
·

Network panel

서버와 데이터를 주고 받을 때 편리하게 디버깅을 할 수 있도록 도와주는 도구이며 이미지나 영상 등각 소스들을 불러올 때 속도, 응답 상태 등 네트워크 측면에서 확인 가능하며, 문제 시 비교, 분석을 할 수 있게 도움을 주는 도구이다.개발자도구가 열려 있는 동안의 실제

2022년 8월 19일
·
0개의 댓글
·
post-thumbnail

우분투 크롬 원격 데스크톱 설정, 블랙스크린 해결 방법

안녕하세요!오늘은 서버를 이동시킬 일이 있어서 원격 데스크톱을 설정하려고 합니다.우분투 서버에서 원격 데스크톱을 열어놓고 어디서든 접속하려했는데, mac의 경우 아주 수월하게 진행되나 ubuntu의 경우 몇 가지 수정해줄 부분이 있어서 해결방법을 공유합니다.https&

2022년 7월 28일
·
0개의 댓글
·
post-thumbnail

[개발자 도구]너도 개발자 도구 써? 나도 써✨

웹개발에 특화된 개발자 도구를 소개해 보려 한다. 생각보다 많은 내용이 들어있어 읽기 귀찮을 수도 있지만, 이 글을 쓰고있는 '이때의 나' 는 초보 프론트엔드 개발자! 개발자 도구를 사용함으로써 개발시간이 현저하게 확 줄어들었다. 혹시 당신도 개발자 도구에 대해 몰랐

2022년 7월 22일
·
0개의 댓글
·
post-thumbnail

Windows D8 Build

그냥 혼자 공부하면서 적었던 내용들인데, 혹시나 참고될만한 내용이 있을까봐 올려봅니당.http://www.egocube.pe.kr/lecture/content/html-javascript/202004210001 https://stackoverflow.

2022년 7월 8일
·
0개의 댓글
·
post-thumbnail

Selenium 을 통한 구글 Recaptcha Solver

스크래핑을 이용한 데이터 수집에서 로그인하는 과정을 자동화하는 절차는 모든 웹에서 공통적으로 수행해야 하는 과제중 하나이다. 포털 사이트중 일부는 구글 Recaptcha 를 도입하여 Selenium을 통한 접근을 막게 되는데 이를 우회하기 위해 시작하게 되었다.일반적으

2022년 6월 29일
·
0개의 댓글
·