꿀팁 저장소

background processing 설정 후

빌드를 진행하는 도중

info.plist 설정 관련 에러가 발생했다.

 위 기능을 사용하기 위해서는

이 설정을 추가적으로 해주어야 한다.

(ios에서) 앱을 껐다 다시 켜면

react-native-sound의 실행이

정상적으로 이뤄지지 않는 경우가 발생했다.

나의 경우에는

react-native-audio와 sound 두개를 모두 사용하는데

두개를 함께 쓰는 환경에서는

playback 셋팅을 해주지 않으면 안된다고한다.

https://github.com/zmxv/react-native-sound/issues/42

정말 어렵게 위의 이슈를 발견했다.

Sound.setCategory('Playback')

요것 한줄이면 이슈 해결된다.

playback 기능을 정상적으로 사용하기 위해서는

이렇게 xcode -> signing & capabilities에서

audio background mode를 활성화 시켜주어야한다.

https://mingule.tistory.com/65

위 블로그에서 언급한 원인으로

불완전한 함수인 setInterval로 인해

버그를 맞이할수있다.

간략히 말하자면

setInterval이 지연 시간을 보장해주지 않기 때문

따라서 ,

나는 빠른 주기로

state를 업데이트 하는

stopWatch 훅스를 만들때

아래와 같이 처리해서 목적을

달성하였따.

export function useStopWatch(start: boolean) {
  const [time, setTime] = useState(0);

  useEffect(() => {
    let interval: any = null;
        
    if (start) {
      const startedTime = Date.now();
      interval = setInterval(() => {
        setTime(Date.now() - startedTime);
      }, 50);
    } else {
      if (interval) clearInterval(interval);
    }

    return () => {
      if (interval) clearInterval(interval);
    }
  }, [start]);

  return { time, setTime };
}

어리석게도

Map을 써야하는 때에도 계속해서 

객체를 써온것 같다.

기초를 다시 다지기위해

오래전 봤던 책을 다시 보는 과정에서

깨달은 바를 기록한다.

Map은 객체와 유사하고

Set은 배열과 유사하다.

Map

객체는 활용도가 높고 상당히 자유도가 부여되지만

그에따라 아래와 같은 문제가 있다.

1. 프로토타입 체인 때문에 의도치 않은 연결이 발생할 수 있다.

2. 객체 안에 연결된 키와 값이 몇개나 되는지 쉽게 알아낼 수 없다.

// 객체 예제
const object1 = {
  "height": 100,
  "width": 200
};

// 객체 크기
Object.keys(object1).length;

// Map 예제
const map1 = new Map();
map1
  .set("height", 100)
  .set("width", 200);
  
// Map 크기
map1.size;

3. 키는 반드시 문자열이나 심볼이어야 하므로 객체를 키로 써서 값과 연결할 수 없다.

// 객체
const object2 = {
  "user": "USER",
  "admin": "ADMIN"
};

// Map
const map2 = new Map();
map2
  .set("user", "USER")
  .set("admin", "ADMIN");
  
const guest = "unknown_001";
map2.set(guest, "GUEST");

4. 객체는 프로퍼티 순서를 전혀 보장하지 않습니다.

Set

Set은 배열과 유사하지만

중복을 허용하지 않는 데이터의 집합이라는

큰 장점이 있다.

다르게 말하면 Set에서는

중복 검사 자체가 필요없다는 뜻이다.

Set에서 중복 데이터를 add하면

해당 액션은 무시된다. (아무일도 일어나지 않음)

const users = new Set();
users
  .add("jaeky")
  .add("julia");

users.delete("jaeky");
users.size;

1. 변수, 함수명을 보다 구체적이고 직관적으로 작성하라

> 변수, 함수명을 짓는데 시간을 들여 곰곰히 생각해보라.

내가 지금 무엇을 만들려고 하는건지

정확히 인지하고 설계한뒤 이름을 지어야 

내일의 내가, 혹은 동료가 두번 고생 안한다.

2. 추상화를 통해 응집도를 높여라

> 먼저, 순수한 함수(pure function)를 작성하도록 항상 노력하자.

순수한 함수는 입력이 같으면 결과도 반드시 같다는 특성과

부수 효과 (side effect)가 발생하지 않아,

함수를 호출한다고 해서 프로그램의 상태가 바뀌는 일이 없다는

특성을 가지고있다.

순수함수를 쓰면 코드 테스트도 쉽고, 함수를 이해하기도 쉽고,

재사용하기도 훨씬 용이해진다.

3. 테스트 코드를 작성하도록 노력하라.

> 그러면 자연스럽게 추상화를 하는 습관을 갖게 될 것이다.

테스트 코드를 짜기위해 기능 단위로

나눠서 함수를 작성하게 될것이고,

명확한 함수의 기능에 맞게 함수명을

지을수 있게 된다.

4. 초보/주니어 개발자에서 벗어나려면 자료구조, 디자인 패턴을 공부하라

> 

5. Frontend 개발자가 중급개발자로 인정받기 위해서는 시간복잡도 향상에 힘을써라

> Backend 개발자와 달리 Frontend 개발자는 초기에

빠르게 실력이 느는것처럼 보이고

3년차와 5년차 7년차가 구현하는 코드에는

큰 차이가 나지않을수 있다.

화면을 그리는데 들어가는 코드는

필연적으로 길게 늘어지고 보기 안좋아보이기 떄문.

다만, 얼마나 효율적으로 동작하는

모델과 컨트롤러를 작성하는지,

상태 관리를 얼마나 효율적으로 하는지에서

Frontend 개발자의 실력이 들어난다.

6. 숏코딩에 힘쓰지말자.

> 예를 들어, 메서드 체이닝을 통한 숏코딩은 직관적이라 괜찮지만 삼항연산자를 통해 길게늘어지는 숏코딩보단 if문으로 직관적으로 작성하자.

jQuery를 쓸일이 거의 없지만

퍼블리싱된 파일을 검토하던중 이슈를 발견했다.

* 문제상황

easescroll을 적용한 상태에서

transition 효과가 있는 모달을 닫자마자 스크롤링을 하면

모달이 완전히 사라지기 전에 스크롤이 모달위에서 동작하면서

사용자 입장에서는 스크롤이 동작하지 않는것처럼 보인다.

하지만, 실제로 모달에 scroll 이벤트를 등록해서 모니터링해보면

모달을 닫자마자 스크롤 할 때, 모달에 스크롤 이벤트가 먹으며

모달이 사라지지 않는 버그가 발생한다.

* 해결방법

modal이 열릴때는 transition효과를 주되,

modal이 닫힐때는 transition효과를 제거하고

바로 닫히게 하는것이다.

easescroll이 페이지 전체의 분위기를 차지하는 반면

modal을 거의 쓰이지 않거나 가끔 쓰일것이다.

기능상의 중요성을 따져보면 easescroll이 우선이기 때문에

modal의 닫힘 기능에서 약간의 양보를 하는것이 맞아보인다.

아니면 easescroll을 대신 다른 라이브러리를 찾아보는것도 방법니다.

<textares
  style={{ resize: 'none' }}
  onKeyDown={e => {
    const numberOfLines = (e.target.value.match(/\n/g) || []).length + 1;
    if (e.which === 13 && numberOfLines >= 3) {
      e.stopPropagation();
      e.preventDefault();
      return false;
    }
  }}
  onChange={onChange}
/>

[react-native-code-push 적용하기]

https://honeystorage.tistory.com/290

[앱 버전 관리, 어떻게 하는게 좋을까?]

https://honeystorage.tistory.com/310

위 두 포스팅을 통해

code-push를 적용하는 방법과

적용 후 어떻게 버전관리를 할지에 대한

저의 고민들을 살펴볼 수 있습니다.

마지막으로

저의 코드푸시 세팅을 공유하고

왜 이런 세팅을 하게되었는지

저의 생각을 정리하고자 포스팅합니다.

코드 푸시 & 버전 체크 플로우

1. 앱이 실행됨

2. 상위 앱 버전이 출시되었는지 API를 호출해 체크

2-1. 상위 앱 버전 존재 -> A

2-2. 상위 앱 버전 없음 -> B

A-1. 필수 업데이트  Alert 오픈

A-2. Alert 버튼 클릭 -> 스토어로 이동

B-1. checkForUpdate메서드로 업데이트 버전이 있는지 체크

B-2-1. 앱 업데이트 버전 없음 -> ㄱ

B-2-2. 앱 업데이트 버전 있음 -> ㄴ

ㄱ-1. 앱 메인 실행

ㄴ-1. 업데이트 패키지  download 진행

ㄴ-2-1. 기준 시간(ex. 10초)이내에 앱 업데이트 완료 -> a

ㄴ-2-2. 기준 시간(ex. 10초)이내에 앱 업데이트 실패 (지연됨) -> b

a-1. 앱 메인 실행

b-1. 앱 메인 실행

b-2. 백그라운드에서 앱 업데이트 패키지 다운로드 계속 실행

b-3. 패키지 다운로드 완료

b-4. 앱 업데이트 진행 안내  Alert 오픈

b-5-1. Alert, 취소 버튼 터치 -> 앱 계속 사용

b-5-2. Alert, 업데이트 버튼 터치 -> 앱 재실행

도식화

악필이지만

좀더 쉬운 이해를 위해

도식화해봤습니다.

위의 흐름에서 저의 고민의 흐름은 이렇습니다.

1) 버전 관리 전략을 어떻게할까?

2) 코드푸시는 핫픽스에만 사용, 최신버전 필수 업데이트는 스토어에서

3) 어떻게 최신버전을 서빙할까? 서버에서 체크

4) 코드푸시가 종종 지연되네...

5) 코드푸시 서버 상태로 업데이트가 지연되면 어쩌지?

6) 업데이트 페이지 뛰어넘기 + 백그라운드 설치

7) 백그라운드 설치 완료 후 업데이트 안내 팝업

8) 중요 업데이트 진행 안내 + 업데이트 권장

좋은 처리 방안인지는

조금 더 생각해볼 여지가 있지만

자체 코드푸시 서버를 구축하지 않는한

이정도의 처리가 최선이 아닐까 하는 생각이 듭니다.

scrollview, flatlist 등 

스크롤 기반 컴포넌트 위에서

텍스트 selectable 기능이 먹지 않는 증상이 있다.

해당 문제는 

스크롤뷰 컴포넌트에

removeClippedSubviews={false}

위의 속성 하나만 추가해주면 해결 가능하다.

피보나치 수 문제를 풀어보았다

팩토리얼과 마찬가지로

기본적인 재귀함수 구현에 대한 문제였다.

피보나치 수는

F0 = 0;

F1 = 1;

Fn = F(n-1) + F(n-2) 라는 공식이 있다.

const fs = require("fs");
const input = fs.readFileSync("/dev/stdin").toString().split(" ");
const value = parseInt(input[0]);

function fibonacci(m, n, arr) {
  const a = arr[0];
  const b = arr[1];

  if (m > n) {
    console.log(b);
  } else {
    const newArr = [b, a + b];
    const _m = m + 1;
    fibonacci(_m, n, newArr);
  }
}

if (value === 0) {
  console.log(0);
} else if (value === 1) {
  console.log(1);
} else {
  fibonacci(2, value, [0, 1]);
}