꿀팁 저장소

textinput 을 사용함에 있어 ios, android 두 진영에서 다르게 동작하는 경우가 종종있다.

그 중에 하나는, textinput의 기본 높이값이 어느정도 주어졌을 때,

ios는 top down 형식으로 써내려오게 되고,

android는 가운데부터 작성하게 된다.

이를 통일시켜주기위해 textAlignVertical: 'top'을 적용해보자 (ios 기준)

웹사이트 개발 / 홈페이지 제작 / android앱 개발 / ios 앱 개발 / server / client / aws / fullstack / buisness partner / 외주 / 용역

https://open.kakao.com/o/sNETgUJb

http://self-made.cloud

1. mongodb download 검색

https://www.mongodb.com/download-center/community

불러오는 중입니다해당링크에서 server탭을 한번 더 클릭

2. 다운로드 실행

3. 설치 위치를 복사

4. 시스템 환경변수(path)에 추가

[ 시스템 환경변수는, 내PC 우클릭 고급설정 환경변수 에서 확인 가능 ]

javascript에 익숙하다면 nodejs에서도 import/export를 쓸수는 없을까? 하고 생각해보셨을겁니다.

가능합니다.

가볍게 따라해보도롣 하겠습니다.

1. esm 라이브러리를 설치한다.

2. index.js, main.js로 파일구성을한다.

main은 주요 실행파일, index는 진입 파일이다.

3. index.js를 다음과 같이 작성한다.

require = require("esm")(module /*, options*/);

module.exports = require("./main.js");

웹사이트 개발 / 홈페이지 제작 / android앱 개발 / ios 앱 개발 / server / client / aws / fullstack / buisness partner / 외주 / 용역

https://open.kakao.com/o/sNETgUJb

http://self-made.cloud

https://www.npmjs.com/package/google-libphonenumber

import { PhoneNumberUtil, PhoneNumberFormat } from 'google-libphonenumber';
const phoneUtil = PhoneNumberUtil.getInstance();

export const trasnPhoneNumber = ({ phone }) => {
    const number = phoneUtil.parseAndKeepRawInput(phone, 'KR');
    return phoneUtil.format(number, PhoneNumberFormat.NATIONAL);
};

웹사이트 개발 / 홈페이지 제작 / android앱 개발 / ios 앱 개발 / server / client / aws / fullstack / buisness partner / 외주 / 용역

https://open.kakao.com/o/sNETgUJb

http://self-made.cloud

지저분한 코드들

일관되지 않은 작성법들이 꼴보기 싫었다

Prettier와 Eslint를 적극 활용해보고자 하는 의지가 생겼다.

Eslint는 문법의 정리를

Prettier로 코드 작성법의 통일을 해보았다.

Prettier를 사용하기위해서는 vscode기준. settings > format javascript enabled를 꺼주어야한다.

그리고 .prettierrc파일에서 포멧을 정한다.

나는 4칸 들여쓰기를 즐기므로 4칸들여쓰기를 설정하고 singlequote, semi등의 옵션을 주었다.

{
    "singleQuote": true,
    "jsxSingleQuote": true,
    "bracketSpacing": true,
    "jsxBracketSameLine": false,
    "arrowParens": "avoid",
    "semi": true,
    "useTabs": false,
    "tabWidth": 4,
    "trailingComma": "all",
    "printWidth": 80
}

웹사이트 개발 / 홈페이지 제작 / android앱 개발 / ios 앱 개발 / server / client / aws / fullstack / buisness partner / 외주 / 용역

https://open.kakao.com/o/sNETgUJb

http://self-made.cloud

Image를 다루다 알수없는 버그가 발생했다.

바로, ImagePicker로 이미지를 주워와 Image에 띄웠을때 이미지가 깨지는 현상이다.

근데, 한번 더 불러와 다시 Image에 띄웠을땐 정상적으로 나타났다.

왜그런지는 아직도 원인을 찾지못햇다.

다만, Image를 감싸고있던 불필요한 View태그를 제거하는 것으로 버그를 해결했다.

구조는 정확히 8개의 태그 속에 Image태그가 들어가있었다.

View ... View... Animated.View ... KeybaordAvoidingView... ScrollView ... View... View... View...

 아주 유용하고 혁신적이다.

변수명을 object의 key로 사용하는 아주 간단한 방법이 있다.

const test = 'coke';
const usage = {};
usage[test] = 5;

이것을 얘기하려는것이 아니다.

es6에서는 비슷한 방식으로 object의 key로써 변수명을 사용할 수 있다.

const test = 'coke';
const usage = {
  [test]: 5,
};

이것이 가능하다.

usage.coke는 5이다.

웹사이트 개발 / 홈페이지 제작 / android앱 개발 / ios 앱 개발 / server / client / aws / fullstack / buisness partner / 외주 / 용역

https://open.kakao.com/o/sNETgUJb

http://self-made.cloud

어떤 이유에서든, initailrouteName 을 동적으로 설정해주고 싶은 순간이  온다.

로그인 작업중, 혹은 로그인 이후 사용자별 처리 등의 순간에 말이다.

어찌하면 될까. 제법 고민도 많이하고 검색도 많이했다.

정답은 initalrouteName 동적으로 설정해주는것이 아닌

switchNavigator를 통해 서로다른 stackNavigator로 연결해주는것에 있었다.

나같은 경우에는 로그인 이후, 사용자의 Role에따라 다른 화면을 기본화면으로 보여주어야했다.

당연히 initailrouteName의 동적설정에 대해서 생각해보게 되었으나

시야를 조금 넓혀보니 switchNavigator가 눈에 들어왔다.

appNavigator

authNavigator

mainNavigator - a_navigator / b_navigator / roleNavigator

로 구성을하고, switchNavigator를 통해 mainNavigator를 구성한다.

roleNavigator를 mainNavigator의 defaultRouter로 설정하고

여기에서 사용자의 역할 (혹은 무언가)을 체크하여  a 혹은 b 화면으로 이동시켜준다.

웹사이트 개발 / 홈페이지 제작 / android앱 개발 / ios 앱 개발 / server / client / aws / fullstack / buisness partner / 외주 / 용역

https://open.kakao.com/o/sNETgUJb

http://self-made.cloud

expo를 쓰면서, 가장 화나는 순간이 찾아왔다.

그동안 잘 동작했고, 영향을 줄만한 코드수정이 없었으나 

ImagePicker가 동작하지 않기 시작했다 - 특히, ios

prod가 문제생긴건 아니라 다행이다.

[ 해결책 ]

permission을 획득한후 setTimeout을 1000 정도 주고 imagepicker를 사용하면

문제없이 잘 동작한다.

웹사이트 개발 / 홈페이지 제작 / android앱 개발 / ios 앱 개발 / server / client / aws / fullstack / buisness partner / 외주 / 용역

https://open.kakao.com/o/sNETgUJb

http://self-made.cloud

react-native를 처음 개발하고 세팅하다보면, 당황스러운 경우를 만나게 된다.

어느순간, 요청에대해  Network request failed 라며 서버로 요청한것이 deny된다.

그럼 다음과 같은 설정을 했는지 확인해보자.

AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>

  <manifest ...>

    <uses-permission android:name="android.permission.INTERNET" />

    <application ... android:usesCleartextTraffic="true" ...>

      ...

    </application>

</manifest>

usesCleartextTraffic='true'

가 핵심이다. 반드시 설정하자

웹사이트 개발 / 홈페이지 제작 / android앱 개발 / ios 앱 개발 / server / client / aws / fullstack / buisness partner / 외주 / 용역

https://open.kakao.com/o/sNETgUJb

http://self-made.cloud