# chrome

140개의 포스트
post-thumbnail

JAVA에서 웹 크롤링하기(1)

1. 자바프로젝트 생성 자바에서 Spring boot 프로젝트를 생성한다. maven으로 생성했다. 2. Dependency 추가 자바에서 selenium을 사용하기 위해 selenium dependency를 추가한다. 3. chrome 드라이버 다운로드 자신의 chrome 버전에 맞는 드라이버를 설치한다. 크롬창 -> 설정 -> Chrome정보 -> 버전확인 ![](https://velog.velcdn.com/images/gyeomii/post/a885c035-c40e-4dc6-a945-f52f61746bab/im

2023년 8월 29일
·
0개의 댓글
·
post-thumbnail

Safari RangeError: Invalid time value

발생및 확인 동기 프로젝트를 배포 후 테스트 과정에서 chrome브라우저에서는 정상적으로 실행이되지만 safari 에서 특정 페이지가 터지는 현상이 지속적으로 발생했습니다. local환경으로 확인 결과 아래와 같은 에러가 발생했슴을 확일 할 수 있었습니다. 이유 위 에러가 발생한 이유는 에러에 나와있는 그대로 time value의 문제 였습니다. 하나의 date관련 field가 2023-08-01 11:00:59.174000 같은 형태로 들어왔기 때문입니다. 해당 date value를 포맷하는 과정에서 chrome는 dot(.)이 포함된 date value를 읽어서 포맷이 가능하지만 safari의 경우엔 dot(.)이 포함된 date value를 읽지 못하기에 발생한 에러였습니다

2023년 8월 18일
·
0개의 댓글
·
post-thumbnail

모던 웹 브라우저 톺아보기 3 - 렌더러 프로세스

출처 : https://developer.chrome.com/blog/inside-browser-part3/ 자세한 내용은 원문을 참고해주세요. 지난 "모던 웹 브라우저 톺아보기2"에서 어떻게 브라우저가 서버로 부터 데이터를 들고오는 지 등.. 브라우저 랜더링에 관해서 살펴보았습니다. 이번에는 렌더러 프로세스에 대해서 알아보도록 하겠습니다. 렌더러 프로세스는 웹 성능의 많은 면에 관여를 합니다. 많은 부분들이 일어나기 때문에 일반적인 부분들만 다루도록 하겠습니다. 렌더러 프로세스의 웹 컨텐츠 처리 렌더러 프로세스는 브라우저 탭 안에서 일어나는 모든 일들을 담당합니다. 렌더러 프로세스 안의 메인 스레드가 개발자가 구현한 대부분의 코드를 처리합니다. (웹 워커 혹은 서비스 워커를 사용하면 워커 스레드가 코드 일부분을 처리합니다.) 컴포지터 스레드와 레지스터 스레드 또한 페이지를 효율적이며 매끄럽게 렌더하기 위해 실행됩니다. ![](https://velog.velcdn.c

2023년 8월 5일
·
2개의 댓글
·

[Chrome] `paused in debugger` 해결방법

문제점 웹 개발을 할 때 F12를 이용해 디버깅을 하려고 할 때마다, 변경된 코드가 있으면 'paused in debugger'이라는 메세지와 함께 진행이 더 이상 안됐다. 해결방법 디버깅 창의 '소스' 탭에서 오른쪽 상단에 보이는 방향 모양의 버튼을 클릭해주면 중단점이 사라지게 된다.

2023년 7월 30일
·
0개의 댓글
·

CORS 오류

Access to script at 'file:///Users/amazon/lunch/canvas/app.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https. 에러 해결 => --disable-web-security --disable-gpu --user-data-dir=~/tmp

2023년 7월 11일
·
0개의 댓글
·
post-thumbnail

단축키 정리 모음zip

이 글은 단축키에 미쳐사는 제가 단축키를 전파할 때마다 일일이 기억하기 보다는 어디 적어두는 게 낫겠다고 생각해서 적게 된 글입니다. 당연하게 알고 있는 단축키도 최대한 많이 적으려고 노력했습니다. 잘 모르실 것 같은 단축키는 🔥 이모지 표기를 앞에 달아두었습니다. 비개발 일반 되돌린거 원복하기 cmd + shift + z 이모지 창 열기 ctrl + cmd + space 전체 선택 cmd + a 최소화 (- 버튼 누르기) cmd + m 전체 화면 ctrl + cmd + f 데스크톱 간 이동 ctrl + → 또는 ctrl + ← 🔥 데스크톱 간 점프 (직접 설정해야 함) ctrl + 1 ~ 9 > 시스템 환경설정 → 키보드 → 단축키 → Mission Control → 데스크탑 1~9로 이동 활성화 하기 ![](https://velog.velcd

2023년 7월 7일
·
2개의 댓글
·

Chrome, Safari 등에서 스크롤이 먹통일 때 해결방법

데브툴이나 일부 환경에서는 정상적으로 동작하는데, 모바일 크롬과 사파리에서 스크롤이 먹히지 않는 경우가 있다. 마치 overflow: 'hidden'인 것처럼 화면이 잘린 상태에서 스크롤이 동작하지 않아 잘린 부분을 확인할 수가 없다. 이 경우 body나 html에 아래의 style을 추가하면 된다. 만약 React CRA처럼 body나 html이 직접 노출되지 않는 경우라면 DOM을 이용해도 괜찮다. 단, 이 방법은 만병통치약은 아니다. 엄밀히 얘기하면 문제가 되는 컴포넌트의 스크롤을 고치는 것이 아니라 어떤 이유에서든 상속받는 css가 기타 코드가 꼬일 일이 가장 적은 코드 최상단에 스크롤을 넣는 것으로 보인다. 그렇기 때문에 스크롤바가 생성될 때 스타일을 넣은 문서 전체에 스크롤바가 생긴다. 하지만 이 때문에 하위 컴포넌트들에서 사용하는 스크롤이 문제가 되지는 않으니 모바일 웹에서 화면 스크롤이 먹통일 때만 한번 시도해봄직하다.

2023년 6월 30일
·
0개의 댓글
·
post-thumbnail

Chrome 웹 스토어 개발자 등록 수수료 결제 설정 오류(국가, 우편번호)

크롬 익스텐션을 만들어서 등록하고자, 개발자 등록을 하려는데 수수료 결제 설정에서 다음 문제가 발생했다. 국가 선택에 "대한민국"이 존재하지 않았다. 우편번호를 입력했을 때 "청구지 우편번호 입력이 잘못되었습니다." 라는 메시지와 함께 진행이 되지 않았다. 구글링으로 찾아봤는데 이런 문제가 나타난지는 오래됐지만 아직까지도 명확한 해결방법은 없는 것 같다. 임시 해결 방법 국가를 "미국"으로 선택했고 우편번호는 "34139" (대전 유청구청)로 설정해서 진행했다.

2023년 6월 11일
·
0개의 댓글
·

모던 웹 브라우저 톺아보기 2 - 브라우저 렌더링

출처 : https://developer.chrome.com/blog/inside-browser-part2/ 자세한 내용은 원문을 참고해주세요. 지난 "모던 웹 브라우저 톺아보기1"에서 각 프로세스와 스레드가 브라우저의 여러 부분들을 어떻게 처리하는 지 살펴보았습니다. 이번 글에서는 웹 사이트가 보여지고 어떻게 통신하는 지 살펴보겠습니다. 브라우저 랜더링 웹 서핑을 생각해 봅시다. 브라우저에 주소를 치면, 브라우저는 인터넷에서 데이터를 받아 페이지를 표시합니다. 탭 밖의 것들은 모두 브라우저 프로세스가 담당합니다. 브라우저 프로세스는 버튼이나 입력창을 그리는 UI 스레드, 인터넷에서 데이터를 수신하기 위해 통신 스택을 건드리는 네트워크 스레드, 파일 등에 접근하기 위한 스토리지 스레드 등을 가

2023년 6월 3일
·
0개의 댓글
·

ubuntu 에 chrome 설치

2023년 5월 30일
·
0개의 댓글
·

[Web]SSE Management

서론 Java Spring에서 SSE를 List에 추가하며 관리하게 되었는데, List에 emitter를 아무리 추가해도 최대 크기가 6개를 넘지 않는 현상이 발생했습니다. 이 현상에 대한 이유를 알아보려고 합니다. 본론 게임 페이지에 진입하면 emitterList에 emitter가 추가되고 event 발생 시 send를 하도록 구현했습니다. server.tomcat.max-threads 값과 관련됐다고 해서 값을 늘려보기도 하고 server.tomcat.max-connections 값을 늘려보기도 했는데 여전히 최대 크기는 6개였습니다. 이 문제의 원인을 알아보기 위해 여러 가지 시도를 해보았지만, 서버 설정과는 무관한 것으로 밝혀졌습니다. 알고보니 서버 설정과 관계 없이, 이는 브라우저가 단일 도메인에 대한 동시 연결 수를 제한하고 있었기 때문이었죠. 실제로 문제는 크롬 브라우저에서 여러 창을 띄워 테스트하는 과정에서

2023년 5월 29일
·
0개의 댓글
·

모던 웹 브라우저 톺아보기 1 - 컴퓨팅 용어 및 크롬 아키텍처

웹 브라우저 성능 향상에 대해 고민을 한 적이 있는데 정확하게 웹 브라우저를 알고 성능 향상을 고민해볼 수 있을 거 같아서 모던 웹 브라우저 원문을 읽고 정리한 내용을 작성한 글입니다. 출처 : https://developer.chrome.com/blog/inside-browser-part1/ 자세한 내용은 원문을 참고해주세요. 해당 글은 4부까지 이어지는 내용입니다. 1부에서는 핵심 컴퓨팅 용어와 Chrome의 multi-process architecture에 대해 살펴보도록 하겠습니다. 먼저 브라우저가 동작하는 환경을 이해하기 위해서는 CPU와 GPU, 메모리, Process에 대한 이해가 필요합니다. 컴퓨터 핵심 CPU와 GPU CPU : Centeral Processing Unit CPU 즉, 중앙 처리 장치는 컴퓨터의 뇌라고 불리며 CPU 코어는 다양한 작업을 하나씩 처리할 수 있습니다. 과거에는 대부분 CPU가 하나의 칩이었지만 최근

2023년 5월 28일
·
0개의 댓글
·
post-thumbnail

MacBook - Chrome 발열

얼마 전부터 맥북 발열이 너무 심해서 쿨러랑 거치대 이것저것 구매했다. 원래는 안써도 inteliJ+mySQL+Chrome+Zoom 이렇게 한번에 구동해도 발열이 그리 심하지 않았는데.. CPU 점유율을 보니 크롬이 진짜 어마무시하게 잡아먹고 있었다. 줌 때문일거라 생각했는데 크롬이 더 어마무시하게 잡아먹고 있었다. 크롬을 최적화해보자 크롬 최신 상태 유지하기 -> 업데이트는 바로 바로 발열이 심해진 시점이 크롬 업데이트 하라고 알람 떴을 때였다. 도움말 -> 정보에서 수시로 확인하자. 하드웨어 가속화 비활성화 ![](https://velog.velcdn.com/images/ubiies/post/e4916d2f-8e04-4fcd-b381-a590b7645c0e/ima

2023년 5월 23일
·
0개의 댓글
·
post-thumbnail

Selenium python 활용법

시작하며 Selenium은 웹 애플리케이션을 테스트하기 위한 인기 있는 오픈 소스 자동화 도구이다. Python 프로그래밍 언어를 사용하여 웹 브라우저를 제어하고 자동화된 테스트를 실행할 수 있다. 애플리케이션 테스트를 위해 사용할 수 있는 다양한 도구가 있지만 가장 인기 있는 도구는 Selenium과 Playwright이다. 배우고 사용하기 쉬운 도구를 찾고 있다면 Playwright가 좋지만. 강력하고 유연하며 다양한 브라우저와 운영 체제를 지원하는 도구를 찾고 있다면 Selenium이 좋은 선택이다. 그 간 경험해본 바로는 복잡한 UI구조를 갖는 사이트의 경우 Seleniumn이 보다 논리적으로 활용하기 편리했다. 그래서, Selenium을 이용한 스크래핑을 한 예로 몇 가지 기본이 되는 활용 법을 기록한다. 1. 필요한 설치 사항과 설치 방법 웹 스크래핑을 위해 우리가 필요로 하는 것들은 크게 세 가지이다: Chrome 브라우저, ChromeDriver, 그리고

2023년 5월 18일
·
0개의 댓글
·
post-thumbnail

TCP, 크롬 시크릿 모드, REST API, VPN에 대하여

TCP 전송 제어 프로토콜(Transmission Control Protocol)은 인터넷 프로토콜 스위트의 핵심 프로토콜 중 하나로, TCP/IP라는 명칭으로 널리 알려져 있습니다. 인터넷 프로토콜 스위트(Internet Protocol Suite) 인터넷 프로토콜 스위트는 인터넷에서 컴퓨터들이 서로 정보를 주고받는데 사용되는 통신규약의 모음입니다. 이는 1960년대 말 방위 고등 연구 계획국(DARPA , Defense Advanced Research Projects Agency)에서 수행한 연구로 개발되었습니다. DARPA는 미 국방부의 연구, 개발을 담당하고 있는 기관입니다. 크롬 secret mode 원리 일반 모드에는 브라우저에서 '쿠키'라는 기능으로 검색기록, 방문기록 등의 개인 데이터를 저장하고 있습니다. 따라서 브라우저를 껐다 켜도 기록은 그대로 저장되어 남아있고, 이를 사용하여 '아이디/패스워드 자동완성, 검색어 자동완성' 등의 기능을 사용하도

2023년 5월 14일
·
0개의 댓글
·
post-thumbnail

(번역) 크롬은 WebGPU API를 기본값으로 제공할 것이며, 이것이 중요한 이유는 다음과 같습니다.

차세대 웹 그래픽 API는 WebGL의 단점을 해결하는 것을 목표로 합니다. > 원문 : https://arstechnica.com/gadgets/2023/04/chrome-113-will-enable-webgpu-a-modern-low-overhead-graphics-api-for-the-web/ 구글은 현재 베타 상태에 있는 크롬 113 버전부터 WebGPU를 기본으로 지원한다고 오늘(2023년 4월 8일 기준) 발표했습니다. 2017년부터 개발 중인 WebGPU는 마이크로소프트의 Direct3D 12, 애플의 Metal, 그리고 Vulkan과 같이 오버헤드가 적

2023년 5월 1일
·
2개의 댓글
·

Ubuntu에 Chrome 설치하기

Ubuntu OS에 Chrome을 설치하는 방법에 대해 정리해보고자 한다. 1. Chrome 설치파일 다운로드하기 terminal에서 wget 명령어를 이용해 google chrome의 최신 .deb package 파일을 다운로드한다. 2. Chrome 설치하기 관리자 권한을 이용하여 .deb package를 설치한다. 출처: https://tttap.tistory.com/221

2023년 4월 24일
·
0개의 댓글
·
post-thumbnail

브라우저 동작원리 PART 3

이 글은 'Inside look at modern web browser' 를 번역한 Naver D2 글을 일고 정리한 글이다. > 이 글에서는 렌더러 프로세스가 어떤 과정을 거쳐서 페이지를 렌더링 하는지 과정과 어떤 성능 이슈가 있고 이를 해결하기 위해서는 어떻게 해야하는지에 대해서 다룰꺼다. 렌더러 프로세스는 하나의 탭에서 하는 모든 작업을 의미한다. 렌더러 프로세스는 메인 스레드에서 렌더링이 수행되고 추가적인 컴포지터 스레드, 레스터 스레드등을 활용해 부드럽게 렌더링 하는게 가능하다. DOM 구축 페이지를 이동하는 네비게이션 실행 메세지를 렌더러 프로세스가 받고 HTML 데이터를 수신하기 시작하면 렌더러 프로세스의 메인 스레드는 문자열 HTML을 파싱해서 DOM 변환하기 시작한다.

2023년 4월 9일
·
0개의 댓글
·
post-thumbnail

브라우저 동작 원리 PART 2

이 글은 'Inside look at modern web browser' 를 번역한 Naver D2 글을 일고 정리한 글이다. >파트 2에서는 사용자가 사이트를 요청하고 브라우저가 페이지 렌더링을 준비하는 과정에 대해서 살펴보겠다. 브라우저 프로세스가 있다는건 PART 1에서 설명했을꺼다. 브라우저 프로세스에는 세가지 스레드가 있는데 UI 스레드, Network 스레드, Storage 스레드가 있다. 1단계 입력 처리 우선 처음에는 UI 스레드가 처리하는 일에 대해서 얘기해보자. Chrome은 특이하게 주소

2023년 4월 8일
·
0개의 댓글
·

반응형 웹사이트 - 유용한 크롬 확장 프로그램

크롬 확장프로그램 Chrome에 새로운 기능 추가 등 확장 프로그램을 설치해서 새 기능을 추가할 수 있는 플러그인 웹 퍼블리싱시 유용한 크롬 확장 프로그램들 > page ruler redux : 활성화된 브라우저 안에 요소의 너비와 높이 측정 > page ruler redux : 활성화된 브라우저 안에 요소의 너비와 높이 측정 > gallerify powerful image : 활성화된 브라우저 안에 이미지 다운로드 > CSSViewer : 활성화된 브라우저 안에 요소의 CSS보기 & 복사하기 > ColorZilla : 활성화된 브라우저 화면에서 요소 색상값을 보거나 추출 > responsive tester : 활성화된 브라우저 화면 모바일 기기 화면 보기 > Nimbus : 활성화된 브라우저 화면을 다양하게 캡쳐하고 영상도 녹화 > MaraCopy : 자바스크립트로 텍스트 복사 막아 놓은 웹 페이지 내에서 텍스트 복사하기 > Font Picker : 웹

2023년 4월 7일
·
0개의 댓글
·