본문 바로가기
반응형

Programming167

맥북 가로 스크롤, 마우스 가로 스크롤 맥북에서 사용할 마우스를 고를 때에 가로 스크롤이 없어서 눈물을 흘리며 어쩔 수 없이 mx master 를 구매해오셨던 분들에게 희망이? 될 수 있는 포스팅이 될 수 있을 것 같네요 간단하게 말씀을 드리자면1. 맥북은 기본적으로 Shift 를 누른 채로 마우스 휠을 움직이면 가로 스크롤이 된다..2. logi option+ 와 같이 여러 기능을 넣을 수 있어서 부러웠다면 => Karabiner Element 를 설치하면 된다  저는 일반 버티컬 마우스를 사용하고 있습니다. 진짜 너무 일반적인 마우스인데, 개발을 하고, 문서를 작성하는 데에 전혀 문제 없이 잘 사용하고 있습니다=> 마우스 정보 1. 가로 스크롤은 shift 누르고 마우스휠 하시면 됨. (이건 맥북 기본 기능)2. 마우스 왼쪽 버튼들에 대해.. 2025. 4. 5.
맥북 아이콘 통통 튀는 효과 없애기 (아이콘 바운스 비활성화) 맥북에서는 가끔씩 몇몇 앱들(ex. 비트윈 등등)에서 알림이 오면 아이콘이 통통 튀어서 짜증이 났던 적이 있을 것입니다.. 마우스를 그 아이콘에 가져가면 일시적으로 튀는게 해제되긴 하지만, 알림이 올때마다 이렇게 할 수는 없으니, 맥북에서 아예 아이콘 바운스를 비활성화 하는 방법을 적어보겠습니다. 간단하지 터미널 열고 바로 적용하시면 됩니다 1. 맥북 우측 상단에서 돋보기 모양을 클릭해 terminal 을 입력2. 아래의 명령어를 그대로 복사 붙여넣기defaults write com.apple.dock no-bouncing -bool TRUE && killall Dock  이렇게 하면 맥북에서 모든 앱들에 대해서 아이콘이 통통 튀는 기능을 비활성화 할 수 있습니다. 알림 기능 자체를 비활성화 하는게 아닙.. 2025. 4. 1.
vscode 매번 code . 등록해야하는 번거로움 해결 vscode 사용하다보면 잘 사용하던 code . 명령어가 있습니다. 저는 분명 제 맥북 프로에서 code . 를 사용해 여러 프로젝트 생성하고 옮겨다니면서 작업을 잘 했던 거 같은데, 제 맥북 에어로 오니 이게 어떨 때에는 잘 먹히는데, 그렇지 못한 경우가 있었습니다. vscode 켜서 설정 들어가서 code 활성화 이걸 매번 하는데, 맥북을 재시동을 하거나, 새로운 폴더를 만들때마다 이걸 등록해야하니 참 이상했습니다.. 이 문제는 결국 해결 방법이 있었음.. Finder 를 켜서 지금 내 노트북 혹은 pc 에 vscode 가 Downloads 폴더에 있다면 vscode를 "응용 프로그램" 으로 드래그 해 옮겨놔야 합니다.이렇게 하고 vscode 에서 command shift p 로 code 를 활성화.. 2025. 3. 31.
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.
반응형