[React-native + Web] 헬키 개발일지 1.

이번엔 크게 형식 신경 쓸 것 없이 여태껏 뭘 해왔는지를 대충 말해보도록하겠다. 

 

https://github.com/heeboy007/Integrated3DDevEnv

GitHub - heeboy007/Integrated3DDevEnv: Android + iOS + Webpack + React Native + Fiber

일단 이걸 만들어보고 있었는데, 이게 어쩌면 제일 큰 시간을 차지했을지도 모르겠다.

react-native는 기본적으로 안드로이드와 ios 개발환경을 지원하고, expo를 이용하면 ios를 바로 테스팅 해볼 수 있다.

이건 정말 큰 이점인데, 나 같은 mac북 없는 사람들은 써볼만 하다. Apple이 이렇게까지 계발에 폐쇄적인지는 몰랐다.

expo를 쓰면 pod-install을 못하게 된다는 문제점은 있는데... 일단 되니까...

 

여기다가 web + three.js 환경을 심느라 죽는 줄 알았다. three.js는 js에서 3D관련한 것을 로딩할 수 있게 해주는 라이브러리인데, 우리는 3D 아바타를 사용자에게 보여주어야할 필요가 있기에 반드시! 넣어야만 했다. 근데 짜증나게도 잘 알려진 react-native/three/fiber등이 잘? 깔리지 않아서 남이 만들어 놓은 개발 환경을 가져오기로 했다.

 

https://github.com/Rakha112/react-native-animation/

GitHub - Rakha112/react-native-animation

그게 이녀석이다. 어떤 사람이 크리에이터 하면서 올려놓은 것 같은데 라이선스가 눈 씻고 찾아도 없으며 그럼에도 바로 android / ios에서 돌리는데 성공했기 때문에 여기다가 Web만 얹으면 되겠지? 하면서 안일하게 생각했던게 꽤나 시간을 잡아먹었다.

 

길게 이야기 하진 않겠는데 web bundler로는 따로 webpack을 이용했다. metro로는 번들링이 되긴하는데 바로 런타임에러 걸려서 터지는 문제가 있었고, 이런 방향으로 쓰려는 사람이 거의 없어서 troubleshooting하기에는 매우 부적합했다. 그래서 그냥 webpack으로 어떻게든 번들링 하기로 했다. 이게 그 결과물이다.

const babelLoaderConfiguration = {
    test: /\.(js|jsx|cjs|mjs)$/,
    // Add every directory that needs to be compiled by Babel during the build.
    include: transpileLocations,
    resolve: {
        fullySpecified: false
    },
    use: {
        loader: 'babel-loader',
        options: {
            //cacheDirectory: true,
            // The 'metro-react-native-babel-preset' preset is recommended to match React Native's packager
            presets: [
                'module:metro-react-native-babel-preset',
                '@babel/preset-react',
                [ "@babel/preset-env", { "loose": true, "shippedProposals": true } ],
            ],
            // Re-write paths to import only the modules needed by the app
            plugins: [
                '@babel/plugin-proposal-class-properties',
                [ "@babel/plugin-transform-private-methods", { "loose": false } ],
                [ "@babel/plugin-transform-private-property-in-object", { "loose": false } ],
                'react-native-web',
                'inline-react-svg',
            ]
        }
    }
};

사실상 제일 중요한 babel 로더만..!

 

glb, gltf, 따로 번들링 해야하는 녀석들... 전부! 하나하나 챙겨준 끝에 겨우 개발환경을 만들었다. 물론 내 repo를 보면 알겠지만 이미지 로딩등등에서 100%아름답진 않은데, 일단 render가 된다는건 나머지는 어떻게 할 수 있다는 뜻이라서 일단 이렇게 환경을 놔두고 바로 쓰기로 했다.

 

이렇게 해두면 장점은 web으로 개발이 가능하므로 빠르게 기능을 구현해 볼 수 있고, 크게 걱정없이 바로 android, ios등으로 포팅이 가능한 점이다.

 

... 이게 1주 전쯤? 의 이야기 이고, 지금은 따로 기능상 필요한 scene을 개발하고 있다. 잼나다! 

 

이걸 만지면서 느끼는 건데... 나는 아마 모바일 개발자가 잘 맞지 않을까? 하는 느낌이 좀 들고 있다.

어째 내가 완성한 프로젝트, dustiotmanager / 길규 / 이거 등등은 죄다 모바일이 껴있단 말이지... 생각은 해봐야겠다.

내가 linux를 다루는 편이기도 하니까 이게 내 길일지도.