FEDev Story

https://blog.meeta.io/m/10 누구나 한 번쯤은 띄워본 JavaScript 에러 TOP 10. 안녕하세요 Meeta 매니저 아몬드🤴입니다. 오늘은 해외의 서비스 기술블로그에서 JavaScript와 관련된 재밌는 글이 있어서 직접 번역해봤습니다. JavaScript 개발자라면 흥미롭게 읽어보실 수 있을 blog.meeta.io

https://ttum.tistory.com/24?category=754442 JavaScript 코드 꿀팁들 얼마 전 유튜브에서 'JavaScript Pro Tips - Code This, NOT That' 영상을 보다가 새로 알게된 신기한 것들이 있어 정리하게 되었다. 1. console.log 출력하는 방법 console.log를 이용해 여러 가지 것들을 출력하.. ttum.tistory.com

https://stackoverflow.com/questions/9419263/how-to-play-audio How to play audio? I am making a game with HTML5 and JavaScript. How could I play game audio via JavaScript? stackoverflow.com https://developer.mozilla.org/en-US/docs/Web/API/HTMLAudioElement HTMLAudioElement - Web APIs | MDN The HTMLAudioElement interface provides access to the properties of elements, as well as methods to manipulat..

https://junwoo45.github.io/2020-01-29-javascript_performance/ 자바스크립트 성능 향상 방법 이 글은 Isha Jauhari의 How to improve JavaScript Performance를 번역한 글입니다. junwoo45.github.io

https://junwoo45.github.io/2020-07-28-chrome_devtools/ 시니어 프론트엔드 개발자처럼 크롬 개발자도구 사용하기 이 글은 bitfish의 Use Chrome DevTools Like a Senior Frontend Developer을 번역한 글입니다. junwoo45.github.io

https://junwoo45.github.io/2020-09-02-use_vscode_like_a_senior_developer/ 시니어 개발자처럼 VSCode 사용하기 이 글을 bitfish의 Use VSCode Like a Senior Developer을 번역한 글입니다. junwoo45.github.io

https://imagekit.io/blog/lazy-loading-images-complete-guide/ Lazy Loading Images – The Complete Guide Lazy loading images that are not in the viewport improves initial page load performance and user experience. This is an in-depth guide to everything about lazy loading of images including native lazy loading methods. imagekit.io

https://7942yongdae.tistory.com/41 Javascript - Date 날짜 형식 [yyyy-MM-dd] 이번에는 Javascript의 Date 객체가 가진 format 형식 지정과 toString에 대해 이야기해보려고 합니다. Javascript의 Date 객체는 날짜의 형식과 관련해 편리함 없이 불편한 기능들을 제공합니다. 기본적으로 7942yongdae.tistory.com

1. Material Theme - 테마 정하기 2. Marterial Icon Theme - 아이콘 테마, 아이콘이 조금 더 생동감 있게 바뀜 3. Prettier - Code formatter - 코드 포멧팅 - ctrl + 눌러서 setting 창으로 이동 4. Bracket Pari Colorizer - 괄호마다 코드에 색깔을 다르게 줌 5. Indent-rainbow - 들여쓰기 된 부분을 레인보우컬로로 하이라이트 표시 - 코드 읽을 때 도와줌 6. Auto Rename Tag - 앞에 태그를 바꾸면 뒤에 태그를 자동으로 바꿔줌 7. CSS Peek - html에서 css를 금방 찾게해줌 - html에서 커맨드나 컨트롤키를 누른 상태로 클릭하면 정의된 css파일로 이동하게 해줌. 8. HTML ..

https://material.io/resources/color/#!/?view.left=0&view.right=0 Color Tool - Material Design Create and share color palettes for your UI, and measure the accessibility of any color combination. material.io

https://m.blog.naver.com/skydoor2014/221667330746 [ video 태그 ] HTML5로 동영상 넣는 방법. 이 글 하나면 모든 고민 끝! 이 글을 보시고 계시는 분들은 동영상을 촬영할 때 어떤 기기로 촬영을 많이 하세요? 그렇죠! 대부분의 분... blog.naver.com

https://ossam5.tistory.com/155 [HTML5] 20강 playsinline - iOS비디오정책 - PC나 안드로이드에서 비디오태그를 볼때는 자동재생처리시 인라인으로 볼수 있지만, IOS인 아이폰이나 아이패드에서 보면 전체화면으로 처리됩니다. - 이번 강좌에서는 그것을 막는 속성인 [pla ossam5.tistory.com

https://codepedia.info/detect-browser-in-javascript How to detect browser in JavaScript [Chrome, Firefox, Safari, Opera, Edge ,IE] ? How to detect browser name in javascript, using navigator.userAgent detect firebox browser in javascript, detect chrome browser , detect IE browser, detect safari browser, detect opera browser, detect edge browser codepedia.info Approach 1: JavaScript code to detec..

https://meetrix.io/blog/general/hide-video-controls-completely.html How to hide HTML5 video controls completely A simple CSS trick to completely hide html5 video controls meetrix.io

https://blogpack.tistory.com/690 탑 스크롤 애니메이션 구현하기 세로로 긴 컨텐츠를 웹에 표시하거나 모바일 기기에서 긴 스크롤 화면을 스와이프로 스크롤 하는 경우 화면 스크롤의 번거로움을 피하기 위해 화면 최상단으로 이동할 수 있는 고정 링크를 제 blogpack.tistory.com

https://inswave.com/confluence/pages/viewpage.action?pageId=12386335 [기타] navigation.timing 객체를 이용한 페이지 로딩 속도 측정 - 웹스퀘어 기술지식DB - Confluence 개요 웹페이지 속도 이슈 등 이 발생 시, 속도 측정을 위해, 이전에는 var start = Date.now(); 등에 스크립트를 페이지 상단, 하단에 두어 페이지를 측정 했었다면, 웹의 성능을 조금 더 정확하게 측정 inswave.com

특정 엘리먼트로 스크롤을 천천히 이동시키는 방법, scrollIntoView smooth 웹사이트의 특정 영역으로 스크롤을 이동시키는 방법 중 하나인 scrollIntoView()에 대하여 알아봅니다.! [잠깐] 스크롤을 특정 엘리먼트로 이동시키는 방법은 뭐가 있을까?원하는 위치로 스크롤을 webisfree.com

https://webruden.tistory.com/277 overscroll-behavior 속성을 활용해서 스크롤 체이닝 현상 막는 방법 웹에서 스크롤 작업을 하다보면 항상 마주치는 문제가 있습니다. 바로 스크롤 체이닝(scroll chaining) 입니다. 스크롤 체이닝이라고 표현하면 해당 이슈가 뭔지 모르실 수 있으니 아래 간단한 예제 webruden.tistory.com

브라우저 주소창에 hash값을 id로 페이지내에서 이동해야 할 경우가 있다. http://www.test.co.kr/list/list.html#d_20200330 window.location.hash로 hash값을 얻을 수 있다. var hash = window.location.hash;//#d_20200330 아래는 window.location.hash로 얻은 hash값을 moveToHash()함수에 전달하여 호출함으로써 페이지내에서 해당 hash값을 id로 하는 div로 이동하는 코드이다. var hash = window.location.hash; function moveToHash(hash){ if(hash.length > 0){ var selector = document.querySelector(..

Android 기기에서 설정-개발자도구에서 USB 디버깅을 활성화 시킨다. 크롬에서 chrome://inspect/#devices로 접속한다. 위의 캡쳐처럼 기기정보가 뜨지 않을 경우엔 adb가 설치된 폴더에서 서버를 실행시켜준다. inspect 버튼을 누르면 Android 디바이스에 켜둔 브라우저나 앱을 inspect할 수 있다. IOS 설정-Safari-고급에서 웹속성 활성화 시키기 Mac의 Safari에서 환경설정-고급-메뉴 막대에서 개발자용 메뉴 보기 활성화 시키기 개발자용-기기이름-inspect하고 싶은 페이지나 앱을 클릭 IOS 디바이스에 켜둔 브라우저나 앱을 inspect할 수 있다. 출처: https://gguldh.tistory.com/40 [gguldiary]

input[type=text]가 아래와 같이 읽기전용(readonly)으로 설정이 되어 있더라도 focus가 들어가 커서가 깜박거리는 현상이 있다. focus를 제거하고 싶다면 아래와 같이 focus이벤트가 발생하면 blur()함수를 호출한다.

출처: https://reiphiel.tistory.com/entry/href-javascript-void-or-hash 웹 페이지를 작성하면 A(anchor)태그에 javascript 의 function을 통한 동작을 수행할 경우에 href 속성에 javascript:void(0)와 #가 작성된 코드를 만나게 됩니다. 이 경우에 과연 어떤것을 쓰는것이 맞는 것인가에 대한 궁금증이 생겨 비교해보았습니다. javascript:void(0) javascript:를 사용할 경우 해당 구문이 스크립트로 평가되어 실행되어 도큐멘트의 내용으로 표시됩니다. 클릭 위와 같이 작성된 A태그가 있다면 클릭할 경우 화면의 내용이 테스트입니다. 으로 전환됩니다. 클릭 void(0)를 사용할 경우에는 스크립트의 평가 결과로 u..

이미지가 없을 시 X박을 대처하기 위한 방법… 대체할 이미지를 지정하는 속성 onError 조금 많이 찾아보았더니. 의외로 간단하다 ;

*기본적으로 라디오는 좌우 화살표방향키로, 체크박스는 탭키와 스페이스바로 이동한다. input[type=radio] + label , input[type=checkbox] + label {display:inline-block;line-height:0;vertical-align:middle} input[type=radio], input[type=checkbox] {border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px} input[type=radio] + label {position:relative;display:inline-block;padding:0 35px 0 30px;..

페이지 라이프사이클은 크게 3가지로 분류된다. 로드 시점과 관련된 이벤트로써, 발생하는 시점은 다음과 같다. DOMContentLoaded - HTML 이 모두 로드되고, DOM 트리가 완성되었지만, 외부 리소스(img etc) 가 아직 로드되어지지 않았을 때 load - 브라우저에 모든 리소스(img, style, script, etc) 가 로드되었을 때 beforeunload / unload - 페이지를 떠날 때 위 내용만으로도 DOMContentLoaded 가 load 보다 빨리 발생한다는 것을 알 수 있다. (unload 에 대한 것들은 사용빈도가 낮기 때문에 생략하겠다.) 각 이벤트에 대한 유용한 경우는 다음과 같다. DOMContentLoaded - DOM 이 준비 상태이기 때문에, DOM 노..

HTML 구조를 다루는 DOM 파서 CSS 구조를 다루는 CSSOM 파서 이 둘의 작업이 완료되면 렌더링 트리를 만들어 렌더링이 시작되고 페인팅되어 브라우저에서 우리가 볼 수 있게 된다. 문제는 이 파서들의 작업을 멈추게 하는 경우가 있다는 것. 크롬 개발자도구의 네트워크 탭 하단을 보면 DOMContentLoaded 항목의 속도가 표시되어 있는데 의미하는 바는 다음과 같다. HTML 다운로드 시간 + HTML DOM 빌드 시간 렌더링을 빠르게 구축한다는 것은 DOMContentLoaded 에 해당하는 시간을 줄이고 파서 차단을 최소화 시킨다는 말이다. HTML, CSS, JS 상호작용 메커니즘 서버에 http 요청시 서버는 HTML 을 응답하는데 이 과정에는 우리가 인지하지 못하는 컴퓨터간의 효율적인 ..

문제점 Swiper.js를 사용하여 슬라이드 적용시 좌우로 무한루프를 적용하기 위해 아래와 같이 옵션을 설정할 수 있다. {loop:true] 문제는 무한 루프를 적용하기 위해 Swiper.js는 DOM을 좌우로 복사하게 된다. 즉 카테고리가 4개라면 다음과 같이 DOM을 복사한다. 카테고리 4개 * 3 = 12개의 DOM 생성 복사된 DOM 자체는 무겁지 않으나 로딩시 데이트를 한번에 불러와 복사된 DOM에 적용하는 과정에서 성능 저하를 가져오게 된다. 카테고리가 많아질 수록 성능이 더 저하될 수 밖에 없는 구조이다. 스킨케어 메이크업 바디/헤어/향수 가방/지갑 해결책 모든 데이터를 한번에 불러오지 않도록 Ajax를 적용하여 현재 활성화된 탭에 대해서만 데이터를 불러온 후 슬라이드 될 때마다 동적으로 ..

앞서 유사한 기능의 플러그인인 Headroom.js 에 대하여 살펴보았는데, 구형 IE에 대한 크로스브라우징에 어려움을 겪을 수 있습니다. 이에 원리는 유사하나 대상 요소가 명확하게 한정된 요소일때 간단히 구현할 수 있는 스니펫을 소개합니다.DOC Hide header on scroll down, show on scroll upDEMO Hide Header on on scroll down고정된 헤더(네비게이션) 사용 불편함 인지많은 웹사이트에서 네비게이션 탐색에 도움을 주기위해 상단의 헤더(네비게이션을 포함한)를 CSS의 포지셔닝을 사용해 position: fixed 와 같이 고정해 두곤 한다. 헤더 부분은 대부분 상호(브랜드)를 포함하고 네비게이션을 포함하기에 고정된 헤더에 높이가 긴 콘텐츠를 포함하고..

안녕하세요. 이번 시간에는 HTML 엔티티에 대해서 알아보겠습니다!혹시 HTML 소스를 보다가 나 를 보신 적이 있나요? 이 문자들은 HTML 파일이 깨져서 나타나는 문자가 아닙니다. 바로 HTML 엔티티입니다.HTML에서 태그를 표현할 때 다음과 같이 하곤 하죠.zero만약 태그 안의 내용물에

HTML 예약 문자나 특수문자를 쓸때 사용하는 엔티티 코드이다.http://entitycode.com/ FeaturedCommonCurrencyMathDirectionMiscAboutCharacterEntity NameEntity NumberDescriptionWhy Is This Featured?©©©CopyrightAlmost Every Website Uses The Copyright Symbol||Vertical BarThe Vertical Bar Symbol Is Used To Separate Menu Items Or Navigation Links···Medium List DotSimilar To The Vertical Bar, The Medium List Dot Is Another Option ..