📍Manifest란?✅크롬 익스텐션의 설정 파일 역할로, 필수로 존재해야 한다- JSON 형식 (manifest.json 형태로 존재)- 익스텐션의 루트에 위치 📍Manifest  V3✅2023년 4월 현재 최신 버전- 2022년 1월부터 V2 버전의 새로운 앱 등록이 금지됨 📍Manifest  V3 포맷✅필수 프로퍼티- manifest_version- name- version ✅권장되는 프로퍼티- action- default_locale- icons- description 1. action : 크롬 우측 상단의 아이콘의 세부 정보를 담당하는 객체- default_icon : 우측 상단의 아이콘 이미지- default_title : 아이콘에 커서 올리면 표시할 타이틀- default_popup : ..

📍개요크롬 익스텐션을 만들고 스토어에 배포하기 위해서는 크롬 디벨로퍼 대시보드에 계정을 등록해야 한다 ✅크롬 웹스토어 소개 링크https://developer.chrome.com/docs/webstore/about_webstore/ What is the Chrome Web Store? - Chrome DevelopersAn explanation of the Chrome Web Store and why you might want to use it.developer.chrome.com 📍준비물- 크롬 웹스토어에 등록할 구글 계정- 5불 📍1. 계정 등록하기✅크롬 디벨로퍼 대시보드 링크https://chrome.google.com/webstore/developer/dashboard Chrome Web S..

📍타겟 이미지 📍문제 풀이 ✅z-index를 활용하여 우선순위를 낮춰서 겹치는 레이어를 구현한다 - z-index를 사용할 때는 position이 default 이외 어떤 것이든 적용되어야 함을 유의 ✅반원형은 border-radius를 각 꼭지점에 적용하여 구현한다 - border-raduis: 11시 2시 5시 8시 방향 순이다 📍코드 📍결과 100% match

📍참고 https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API Service Worker API - Web APIs | MDN Service workers essentially act as proxy servers that sit between web applications, the browser, and the network (when available). They are intended, among other things, to enable the creation of effective offline experiences, intercept network requests an developer.mozilla.org 📍서비스 워커? ✅프..

📍문제 링크 https://www.acmicpc.net/problem/16236 16236번: 아기 상어 N×N 크기의 공간에 물고기 M마리와 아기 상어 1마리가 있다. 공간은 1×1 크기의 정사각형 칸으로 나누어져 있다. 한 칸에는 물고기가 최대 1마리 존재한다. 아기 상어와 물고기는 모두 크기를 가 www.acmicpc.net 📍알고리즘 분류 - 구현 - 그래프 이론 - 그래프 탐색 - 너비 우선 탐색 - 시뮬레이션 📍문제 풀이 2차원 배열이 주어지고 상어와 1 ~ 6 크기의 물고기들이 2차원 배열에 위치할 때, 상어가 먹을 수 있는 모든 물고기를 잡아먹는데 걸리는 시간을 구한다 1. 먹을 수 있는 물고기들 좌표를 모두 조사한다 - BFS를 이용한다 - 먹을 수 있는 물고기가 더 이상 없으면, 진행을..

이펙티브 타입스크립트 (댄 밴더캄 지음) 를 읽고 정리 📍요약 ✅타입스크립트를 시스템 레벨로 설치하면 안된다 (npm 전역 설치 금지) - devDependencies 에 포함하여 팀원 모두가 동일한 버전을 사용하도록 해야 한다 ✅@types 의존성도 devDependencies 에 포함해야 한다 📍npm은 의존성을 3가지로 구분한다 1. dependencies- 런타임에 필요한 라이브러리들- 프로젝트가 npm에 공개되면, dependencies의 라이브러리들도 함께 설치됨(전이 의존성, transitive dependencies 이라고 함) 2. devDependencies- 현재 프로젝트를 개발하고 테스트하는데 필요하지만, 런타임에는 필요없는 라이브러리들- 주로 테스트 프레임워크들..- 프로젝트가 n..

📍문제 링크 https://www.acmicpc.net/problem/2252 2252번: 줄 세우기 첫째 줄에 N(1 ≤ N ≤ 32,000), M(1 ≤ M ≤ 100,000)이 주어진다. M은 키를 비교한 회수이다. 다음 M개의 줄에는 키를 비교한 두 학생의 번호 A, B가 주어진다. 이는 학생 A가 학생 B의 앞에 서야 한다는 의 www.acmicpc.net 📍알고리즘 분류 - 그래프 이론 - 위상 정렬 📍문제 풀이 N명의 학생을 줄세우려 한다. M개의 선, 후 정보가 주어질 때 모든 학생을 줄세우는 아무 방법을 출력한다 - 답이 여러개일 수 있음 1 { const [N, M] = input[0]; const graph = {}; // 진입 차수(간선에서 도착 횟수)를 기록할 배열 const in..

📍참고 https://docs.npmjs.com/cli/v9/using-npm/workspaces?v=true workspaces | npm Docs Working with workspaces docs.npmjs.com 📍환경 체크 NPM 버전 확인 npm --version 9.6.3 # 230403 현재 최신버전 NPM을 최신 버전으로 업데이트하기 npm install npm@latest -g 📍Workspace 란? ✅단일 최상위 루트 패키지 내에서 로컬 파일 시스템의 여러 패키지 관리를 지원하는 npm cli의 기능 집합을 지칭 예) 최상위 package.json 이 하위 폴더의 package.json을 관리하고 보조 Workspace ├ package.json ├ view │ └ package.j..