본문 바로가기

분류 전체보기83

react에서 lottie-web 사용 1. bodymovin만 설치하여 사용 *react 에서 bodymovin 이용하여 애니메이션 구현시 lottie-web을 대신 사용 처리 (bodymovin 을 설치할 수도 있으나 react용은 버전이 낮아 lottie-web 사용) -------------- bodymovin 만 설치시에는 아래와 같이 설치 / 사용 ----------------- bodymovin 설치 (https://www.npmjs.com/package/bodymovin) npm install bodymovin - 설치 후 import {bodymovin} from 'bodymovin'; -------------------------------------------------------------------------------.. 2020. 4. 29.
ubuntu 18.04 node 프로그램에서 npm start 했을때 ENOSPC 오류 가 나는 경우 ubuntu 18.04 node 프로그램에서 npm start 했을때 ENOSPC 오류 가 나는 경우 아래 명령 실행 echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p 2020. 2. 11.
Ubuntu 18.04 : npm ERR! code ELIFECYCLE npm ERR! code ELIFECYCLE Step 1: $ npm cache clean --force Step 2: Delete node_modules by $ rm -rf node_modules folder or delete it manually by going into the directory and right-click > delete / move to trash. Also, delete package-lock.json file too. Step 3: npm install To start again, $ npm start 2020. 2. 10.
lets encrypt 를 이용한 웹서버(아파치) 무료 인증서 생성 및 설치 lets encrypt 를 이용한 웹서버(아파치) 무료 인증서 생성 및 설치 명령어 몇줄이면 3개월짜리 무료 인증서가 설치되며, 만료되기 전에 자동 갱신되도록 스캐줄러 등록까지 된다. 안쓸 이유 없다. * 관련 사이트 lets Encrypt :https://letsencrypt.org/ * 아래 certbot 을 이용해 설치 https://certbot.eff.org/ 위사이트 방문하여 중간쯤 에 자신의 시스템을 선택하면 관련 안내페이지로 이동한다. 여기 예제에서는 Apache, Ubuntu 18.04 를 선택하였으므로 이를 기준으로 한다. 위처럼 선택하면 아래와 같이 설치안내 페이지로 이동하며, 그대로 따라하면 된다. * 설치 시 운영중인 웹서버를 내리지 않아도 된다. 위 사이트에 표기된 설치 안내는 .. 2020. 2. 5.
react build (빌드) 시 .js.map 파일 생성 안되도록 처리 react build (빌드) 시 .js.map 파일 생성 안되도록 처리 npm run build 를 통해 빌드시 build 디렉토리에 static/js/*.js.map 파일들이 생성되는데, 이는 크롬 개발자 도구를 통해 소스 확인 시 내가 구성한 각 컴포넌트 구성 및 소스들이 그대로 보이게 된다. 운영 서버에 소스 배포시 위와 같다면 소스가 그대로 노출되기 때문에 좋지 않아 보인다. 아래와 같이 .env 파일을 프로젝트 최상위에 생성하고, 그 내부에 아래와 같은 내용을 넣고 저장한다. - 파일명 : .env GENERATE_SOURCEMAP = false 이후 npm run build 시 *.js.map 파일들이 생성되지 않는다. 그리고, 위 map 파일이 없어 크롬 개발자 도구로 확인 시 소스구조가 .. 2020. 1. 28.
안드로이드 웹뷰에 로컬 HTML 사용하기 안드로이드 웹뷰에 로컬 HTML 사용하기 1. 아래와 같이 src/main 아래에 assets/www 디렉토리가 없으면 생성하고, 그 아래 HTML 파일들을 복사한다. 2. 다음과 같이 웹뷰로드시 로컬 파일을 호출한다. .. mWebView.loadUrl("file:///android_asset/www/index.html"); .. 끝. 2020. 1. 27.
Android - webview 에 user_agent 값 추가 Android - webview 에 user_agent 값 추가 . . mWebView = (WebView) findViewById(R.id.webView); mWebView.getSettings().setJavaScriptEnabled(true); String userAgent = mWebView.getSettings().getUserAgentString(); mWebView.getSettings().setUserAgentString(userAgent+" MyAndroidApp_Agent"); . . 2020. 1. 15.
AdMob(애드몹) 광고 넣기 (Android) 안드로드이드 앱에 AdMob(애드몹) 광고를 넣어보자. 아래 정리한 내용은 아래의 링크를 따라가면 잘 나와있으나, 초보자인 내가 처음 해보니 이해하기 어려워, 다른 초보자들을 위해 정리해봤다. 참고 : https://developers.google.com/admob/android/quick-start [진행 전 확인 사항] - 안드로이드 스튜디오 3.5.1 기준 - 앱의 이름이 "MyTest" - AdMob 에 가입 후 전면광고 광고단위 등록 완료 (가입시 앱ID가 기본 발급되고, 이후 광고단뒤 등록 시마다 광고단위ID 가 각각 발급된다.) - 여기서는 아래의 테스트용 아이디를 사용하고, 실제 앱 배포시에는 자신이 발급받은 아이디를 사용한다. * 앱ID : ca-app-pub-394025609994254.. 2020. 1. 3.
모바일 웹 SPA 페이지 기본 구성 1. myapp 이라는 이름으로 기본 앱 생성 create-react-app myapp 2. 디렉토리 기본 구성 : src 폴더 아래 components 와 res 를 만들고 res 아래 css 를 만든다. (각 컴포넌트들은 components 에, css는 /res/css 에 위치시킬 예정) 3. 페이지 수정 1) src/index.js 수정 import React from 'react'; import ReactDOM from 'react-dom'; import './res/css/style.css'; import App from './App'; import * as serviceWorker from './serviceWorker'; ReactDOM.render(, document.getElementB.. 2019. 12. 23.
React spa 개발환경 설정 (윈도우환경) React spa 개발환경 설정 (윈도우환경) 1. node 설치 - https://nodejs.org/ 에 접속하여 최신 버전 다운로드 / 설치 2. create-react-app 설치 - 윈도우 터미널로 이동하여 아래 명령어로 설치 - npm install -g create-react-app 3. 내 앱 폴더 생성 및 앱 생성 - 윈도우 터미널로 이동(윈도우키+R 누르고 cmd 입력)하여 아래 명령어로 설치 1) d드라이브에 node_app 폴더를 만들고 이 안에 앱들을 생성하려한다. mkdir node_app cd node_app 2) sample 앱 설치 (이름은 자유롭게) create-react-app sample (typescript기반으로 생성하려면 "npx create-react-app s.. 2019. 12. 19.
[안드로이드] 앱 시작시 하얀화면 없애기 style.xml에 아래 내용 추가 @color/colorPrimary @color/colorPrimaryDark @color/colorAccent @null true 출처 : https://devwilson.tistory.com/5 2019. 12. 14.