FEDev Story

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

참조에 의한 전달이 일어나는 3가지의 데이터 타입으로는 Array, Function, Object가 있다. 사실 이 3가지는 크게 보자면 전부 객체(Objects)로 볼 수 있다. 원시타입이 아닌 값이 할당된 변수들은 그 값으로 향하는 참조를 갖게 된다. 참조는 메모리에서의 객체의 위치를 가리키고 있다. 변수는 실제로 값을 가지고 있지 않다. 참조로 할당하기 객체와 같은 참조 타입의 값이 =과 같은 키워드를 이용하여 다른 변수로 복사될 때, 그 값의 주소는 실제로 복사된다. 객체는 값 대신 참조로 복사된다. var reference = [1]; var refCopy = reference; 각각의 변수는 이제 같은 배열로 향하는 레퍼런스를 갖는다. 이 말은 우리가 reference나 refCopy를 수정하..

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

https://goodmemory.tistory.com/117 [Javascript] CSS Selector를 통해 엘리먼트 구분하기 Element.matches() [자바스크립트 / Javascript] CSS Selector를 통해 엘리먼트 구분하기 Element.matches() 기본 형태 //CSS Selector를 통해 엘리먼트 구분하기 //해당 엘리먼트와 셀렉터가 같다면 true | 다르다면 false 반환 el.. goodmemory.tistory.com https://developer.mozilla.org/en-US/docs/Web/API/Element/matches Element.matches() - Web APIs | MDN The matches() method checks to see..

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://jae04099.tistory.com/41 [JavaScript] Class 자바스크립트의 class개념은 ECMA6에서 새로 도입된 개념이다. 그러나 마냥 새로운 개념은 아니다. Class로 커피를 만들어보자. Class란? class CoffeeMachine { constructor(coffee){ this.coffee = coffee; } }.. jae04099.tistory.com https://junwoo45.github.io/2019-08-14-class/ 자바스크립트 class 자바스크립트 클래스를 학습해봅니다. 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

https://velog.io/@suld2495/%EB%B9%84%EB%8F%99%EA%B8%B0-%EC%9E%91%EC%97%85%EC%9D%84-%EC%88%9C%EC%B0%A8%EB%8C%80%EB%A1%9C-%EC%8B%A4%ED%96%89%EC%8B%9C%ED%82%A4%EA%B8%B0 비동기 작업을 순차대로 실행시키기 비동기 작업을 동기적으로 순차대로 실행을 시켜야 할 때가 존재합니다.Promise.all 을 이용하면 배열에 담긴 비동기 작업을 배열의 순서대로 실행은 시켜주지만, 실행의 완료를 기다려 주지는 않 velog.io

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://blog.naver.com/lsj5170/222608951573 [Javascript][드림코딩 by 엘리] Array 배열 개념 (선언, 검색, 추가, 삭제) / APIs Array 배열 자료구조란? 비슷한 타입의 object를 모아놓은 것. Array란? 비슷한 종류의 데이터를 정해진 ... blog.naver.com

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://velog.io/@cothis/hashchange%EB%A5%BC-%EC%9D%B4%EC%9A%A9%ED%95%9C-router-%EB%A7%8C%EB%93%A4%EC%96%B4%EB%B3%B4%EA%B8%B0 hashchange를 이용한 router 만들어보기 브라우저에서 hashchange 이벤트를 이용해 아주 간단한 수준의 라우터를 만들어봤습니다. velog.io

https://velog.io/@codeamor/TIL-no.13-jQuery-%EB%A7%88%EC%9A%B0%EC%8A%A4-%ED%9C%A0-%EC%9D%B4%EB%B2%A4%ED%8A%B8 TIL no.13 - jQuery - 마우스 휠 이벤트 마우스 휠 이벤트 velog.io

https://negabaro.github.io/archive/js-isEmpty javascript의 null,undefined,empty 체크시 좋은 코딩방법 negabaro.github.io

https://bbaktaeho-95.tistory.com/37 [Javascript] 얕은 복사, 깊은 복사 (배열 복사, 객체 복사, shallow copy, deep copy, slice, JSON.parse, JSON.string 📚 복사 먼저 복사란, 원본과 모두 같은 내용으로 사본을 만드는 작업 원본은 따로 존재하고 사본도 따로 존재하게, 즉 원본과 사본은 내용은 같지만 서로 다르게 존재하고 있다는 뜻임 📗 얕 bbaktaeho-95.tistory.com

https://coffeeandcakeandnewjeong.tistory.com/84 getEventListeners로 등록된 이벤트리스너 확인하기 웹 개발에서 이벤트 리스너가 잘 해제되고 있는지 확인해야 하는 경우가 있다. 그럴 때 getEventListener를 사용하여 확인할 수 있다. getEventListeners(window) getEventListeners(document) 결과 { error: Arra.. coffeeandcakeandnewjeong.tistory.com

https://sogoagain.github.io/2020/04/29/%EC%8B%A4%EC%88%98%EB%85%B8%ED%8A%B8-JavaScript%EC%97%90%EC%84%9C-%EB%8F%99%EC%9D%BC%ED%95%9C-%EC%9D%B4%EB%B2%A4%ED%8A%B8-%EB%A6%AC%EC%8A%A4%EB%84%88%EB%8A%94-%EB%8B%A8-%ED%95%9C-%EB%B2%88%EB%A7%8C-%EB%93%B1%EB%A1%9D%ED%95%98%EC%9E%90/ [실수노트] JavaScript에서 동일한 이벤트 리스너는 단 한 번만 등록하자 · 기술을 기술하다 익명 함수와 이벤트 리스너 Word count: 614Reading time: 3 min  2020/04/29  Sh..

https://ko.javascript.info/event-delegation 이벤트 위임 ko.javascript.info https://joshua1988.github.io/web-development/javascript/event-propagation-delegation/ 이벤트 버블링, 이벤트 캡처 그리고 이벤트 위임까지 (기본) 이벤트 버블링, 이벤트 캡처링, 그리고 이벤트 위임까지 이벤트 전달 방식과 관련된 모든 것을 파헤쳐 봅니다. joshua1988.github.io https://pathas.tistory.com/213 JavaScript | Event Handling 이벤트 처리 Evnent Handler 이벤트 처리기 등록 방법 이벤트 주도형 프로그램(event driven progr..

Javascript에서 좌표를 나타내는 값인 다음 값들에 대해서 정리해 보겠습니다. 그리고, 마우스를 클릭했을 때 좌표값을 보여주는 코드도 작성해 보겠습니다. 1. screenX, screenY 2. pageX, pageY 3. clientX, clientY 4. offsetX, offsetY 1. screenX, screenY 사용자 모니터 화면을 기준으로 한 좌표를 표시합니다. 사용자 모니터의 왼쪽 상단 모서리가 (0, 0)이 됩니다. 2. pageX, pageY 전체 문서를 기준으로 한 좌표를 표시합니다. 위 그림과 같이, 만약 문서를 표현할 때 스크롤이 생긴다면, 특정 지점의 pageY 좌표값은 페이지가 스크롤 될때마다 변경 될 것입니다. 3. clientX, clientY 브라우저에서 사용자에게..

'use strict'; // Objects // one of the JavaScript's data types. // a collection of related data and/or functionality. // Nearly all objects in JavaScript are instances of Object // object = { key : value }; const obj1 = {}; // 'object literal' syntax const obj2 = new Object(); // 'object constructor' syntax function print(person) { console.log(person.name); console.log(person.age); } const ellie..

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

Array.from(element.parentNode.children).indexOf(element) [...element.parentNode.children].indexOf(element);