Firebase를 사용하면서 공개된 API 키가 보안에 안전한가 한 번쯤 생각하게 되는데 기본적으로 API키는 권한이 무제한 상태로 공개된 API키는 어디서나 사용할 수 있으므로 안전하지 않게 된다. 로컬에 소스를 내려받아 Firebase 자원에 모두 접근할 수 있는 권한을 획득하게 되는 것이다. Google Cloud 공식 문서에서는 애플리케이션 제한사항과 API 제한사항을 모두 설정하기를 권고하고 있다. Google Cloud 공식 문서 url https://cloud.google.com/docs/authentication/api-keys?&_ga=2.125170185.-2096692231.1670484168#adding_http_restrictions API 키를 사용하여 인증 | Google Cl..

오픈소스 카테고리별로 인기 순위를 제공 프로젝트를 진행하게 되면 오픈소스를 하나 이상 사용하게 되는데 적당한 오픈소스를 찾을 때 참고할 수 있는 사이트 WYSIWYG Editor 순위 1. ueberdosis/tiptap 2. codex-team/editor.js 3. quilljs/quill 4. mdx-js/mdx 5. ianstormtaylor/slate 6. wangeditor-team/wangEditor 7. tinymce/tinymce 8. remarkjs/react-markdown 9. ckeditor/ckeditor5 Cross Platform GUI Tool 순위 1. tauri-apps/tauri 2. flutter/flutter 3. facebook/react-native 4. ele..

https://flexboxfroggy.com/#ko Flexbox Froggy A game for learning CSS flexbox flexboxfroggy.com Flexbox Froggy는 Froggy와 친구들 돕는 CSS 코드 게임으로 개구리를 같은 색의 연잎으로 이동하도록 도와주면서 Flex레이아웃 속성을 이해하게 됩니다. justify-content 요소들을 가로선 상에서 정렬합니다: flex-start: 요소들을 컨테이너의 왼쪽으로 정렬합니다. flex-end: 요소들을 컨테이너의 오른쪽으로 정렬합니다. center: 요소들을 컨테이너의 가운데로 정렬합니다. space-between: 요소들 사이에 동일한 간격을 둡니다. space-around: 요소들 주위에 동일한 간격을 둡니다. al..

CSS로 표현할 수 있는 텍스트 이펙트용 HTML 소스를 복사해서 사용할수 있는 텍스트 애니메이션 샘플이나 테크닉을, 코드 커뮤니티 사이트 Codepen에서 검색하여 정리 실제 코드를 보면서 샘플을 확인, 편집을 할 수 있으므로, 효율적으로 웹 제작에 적용할 수 있습니다. Fluid text hover https://codepen.io/robin-dela/pen/KKPYoBq See the Pen Fluid text hover by Robin Delaporte (@robin-dela) on CodePen. SVG textPath Animation on Scroll Tutorial | Keyssentials: Web Animation Tips by @keyframers https://codepen.io/t..

아래로 스크롤하면 사라지고 위로 스크롤하면 나타나는 메뉴 See the Pen 스크롤 숨김 메뉴 by 소호플렉스 (@sohoflex) on CodePen. 소호플렉스(Sohoflex) 웹 에이전시 홈페이지 제작, 모바일 앱 제작, SI솔루션 개발, 온라인 마케팅 전문 디지털 트랜스포메이션 회사입니다.

OKR 작성 양식을 제공하는 다양한 서비스들 Notion(노션) 템플릿 갤러리, Buffer의 OKR : https://www.notion.so/ko-kr/templates/buffer-okrs Notion (노션) 템플릿 갤러리 – Buffer의 OKR Notion 팀과 커뮤니티에서 만든 Notion 페이지입니다. 마음에 드는 페이지를 복제해 사용하거나 나의 페이지를 공유해 보세요. www.notion.so Altassian OKR template : https://www.atlassian.com/software/confluence/templates/okrs OKRs template | Atlassian This OKRs template will guide you through a proven meth..

원문 : https://www.atlassian.com/ko/agile/agile-at-scale/okr 무언가, 무엇이든 성취하고 싶을 때 원하는 것은 선호하는 결과를 바탕으로 합니다. 이것은 어릴 때 개발된 아주 단순하고 기본적인 인간의 개념입니다. 이것은 나타내는 한 가지 방법으로 다음 문장이 있습니다. 나는 ____________(으)로 측정한 대로 ________할 것입니다. 이것이 John Doerr가 자신의 저서 Measure what Matters에서 OKR(목표 및 주요 결과)를 설명한 방법입니다. 단순한 개념이지만 비즈니스 세계는 움직이는 부분이 많은 복잡한 곳입니다. 그러나 간단한 원칙을 고수하면 큰 결과가 나타날 수 있습니다. OKR이란 무엇입니까? OKR은 목표를 정의하고 결과를 ..

홈페이지 : https://uiverse.io/ Html & CSS로 만들어진 UI 컴포넌트 - 640여개 - 100% 무료 - 5,925명 이상의 커뮤니티 기여자 - 컴포넌트 종류 : 버튼, 체크박스, 토글, 카드, 로딩, 인풋 소호플렉스(Sohoflex) 웹 에이전시 홈페이지 제작, 모바일 앱 제작, SI솔루션 개발, 온라인 마케팅 전문 디지털 트랜스포메이션 회사입니다.

원문 : https://venngage.com/blog/graphic-design-trends/ 그래픽 디자인은 시대의 신호입니다... 그리고 2023년의 그래픽 디자인 트렌드도 예외는 아닙니다. 팬데믹 이후의 혼란은 급속한 사회 및 기술 변화를 가속화했습니다. 짧은 형식의 비디오는 정적 피드를 방해합니다. Web 3.0 개발은 무한한 온라인 경험에 대한 우리의 욕구를 보여줍니다. 그리고 점점 더 연결되는 우리의 삶은 포괄적인 시각 자료를 그 어느 때보다 중요하게 만들었습니다. 미래에 대한 이러한 상상의 비전은 우리의 거품에서 벗어나고자 하는 새로운 열망과 결합되어 디자인의 경계를 넘어설 것을 간청합니다. 그러나 전체적으로 단순한 시대에 대한 지속적인 향수가 강하게 남아 있습니다. 위의 모든 사항은 브랜..

원문 : https://uxdesign.cc/dark-mode-with-design-tokens-8d7b9d9753a Dark mode with design tokens How to implement dark mode with as little effort as possible uxdesign.cc 소개: 다크 모드란 무엇입니까? 다크 모드는 높은 수준의 유용성을 유지하면서 낮은 수준의 빛을 방출합니다. 출처: Material.io ¹ Google의 머티리얼 디자인 문서의 인용문에서 추측할 수 있습니다. 단순히 어두운 테마입니다. 주로 검정과 회색으로 구성된 색상 팔레트를 사용합니다. 때때로 흐릿한 강조 색상은 브랜드를 제품에 다시 가져옵니다. 그 결과 빛의 수준이 낮아져 배터리 성능이 향상되고 눈의 피..