들숨에 건강! 날숨에 재력!

이전 까지는 모두 미디어 쿼리로 구분했었는데 코딩하다보면 데스크탑일때와 모바일/태블릿일 때 터치나 hover인 경우에 다르게 적용해줘야 하는 부분들이 생긴다! 그래서 검색하다 이 방법을 알게되었다!! 너무 고맙게도 설명을 잘해주셔서 보고 잘썼다..! Javascript - 디바이스 구분하기 [Mobile, PC] 이번에는 Javascript를 통해 디바이스를 확인하는 방법을 알아보겠습니다. 일반적으로 디바이스를 구분하기 위해서는 브라우저가 가지고 있는 navigator.userAgent를 사용합니다. 여기서 에이전트 7942yongdae.tistory.com

처음엔 시간을 다룬다고 신났지만.. 비동기의 어려움을 알게되면서 마구쓰기는 무서워진 친구.. setTimeout() 잘쓰게 되는 날이 빨리오면 좋겠다. 딜레이를 줘야할 상황이 있어서 사용했다. https://developer.mozilla.org/ko/docs/Web/API/setTimeout setTimeout() - Web API | MDN 전역 setTimeout() 메서드는 만료된 후 함수나 지정한 코드 조각을 실행하는 타이머를 설정합니다. developer.mozilla.org

배열을 이용해서 배열만들기를 for문으로 해보았다. foreach로 가능하지 않을까 했는데 안될거같아서 for문으로했는데 이 글적다가 foreach로 가능한 방법이 생각났다. 간단하게 코딩 상황설명 : 아래처럼 .item을 가진 div들중에 .option을 포함하는 .item만 모은 배열을 만들고 싶었는데 코드에 이미 .option를 가진 div리스트의 배열이 있어서 그 배열을 사용해서 .option을 포함하는 .item 리스트 배열을 만들기위해 for문을 썻다. for문으로 배열만들기 let optionList = document.querySelectorAll('.option'); let itemList = []; for(let i = 0; i { itemList[i] = element.closest(..

아무래도 퍼블리싱 하다보면 DOM을 찾고 가져오거나 지우거나 추가하거나 입맛대로 다루어야하는데 그때마다 자주 찾게되서 그런 녀석들 정리! 내가 편하려고!! DOM에서 앨리먼트 찾을때 자주쓰는 방법들 더보기 아이디/클래스를 가진 앨리먼트 찾기 document.querySelector('여기에 클래스나 아이디, 앨리먼트를 입력'); document.querySelectorAll('여기에 클래스나 아이디, 앨리먼트를 입력'); querySelectorAll을하면 저 조건의 요소들을 배열로 만드는데.. 한번씩 그사실을 까먹고 하나로 생각하고 작업을 해버려서 왜 찾을수 없다고 하지? 하면서 실수를 한다ㅠ 배열은 하나씩 가져와서 작업해야하는걸 잊지말자ㅠ 부모, 자식 찾기 부모, 자식, 형제 찾기는 이분글을 보는게 ..

[JavaScript] 이벤트 캡쳐링, 이벤트 버블링 개념, 방지하는 방법 HTML 요소에서 이벤트가 발생하면 해당 요소를 포함한 모든 조상 요소에 이벤트를 전달한다. 왜 전달하는지 알아보고 이벤트가 전파되는 과정을 설명한다. velog.io button만 클릭이 되고 body에는 이벤트가 전달되지 않기를 바래서 버블링 막는것을 찾아보았다. event.stopPropagation(); 이 코드를 입력하면, 그 요소에 등록된 이벤트리스너는 실행되지만 버블링되지 않아서 원하는대로 동작하였다!

https://developer.mozilla.org/ko/docs/Web/Events 이벤트 참조 | MDN DOM 이벤트는 발생한 흥미로운 것을 코드에 알리기 위해 전달됩니다. 각 이벤트는 Event 인터페이스를 기반으로한 객체에 의해 표현되며 발생한 것에 대한 부가적인 정보를 얻는데 사용되는 추가 developer.mozilla.org 진작에 정리된거 있는줄 알았으면.. 매번 블로그 뒤지고 다니지 않았을텐데ㅠㅋㅋㅋㅋㅋ

https://developer.mozilla.org/en-US/docs/Web/API/DOMTokenList/contains DOMTokenList.contains() - Web APIs | MDN The contains() method of the DOMTokenList interface returns a boolean value — true if the underlying list contains the given token, otherwise false. developer.mozilla.org 위는 contains()에 대한 설명 아래는 classList에서 contains()를 사용하는 것 볼 수 있다. https://developer.mozilla.org/ko/docs/Web/API/Eleme..

"CSV파일을 JS에서 가져오는 방법"을 찾게된 이유 : 공공데이터 포털 국가에서 보유하고 있는 다양한 데이터를『공공데이터의 제공 및 이용 활성화에 관한 법률(제11956호)』에 따라 개방하여 국민들이 보다 쉽고 용이하게 공유•활용할 수 있도록 공공데이터(Datase www.data.go.kr 대표님이 공공데이터 사이트를 보여주시면서 이 사이트에 있는 데이터를 쓸모있게 시각화해보는것도 생각해봐라. 고 해서 아니..! 이런 데이터가 그냥 받을 수 있다니.. 그러고 한번쯤은 해보고싶은 일이라 봤는데 CSV파일이나 엑셀로 주는데 이걸 어떻게 받아서 내가 가공해서 쓸수있는지 궁금해서 검색해봤다.. '가슴속3천원'이라는 어플처럼 그런 귀엽고 쓸모있는 걸 나도 만들수있다..?? 조건: JSON을 쓸줄알아야함.. 우..

대표님이 내 개인사이트를 혼자 만들어보라고 react와 node.js는 어떠냐고해서 우선 둘에 대해 알아보았다!! js 공부먼저해야지 하고 미뤄두던 것인데 대표님이 나는 컴퓨터쪽 전공지식도없으니 책보고 정석공부하는것보단 두루두루 하면서 경험을 쌓아보는걸 추천해서 js책만 보려고했는데 그러지않고 다른공부도 시작해보기로했다! 바쁜일 끝나고 내시간 생겨서 너무좋아ㅠ 윗글보단 아랫글이 설명이 더 쉬움. 둘 다 읽고 이해하기 좋았음. React와 Node.js의 관계 Back-end (java + springboot) + Front-end (react) 쪽을 공부하면서, Node.js란 내게 단순히 React를 사용하게 하는 중간 매개체의 역할로 밖에 인식되지 않았다. 오늘은 이 Node.js란 놈이 무엇인지 살..

여태껏은 내가 만든 DOM구조에서 내가 원하는 앨리먼트를 가져왔기때문에 부모를 가져오면 자식은 당연히 있었는데.. 내가 만든게아니라 워드프레스 플러그인으로인해 만들어진 구조는 업데이트 이후 바뀔 수 도 있으니까 자식까지 존재 여부를 확인해야하는지가 고민이 되었다! 1. 어느 선까지 검사하나? 이건 아직 모르겠다.. 항상 검사할것같다. 2. 검사시 앨리먼트가 존재하지않을때 나오는 결과 모음 querySelector 존재하지 않을떄 결과 : null Document.querySelector() - Web API | MDN Document.querySelector()는 제공한 선택자 또는 선택자 뭉치와 일치하는 문서 내 첫 번째 Element를 반환합니다. 일치하는 요소가 없으면 null을 반환합니다. dev..

https://jaenjoy.tistory.com/23 프레임워크(Framework)와 라이브러리(Library)의 차이점 Express.js는 Node.js에서 가장 많이 사용되고 있는 "Web Framework"이다. React.js는 웹 서비스 중에서도 사용자 인터페이스 개발을 위해 사용되는 "Library"이다. 각각의 공식 문서에서도 명확하게 프레임워 jaenjoy.tistory.com 간략한 개념은 이렇게. 라이브러리는 써봐서 알겠지만 나머지는 프레임워크는 써봐야 알겠지?? 대표님이 무거운라이브러리는 가벼운 프레임워크에 가까워져서 그쯤되면 경계가 모호하다고 하는데 다음에 알아보죠!! 제어권한이 내가 아니라 코드에있다니.. 상상하기 어려운걸..🤔

핀터레스트 스타일 레이아웃 만들기 (masonry) - 겁나 빠른 웹 레시피 소개 masonry는 벽돌을 쌓는 공사, 석조라는 의미를 가지고 있습니다. 사진 공유 서비스인 핀터레스트가 인기를 끈 이후에 핀터레스트와 같은 스타일의 레이아웃이 크게 인기를 끌었는데요. 이러 opentutorials.org CSS만으로 masonry-layout만들기 젤 첨보고 따라한곳. 하지만 이것은 문단을 나누는 개념의 디자인이었다. 내가원하는건 최근글이 가로로 차곡차곡 쌓이는것이었는데 이것은 한글에 다단나누기 처럼 세로로 나열되서 패스했다. 새로운 속성울 알게된걸로 좋게 생각하자! 핀터레스트(Masonry) 스타일 레이아웃을 만드는 세 가지 방법 핀터레스트(Pinterest) 스타일 레이아웃 또는 Masonry 레이아웃이..

https://webclub.tistory.com/607 디바운스(Debounce)와 스로틀(Throttle ) 그리고 차이점 Throttle, Debounce & Difference 스로틀(Throttle) 과 디바운스(Debounce) 란 무엇일까? 이 두 가지 방법 모두 DOM 이벤트를 기반으로 실행하는 자바스크립트를 성능상의 이유로 JS의 양적인 측면, 즉 이벤트(ev. webclub.tistory.com

예를 들어 위와 같이 href를 node로 불렀을때 Node.href 는 https://도메인~~~/해외근로자상담지원/ 이렇게 가져오고 Node.attribute(href)는 /해외근로자상담지원/ 이라고 가져옴... 그래서 주의... window.location.pathname 이랑 Node.href 를 별생각없이 비교했다가 한참 틀리고 있었어ㅠㅠ (window.location.pathname은/해외근로자상담지원/ 이 부분만 나옴.)

qastack.kr/programming/17534661/make-anchor-link-go-some-pixels-above-where-its-linked-to 앵커 링크를 링크 된 위치보다 몇 픽셀 위로 이동합니다. qastack.kr /* 앵커이동시 살짝 내려서 보여줌(앵커는 바로 너무 상단에보여준다..이걸 해결하다니 조아ㅠㅠㅠ) */ // The function actually applying the offset function offsetAnchor() { if(location.hash.length !== 0) { window.scrollTo(window.scrollX, window.scrollY - 100); } } // This will capture hash changes while on t..

window.onresize = function() { 함수명(); // 또는 구문 } 하지만 위 방법으로는 하나만.. 만들수있어서 window.addEventListener('resize', ...) 이벤트리스너를 사용하면 여러 이벤트를 추가할 수 있다. resize - Web API | MDN resize 이벤트는 document view의 크기가 변경될 때 발생합니다. developer.mozilla.org

.classList.toggle('on'); >> toggle을 이용하면 on이라는 클래스가 있으면 없애고 없으면 생기도록 한다!

https://lookingfor.tistory.com/entry/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%ED%99%94%EB%A9%B4-%ED%81%AC%EA%B8%B0-%EA%B5%AC%ED%95%98%EA%B8%B0 자바스크립트 화면 크기, 브라우저 크기 구하기 screen 객체로 화면 크기 구하기 자바스크립트 screen은 브라우저 정보를 가져오는 객체입니다. screen 객체의 속성은 아래와 같습니다. screen.width // 화면(모니터 해상도)의 너비 screen.availWidth // 모니� lookingfor.tistory.com screen.width //화면(모니터 해상도)의 너비 screen.availWidth //모..

삼항 조건 연산자 조건부 삼항 연산자는 JavaScript에서 세 개의 피연산자를 취할 수 있는 유일한 연산자입니다. 보통 if 명령문의 단축 형태로 쓰입니다. developer.mozilla.org

http://hong.adfeel.info/frontend/%EA%B0%84%EB%8B%A8%ED%95%9C-carousel-%EC%98%88%EC%A0%9C/ carousel 예제 - hong's blog 1개씩 넘기기 2개 보이는 화면에서 1개씩 넘기기 3개 보이는 화면에서 3개씩 넘기기 3개 보이는 화면에서 3개씩 넘기기 (자동실행 / 마우스 올리면 잠시멈춤 내리면 다시시작) hong.adfeel.info 1, 2, 3개 캐러셀 레퍼런스 https://im-developer.tistory.com/97 [JS/Slider] 바닐라 자바스크립트로 무한 루프 슬라이드(Carousel) 구현하기 무한 루프 슬라이드 오늘은 자바스크립트로 구현해 본 무한루프 슬라이드를 정리해보려고 한다. 예전에 제이쿼리를 사..