bang9

크롬에서 소스파일 업데이트 하여 디버깅하기.md

라이브러리를 개발하다보면 minified 된 코드를 디버깅해야만 하는 상황이 아주 가끔 생긴다. 사용자의 환경을 통째로 떼오고 싶지만, 그럴 수 없기때문에 재현을 위해서는 고객의 환경(사이트)에서 직접 테스트를 해보는것이 좋다.

재현을 하면서, 단순히 minified 된 코드를 살펴보는것을 넘어서, 직접 코드를 수정하여 로그까지 찍어본다면 더 좋을것 같은데 어떻게 할 수 있을까?

바로 Chrome 에서 지원하는 콘텐츠 override 기능을 사용하면 된다. (링크)

바로 살펴보자!

bang9

원인

JS 환경에서 많이 사용되는 테스트 도구인 Jest 를 사용하다 보면 한번씩 만나게되는 에러가 SyntaxError: Unexpected token 'export' 같은 에러이다.

이는 기본적으로 Jest 가 CJS 모듈 시스템에서 돌아가기 때문이다.

CJS 모듈 시스템에서는 require, module.exports 키워드를 사용한다. 테스트를 실행하기 위해서 ESM 모듈을 만나게 되고 import, export 키워드를 만나게 되면 해석을 할 수 없게되면서 에러가 발생한다.

bang9

const deferredMap = new Map<string, Deferred>();

bang9

import React from "react";
import { TabBarProvider } from "./tab-bar.context";
import TabIndicator from "./tab.indicator";
import TabView from "./tab.view";
import TabLabels from "./tab.labels";
import { StyleSheet, View } from "react-native";
import Styles from "../../libs/lib.styles";

type Props = {
    labels: string[];

bang9

const PromiseAll = (promises: Array<Promise<void>>) => {
  return new Promise((resolve, reject) => {
    let count = 0;
    const results = new Array(promises.length);

    promises.forEach((p, index) => {
      p.then((result) => {
        results[index] = result;
        count++;

bang9

import React, { useCallback, useEffect, useState } from 'react';

import { GroupChannelFilter } from '@sendbird/chat/groupChannel';
import { createGroupChannelListFragment, useSendbirdChat } from '@sendbird/uikit-react-native';

import { useAppNavigation } from '../../../hooks/useAppNavigation';
import { Routes } from '../../../libs/navigation';

const GroupChannelListFragment = createGroupChannelListFragment();
const GroupChannelListScreen = () => {

bang9

import Admob from '@invertase/react-native-google-ads'

const INSTALLED_APP_VERSION = '1.0.0';

function checkSemver(v1, v2): boolean {
 // ... v1 <= v2
 return true;
}

function isValidVersion(start: string, end?: string) {

bang9

interface RenderNode<T extends any[] = any[]> {
    (...args: T): React.ReactNode;
}

function iife(fn: RenderNode) {
    return fn();
}
function RenderListFlat<T>({ data, renderItem }: { data: T[]; renderItem: RenderNode<[item: T, index: number]> }) {
    return <View>{data.map(renderItem)}</View>;
}

bang9

this._panResponder = PanResponder.create({
  // ----------- NEGOTIATION:
  // A view can become the touch responder by implementing the correct negotiation methods.

    // Should child views be prevented from becoming responder on first touch?
    onStartShouldSetPanResponderCapture: (evt, gestureState) => () => {
      console.info('onStartShouldSetPanResponderCapture');
      return true;
    },

bang9

const toWav = require('audiobuffer-to-wav')
const audioContext = new (window.AudioContext || window.webkitAudioContext)()
const fileReader = new FileReader()

function download(blob){
    const url = window.URL.createObjectURL(blob)
    const anchor = document.createElement('a')
    anchor.href = url
    anchor.download = 'audio.wav'
    anchor.click()