개발자의 끄적끄적

[javascript/jquery] 자바스크립트로 현재 접속 브라우저 구분하기 자바스크립트로 현재 브라우저 종류를 구분하는 방법은 바로 아래 처럼 navigator.userAgent 을 이용해서 agent string 를 뽑아내는 방법입니다. var agent_string = navigator.userAgent; 위 내용처럼 agent 관련 내용을 변수에 담고나서 아래 처럼 indexOf 를 사용하여 해당 브라우저의 이름이 문자열에 포함이 되나 여부로 체크하시면 됩니다! agent_string.indexOf("chrome"); agent_string.indexOf("edge"); agent_string.indexOf("KAKAO"); 어려운 방법은 아니지만, 자주 사용하게 되는 부분이라 꼭 참고하세요!

[javascript/jquery] css display 여부로 show/hide 하는 방법 jquery 로 특정 타겟 클래스 혹은 아이디 등 요소들의 css display 상태를 체크하여 숨겨져 있으면 보이게 하고, 보이게 되어있으면 숨기는 방법입니다. if($("아이디").css("display") == "none"){ $("아이디").show(); } else { $("아이디").hide(); } 위 내용 보시면 아시겠지만, 특정 아이디의 css 요소중 display 가 none 이면 show() 를 호출해서 보이게하고, 반대의 경우는 hide() 를 호출해서 감추는 내용입니다! 참고들 하세요!

[javascript/jquery] swiper.js 현재 슬라이드 인덱스 확인하기 swiper.js 를 사용할때 슬라이드가 넘어간 이벤트를 체크하거나 슬라이드의 인덱스를 확인하고자 하는 경우가 있습니다! 그럴때 사용하는 방법입니다. 위 내용 보시면 아시겠지만, swiper.on('transitionEnd') 를 사용해서 swiper.realIndex 를 체크하면 변화된 인덱스를 확인할 수 있습니다! 참고들 하세요!

[javascript/jquery] 자바스크립트 document.querySelector 사용법 자바스크립트에서 document.querySelector 라는 명령어가 있습니다. 아래 예제처럼 document.querySelector("div") document.querySelector 안에 div 를 넣어주면 현재 페이지에 있는 얖 중 첫번째 내용을 반환합니다! 참고들하세요!

[javscript/jquery] 자바스크립트 sheet.js 로 엑셀 읽기 예제 자바스크립트로 엑셀을 업로드하여 읽는 방법을 공유합니다. 우선 페이지 상단에 아래와 같은 cdn 엑셀 js 를 로드합니다. 그리고 업로드 액션을 동작시킬 file input 을 선언한 후 onchange 액션을 걸어줍니다. 그리고 나서 onchange 액션시 동작할 스크립트를 아래와 같이 작성해줍니다! 위 스크립트에서 console.log 를 출력해놨으니 업로드 하신 내용을 크롬 개발자 모드에서 확인해보시면 됩니다!!! 엑셀버전은 아래 링크타고 들어가시면 잘 나와있으니 확인 후 사용하시면 됩니다! 참고들하세요! 문서와 소스 링크 : https://github.com/SheetJS/js-xlsx SheetJS/sheetjs ..

[javascript/jquery] [Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See 해결 방법 반응협 웹에서 스크롤이라든가 드래그라든가 액션이 일어날때 반응하기 위해서 window.addEvenrListener 를 선언해서 사용합니다. 그렇게 잘 사용하다가 갑자기 아래와 같은 오류가 떠서 검색해봤습니다. [Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See 일단 크롬 콘솔에서 위와 같은 에러가 발생할 경..

[javascript/jquery] JSON.parse 사용법 및 예제 javascript 에서 json 형태로 넘어온 데이터를 가공하기 위해서는 JSON.parse 를 사용해서 파싱을 해야합니다. 아래는 파싱예제입니다. var json = '{"result":"OK", "cnt":2}'; var data = JSON.parse(json); 위 내용처럼 파싱을 해서 data 라는 변수에 담아두고 그걸 꺼내서 사용하기 위해서는 아래처럼 사용하시면 됩니다. console.log(data.result); // OK console.log(data.cnt); // 2 json 파싱을 하고난 data 라는 변수에서 result 와 cnt 로 들어있는 변수를 꺼내서 출력한 내용 입니다! 참고들 하세요!

[javascript/jquery] 인스타 그램 영상 게시물 썸네일 가져오기 javascript 로 인스타그램을 많이들 연동하실껍니다. 저또한 연동을 완료했다고 생각했는데... 갑자기 이미지가 안땡겨와진다고 해서 확인해보니.. 영상으로 등록한 경우는 안땡겨지네요... 파싱한 데이터를 살펴보니 이미지로 등록한 게시물은 media_type 이 ALBUM 혹은 IMAGE 로 넘어와져서 조횐된 1행의 데이터 안에 있는 media_url 을 이미지 url 로 가져다 쓰면 됩니다. 하지만 영상으로 등록한 게시물은 media_type 이 VIDEO 로 넘어와서 이미지는 media_url 이 아닌 thumbnail_url 이라는 값으로 추가해서 넘겨주더라구요 ㅠ 위 이미지 처럼 나옵니다! 저처럼 당황하시는 분들 계실까..