[JS] 번호 입력 시 자동 하이픈 삽입 바쁜 사람을 위한 요약: See the Pen Untitled by BellRiver (@orugpbqu-the-solid) on CodePen.">See the Pen Untitled by BellRiver (@orugpbqu-the-solid) on CodePen.토스의 영향 때문인지 깔끔하고 쉬운 인터페이스가 유행입니다.보면 이해하기 쉽고, 처음 사용해도 쉽게 사용할 수 있는 화면이나 도구를 저희는 좋은 인터페이스라고 하지요.하지만, 너무 쉬운 사용성과 간단한 워딩은 사용자를 점점 멍청하게 만든다는 말도 나오고 있습니다.저는 개인적으로 키오스크와 토스의 인터페이스가 적절히 섞여있는 인터페이스가 사용자에게 가장 이로울 수 있다고 생각합니다.이번 코드는 번호 입력 시 자동으로 하이픈을 삽입해 .. 2025. 1. 21. [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코드(JQuery 포함) 모음 저는 깃허브에 메모장으로 쓰는 프로젝트가 하나 있습니다.해당 메모장 프로젝트에 자주 쓰는 코드를 적어두고 필요할 때마다 꺼내 쓰고는 합니다.이전에 사용한 코드를 옛날 프로젝트에서 꺼내오려면 한 참 찾아야 하거나 머리가 복잡해져서 자주 쓰는 코드들은 정리해 두는 편입니다.지금까지 만났던 개발자 분들 중 생각보다 많은 분들이 이전 프로젝트에서 코드를 가져오시거나 그때그때 인터넷을 찾는 모습을 확인할 수 있었습니다.일하다 보면 뇌 램 용량이 부족하기에 최대한 효율적으로 일할 수 있도록 이렇게 자주 쓰는 코드들은 외우거나 항상 복사할 수 있도록 준비를 하시면 좋습니다.(메모장 프로젝트는 꼭 Private로 만드시기를 바랍니다. Public으로 설정하고 가끔 키나 비밀번호를 올리시는 경우가 있습니다. 위험하니 꼭.. 2024. 11. 13. AOS(Animate On Scroll Library) 사용법 저번에 "프론트엔드 개발자에게 추천하는 사이트 모음 (특히 뉴비)” 글에서 AOS라는 라이브러리를 소개해 드린 적이 있습니다.정말 좋은 라이브러리라 간단하게 소개하고 넘어가는 것이 아닌 사용법과 간단한 팀 몇 가지를 공유해 드리고 싶어 다시 가져와봤습니다.개인적으로 라이브러리를 가져와 사용할 때 가장 중요다고 생각되는 점은 순서대로 성능, 충돌 여부, 무게입니다.AOS는 위 3가지 조건을 모두 만족하면서 사용법 또한 간단합니다.AOS 사용법: See the Pen Untitled by 이종원 (@orugpbqu-the-solid) on CodePen." data-ke-type="html">HTML 삽입미리보기할 수 없는 소스응용:1. 페이지 들어가자마자 컨텐츠 올라오는 인터렉션 주기. See t.. 2024. 11. 12. Swiper 옵션 알아보기 Swiper는 제가 겪은 슬라이드 관련 코드 중 단연 으뜸인 라이브러리입니다.옵션도 많고, 다른 라이브러리와 병행해서 사용하여도 잘 깨지지 않는다는 장점이 있습니다.그러나, 다양한 옵션이 있는데 이를 모르면 내 맘처럼 되지 않아 무척 답답한 마음이 들곤 합니다.이러한 어려움을 해결해 드리고자 스와이퍼에서 자주 사용되는 옵션의 설명과 간단한 팁을 준비해 보았으니 참고해 보시기를 바랍니다.// 기본 스와이퍼 JS 코드var swiper = new Swiper(".main-swiper", { // 슬라이드 방향 설정 (horizontal: 가로{가로가 기본값입니다.}, vertical: 세로) direction: "vertical", direction: 'horizontal', // 한 화면에 표.. 2024. 11. 11.
