발생일: 2016.12.13 키워드: React, setState, 리액트, setState not working 문제: setState()로 상태를 변경하려는데, 변경한 상태 값이 적용되지 않는다. 대략 아래와 같은 코드의 컴포넌트이고, { ... getInitialState() { return { foo: 'foo', bar: 'bar' }; }, makeFooUppercase() { var state = this.state; state.foo = 'FOO'; this.setState(state); }, makeBarUppercase() { var state = this.state; state.bar = 'BAR'; this.setState(state); }, makeUppercase() { this..
발생일: 2016.10.12 키워드: document.write, chrome, script, 스크립트 태크 문제: 잘 동작하던 사이트에서 어느 시점에서부터 아래 워닝이 뜬다. A Parser-blocking, cross-origin script, http://example.com/example.js, is invoked via document.write. This may be blocked by the browser if the device has poor network connectivity. 해결책: document.write()로 스크립트 태그를 삽입할 때 발생하는 워닝이고, 확인해보니 크롬 53버전부터 나오는 것이라 한다. 스크립트 태그가 들어가면 페이지가 블럭킹 된다. 스크립트 태그에서 불러오..
발생일: 2016.01.06 키워드: 하이차트, highcharts 문제: 하이차트에서 라인 차트의 마지막에 해당 포인트의 값을 보여주고 싶다. 해결책: 하이차트에서 포인트의 값은 data label 이라 한다. dataLabels 옵션의 enabled 를 true 로 설정해 표현할 수 있다. http://api.highcharts.com/highcharts#plotOptions.line.dataLabels.enabled 마지막 포인트만 보여주고 싶다면, 아래처럼 마지막 여부만 확인해 넣을 수 있다. plotOptions: { line: { dataLabels: { enabled: true, align: 'left', x: 80, formatter: function () { if (this.x === t..
발생일: 2016.01.06 키워드: highcharts, 하이차트, legend, 범례 문제: 하이차트에서 범례(legend) 옆에 마지막 값을 표시하려고 한다. 해결책: legend 옵션에서 값을 변경할 수는 있지만, legend가 출력되는 시점에서는 마지막 데이터를 읽어올 수 없다. 한 틱 딜레이를 주는 방식으로 우회해서 아래처럼 해결할 수 있다. // 마지막 값을 포함해 하단에 보여주는 레전드 옵션 legend: { layout: 'horizontal', align: 'center', borderWidth: 0, itemDistance: 50, labelFormatter: function () { // 레이블이 출력될 때엔 아직 데이터가 렌더링되기 전이다. // 레이블 아래에 마지막 데이터의 값을..
발생일: 2015.10.08 키워드: translate3d, translate2d, GPU 렌더링 문제: 피드 형태의 길이가 긴 페이지에서 한 카드에 translate3d 로 플리킹을 적용해뒀다. 시간이 지나면 피드가 급격히 느려진다. 왜 그런 걸까? 해결책: translate3d는 GPU 렌더링을 사용하고 있는데, GPU 렌더링은 스크롤 영역을 벗어난 이후에도 계속 발생했기 때문이다. 해당 카드가 자주 노출되는 것이 아니라서, 일단은 tranlsate2d 변경하는 것으로 해결했다. 논의: 만약 해당 카드가 자주 노출되는 것이었다면, 성능 개선이 필요하겠다. 스크롤 된 이후에은 translate3d 속성을 제거하는 방식으로 처리하면 될 것 같다. 참고: https://developers.google.co..
발생일: 2015.09.02 키워드: 크론탭, crontab, npm, npmrc, config 문제: 노드 커맨드를 크론탭에서 사용하려고 하는데, 노드에 설정한 기본 설정을 읽어오지 못한다. 해결책: 아래 명령으로 아무 것도 없는 환경을 재현할 수 있다. $ env - 먼저, 이 환경(크론탭이 동작하는 환경)에서 npm이 어떤 파일로부터 전역 설정을 상속받는지 확인해본다. $ env - npm config list -l | grep globalconfig 내 건 전역 설정인 /etc/usr/npmrc 의 것을 사용하고 있었다. 아래와 같이 수정해서 전역 파일에 설정(난 프록시 설정이 필요했다)을 추가했다. $ sudo vi /etc/usr/npmrc
발생일: 2015.07.27 키워드: 웹뷰 비디오, web view video 문제: 얼마 전에 웹뷰로 비디오를 재생하는 작업을 진행했다. iOS 와 안드로이드 동일하게 올라가는 뷰였는데, 작업하면서 꽤 많은 버그가 발생했다. 다음 작업을 위해 메모해둔다. 해결책: - 태그는 동기로 넣자. 비동기로 넣을 경우, 디바이스에 따라 전체 재생이 되지 않는 경우가 있다. iframe으로 선언해 바로 추가하는 방법으로 해결했다. - 풀스크린 전환 시엔 webkitEnterFullScreen() 을 호출한다. - 풀스크린 종료 후, 줌이 틀어지는 이슈 (안드로이드 4.1) meta 태그의 비율을 1.01 로 바꿨다가 다시 1.0 으로 설정하는 방식으로 해결했다. (setTimeout을 적용해줘야 된다) - iOS에..
발생일: 2015.06.23 키워드: iOS, playsinline, webkit-playsinline, 인라인 플레이, iOS 웹뷰, inline play, allowInlineMediaPlayback 문제: iOS에서 웹뷰에서 동영상 재생 시, 풀스크린 대신 인라인으로 재생하려고 한다. 해결책: 1. iOS 웹뷰에서 인라인 플레이 여부 옵션을 true로 설정한다. - UIWebView 의 allowsInlineMediaPlayback 속성을 YES 2. 웹뷰에서 video 태그에서 인라인 플레이 여부 옵션을 추가한다. - 논의: 유튜브 비디오를 인라인으로 재생하려는 경우라면, embeded URL 에 &playsinline=1 파라미터를 넣어주면 된다. 참고: http://stackoverflow.c..
발생일: 2014.07.10 키워드: node, 노드, 문자열 인코딩, 디코딩, euc-kr, utf-8 문제: 노드에서 euc-kr 문서를 읽어 utf-8 로 변경해 처리하려고 한다. 해결책: 노드의 네이티브 인코딩에는 euc-kr 이 포함되어 있지 않다. 대안으로 iconv 라이브러리를 이용해 처리할 수 있다. 1. euc-kr 로 인코딩된 문서는 바이너리로 읽어온다. 2. 새 버퍼에 대상 문자열을 할당한 후, iconv 로 변경한다. function eucKrToUtf8(str) { var iconv = new Iconv('euc-kr', 'utf-8'); var buf = new Buffer(str, 'binary'); return iconv.convert(buf).toString(); } 논의:..