개발자의 끄적끄적

[javascript] bmi 계산 공식 예제 최근 회사에서 프로젝트 작업을 하다가 bmi 관련 계산 로직이 들어가는 부분이 있어서 bmi 계산식을 공유해보려고 합니다! 아래 첨부해드리는 내용이면 거의 수정없이 사용 가능하실 듯 합니다! /** * BMI(체질량 지수)를 계산하는 함수 * @param {number} weightInKg - 체중 (단위: 킬로그램) * @param {number} heightInCm - 키 (단위: 센티미터) * @returns {number | string} 계산된 BMI 값 또는 오류 메시지 */function calculateBMI(weightInKg, heightInCm) { // 입력값 유효성 검사 if (typeof weightInKg !== 'n..

[javascript] 카카오톡 공유하기 예제 안녕하세요! javascript sdk를 이용해서 카카오톡 공유하기를 구현하는 예제를 공유해보려고 합니다! 보통 카카오톡 로그인만하다가 공유하기를 연동하면서 간단하게 구현이 되는 소스라 공유합니다! 카카오톡으로 공유하기 위와 같은 버튼이 있다고 가정하고, 아래와 같이 kakao js 를 로드하고 버튼에 이벤트를 걸어주면 끝입니다! 위 내용 보시면 아시겠지만, JAVASCRIPT_KEY 에는 카카오 디벨로퍼스에서 발급받은 javascript key 를 넣으면 되구요! objectType 타입은 텍스트, 피드, 리스트, 위치 등 여러가지 템플릿이 있으니 공식문서 확인해보시면서 작업하시면 될듯 합니다! link 는 필수값이므로 동적으로 url을 ..

[javascript/jquery] plyr 플레이어 버튼 색상 변경 방법 안녕하세요! 오늘은 다시 본업으로 돌아와서 최근에 plyr 영상 플레이어 커스텀 요청을 받아서 라이브러리를 분석해보고 검색해서 알아된 내용을 공유해볼까 합니다! 여러 커스텀이 있지만, 이번에는 아래 이미지처럼 영상 하단에 나오는 컨트롤바중에서 버튼의 색상을 변경하는 코드를 공유해보려고 합니다! /* style.css 파일 또는 태그 안에 추가 *//* 모든 plyr 컨트롤 아이콘의 기본 색상 변경 */.plyr__controls .plyr__control svg { fill: #ff00ff; /* 보라색으로 변경 */}/* 특정 버튼 (예: 재생 버튼)만 색상 변경 */.plyr__controls .plyr__cont..

[javascript/jquery] 카카오 주소 검색 embed 예제 안녕하세요! 본업으로 돌아와서 아카이빙할겸 매번 검색 하지 않게 저장용으로 카카오 주소검색 api 를 이용하는 방법을 공유하려고 합니다! 팝업으로 구현할 수도 있고, 특정 div 영역안에 검색창을 구현할 수도 있는데요! 그중에서 특정 div 영역안에 embed 형식으로 구현한 예제를 공유하려고 합니다! 위처럼 우선 관련 스크립트를 구현하려고 하는 페이지 상단에 로드 시킵니다! 위 내용 중에서 KAKAO_KEY 로 되어 있는 부분은 카카오 개발자 센터에서 어플리케이션을 생성하면 나오는 javascrip 키를 넣으시면 됩니다! 아래 함수는 주소 검색을 구현하고자 하는 버튼에 이벤트를 걸어서 호출되도록 하시면 됩니다! function ..

[javascript/jquery] jquery div text color change example / div 텍스트 컬러 변경하는 방법  다시 본업인 웹개발로 돌아와서, jquery로 특정 영역의 글자색을 변경하고 싶은경우가 있습니다! 그럴때는 아래와 같이 css 속성을 변경할 수 있습니다!  예를들어  아래와 같이 테스트라는 텍스트를 가지고 있는 test_div 가 있다고 가정하고,테스트  위 div 안의 글자색을 변경하려면 div 의 아이디를 아래와 같이 jquery 로 호출해서 변경하시면 됩니다!   참고들 하세요!

[javascript/jquery] jquery 백그라운드 이미지 동적 변경 방법!  안녕하세요! 다시 본업으로 돌아와서, jquery 로 동적으로 특정영역의 백그라운드 이미를 변경하는 방법을 공유해보려고 합니다! 예를들어, 특정 사이트나 앱의 프로필 사진을 변경한다던가 하는기능에서 사용되니 참고하시면 도움이 되실듯 합니다! $("#test_div").css("background-image", "url(image_url)");  위 내용 보시면 아시겠지만, test_div 라는 영역이 있다고 가정하고, css 로  background-image 를 image_url 값으로 변경하는 내용입니다!

[javascript] browser history.back detect example / 브라우저 뒤로가기 감지 방법  웹 사이트를 개발하다보면 현재 페이지를 새로 접근한건지, 뒤로가기를 이용해서 돌아온건지 확인해야 하는 경우가 있습니다! 그럴때 확인할 수 있는 방법들은 여러가지가 있지만, 이번에는 pageshow 를 이용해서 체크하는 방법을 공유해보려고 합니다! window.addEventListener("pageshow", function(event) { if (event.persisted) { // 페이지가 브라우저 캐시에서 불러와진 경우 console.log("뒤로가기로 페이지에 돌아왔습니다."); } else { console.log("새로 로드..

[javascript/jquery] url 체크 정규식  javascript 에서 url 을 입력받다보면 형식에 안맞아서 링크가 안되거나, 발송에 문제가 생기거나 하는 경우가 종종 발생합니다! 그럴때는 아래 정규식으로 체크할 수 있습니다! var urlRegex = /^(http|https):\/\/[\w\-]+(\.[\w\-]+)+[/#?]?.*$/;  체크하고자 하는 url 형식에 따라 조금 달라질 수도 있지만, 위 내용을 참고해서 체크하시면 도움이 되실듯 합니다! 참고들 하세요!