주섬주섬 코딩, 소소하지만 꾸준히 쌓아가는 개발 기록...

크롬 확장 프로그램을 아시나요? 크롬 확장 프로그램 프로젝트를 진행하기 위한 셋팅을 알아보겠습니다. 1. 프로젝트 CRA(create-react-app)로 시작 npx create-react-app extension-project 설치가 완료되면 구조가 이러합니다. 2. manifest.json 파일 수정 public > manifest.json { "name": "your project name", "icons": { "16": "icon-16x16.png", "48": "icon-32x32.png", "64": "icon-64x64.png", "128": "icon-128x128.png" }, "permissions": [], "manifest_version": 3, "version": "0.0.1"..

CSS만 사용하다가 SASS, SCSS로 작업을 해보고 싶다는 생각을 종종하고는 했었다. 하지만 컴파일이 필요했었던터라 실제로 행동으로 옮기는데 까지는 시간이 좀 걸렸다. gulp로 테스트 작업을 해본적은 있었으나 그게 전부였다. 그러던 중에 VSCode 에디터에 extension이 있어서 진짜 쉽게 작업할 수 있는 것을 찾았다! VSCode Extension 다운로드 - Sass - Live Sass Compiler (실시간 컴파일한 것을 확인) -> Live Server (라이브 서버, Live Sass Compiler를 다운로드 받으면 종속성으로인해 같이 받아집니다!) 필수는 아니지만 문법을 도와주는 Extension - Sass lint Extension을 다운로드받게되면 우측 하단의 파란색 바에..