개발 도구 (7) 썸네일형 리스트형 스마트폰(안드로이드) 크롬 디버깅 방법 1. 안드로이드 개발자 옵션을 활성화시킨다. https://comeinsidebox.com/enable-galaxy-developer-options-and-debugging/ 2. 설정 > 개발자 옵션에서 USB 디버깅을 활성화시킨다. 3. 컴퓨터에서 크롬 브라우저의 주소 인풋에 다음을 입력하고 컴퓨터와 스마트폰을 연결한다. chrome://inspect 아래와 같은 창이 나타난다. 위의 빨강과 달리 스마트폰의 크롬에서 보고 있는 페이지 리스트가 안 나타나고 다음과 같은 메시지가 나타난다면 Pending authentication: please accept debugging session on the device. 개발자 옵션 > USB 디버깅 switch를 껐다 켜보자. 4. 위의 빨강에서 디버깅 하기.. 맥에서 작업한 웹앱을 윈도우 크롬에서 테스트하는 방법 같은 크롬이더라도 윈도우와 맥에 따라 달라지는 게 있어서 종종 윈도우 크롬이나 엣지 등에서 작업한 웹앱이 제대로 작동하는지 테스트 해야 하는 경우가 있다. 이런 때 무식하게 윈도우에 git bash를 설치하고 git hub에서 클론한 뒤 npm install로 똑같이 만든 다음 테스트할 수도 있지만 굳이 윈도우에 모든 것을 설치할 필요 없이 작업하고 있는 맥을 서버로 두고 윈도우 pc 등에서 접속해 테스트하는 방법이 있다. cra(create-react-app)보다 더 좋은 것 같은 vite를 이용해서 리액트 앱을 설치하고 (cra로 해도 상관 없음) https://vitejs.dev/guide/#scaffolding-your-first-vite-project yarn create vite 생성된 프로젝.. Visual Studio Code 연두색 테마 개인적으로 Visual Studio Code에서 칼라 테마를 다크 모드로 하기 보다는 밝은 색 테마를 쓰고 모니터의 밝기를 어둡게 설정한다. 이렇게 하는 것이 눈의 피로도가 덜한 것 같다. 밝은 색 테마 중 녹색 계열이 없어 커스텀을 해봤다. 설정에서 color customizations을 검색하고 settings.json에 들어가 editor.tabSize 속성이 있는 JSON 객체에 아래의 값을 넣어주자. "workbench.colorTheme": "Default Light+", "workbench.colorCustomizations": { "activityBar.background": "#162e1a", // left end "breadcrumb.background": "#d0e0cf", // to.. 웹 개발에 필요한 사이트 모음 Image 이미지 다운로드 unsplash.com svgbackgrounds.com 아이콘 다운로드 flaticon.com iconmonstr.com 랜덤 이미지 picsum.photos CSS Sprites cssspritestool.com SVG Sprites svgsprit.es Video 동영상 다운로드 pexels.com CSS 예제 CSS 다양한 도형 예제 css-tricks.com/the-shapes-of-css/ box-shadow 예제 getcssscan.com/css-box-shadow-examples gradient 예제 colorzilla.com/gradient-editor Color 색 조합 color.adobe.com/ko/create/color-wheel Animation CS.. 비쥬얼 스튜디오 코드를 터미널에서 여는 명령어 비쥬얼 스튜디오를 설치하고 터미널에서 code .을 입력하면 VSCode가 현재 디렉토리를 열어준다. 그런데 처음에는 code라는 명령어가 없다는 오류 메시지가 뜬다. 이를 해결하기 위해서는 vim으로 ~/.zshrc를 열고 제일 아래에 다음을 저장해야 한다. export PATH="$PATH:/Applications/Visual Studio Code.app/Contents/Resources/app/bin" 맥 카탈리나 이상 버전인 경우에 그렇다. 이후 비쥬얼 스튜디오에서 command + shift + p 키를 누르고 shell command를 입력하면 나타나는 shell command install을 선택해주면 컴퓨터를 껐다가 켜더라도 code . 명령어로 비쥬얼 스튜디오를 열 수 있다. 참고 : s.. 크롬 확장 프로그램 Color Picker - 웹 페이지에서 색 추출하기 Selected Color를 클릭하고 원하는 영역에 마우스를 가져다 놓고 색을 확인하고 클릭하면 색상의 코드를 알 수 있다. https://chrome.google.com/webstore/detail/color-picker/gpldannlkkicofjolkffchkpbcpioecc?hl=ko Visual Studio Code 유용한 단축키 command + B : 사이드바를 숨긴다. ctrl + ` : 터미널 탭을 보여준다. (한/A) command + / : 코드를 주석처리한다. option + ↑, ↓ : 코드를 위, 아래로 움직인다. option + shift + ↑, ↓ : 코드를 위, 아래로 복사한다. 다중 커서 command + D : 커서를 특정 단어에 위치시키면 누를 때마다 같은 단어에 새로운 커서가 생긴다. option + 클릭 : 클릭하는 곳에 커서를 하나 더 생성한다. option + shift + i : 선택한 영역의 모든 줄에 커서가 생긴다. shift + option + 마우스 드래그 : 똑같은 너비로 모든 줄을 선택한다. https://youtu.be/Wn7j5dfbJF4 이전 1 다음
