스터디149 아임웹 심플 리캡챠(simple reCaptcha)-매크로방지,로봇방지,보안문 지원하기 안녕하세요 달망이 입니다. 외주를 작업하다가 고객사에서 간단한 리캡챠(로봇방지)를 지원해달라고 하셔서 만든 결과를 공유해봅니다. 도입이유 악성 사용자가 매크로를 이용해서, 지속적으로 CS팀을 귀찮게 하기 위해서 견적문의를 끊임없이 한다고 했습니다. 이런 악성사용자를 거르지 않으면 CS팀은 매번 악성사용자의 견적을 끝까지 읽어야해서 시간낭비를 하게됩니다. 심지어 아임웹 기능에서 견적신청후에 SMS기능까지 연결해놨다면, 문자비용까지 소모되는 상황이 생깁니다. 아임웹에서는 견적문의 기능을 지원하지만, 기본적인 매크로 입력이나, 보안문자를 제공하지 않아서 임베드 코드로 직접 구현해야했습니다... 상황 아임웹 서버측 코드까지 바꿀 순 없으니, 구글의 로봇방지 기술인 reCaptcha v2, v3를 지원할 순 없었.. 스터디/Etc 2024. 3. 28. 유튜브 썸네일 가져오기 유튜브가 API를 직접 제공해주고 있지만 캐시서버에 저장해놓은 것들은 API 없이도 접근할 수있게 해두었습니다. 그래서 썸네일도 비디오ID만 알고 있다면 바로 썸네일을 가져올 수 있습니다. 아래 처럼 유튜브 라이브 영상 주소가 있다면 https://www.youtube.com/watch?v=PFzq9xFRAnM v 값이 videoId, PFzq9xFRAnM 입니다. 이걸 가지고 여러 썸네일을 뽑을 수 있습니다. 1. 저화질(120x90px), 위 아래 여백 있음 https://img.youtube.com/vi/{videoId}/0.jpg 2. 저화질(120x90px), 위 아래 여백 없음 https://img.youtube.com/vi/{videoId}/default.jpg 3. 중화질(320x180px.. 스터디/Etc 2024. 2. 13. 내가 참여했던 정부과제 찾기 가끔 내가 어떤 정부과제를 회사에서 했을까? 아니, 참여된걸까? 궁금할땐 NTIS를 찾아가면 됩니다. 이미 과제를 회사에서 진행하게 되다보면, 국가연구원 번호를 드린적이 있을겁니다. 마이페이지로 와서 보면, 이때까지 어떤 과제에 포함되었는지를 볼 수 있어요. 스터디/Etc 2024. 2. 4. [특수문자] 원문자, 기호, 화살표, 네모 모음. 윈도우에선 당연히 한자로 변환하다가 맥에 오니까 이모지 밑에 있는 특수문자가 너무 많아서 찾기가 귀찮아서 게시글로 올려놓으면 저도 편하고 검색해서 오시는분도 편하지 않을까해서 게시글로 올려놓습니다 ⓵⓶⓷⓸⓹⓺⓻⓼⓽⓾ ❶❷❸❹❺❻❼❽❾❿⓫⓬⓭⓮⓯⓰⓱⓲⓳⓴ ⑴⑵⑶⑷⑸⑹⑺⑻⑼⑽⑾⑿⒀⒁⒂⒃⒄⒅⒆⒇ ①②③④⑤⑥⑦⑧⑨⑩⑪⑫⑬⑭⑮⑯⑰⑱⑲⑳㉑㉒㉓㉔㉕㉖㉗㉘㉙㉚㉛㉜㉝㉞㉟㊱㊲㊳㊴㊵㊶㊷㊸㊹㊺㊻㊼㊽㊾㊿ !',./:;?^_`| ̄、。·‥…¨〃-―∥\∼´~ˇ˘˝˚˙¸˛¡¿ː "()[]{}‘’“”〔〕〈〉《》「」『』【】 +-<=>±×÷≠≤≥∞∴♂♀∠⊥⌒∂∇≡≒≪≫√∽∝∵∫∬∈∋⊆⊇⊂⊃∪∩∧∨¬⇒⇔∀∃∮∑∏ ♥❥★✡✩☺☻☹☂☃☁☾ ♪♬♫♩♭♯♀♂☥ √✔☑☒✖✠✜ ☚☛☝☟✂✁✃✄ ✍✎✏ ❁❀✺✿✾✽✽✵♠♤ ♞♘♙♟♚♛♕♔♚♜♖♝♗ ✝☨✡☭.. 스터디/Etc 2024. 2. 2. 유튜브 채널정보 api - 브랜드 썸네일. 유튜버의 채널에 접속해서 보면, 가장 위에 보이는 썸네일을 브랜드 썸네일이라고 부릅니다. 버추얼 그룹으로 우연히 검색한 곳입니다... 이 브랜드 썸네일은 api로 요청하면 작고 비율도 이상하고 의미없는 여백도 같이 포함해서 전달해줍니다. "image": { "bannerExternalUrl": "https://yt3.googleusercontent.com/SekjIFRlTmSJAUTpQXqNkvFJebvq0GO2NG7mCJ1UDe0xIqBxnQcxmKq9is46EKM64jbEgtTEpPY" } https://yt3.googleusercontent.com/SekjIFRlTmSJAUTpQXqNkvFJebvq0GO2NG7mCJ1UDe0xIqBxnQcxmKq9is46EKM64jbEgtTEpPY 예시. 러브다이아.. 스터디/Etc 2024. 1. 26. [SEO] 사이트맵 - 사이트를 홍보하는 가장 기본적인 방법 어렷을 적부터 자주 접해왔던 사이트맵이지만 프론트앤드를 하고 있는 요즘 사이트맵에 대해 더욱 자세히 알아보기위해 이 글을 작성합니다. 사이트 맵이란 사이트를 만들었으면 홍보를 해야되는데 가장 쉽게 하는 방법은 검색엔진에 노출되는것이고 그 검색엔진에게 사이트의 구조를 알려주는 것입니다. 그 구조를 알려주는 방법으로 가장 오래된 sitemap(사이트맵) 이 있습니다. 검색엔진이 없던 시절에는 인터넷 접속도 너무 느렸던 지라. 메인 홈페이지보다는 사이트맵을 보고 사이트를 직접 하나씩 탐색해보곤 했습니다. 오랜 시간이 지나면서 검색엔진이 하나둘 생겨나고 그 검색엔진은 사이트 내의 모든 링크를 탐색도 하지만 효율적인 탐색을 위해서 사이트맵을 참조하고 있습니다. 사이트맵 위치 사이트맵의 파일 위치는 사실 어느 경로.. 스터디/Etc 2024. 1. 4. [Supabase] js query예제 모음, 에러 메세지 모음. supabase가 너무 편하지만 document에 안나오는 방식이 많아서 누군가에게 도움이 될까해서 올립니다. 1. foreign table의 내용에서 글자를 찾을때 ... .select(` id, rank_idx, followers_count, creator:Creators!inner( user_id, user_name, ) `) .or(`or(user_name.like.%${searchText}%, user_id.like.%${searchText}%)`, { foreignTable: 'Creators' }) ... select함수 호출 후에 외래테이블의 값을 찾을땐, options로 {foreignTable:'TABLE_NAME'}을 넣어줘야함. .or로 찾을때는 기본 1개밖에 못 찾음. 2개 이상하.. 스터디/Etc 2023. 12. 21. [Tailwindcss] 커스텀 컬러 custom-color 가끔 동적으로 색상을 변경하고 싶을때가 있습니다. A 버튼을 누르면 빨강 B 버튼을 누르면 파란색으로 바꾸고 싶을때가 있죠 https://tailwindcss.com/docs/customizing-colors Customizing Colors - Tailwind CSS Customizing the default color palette for your project. tailwindcss.com tailwindcss 문서를 보다보면 custom color는 tailwind.config.js파일을 수정하면 된다고 합니다. module.exports = { theme: { colors: { transparent: 'transparent', current: 'currentColor', 'white': '#ff.. 스터디/Etc 2023. 12. 21. [Sveltekit] 환경변수 설정 - 필수! 과정 개발 시스템 마다 다른 환경변수 세팅! 이번 게시글에서는 Sveltekit을 위한 환경변수 세팅을 해보겠습니다. 환경변수가 뭐냐면, 환경에 따른 변수 입니다. (?) 로컬환경에서 테스트 할때와 개발서버에서 테스트 할때, 스테이지 서버에서 테스트 할때, 운영서버에서 실행할때 모두 api주소나 db주소가 다를 수 있습니다. 매번 값을 변경하고 서버에 올리는 일을 하긴 너무나 힘들고 번거롭고 실수하기 마련입니다. 환경에 맞춰서 변수를 바꿔주는 변수를 환경변수라고 합니다. node.js에서 하는 방법 nodejs같은 환경에서는 .env 파일을 가지고 변수를 컨트롤합니다. nodejs는 dotenv 라는 패키지를 사용합니다. https://github.com/motdotla/dotenv GitHub - motdo.. 스터디/SvelteKit 2023. 12. 16. [StatCounter] 전세계 화면 해상도 통계 및 개발시 사이즈 참고. 안녕하세요 이번에는 StatCounter라는 사이트의 화면해상도에 대해서 알아볼까 합니다. 개발하기 전 디자인을 할때, 어떤 화면을 대상으로 개발할까 참 고민이 많게 됩니다. 20년전 전해 내려오던 디자인데로 하게되면 스마트폰에 대한 대응이 안되겠죠? 그래서 해상도에 따른 디자인은 현재 사용자에 대한 트렌드 조사가 먼저 이뤄져야 합니다. 그런 조사를 미리 해서 정리해둔 사이트가 바로 statcounter입니다. https://gs.statcounter.com/screen-resolution-stats 해상도 관련 통계 말고도 많은 통계가 있습니다. 저는 여기서 Screen Resolution Stats를 봐보겠습니다. 2011년부터 2023년까지 모바일+타블렛+컴퓨터 통계 화면 사이즈가 정말 제각가으로 .. 스터디/Etc 2023. 12. 2. 이전 1 2 3 4 ··· 15 다음