본문 바로가기

전체 글

 (133)
Firebase를 flutter에서 사용하기. Firebase CLI 설치 Flutter DSK 설치 Flutter 설치 및 테스트는 vscode를 통해서 하면 매우 편함.       Flutter 플러그인추가  Android 개발 환경을 만들어야 하는데 윈도우 PC에서 구성하는 것은 포기... 에뮬레이터를 만들고 실행하는데 오류가 생기는데 그 해결 방법이 너무 복잡하고 안 되는게 너무 많다. 그래서 그냥 macOS에서 개발하기로....
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            초기화 단계를 진행하다 보면 소스 디렉토리를 넣으라는 ..
Electron 앱에서 dark모드 사용하기. Electron의 Main Process 모듈 중 nativeTheme을 사용하면 프로그램 프레임에 다크모드를 적용할 수 있다. https://www.electronjs.org/docs/latest/api/native-theme    nativeTheme 모듈의 themSource 프로퍼티에 "system", "light" 또는 "dark"를 넣어주면 된다.  const {nativeTheme} = require("electron/main")nativeTheme.themeSource = "dark"
크롬에서 다크 모드(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..
Electron과 React를 같이 사용해 보자 - react router Electron과 React를 연동해서 만든 프로젝트에서 React Router를 사용할 때 createHashRouter를 사용해야 한다. createBrowserRouter를 사용하면 빌드한 결과물을 실행하면404 not found 에러가 발생한다.  https://reactrouter.com/en/main/routers/create-hash-router   공식 문서에 의하면 웹서버 없이 사용할 때 crateHashRouter를 사용하라면서그 밑에 보면 이건 추천하지 않으니, 기능이 유사한 createBrowserRouter를 사용하란다. WHAT??? 어쨌든, 에러가 발생하니 createHashRouter를 사용하자.참고로 이글을 쓰는 2024년 7월 5일, React Router 버전은 6.24..
Electron과 React를 같이 사용해 보자 - 배포하기 2024.06.26 - [ELECTRON] - Electron과 React를 같이 사용해 보자. (Electron + React 연동)  지난 글에 이어서 electron과 react가 연동된 프로젝트를 배포해 보자. 당연하지만 react를 먼저 빌드하고 electron을 나중에 해야 한다.   React  react관련 설정은 이미 package.json에 다 되어 있다. "scripts": { ...... "build": "react-scripts build", ...... }, npm run build를 해주면 public폴더 내용을 build로 옮겨준다.  Electron electron을 위해서는 설정할 게 몇 가지 있다. 우선 윈도용 빌드 스크립트를 추가한다. "scripts..

티스토리툴바