JavaScript (12) 썸네일형 리스트형 firebase 보안 파이어베이스는 firestore database와 storage에 규칙을 설정할 수 있는 도구를 제공한다. 이 규칙은 누군가의 비정상적인 작업 시도나 버그에 의한 오류를 방지할 수 있도록 매우 많은 기능을 제공한다. 위와 같이 로그인 한 사용자만 DB 작업을 허용하는 규칙을 만들 수도 있다. storage도 규칙을 만들 수 있다. 규칙은 업로드 가능한 파일의 크기를 제한하는 등 다양한 옵션을 제공한다. firebase API key 보안 설정. https://console.cloud.google.com/apis/credentials Google 클라우드 플랫폼로그인 Google 클라우드 플랫폼으로 이동accounts.google.com 파이어 베이스를 사용하려면 API키가 필요한데 이 키가 소스코드에 포함이 돼야 한다. 그러면 누구나 이 키를 보려면 볼 수 있는데 보안상 문제가 되지 않을까?? 이 키를 사용해서 누군가 내 자원을 마구 사용하거나 내 프로젝트를 방해할 수 있다. 그래서 이 키를 위한 제한사항을 설정하는 기능을 firebase에서 지원하다. 구글 클라우드 콘솔에서 사용자 인증 정보로 들어가면 내가 발급한 API키를 볼 수 있다. Browser key를 클릭하고 다음 페이지에서 애플리케이션 제한사항을 설정할 수 있다. .. Firebase Hosting firebase로 호스팅하는 절차를 알아보려고 합니다. 파이어베이스는 처음 사용해 보는데 사용법 안내가 아주 잘 되어 있습니다. Hosting하는 절차도 버튼 클릭 몇 번과 안래를 따라하기만 하면 금방 끝납니다., 시작하기를 눌러서 호스팅 설정을 시작합니다. 위와 같이 단계별로 무엇을 해야하는지 아주 자세하게 알려줍니다. 첫단계는 Firebase CLI 설치. 다음은 로그인. firebase CLI에서 파이어베이스 프로젝트를 만든 계정으로 로그인합니다. firebase login 로그인이 끝나면 나오는 안내 문구입니다. 다음은 호스팅을 위해서 파이어베이스 프로젝트를 초기화 합니다. firebase init 초기화 단계를 진행하다 보면 소스 디렉토리를 넣으라는 .. 크롬에서 다크 모드(dark mode) 테스트 하는 방법. prefers-color-scheme. 웹 에서 현재 시스템의 화면 모드는 prefers-color-scheme를 미디어 쿼리로 확인하면 된다. 자바스크립트를 사용하는 경우 matchMedia함수를 사용해서다음과 같이 사용한다. https://developer.mozilla.org/ko/docs/Web/API/Window/matchMedia window.matchMedia("(prefers-color-scheme: dark)") 반환값은 MediaQueryList 객체인데, 이 객체 속성 중 matches를 사용하면 되겠다. https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList 그럼 matchMedia 반환 값을 사용해서 아래와 같이 코드를 사용한다. window.matchMe.. div가 맨 위에 있는지 확인하는 방법. div가 맨 위에 있는지 아니면 다른 html element에 가려져 있는지 알고 싶을 때 다음과 같이 하면 됩니다. 1. getBoundingClientRect로 위치를 구한다. 2. 확인하고 싶은 좌표를 선택한다. 3. 좌표에 있는 최상위 element를 찾는다. 4. 내 element와 최상위 element가 같은지 확인한다. 위와 같은 단계를 거치면 됩니다. id가 container이 div의 우측 하단 코너가 현재 화면에 보여지는지 확인하는 예를 들어보겠습니다. const _id = "container"; const _container = document.getElementId("container"); const _rect = _container.getBoundingClientRect(); co.. 아직 까지 console.log 만 사용하시나요??? 습관적으로 또는 귀찮다는 이유로 여태껏 console.log만 사용하고 있었는데 우연히 console 객체가 아주 다양한 함수를 제공하고 있다는 걸 알았습니다. 사실, 그동안 알아보려고 하지도 않았습니다. ㅎㅎㅎ https://developer.mozilla.org/en-US/docs/Web/API/console 이것들 중 자주 사용할 만한 것 몇 개만 보겠습니다. 1. 기본 출력 const _width = 100; const _height = 50; console.log(_width, _height); console.log({_width, _height}); 아마 저처럼 기본 기능만 사용하시지 않을까요? ㅎ 출력 결과는 아래와 같습니다. 단순히 변수만 출력하는 것 보다 객체 형태로 출력하면 보기에 훨씬.. 중첩된 div에서 마우스 클릭 이벤트 전달 방지. div가 중첩되어 있을 때 마우스 클릭 이벤트를 전달하고 싶지 않을 때가 있습니다. 그림과 같이 BODY, Bottom, Top이 중첩된 구조에서 Top이 팝업 메뉴라 가정하고, Bottom이나 BODY 부분에 마우스 클릭 이벤트 핸들러를 추가해서 Top을 닫는 코드를 넣었다고 가정해 보겠습니다. 코드를 작성 후 실행하면, 의도와 다르게 Top 부분을 클릭해도 Top이 닫혀버립니다. 이유는 Top을 클릭하면 그 이벤트가 Bottom, BODY로 전달되기 때문입니다. 이럴때 사용할 수 있는 것이 stopPropagation입니다. https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation Event.stopPropagation() - We.. css 속성 값으로 계산 식 넣기. calc를 사용하면 css 값을 계산식으로 사용할 수 있습니다. width: calc(100vh - 60px); calc는 position으로 fixed나 absolute를 사용해서 특정 위치에 고정시킨 div 크기를 정할 때 유용합니다. 이때, right, bottom이 0px인 경우 별 문제없습니다. 그러나, 화면 중간에 표시할 때 width, height를 비율로 사용하면 원하는 결과가 안 나옵니다. 이때 calc를 사용하면 창 크기를 변경했을 때 내가 원하는 만큼 화면을 채울 수 있습니다. 아래와 같이 height에 calc를 사용하면 바닥에서 30px 이동한 후 높이를 다 채울 수 있습니다. .calc-test { position: fixed; right: 5px; bottom: 30px; wi.. 이전 1 2 다음
