심지(心地)는 원래 요란함이 없건마는...

vscode 에서 *.html 문서 script 태그 내에서 자주 사용하는 자바스크립트 구문을 스니펫 snippet 으로 저장하여 사용하면 편리하다. "메뉴>파일>기본 설정>사용자 코드 조각" 에서 javascript.json(JavaScript) 선택 { "console log 스니펫": { "prefix": "log", "body": [ "console.log('$1');", "$2" ], "description": "console..

일반적으로 웹 문서 body 태그의 끝나는 /body 바로 위에 script 문을 작성하면 웹문서가 로딩되는 시점을 고민할 필요가 없다. 왜냐하면 모든 DOM 트리가 완성되고 모든 외부 리소스(이미지 등) 까지 로드된 후에 script 가 실행되기 때문이다. 그러나 빠른 반응을 위해 DOM 트리는 완성되고 외부 ..

JavaScript -> 동적 타입 TypeScript -> 정적 타입 JavaScript 는 코드를 실행하는 시점에 인터프리터가 변수의 데이터 타입을 지정하는 동적 타입 언어다. 기존의 C, Delphi 등 전통적인 언어를 다루는 개발자는 이런 특징을 JavaScript의 언어적 약점으로 생각한다. TypeScript 는 정적 타입을 지원하므..

콜백(callback) 개념을 익히고 나니 콜백지옥으로 인한 코드 가독성이 너무 떨어진다. 웹의 특성이라 어쩔수 없이 비동기 처리해야 하는 상황이라 이해해야한다. C, Delphi 등에 너무 익숙한 개발자들은 처음 이해하는데 고생이 많을 것 같다. 그나마 Promise (프라미스) 가 코드 가독성이 좋다고..

논리연산자 는 다음과 같다. &&(and연산자), ||(or연산자), ! (부정연산자) 자바스크립트에서 거짓인 값 은 다음과 같다. '' 0 false NaN undefined null document.all 이것 이외에는 모두 참인 값이다. 즉 let a='' if (a) // 는 거짓(false) 이다. 기본값(Default) 설정할 때 사용하는 방법 let a = b || c || d // 기본값을..

css 클래스 선택자 이름에 대시("-") 기호 를 사용하여 클래스명을 작성하는 것이 일반적이다. nav-button, sr-only-focus, bs-docs-nav 등.. 그런데 vscode 에서 해당 클래스명을 마우스 더블클릭으로 선택하려면 대시("-")기호로 인해 클래스명 전체가 선택되지 않아 불편했다. 대시기호를 단어 구분자로 인식하기 때문이다. 해결 방법은 설정에서 "editor.wordSeparators" 에서 대시기호를 빼주면 된다. (변경전) (변경후) /* 기타 유용한 단축키 */ 커서가 위치한 같은 단어 전체 선택: Ctrl +F2 커서가 위치한 같은 단어 반복 선택: Ctrl + D 줄 복사: 커서 위치에서 (선택된 것이 없는) Ctrl + C 줄 잘라내기: 커서 위치에서 (선택된 ..

잘 정리된 웹팩이란? http://jusungpark.tistory.com/52 https://www.zerocho.com/category/Webpack/post/58aa916d745ca90018e5301d npm i -g webpack webpack-cli && npm i -D webpack webpack-cli 명령프롬프트에서 npm으로 위와 같이 설치한다. 그리고 개발 환경으로도 설치한다. webpack4 부터는 webpack-cli를 같이 설치해야 커맨드라인에 web..

123456789<script>if( !!window.applicationCache ) { alert("현재 브라우저는 어플리케이션 캐시를 지원합니다")}else{ alert("현재 브라우저는 어플리케이션 캐시를 지원하지 않습니다")} </script>Colored by Color Scriptercs

vscode 에서 줄단위 주석 단축키 "ctrl + /" 블록단위 주석 "shift+alt + a" 는 파일 확장자에 따라 적절하게 변환된다. *.js 파일에서 "//" 와 "/* ~ */" *.css 파일에서 "/* ~ */" *.html 파일에서는 태그를 주석처리 할때는 "<!-- ~ -->" style 내에서는 "/* ~ */" script 내에서는 "//" 와 "/* ~ */" 그런데 *.ejs 파일..

1234567891011121314151617// $(function() 와 $(document).ready(function() 는 같은 의미// $(function() 이 단축형으로 html의 head태그 사이에 script를 작성시 // DOM이 준비되었을 때 실행된다. // script를 </body> 태그에 바로 위에 작성할 때는 필요없다. <script> $(function () { // }); $(document).ready(function () { // }); &..