You Can Become A
늦게 시작해도 누구든지 노력하면 개발자가 될수 있어요 !
🌐 개발자 도구에서 실시간으로 변수 값 감시하기
실시간으로 변수 값 감시하기 보통 변수 값의 변동 추이를 감시하기 위해서는 디버깅을 통해 가능하다. 다만 디버깅은 스크립트 실행을 단계별로 끊어 중지시켜 실행하기 때문에 아주 빈번하게 변동하는 변수값을 추적하기에는 약간 번거롭다. 따라서 만일 간단한 단일 변수의 변동을 추적한다고 하면, 개발자 도구의 콘솔탭에서 live expressoin 기능을 이용하면 된다. 예를 들어 다음과 같은 value 라는 변수의 값의 변동 추이를 추적하고 싶다면, 상단의 👁️ 모양의 버튼을 누르고, 입력란에 변수명을 기재해주면 실시간 추적이 된다. let value = 0; setInterval(() => { value++; }); 또한 여러개의 변수명을 등록하면 여러개의 변수를 추적 가능하다. 스코프 내 변수 추적하기 다만..
🌐 크롬 브라우저 화면 분할 방법
브라우저 화면 분할 화면 분할 기능은 여러 프로그램을 동시에 띄워서 작업하여 생산성을 올리는 많이 애용되는 기능이다. 구글링해서 웹문서를 찾는 일이 빈번해지면서 하나의 브라우저 창에서 탭을 이리저리 이동하는 것이 불편해서 찾아보다 괜찮은 크로미움 익스텐션을 찾아 소개해본다. 크롬 화면 분할이라고 거창하게 써놓았지만, 사실 그냥 브라우저창 하나 생성해서 분할하는 단순한 기능이다. 그래도 직접 손으로 일일히 가로는 줄이고 세로는 늘린다음 배치하는 이런 작업을 하나하나 창을 조정하는 것보다, 클릭 한번으로 자동으로 비율을 조정해줘서 편하게 화면 분할을 할 수 있다는 점은 괜찮다. Tab Resize Tab Resize - split screen layouts Split Screen made easy. Resi..
🌐 크롬 브라우저 유용한 단축키 모음표
자주 사용하는 크롬 단축키 가장 인기있는 브라우저 크롬. 그러다 보니 무지막지한 수의 탭을 사용하게 되는데, 단축키로 탭 이동을 편리하게 하자. 요즘 많이 쓰고 있는 단축키는 다음과 같다. 브라우저 탭 단축키 단축키 설명 Ctrl + 1~8 첫번째에서 여덟번째 탭으로 이동 (8번까지만 가능) Ctrl + 9 맨 오른쪽 탭으로 이동 Ctrl + Tab 오른쪽으로 탭이동 Ctrl + Shift + Tab 왼쪽으로 탭이동 Ctrl + T 새 탭 열기 Ctrl + W / Ctrl + F4 탭 닫기. Ctrl + Shift + T 마지막으로 닫았던 탭을 복원 (크롬은 최대 10개까지 기억한다고 함) Ctrl + Shift + W 모든 크롬 닫기 브라우저 창 단축키 단축키 설명 Ctrl + N 새 창 열기 Ctrl..
🔍 크롬으로 자바스크립트 디버깅 하기
디버깅(Debugging) 디버깅(Debugging)은 컴퓨터에서 발생한 오류를 찾기 위해 소스 코드를 한 줄씩 따라가면서 변수값의 변화를 검사하는 과정입니다. 중단점 (breakpoint) 기능 단위로 구현하는 경우가 많으므로 하나의 기능이 끝날 때마다 여러가지 테스트, 디버깅이 필요할 수 있습니다. 여기서 중단점(Breakpoint)은 스크립트의 동작을 잠시 멈추도록하여 디버깅이 가능하게 해줍니다. 이때 원하는 위치에 중단점을 설정하여야 하는데 중단점을 추가하는 방법은 아래와 같이 두 가지 방법을 사용합니다. i. 작성한 코드의 필요한 부분에 debugger 키워드를 추가하기 코드에 직접 debugger;라는 코드를 추가하는 방법입니다. 개발을 하는 도중 필요하다고 판단 즉시 코드를 추가하므로..
🧩 웹 개발에 도움되는 크롬 확장 프로그램 모음
웹 개발에 도움되는 크롬 확장 프로그램 웹 개발을 하는데 있어서, 쉽게 엘리먼트 정보를 취들할 수 있는 몇몇 크롬 확장 프로그램을 소개해 본다. 설치도 간단하고 사용도 간단하다. 이를 이용하면 개발자 도구를 들락날락 거릴 필요없이 고퀄리티의 다양한 정보들을 얻을 수 있을 것이다. ColorZila ColorZilla Advanced Eyedropper, Color Picker, Gradient Generator and other colorful goodies chrome.google.com 확장프로그램에서 ColorZilla를 선택하고 Page Color Picker Active를 선택합니다. Page Color Picker Active 를 선택하면, 스포이드 모양이 나오고, 스포이드 모양을 추출하고자 ..
🔍 크롬 개발자 도구 (F12) 활용법 💯 총정리
크롬 개발자도구 구글에서 만든 웹 브라우저인 크롬에는 개발을 도와주는 다양한 도구가 기본적으로 제공됩니다. 이를 개발자 도구라고 합니다. 개발자 도구를 이용하면 HTML, CSS, JavaScript의 생산성을 극대화할 수 있습니다. 언뜻 보면 개발자를 위한 도구인 것 같지만, 글자 크기, 색, 간격 등 정확한 값을 확인해야 하는 디자이너에게도 없어서는 안 될 매우 중요한 도구입니다. 개발자모드 진입 크롬 개발자모드로 진입하는 방법은 간단하게 2가지입니다. ➊ 검수하고자 하는 웹사이트에 접속해서 우클릭, 검사메뉴로 진입합니다. ➋ 단축키를 사용합니다. 맥은 , 윈도우는 나 를 누르면 해당 모드로 진입합니다. F12를 눌러도 진입됩니다. 개발자 도구 dark 테마 매일 같은 개발자 도구를 쳐다보는데 ..
