chrome

크롬 익스텐션을 작업할 때 불편한 점이라면 크롬 확장 앱 관리자에 들어가서 업데이트 버튼을 눌러야 새로운 코드가 적용된다는 점이다. 거기다 지난 글처럼 React, TypeScript로 작업하면 과정이 하나 더 추가된다. 코드가 변경될 때마다 $ npm run build 커맨드를 날리고, 크롬 확장앱 관리자에서 새로고침(업데이트 버튼)를 눌러야 확인할 수 있다. 크롬 익스텐션 만들기는 3부작이며 이번 글이 마지막 글이다. 새로운 이슈가 나오지 않는다면 추가로 글을 쓰겠지만 지금은 계획이 없다.HTML, JS로 크롬 익스텐션 만들기 - 아주 기초적인 HTML, JS로 만드는 최소한의 기능을 갖고 있는 확장앱 만들기HTML,JS에서 React, TS로 마이그레이션 하기 - JS, HTML, CSS 같은 바..

프론트엔드에서는 JavaScript보다는 TypeScript의 생산성이 훨씬 더 좋기에 옮겨가야한다. 또한 프론트엔드에서는 평범한 HTML보다는 React나 다른 라이브러리, 프레임워크를 선호하며 생산성도 더 좋을 때가 많아서 옮겨가야한다. 따라서 이번 글에서는 크롬 확장앱을 마이그레이션해서 생산성있고 우아하게 React와 TypeScript로 변화시켜보자. HTML, JS로 크롬 익스텐션 만들기에서 HTML, JS로 크롬 익스텐션을 만들었다. 이 익스텐션을 활용할 예정이다. 크롬 익스텐션 만들기는 3부작으로 만들 예정이며 이번 글은 두 번째 글이다.HTML, JS로 크롬 익스텐션 만들기 - 아주 기초적인 HTML, JS로 만드는 최소한의 기능을 갖고 있는 확장앱 만들기(이번 글) JS, HTML, CS..

최근 우연한 계기로 크롬 익스텐션을 만들게 되었다... 그래서 기록을 남기고자 이 글을 적는다. 익스텐션 만들기는 글은 3부작 시리즈로 작성할 예정이다.1. (이번 글) 아주 기초적인 HTML, JS로 만드는 최소한의 기능을 갖고 있는 확장앱 만들기2. JS, HTML, CSS 같은 바닐라(?)한 환경이 아닌 React, TS 환경에서 작업하기3. 테스트용 로컬 익스텐션에 hot-reload 기능을 만들어서 크롬 브라우저를 직접 클릭하지 않기딱 hot-reload까지 글을 올리고 나서는 기존에 올리던 Lynx 공식문서 뿌수기를 공부하고 업로드 꼭꼭...해야지 오늘의 주제 - Chrome Extension 만들기 101 간단한 크롬 확장앱을 만들면서 어떤 파일들로 작업하는 지 알아보자!작업할 앱 : pop..

7장. 크롬 개발자 도구 파트를 읽고 개요 웹 개발을 배우게 되면서 개발자 도구를 알게 됐다. 처음에는 HTML, CSS를 알기 좋은 Elements탭, 자바스크립트를 실행할 수 있는 Console탭을 먼저 배우게 됐다. 그리고 어느순간 약간 sources 탭, 그리고 특히 Network 탭을 많이 들여다보게 됐다. (API가 꽂혔는지, 이미지 파일이 꽂혔는지 등 확인하기 시작하면서 였을 것이다.) 이 글 외에도 책에서는 정말 많은 내용을 다루지만 당장 개발자도구에서 뛰적뛰적 사용하기 좋은 것을 정리했다. Source 탭 sources 탭에서 Ctrl + P를 통해 Open File을 하면 웹 페이지에서 사용되는 소스코드를 다 확인할 수 있다. Ctrl+Shift+P로 Run Command 킬 수 있다...