라벨이 javascript인 게시물 표시

Nuxt.js/Vue.js 에서 전역 함수를 사용할 때

 좋은 방법인지는 모르겠지만 나는 이렇게 사용중 1. js 파일 작성   예를 들면 아래 같이 assets/js/common.js 파일 하나를 작성 export function sum (a, b) {   return a + b; } 2. 플러그인 파일 작성   plugins 디렉토리에 아래처럼 플러그인 파일 작성. 이름은 예를 들면 global.js i mport Vue from 'vue' import * as Common from '../assets/js/common' Vue.prototype.$common = Common 3. 플러그인 등록   nuxt.config.js에 아래처럼 플러그인 등록. ssr 설정은 옵션 plugins: [   {src: '~/plugins/global.js', ssr: false}, ] 4. 컴포넌트에서 사용   html에서는 $common.sum(1, 2) 처럼 script에서는 this.$common.sum(1, 2) 처럼 사용하면 된다

React native webview에서 오디오 재생(부분해결)

1. 환경 - React native 0.55 WebView 컴포넌트에 오디오 재생(Audio.play())을 포함한 html 소스를 사용시 "cannot find variable Audio" 오류가 발생했다. 사용하는 소스는 DB에 저장되어 있고 PC 웹에서도 사용하므로 이 소스를 변경할 수는 없다. 2. 해결 1) react-native-audio-toolkit 설치    https://github.com/react-native-community/react-native-audio-toolkit/blob/master/docs/SETUP.md 를 참조해서 패키지를 설치한다. react-native link로 링크 시 app/build.gradle의 dependencies에는 제대로 들어가지 않아서 이부분만 직접 입력했다. 문서에는 수동 링크 부분에 패키지 이름이 react-native-community _ audio-toolkit 이라고 되어있는데 react-native-community / audio-toolkit 으로 입력해야 한다. dependencies {   ...   implementation project(':@react-native-community/audio-toolkit')   ...  } 2) Audio 대신 Player 사용   클래스 상단에 아래 코드를 추가하면 WebView 내에서도 this.Audio로 사용할 수 있다. export default class 클래스 extends Component {   Audio = Player;   constructor () { ... } 그 다음 html 소스에서 "Audio"를 모두 "this.Audio"로 바꾸면 된다. 소스 = 소스.replace(/Audio/gm, 'this.Audio'); WebView 컴포넌트는 아래처...

Nuxt "Cannot read property toLowerCase of undefined" 오류

0. 상황 - Nuxt 1.4.0 - Vue 2.5.16   window.addEventListener('message', someFunc);를 추가하니 "Cannot read property toLowerCase of undefined" 오류가 발생했다. 1) someFunc : 단순히 이벤트를 받아서 넘어온 인자를 확인하고 현재 컴포넌트의 data에 설정하는 함수. 대충 표현하자면 이런 코드이다. somFunc: function (event) {   if (event.data && event.data.type === 'TYPE') {     this.someVal = event.data.value;   } } 2) 넘어오는 값   parent window에서 오류가 발생한 페이지를 iframe으로 불러오고 onload되면 아래처럼 보낸다. (iframe).contentWindow.postMessage({type: 'TYPE', value: 'VALUE'}, '*');  1. 해결   addEventListenr함수의 3번째 인자로 false를 추가했다. window.addEventListener('message', someFunc, false ); 3번째 인자는 listener에 대한 옵션으로 boolean값으로 주면 들어온 이벤트를 전파하는 방법(이벤트 순서)을 설정할 수 있다. true면 capturing을 사용, false면 하지 않겠다는 뜻이다. (bubbling하겠다는 건지는 정확히 모르겠다) addEventListner와 이벤트 순서에 대한 상세는 아래 페이지들 참조. https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener https://www.quirksmode.org/js/events_or...

코드 조각모음

[Javascript] * n명의 사용자를 랜덤으로 m개의 팀으로 나누는 방법 1) 팀 번호를 셔플   teams = [1, 2, ..., m].shuffle() 2) 사용자를 셔플(선택사항)    users = users.suffle() 3) 팀 배정   for user, idx in users {     user.team_no = teams[idx % m]   } * n명의 사용자를 랜덤으로 m명씩 팀으로 나누는 방법 1) 사용자를 셔플    users = users.suffle() 2) 팀 배정   for user, idx in users {     user.team_no = idx / m   } * array shuffle [1,2,3,...].sort(() => Math.random() - 0.5) * object deep copy obj2 = JSON.parse(JSON.stringify(obj)) * object shallow copy obj2 = {...obj}

javascript Date를 python datetime으로 변환

1. 왜 하게 되었는가 프론트(vue.js)에서 firebase realtime database에 단순 Date()로 시간을 저장했는데 이 값을 백(django)에서 불러와서 비교해야 함. => 형식을 맞출 필요 2. 어떻게 하였는가 1) 구글 검색하여 형식을 맞춤. now = datetime.now() python_date = datetime.strptime(js_date, "%a %b %d %Y %H:%M:%S %Z%z (한국 표준시)") 2) timezone naive와 timezone aware 문제 now와 python_date를 비교하려니 timezone문제가 발생. -첫 번째 방법 : 기본 내장된 pytz를 사용하고 parsing을 now를 이용하여 해결. import pytz now = datetime.now(pytz.UTC) python_date = now.strptime(js_date, "%a %b %d %Y %H:%M:%S %Z%z (한국 표준시)") - 두 번째 방법 : django.utils.timezone을 사용 python_date = datetime.strptime(js_date, "%a %b %d %Y %H:%M:%S %Z%z (한국 표준시)").replace(tzinfo=timezone.utc) 3. 참조 - https://docs.python.org/2/library/datetime.html#strftime-and-strptime-behavior - https://stackoverflow.com/questions/8153631/js-date-object-to-python-datetime 4. 좋은 글 - https://8percent.github.io/2017-05-31/django-timezone-problem/ 5. 여담 ISO format으로 저장을 추천. javascript라면 new Date()...