MacOS에 Chrome 브라우저 설치하기 윈도우에서는 기본적으로 Edge 브라우저가 설치되어 있고, MacOS에서는 Safari가 설치되어 있습니다. Chrome은 기본으로 설치되어 있지 않기 때문에 따로 설치를 해줘야 합니다. 우선 Safari 브라우저를 실행하여, 아래 링크를 통해 크롬 다운로드 페이지로 이동합니다. https://www.google.co.kr/chrome/?brand=JJTC&gclsrc=aw.ds&gclid=EAIaIQobChMIgoTj04PfgQMVg72WCh1IpAgMEAAYASAAEgLRlvD_BwE Chrome 웹브라우저 더욱 스마트해진 Google로 더 간편하고 안전하고 빠르게. www.google.com 그리고 "Chrome 다운로드" 버튼을 클릭합니다. 다운로드가 시..

여러가지 방법으로 크롬 extension을 만들 수 있지만, 본 글에서는 React 를 사용해서 크롬 extension을 만드는 방법에 대해 소개합니다. React 프로젝트 생성하기 우선 extension으로 만들 리액트 프로젝트를 CRA를 사용해서 생성합니다. 본 글에서는 타입스크립트 기반의 리액트 프로젝트를 생성하도록 하겠습니다. yarn create react-app my-chrome-app --template typescript chrome extension 만들기 manifest 설정 변경 생성된 프로젝트의 public 디렉토리를 보면 manifest.json 파일이 있습니다. manifest.json 파일은 브라우저에 이 앱에 대한 정보를 알려주는 파일입니다. 이 앱이 크롬 익스텐션이라고 브라..

브라우저 창에 url을 입력했을때 보통 어떤 내용을 검색하기 위해 브라우저 창에 url을 입력합니다. 이때 내부적으로 이루어지는 일을 살펴봅니다. 브라우저에서 동작하는 과정을 알아보기 전에 DNS에 대해 먼저 알아야 합니다. DNS 서버로 부터 서버 IP 조회 구글 사이트(google.com)에 접속한다고 가정해봅시다. 브라우저 주소창에 https://google.com을 검색할 것 입니다. 브라우저는 화면을 그리기 위해 서버로부터 HTML, CSS, JS, 이미지 등의 리소스 파일들을 가지고 오려고 할 것입니다. 하지만 브라우저는 입력받은 url(https://google.com)로는 서버의 ip를 주소를 알 수 없기 때문에, DNS 서버에 요청하여 서버의 ip 주소(예: 13.123.55.23)를 가..