재미나게 사는법?: 9월 2019

2019년 9월 30일 월요일

react-native EUC-KR UTF-8 convert

react-native 에서 EUC-KR UTF-8 Convert 에 대해 설명 한다.

필요 라이브러리

rn-fetch-blob

react-native 에 fetch 가 내장되어 있으나 blob 형태로 가져올수 없어 자동 convert 중 utf-8 로 변경 됨.
blob 으로 화면단까지 가져와 처리할수 있도록 해당 라이브러리 사용.
yarn add rn-fetch-blob

iconv-lite

charset converter. 유명한 그것.
yarn add iconv-lite

buffer

변환 과정에서 buffer 에 담아 변환을 하는데 브라우저에는 내장되어 있으나 react-native 에는 없음.
이전 작업할때 기억에는 debug 모드로 브라우져 연동시 있는것으로 간주하고 작동 했던 것으로 기억 함.
하지만 debug 모드 끄면 없다고 오류 뱉음.
yarn add buffer

base-64

base64 encode decode 그것. rn-fetch-blob 의 data 가 base64 로 넘어옴
yarn add base-64

코드

request

makeQuery(obj) {
    var str = [];
    for (var p in obj)
      if (obj.hasOwnProperty(p)) {
        // str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
        str.push(escape(iconv.encode(p, 'EUC-KR').toString('binary')) + "=" + escape(iconv.encode(obj[p], 'EUC-KR').toString('binary')));
      }
    return str.join("&");
  }

response

RNFetchBlob.fetch('POST', this.url,
      {
        'Content-Type': 'application/x-www-form-urlencoded'
        , 'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/77.0.3865.90 Safari/537.36'
      }
      , this.makeQuery(param)
    )
    .then((response) => {
      
      if(response.info().status != 200){
        throw new Error('status error');
      }
      let base64Decode = base64.decode(response.data);
    let byteArray = new Uint8Array(base64Decode.length);
    for (var i = 0; i < base64Decode.length; i++) {
      byteArray[i] = base64Decode.codePointAt(i);
    }

    let decodedString = iconv.decode(byteArray, 'EUC-KR').toString();

    return decodedString;
    })
  }

블로그 코드넣기 더럽게 어렵네 ㅡㅡ,

2019년 9월 29일 일요일

react-native 초기 설정 정리

react-native 을 사용하며 공통으로 적용해야 할 내용들에 대해서 정리를 해본다.

react-navigation

설명 : 명칭 그대로 react 의 navigation 을 위한 모듈.
단순 사용시 설치 package
yarn add react-navigation
yarn add react-native-gesture-handler
Tab 사용시 추가 설치 package
yarn add react-navigation-stack

react-native-firebase

설명 : firebase 모듈
선행
- 패키지 명 변경 : https://stackoverflow.com/questions/37389905/change-package-name-for-android-in-react-native?answertab=active#tab-top
- firebase 프로젝트 등록 및 필수 파일 다운로드 : https://rnfirebase.io/docs/v5.x.x/installation/initial-setup
package 설치
yarn add react-native-firebase

2019년 9월 5일 목요일

definition 설정 중
wild 카드 사용시 순서 및 설정 법에 대하여 항상 잊는 것 같아 기록 함.

- wild 카드 사용

1. 컨트롤러
return "/test/abcd";

2. tiles 설정파일
<definition name="/test/*" template="/WEB-INF/tiles/layout/print.jsp">
<put-attribute name="body" value="/WEB-INF/jsp/{0}.jsp" />
</definition>
위에서 name 의 test 는 호출하는 controller 의 requestMapping 과는 무관하다.
단순히 return 하는 jsp 파일의 경로 순서의 패턴을 가리키며
put-attribute 의 {0} 도 사용한 wild 카드의 순서를 가리킨다.

- 설정 파일 순차 적용
설정파일을 위에서 부터 읽다가 부합하는 조건이 있으면 xml 하단까지 안가고 해당 설정을 적용 한다.

재미나게 사는법?

2019년 9월 30일 월요일

react-native EUC-KR UTF-8 convert

2019년 9월 29일 일요일

react-native 초기 설정 정리

2019년 9월 5일 목요일

tiles3 주의사항

블로그 보관함

프로필