전체 글 (128) 썸네일형 리스트형 크롬에서 다크 모드(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.. jupyter notebook 줄 바꿈. notebook의 cell 또는 output에 코드나 출력결과가 길면 스크롤바가 생긴다. 스크롤 해서 보는 걸 좋아하는 사람은 잘 없겠지? ㅎ 윈도우 vscode 기준으로 settings.json에 다음 2가지를 추가하자. "notebook.editorOptionsCustomizations": { "editor.wordWrap": "on" }, "notebook.output.wordWrap": true 끝~ jupyter notebook 자동 포맷터 설정. Black Formatter 설치 settings.json 사용자 설정에 다음 항목 추가"[python]": { "editor.defaultFormatter": "ms-python.black-formatter", "editor.formatOnSave": true }, Settings 설정에서 format notebook으로 검색 후 아래 2가지 체크. 이젠 notebook에서 작업할 때 코드가 자동으로 예쁘게 정렬된다~ Electron과 React를 같이 사용해 보자. (Electron + React 연동) Electron으로 윈도우용 프로그램을 만들다보니UI를 만드는데 문제가 있더라. HTML과 css를 사용해서 UI를 만들다 보니UI 라이브러리 같은게 있으면 좋겠다는 생각이 들었다. 그러다 불현듯 React가 생각났다. React로 웹 어플리케이션을 만들 수 있는데이것을 Electron에 넣을 수 있지 않을까?Electron도 어차피 크롬을 사용하잖아?? 이런 생각에 구글링 잠깐 해보니 관련 글이 있다!! ㅎㅎ 몇 가지 시행 착오를 겪었지만 결국 Electron과 React를 같이 사용하는 데 성공했다. 윈도우 11에서 테스트 한 결과를 공유합니다! React 프로젝트 설정 먼저, React 프로젝트를 만들자. npx create-react-app electron-react --template ty.. Virtual Environment 만들기! virtualenv, venv, conda 등 여러 가지 방법으로가상 환경을 만들 수 있다. 그중에서 python 3.3 이상을 설치하면 바로 사용할 수 있는 venv를 알아보자. https://docs.python.org/3/library/venv.html# 가상 환경 만들기 python -m venv 가상 환경 폴더이름 활성화하기 각자 사용하는 플랫폼에 맞는 명령을 실행해서 가상 환경을 활성화하면 된다. 하지만, 윈도우의 PowerShell를 사용한다면 보안 이슈로 아래와 같은 오류가 발생한다. Activate.ps1안에 보면 이 오류에 대한 대처 방법이 있다. 위 안내에 있는 명령을 실행하고 다시 활성화하면 오류 없이 가상 환경이 활성화된다. Set-ExecutionPolicy -E.. flutter를 사용할 때 유용한 vscode 설정. 플러터로 ui를 만들 때 const 등 관련 경고 메세지를 볼 수 있습니다. 관련해서 일일이 코드를 넣으면 되지만 더 편리한 방법이 있습니다. "editor.codeActionsOnSave": { "source.fixAll": true} 위 설정을 추가하면 파일을 저장할 때 필요한 코드를 알아서 붙여 줍니다. 그리고 또 하나.이건 정말 필요한 설정입니다. ui를 만들다보면 컴포넌트가 늘어나고그러면 들여쓰기가 점점 늘어나고어디가 시작이고 끝인지 혼잡해집니다. 이럴 때 아래 설정이 아주 유용합니다. "dart.previewFlutterUiGuides": true 이전 1 2 3 4 ··· 16 다음
