브라우저 개발자 도구 사용법 + 팁 브라우저에는 개발 편의성을 돕기 위한 개발자 도구라는 것이 있습니다.개발자 도구는 현재 페이지의 HTML, CSS, JS 등을 확인할 수 있는 코드 뷰어라고 이해하시면 편합니다.가장 기본적인 것부터 시작해서 간단한 팁 몇 개를 같이 소개해 드리겠습니다.개발자 도구 여는 법: F12키 클릭종종 F12키를 막는 웹 사이트가 있습니다. 그럴 땐 아래 방법을 사용해 보세요. Ctrl + Shift + C키위 단축키 사용 시 바로 HTML 요소를 클릭할 수 있습니다. (프론트 개발자 분들은 이 단축키에 익숙해지시면 무척 편합니다!)마우스 호버 시 나오는 파랑 박스를 클릭해 개발자 도구에서 바로 관련 HTML과 CSS 등을 확인할 수 있습니다.설정에서 직접 열기(크롬 기준) 우측 상단 점 3개 클릭 > 도구 더 보.. 2024. 12. 10. [JQuery] qrcodejs로 QR 코드 만들기 바쁜 분들을 위해 바로 코드부터 보시지요. See the Pen Untitled by 이종원 (@orugpbqu-the-solid) on CodePen.">See the Pen Untitled by 이종원 (@orugpbqu-the-solid) on CodePen.QR 코드는 qrcodejs라는 라이브러리로 쉽게 만들 수 있습니다.옵션도 무척 간단하기에 바로 가져다 사용하실 수 있습니다.간단한 만큼 커스텀이 제한적이라는 약간의 아쉬움이 있지만 간단하게 QR 코드를 만들 수 있으니 무척 기쁘네요.위 코드에서 다 알아보겠는데 correctLevel이 뭐지? 싶으실 수 있습니다.correctLevel은 "복원 능력" 레벨을 뜻합니다.QR 코드의 복원 능력이란?물리적 손상: QR 코드가 긁히거나 찢어진.. 2024. 12. 9. [JS] 객체 탈곡기 (객체에서 원하는 값만 추출) 이게 뭔 소린가 싶으실 텐데요.좀 더 자세히 말하면 객체 중에서 내가 원하는 값만 볼 수 있게 해주는 코드입니다.// window 객체에서 width와 관련된 내용만 추출할 수 있는 대다난 코드for (let key in window) { if (key.toLowerCase().indexOf("width") != -1) { console.log(key, window[key]); }}빈 사이트에서 위 코드를 사용하면 아래처럼 window 객체 중 width와 연관된 값만 가져올 수 있습니다.innerWidth 1920outerWidth 1920height를 찍으면 아래처럼 나오게 됩니다.innerHeight 945outerHeight 1032Global로 값을 저장하셨다면 해당 값을.. 2024. 12. 4. [JS] 파일 크기를 깔끔하게 만들어주는 JQuery 코드 input으로 파일 정보를 추출하면 파일 사이즈가 "878562" 이런 식으로 숫자로만 추출되는 것을 확인할 수 있습니다.이때 이를 깔끔하게 만들어주는 함수나 코드를 그때그때 작성하기보다는 이렇게 탬플릿화 해서 적재적소에 사용하면 시간을 아끼고 효율적으로 일할 수 있기에 관련 코드를 공유합니다.이러한 코드들을 앞으로도 지속해서 공유하고 저 또한 재사용함으로써 모두 효율적으로 일하는 것이 목표입니다.그럼 다들 파팅! See the Pen Untitled by 이종원 (@orugpbqu-the-solid) on CodePen.">See the Pen Untitled by 이종원 (@orugpbqu-the-solid) on CodePen. 2024. 12. 2. [JS] ZIP 파일 생성 > 암호화 > 다운로드를 알아보자 zip 파일을 만들고 암호화 처리를 하던 도중 관련 내용을 찾기 어렵고, 특히 국문 내용이 적어서 내용을 정리하게 되었습니다.zip 파일 암호화 처리를 위해 JSzip이나 fflate 등의 라이브러리도 알아봤으나 이 라이브러리들은 암호화가 안 되는 것 같아 찾고 찾다가 zip.js를 찾게 되어 진행할 수 있었습니다.zip 파일 생성 > 암호화 > 다운로드 코드: See the Pen Untitled by 이종원 (@orugpbqu-the-solid) on CodePen.">See the Pen Untitled by 이종원 (@orugpbqu-the-solid) on CodePen.전혀 꾸미지 않은 날것의 코드입니다.꾸며 놓으면 가져다 사용하시기 어려울 것 같아 있는 그대로의 코드니 편히 가져다 .. 2024. 11. 30. 크롬이 자꾸 멈출 때 (그래픽 가속 사용하지 않기) 저는 업무 용도로 갤럭시 북을 사용하고 있습니다.가볍고, 이쁘고, 성능도 그럭저럭 나와줘서 꽤 괜찮은 노트북인 것 같습니다.그런데 오픈 AI 사이트 같은 무거운 사이트를 방문하면 크롬이 멈추고 먹통이 되는 상황이 계속 발생하였습니다.피그마도 하고, 무거운 프로그램도 돌리는데 크롬이 안된다니! 이상해서 다양한 방법을 시도해 봤으나 해결을 못하다 드디어 원인을 알게 되어 해결법을 공유해 드립니다.해결 방법:크롬의 설정을 보면 "가능한 경우 그래픽 가속 사용"이라는 옵션이 있습니다.크롬 > 설정 > 시스템 > 가능한 경우 그래픽 가속 사용그래픽 카드 성능이 좋지 않을 경우 오히려 이 옵션이 독이 될 수 있더군요.해당 옵션을 꺼주니 무거운 사이트에 방문해도 크롬이 먹통이 되지 않았습니다."가능한 경우 그래픽 가.. 2024. 11. 29.
