본문 바로가기

2020/067

JavaScript 기술을 향상시키는 12 가지 개념 요즘 morioh.com 블로그에서 매우 유용한 글들을 많이 찾아볼 수 있어서 좋습니다. 포스팅을 한번 할 때마다 유용한 지식들이 습득되는 것 같아서 더 좋구요. 이번에는 javascript 기술을 향상시키는 12가지 개념에 대해서 알아보도록 합시다. 자바스크립트는 깊이 들어갈 수록 복잡한 언어입니다. 단순히 자바스크립트 개발자가 된다는 것은 자바스크립트 언어를 집요하게 기본 동작 원리를 알아가는 것이 필수 덕목이라고 생각합니다. 하루빨리 레거시한 코드와 기본 동작 원리를 깨우치지 못한 상태의 코드들을 개선하고 싶습니다. 그리고 jquery의 종말과 함께 바닐라 스크립트로 구성할 수 있는 모든 종류의 앱들을 환영하고 받아들일 준비가 되어 있어야 할 것입니다. 다양한 팁들을 지속적으로 업데이트 하고 있는 .. 2020. 6. 21.
CSS 가상 선택자 :is() 와 :where() 수 많은 가상 선택자들이 있지만 아직까지 브라우저 환경에서 일부 지원하지 않는 현상 때문에 많이 사용해오지 못하고 있습니다. 점점 많은 css 속성과 환경에 대한 스타일링이 중요시되고 있는 사실은 분명합니다. 이제 가상 선택자 :is()와 :where()가 Safari (Tech Preview 106) 및 Firefox (버전 78)의 미리보기 버전에서 지원됩니다. Chrome의 구현은 여전히 언제 지원될지는 모릅니다. can i use에서 보시다시피 여전히 먼 훗날이 될 것 같은 선택자이지만 간단히 알아보고 가시죠. :is() :is()를 사용하면 반복을 획기적으로 줄일 수 있습니다. /* BEFORE */ .embed .save-button:hover, .attachment .save-button:h.. 2020. 6. 13.
Chrome 콘솔 숨은 기능 크롬 콘솔 숨은 기능들을 살펴봅시다. Chrome DevTools의 콘솔 유틸리티는 Chrome 브라우저에서 가장 많이 사용되는 가장 유용한 개발 도구 중 하나입니다. 웹 페이지에 추가 기능을 추가하는 소수의 기능을 제공합니다. 웹 페이지에서 디버깅, 프로파일 링 및 모니터링 작업을 도와줍니다. 이 게시물에서는 모두 Chrome 콘솔이 제공하는 매우 유용하지만 알려지지 않은 기능 중 일부를 검토합니다. 1.monitor 이 함수는 함수가 언제 호출되는지 알기 위해 함수를 모니터하는 데 사용됩니다. function traceFunc (arg) { } monitor(traceFunc);traceFunc 함수는 모니터 할 인수로 전달됩니다. 이제 traceFunc가 호출 될 때마다 모니터는 함수가 호출되었음을.. 2020. 6. 13.