📍목표- Nuxt3(Vue.js) 에서 형제 컴포넌트끼리 데이터 공유하기 📍React vs Vue 데이터 공유 비교- React는 단방향 데이터 플로우이므로 아래 사진처럼 부모 컴포넌트에서 자식 컴포넌트로 데이터가 흐른다- 반면, Vue 에서는 자식 컴포넌트에서 부모 컴포넌트로 데이터를 전달할 수 있다. event emit을 활용하면 된다  📍자식1 컴포넌트에서 상태 변경- defineEmits() 를 활용해서 emit 함수 정의하기- 상태를 변경할 자식 컴포넌트에서 먼저 defineEmits()로 emit 함수를 선언한다- 그리고 컴포넌트가 마운트 되면 mountain 기본값을 emit 해준다- 상태가 변경될 때마다 emit을 실행하기 위해 watch를 사용한다 MountainHeader.vue ..

📍목표- PNPM 패키지 매니저 사용해서 Next.js 프로젝트 만들기- Tailwind 사용 조건으로 ESLint, Prettier 빠르게 설치하기📍create-next-app- create-next-app으로 최신 Next.js 프로젝트 생성- pnpm 사용 npx create-next-app@latest [project-name] --use-pnpm 이후 터미널에서 이어지는 질문에서 ESLint 사용을 체크했다면 ESLint를 설치할 필요 없다 📍Prettier 설치- Prettier 및 Prettier와 ESLint와의 충돌을방지하는 플러그인과 익스텐션 설치- Prettier Tailwind 플러그인도 설치- ESLint Tailwind 플러그인도 설치 pnpm install -D prett..

Elements 탭Styles- 특정 DOM element에 적용되고 있는 스타일을 확인할 수 있다- 가장 상단의 element.style 에 입력하는 스타일이 우선 적용된다- 우선 적용되는 이유는 inline style로 적용되기 때문이다. 따라서 !important로 이미 적용된 스타일에 영향을 끼치지 않는다 (아래 사진 참조) - ahoy 클래스에서 red !important 로 최우선 효과로 지정했기 때문에, element.style 에서 background를 blue로 변경하려고 해도 취소선이 그어지고 color는 여전히 red로 유지된다 Computed- 최종적으로 적용되는 스타일 확인 가능 Event Listeners- element에 적용된 이벤트 리스너 확인 가능 Console 탭- re..

📍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..

📍창 관련새 창 열기: cmd + n시크릿 모드로 새 창 열기: cmd + chift + n창 최소화: cmd + m 📍탭 관련새 탭 열기: cmd + t이전에 닫은 탭을 닫은 순서대로 다시 열기: cmd + shift + t탭 이동: opt + cmd + N번째 탭으로 이동: cmd + 1 ~ 8마지막 탭으로 이동: cmd + 9뒤로 가기: cmd + 앞으로 가기: cmd + -> or ]탭 닫기: cmd + w 📍기타강력 새로고침: cmd + shift + r현재 페이지 북마크 저장: cmd + d