반응형 전체 글164 Draggable Table, 아이템을 드래그 할 수 있는 테이블 만들기, 테이블 셀 드래그 앤 드롭 See the Pen Untitled by Junho Yoon (@junhoyoon95) on CodePen. 1. Bootstrap 을 CDN 으로 가져와 스타일링을 했고2. Sortable 이라는 CDN 으로 테이블의 아이템을 드래그앤드랍으로 이동시킬 수 있도록 구현3. 나눈 채로 저장을 하려면 // Get all items in Picked Zoneconst pickedItems = Array.from(pickedZone.querySelectorAll('.draggable-item')).map(item => item.dataset.id);// Get all items in List Zoneconst listItems = Array.from(listZone.querySelectorAll('.. 2025. 2. 26. zoom webhook verification with ruby on rails def zoom_verification request_signature = request.headers['X-ZM-Signature'] request_timestamp = request.headers['X-ZM-Request-Timestamp'] # Construct the message string message = "v0:#{request_timestamp}:#{request.body.read}" # Create hash for verification hash_for_verify = OpenSSL::HMAC.hexdigest('sha256', "YOUR_ZOOM_SECRET_TOKEN_HERE", message) expected_signature = "v0=#{hash_for_verify.. 2025. 2. 25. js 한글 입력 막기 javascript 로 한글입력을 방지하기 (영어만 허용하기) See the Pen Untitled by Junho Yoon (@junhoyoon95) on CodePen.해당 코드는 1. input 에 입력을 하면 영어, 띄어쓰기 를 제외한 모든 입력을 제한2. 첫 글자는 대문자로 치환 의 기능을 가지고 있습니다. 저는 성, 이름을 2칸을 통해 입력하도록 하고 있으니, 필요하시다면 해당 input 을 2개 만들어서 First name, Last name 을 하면 되겠네요. 오늘은 간단하게 js 로 영어와 공백을 제외한 모든 입력을 제한하는 것을 알아보았습니다 2025. 2. 18. vercel 로 손쉽게 배포하기 + 도메인 주소 사서 연결하기 10년 전 대학생 때에 여러 프로젝트 배포하면서 이런 저런 어려움도 겪었던 것 같은데, 그 때에는 빠르게 웹 주소로 배포하려면 firebase 외엔 답이 없는 줄만 알고 있었다. 요즘에는 너무나도 많은 기능들이 손쉬운 배포, 백엔드 연결까지도 손쉬워졌다 firebase의 대체 기술로 auth 까지 지원하는 supabase 도 있고, 호스팅을 위해 vercel 을 사용해 볼 수도 있다. 오늘은 일단 간단한 도메인으로 띄우기만 먼저 해볼 예정 1. 원하는 프레임워크나 여러 방법으로 화면 코드를 넣을 프로젝트를 생성한다2. https://vercel.com/ 에 들어간다.3. 회원가입을 진행하면서 깃헙이나 깃랩을 연결한다4. 왼쪽 상단 로고를 눌러 홈으로 가서 Add New를 눌러 프로젝트를 연결한다 5. .. 2025. 2. 3. 맥북에어 모니터 2개 연결하기 신혼여행 도중 너무 급하게 업무를 봐야 할 거리가 있어 이탈리아에서 급하게 맥북 에어를 구매해 작업을 한 적이 있습니다.이때 사 두었던 맥북 에어로는 카페에서 정말 간단한 문서작업이나 서칭 할 때에만 사용했었습니다. 하지만 새로운 프로젝트를 하고 싶ㅇ어 이 에어를 다시 켜게 되었습니다ㅋㅋ 코딩 작업을 하려고 모니터를 두개 준비하고 연결하려 보니 알게 된 한 가지 놀라운 점이 있었습니다...! 맥북에어는 기본적으로 여러개의 모니터에 연결할 수 없습니다!백만원 넘게 주고 산 맥북인데 문서나 인터넷 용으로만 사용할 수는 없으니 어떻게든 맥북에어에서 여러 모니터로 연결하는 방법을 찾아봤습니다. 이제부터 그 방법을 소개해드릴게요 1. 쿠팡가서 4K 이상, HDMI to HTMI 선을 3000원짜리 혹은 5000.. 2025. 1. 23. 소셜 공유 버튼 구현, 공유하기 버튼 내가 초대코드를 보내 다른 사람이 가입을 하는 주소를 보내거나 할 때에, 언제까지 내가 주소복사로 공유를 할 수는 없습니다내 기기에 깔려있는 Social 앱들을 통해 공유하는 방법을 알아보겠습니다 See the Pen social share button by Junho Yoon (@junhoyoon95) on CodePen. 이렇게 하면 항상 클립보드에 주소 넣고 복사해 보내는 것과 다르게, 곧바로 share를 할 수 있어 편합니다 여기서 미리보기로는 작동이 잘 안될 수도 있으나, 직접 해당 코드를 edit 해보시거나 사용해보시면 구현을 확인할 수 있습니다 2024. 12. 5. 리뷰 별점주기 구현하기, Star rating ui html See the Pen Untitled by Junho Yoon (@junhoyoon95) on CodePen. 위는 1점씩 줄 때의 ui 입니다. 만일 0.5 단위로 주고 싶다면 See the Pen star rating half by Junho Yoon (@junhoyoon95) on CodePen. 여러운게 아니니, 빠르게 해결하고 다음 문제를 해결하러 가시죠 2024. 11. 27. Firebase function 으로 Nest 백엔드 프로젝트 배포하기 저희 회사에서 사이트를 하나 더 만들 것을 고려하면서, 여러 프론트엔드 프로젝트에서 API 요청으로 사용 가능한 기능을 제공하는 백엔드 프로젝트를 만들기로 하였습니다.저는 저희 팀에서 Nest, Typescript 를 사용하고, Firebase 를 통해 배포하기로 결정했습니다.Firebase 선정 이유 : Google 의 여러 기능들을 사용중인데, Google 의 firebase 를 사용하면 연결이 훨씬 수월하고, $300 의 크레딧을 3달동안 지원하기 때문에 메리트가 확실하다고 판단했습니다. Firebas functions 로 백엔드 프로젝트를 API 사용하기 위해 배포하면 유료 요금제인 Blaze 플랜을 사용해야만 합니다! 물론! Firebase functions 배포도 3개월 무료 사용을 할 수는.. 2024. 10. 18. Rails - 데이터 저장시에 함수 실행하기 가끔 데이터를 저장함과 동시에 어떠한 확인 절차 혹은 그에 따른 어떠한 행위가 실행이 되어야 하는 경우가 있습니다. Rails 에서는 해당 기능들을 어떻게 구현하는지 간단하게 설명하겠습니다 해당 기능은 "데이터"가 저장이 되었을때 이므로, 일반적은 controller마다 전부 작성해서 관리하는 방식이 아닌, model 에서 해당 테이블에 대한 기능을 짜두는 방식으로 개발해야 합니다 Rails 공식 active record callback 가이드 문서https://guides.rubyonrails.org/active_record_callbacks.html Active Record Callbacks — Ruby on Rails GuidesActive Record CallbacksThis guide teac.. 2024. 10. 17. 맥북 전체화면 창 순서 자동정렬 기능 끄기 맥북을 활용하다보면 전체화면을 해, 여러 윈도우 창을 쓰는 것 처럼 쓸어넘기며 사용합니다. 그런데 가끔 여러 창으로 옮겨가며 작업하다보면 자기 마음대로 전체 화면 순서가 자동 정렬되서 짜증났던 적이 있을 것입니다. 이 기능을 한번 꺼보겠습니다 이 창들을 Spaces 라고 부르는데, 일단 설정에 들어갑니다설정 - 왼쪽 스크롤바 내리기 혹은 데스크탑 검색 후 들어가기 스크롤을 내려 Spaces 를 최근 사용 내역에 따라 자동으로 재정렬 기능 Off 해결 완료 2024. 8. 6. mysql2 설치시 library 'zstd' not found 문제 mysql2 gem 을 설치하여 잘 쓰다가, 다른 프로젝트에서 전역전인 설정을 건드려 갑자기 서버가 끊겼었습니다... 진짜 심하게 화가 났지만 결국 문제를 찾아냈습니다 Gem::Ext::BuildError: ERROR: Failed to build gem native extension.An error occurred while installing mysql2 (0.5.6), and Bundler cannot continue. 에러들을 전부 찬찬히 잃어보니 결국에는 ld: library 'zstd' not found 라는 오류문구를 찾았습니다. 처음에는 brew install zstd 를 해하고 다시 bundle install 을 했지만 여전히 오류는 같았습니다 zstd 경로를 제대로 찾지를 못해 없다.. 2024. 7. 15. 프로젝트 깃허브 연결하기 로컬에서 작업하던 프로젝트들을 github 연동을 하는 방법을 알려드리겠습니다 1. github 로그인 - 우측 상단 프로필 아이콘 - Your repositories - New2. 생성된 저장소 주소 복사 3. 프로젝트의 콘솔에서 (터미널로 cd 로 찾아 들어가거나, vscode 기준 control + shift + ~ 로 켤 수 있음) git init 으로 지금 이 프로젝트를 깃 저장소로 설정$ git init이후 git 저장소를 연결$ git remote add origin 깃헙에서HTTPS복사한주소 4. 해당 프로젝트의 내용들을 깃에 올리기 git add . : 현재 프로젝트의 모든 변경 내용을 다음 push 내용에 담는다$ git add . git commit -m "올릴 내용" : 담아진 변.. 2024. 7. 9. 이전 1 2 3 4 ··· 14 다음 반응형
