Tips (4) 썸네일형 리스트형 개발자 모드 Debug Tips 입사한 지 어느덧 4개월이라는 시간이 흘렀습니다! 대부분의 주요한 업무는 유지 보수 였는데요! 그 과정 가운데 디버깅하는 팁들을 공유하고자 합니다 1. Set Break Points by CallBack일반적으로 Ctrl + P, Cmd + P 를 통해 특정 자바스크립트 파일을 열어 중단 포인트를 설정합니다. 하지만 일일이 중단 포인트를 찾는 것이 어려운 상황들은 빈번히 발생하기 마련입니다. 예를 들어 특정 API가 여러 DOM 요소에서 사용된다고 할 때 스크립트 상에서 일일이 설정한다는 것은 쉬운 일이 아닙니다. 이럴 때 사용할 수 있는 다양한 브레이크 포인트들을 알아봅시다. 1. DOM BreakPointElement 패널에서 특정 DOM의 변화를 보고 싶을 때 사용하는 기능입니다. 특정 요소를 우 .. VSCode, Undo Redo UndoCtrl + z Redo (Undo를 다시 Undo)Ctrl + y html, css, javascript 정적파일 생성 쉘 스크립트 본격적인 JS 공부와 프로젝트들을 진행하며 매 번 세가지 파일을 만드는 것이 귀찮았습니다. 매 번 동일한 형식의 파일을 만드는걸 자동화할 필요성을 느꼈고 실행에 옮겼습니다. 참고로 환경은 macOS(Unix) 기준입니다 1. 쉘 스크립트 #!/bin/bash echo " Hello, World! " > index.html touch script.js touch styles.css echo "Files created: index.html, script.js, styles.css" 빈 css, js 파일을 만들고 해당하는 css, js파일과 연결된 index.html 파일을 만드는 쉘 스크립트입니다. 2. PATH 설정 해당하는 코드를 가진 yourScript.sh 파일을 /usr/local/bin 경로 폴.. Live Server 설치 및 실행 1. VSCode Extention 이동 2. Live Server 검색 및 설치 3. Go Live Click 실행 html, CSS, JS 코드 수정시 새로고침없이 반영가능합니다. 이전 1 다음
