Hackatalk-mobile 살펴보기 — Configuration
안내사항
2020년 3월 현재 hackatalk-mobile 가 expo 프로젝트에서 eject되어 react-native 프로젝트로 변경되어 아래 내용과 설정이 많이 상이한 상태이니 혼돈이 없으시길 바라며, 아래 포스팅 내용은 2019년 11월 기준 hackatalk-mobile design-1버전으로 작성 되었습니다.
현재 react-native-seoul meetup에서 오픈소스 프로젝트가 한창 진행중에 있습니다.
제가 현재 참여하고 있는 오픈소스 프로젝트이기도 하지만, 머릿속 정리도 할 겸 이 글을 작성하게 되었고, 이 글을 통하여 hackatalk-mobile 프로젝트를 하고 계신분, 그리고 참여해 보려고 하시는 분들 또한 도움이 되었으면 하는 바램입니다.
이번 포스팅에서는 hackatalk-mobile 구조 이해에 도움이 되는 설정파일들을 한번 쭉 훑어보려고 합니다.
Configuration 관련 파일
우선 첫번째 시간으로 configuration 파일들을 한번 훑어보려고 합니다.
app.json
앱 이름, sdk버전, 플랫폼(ios/android/web), orientation(가로/세로), 스플레쉬 스크린 설정 등의 Expo Manifest에 대한 정보들을 넣어놓는 곳입니다.
app.json에 입력된 대부분의 정보는 소스코드에서 Constants.manifest를 통하여 접근이 가능합니다.
Expo Manifest 외의 자신만의 커스텀한 변수를 넣고 싶다면, extra키 안에 값들을 넣어 놓고, 소스코드에서 Constants.manifest.extra로 접근하면 됩니다.
hackatalk-mobile에서의 쓰임은, README.md 의 app.json 섹션에 세팅법이 나와 있으니 참고하시기 바랍니다.
프로젝트를 처음 세팅하시는 분이라면 app.sample.json파일을 복제하여 app.json로 이름을 변경하여 사용하세요.
rn-cli.config.js
expo 디버깅을 위한 프로젝트를 시작하게 되면 웹브라우저에 새로 뜨는 페이지가 바로 Metro Bundler인데, facebook에서 개발한 React-Native용 Javascript Bundler라고 합니다.
현재 hackatalk-mobile에서 이러한 Metro Bundler 설정을 rn-cli.config.js에서 하게 되는데,
metro config를 건드리는 목적은, svg확장자를 가진 이미지파일을 expo에서 사용하기 위함입니다.
기본 metro-config에서 지원되는 assetExts 확장자 목록에서 보면 svg가 포함 되어 있지만, svg를 사용하기 위해서는 assetExts에 있는 svg를 없애고, sourceExts에 svg를 추가하는 설정을 하게 됩니다.
그리고 추가로 svg를 사용하려고 하면 한 가지 더 마무리 되어야 할 설정이 있는데, app.json에 아래처럼 코드를 넣는 것입니다.
{
“expo”: {
“config”: “./rn-cli.config.js”,
“packagerOpts”: {
"sourceExts": ["js", "jsx", "ts", "tsx", "svg"]
}
}
}이렇게 하면 svg파일을 소스코드파일 import하듯이 사용할 수 있습니다.
이러한 과정은 react-native-svg-transformer의 Documentation에 나와 있습니다.
environment.d.ts
이 설정 파일은 typescript 설정파일인 tsconfig.json에서 참고하는 파일입니다.
hackatalk-mobile에서 주로 사용하는 목적은 png파일과 svg파일을 가진 확장자 등을 typescript안에서 import구문으로 가져다 쓰기 위함입니다.
typescript의 declare module에 대한 설명은 아래 Typescript Document를 참고하시기 바랍니다.
특히 svg에 대한 설정은 아까 metro config에서 보았던 react-native-svg-transformer의 영향을 받았습니다.
__mocks__/
이 폴더 및 파일의 설정 또한 react-native-svg-transformer의 영향을 받았습니다.
jest 테스트 코드를 짤 때 mocking을 하기 위한 설정입니다.
아래 링크된 문서의 내용을 더 내려보시다보면 jest.config.js 파일의 옵션도 건드리고 있으니 참고 하시기 바랍니다.
babel.config.js
module.exports = {
presets: [‘babel-preset-expo’, ‘@babel/preset-typescript’],
sourceMaps: ‘inline’,
plugins: [
[
‘@babel/plugin-transform-runtime’,
{
helpers: true,
regenerator: false,
},
],
‘@babel/proposal-object-rest-spread’,
[‘babel-plugin-styled-components’],
],
};babel-preset-expo는 지금 아래 나열할 기능들을 사용하기 위해 쓰입니다.
- Tree-Shaking(사용하지 않는 코드를 제거함으로써 번들 용량을 줄이는 방식)
- expo 웹 프로젝트에 필요한 설정
- decorator지원
- 네이티브 dependency가 필요할 수 있는 font icon
@babel/preset-typescript는 @babel/plugin-transform-typescript 플러그인을 포함하고 있으며, typescript코드를 빌드 시 js 코드로 번들링 가능하도록 하기 위해 쓰입니다.
플러그인은 프로젝트를 하면서 개발과 테스트코딩의 편의를 위한 플러그인들을 유동적으로 추가하고 없애고 있습니다.
- @babel/plugin-transform-runtime : 바벨에 의해 주입된 헬퍼 코드들이 재사용되게 해줌으로써 코드사이즈를 줄여주기 위한 다양한 옵션을 제공해 줍니다.
- @babel/proposal-object-rest-spread : ES문법 중 Spread연산자를 사용할 수 있게 해줍니다.
- babel-plugin-styled-components : 알아볼 수 있는 클래스명 제공, 서버사이드 렌더링 호환성, 조그만 번들러 용량 등의 기능을 제공하는데, styled-components 에서 사용하라고 추천하는 플러그인입니다.
config.ts
현재는 Google 소셜 로그인을 위한 설정파일로 쓰이고 있습니다.
hackatalk-mobile에서의 쓰임은, README.md 의 config.ts 섹션에 세팅법이 나와 있으니 참고하시기 바랍니다.
프로젝트를 처음 세팅하시는 분이라면 config.sample.ts파일을 복제하여 config.ts로 이름을 변경하여 사용하세요.
.eslintrc.js & .prettierrc.js
eslint와 prettier등을 vscode와 함께 활용하면 개발할 때 쉽게 발견하기 힘든 오타/구문에러, 코드 포멧팅 등을 편하게 함으로써 개발 생산성을 향상시킬 수가 있는데요, eslint, prettier & sort-imports 익스텐션에 대한 설정법은 DongKyun Ko님이 dooboolab medium에 올린 Using eslint, prettier and sort-imports vscode extensions for formatting Open Source Project ‘HackaTalk’ 포스팅을 참고 바랍니다.
이렇게 hackatalk-mobile프로젝트의 Configuration들을 한번 훑어 보았습니다. react-native부터 typescript, babel, expo 에 이르기까지 수많은 세팅들이 복잡하게 얽혀있는 것은 사실이나, 이것들이 시너지 효과를 내어 최상의 퍼포먼스와 최소한의 앱 용량을 낼 수 있도록 도와주는 것들이니 익히는 수 밖에 없을 것 같습니다 😭
잘못된 점이나 수정이 필요한 부분이 있다면 언제든지 코멘트 남겨주시기 바랍니다.
감사합니다.
