xtring.dev

React Native에서 기본으로 제공해주는 `Platform`모듈을 사용하면 iOS와 Android 두 플랫폼을 호환할 수 있습니다! React Native는 크로스 플랫폼 앱을 만들기 위해서 쓰여지는 만큼 Platform을 통한 플랫폼 별 기능 또는 UI를 적용하는 것이 매우 중요합니다. 아주아주 간단한 앱의 경우엔 큰 문제 없이 한쪽의 플랫폼을 통한 개발을 하더라도 큰 문제가 없을 수 있습니다. 하지만 수 많은 기능이 생기다 보면 Android에서는 되는데 iOS에서는 동작하지 않는 라이브러리가 있거나 다른 UI를 보여줘야한다거나 하는 경우가 발생합니다. 이를 위해서 PlatForm을 사용하는 것은 필수적이라고 할 수 있겠습니다. 사용 방법은 아주 간단합니다. 천천히 이해해 볼까요? https:/..

React native로 만든 앱을 빌드하고 APK 파일로 만들어 실기기에 설치해 보겠습니다. 터미널을 이용하여 React Native 프로젝트 폴더로 이동합니다. 해당 프로젝트 폴더의 android 폴더로 이동한 후 아래 명령어를 통해 앱을 빌드합니다. (RN root)/android $ ./gradlew assembleRelease 제가 사용한 맥에서는 5분 정도 기다리니 build가 완료되었습니다. build가 완료되면 RN 프로젝트의 > android/app/build/outputs/apk/release/app-release.apk 로 build된 apk를 찾을 수 있습니다. 이제 APK 파일을 Android 기기에 설치해서 테스트해볼 수 있습니다.

웹 IDE에서 실행 시켜본 결과 위와 같은 결과가 나왔습니다. 작성중...

1. Introduce Flexbox 기존의 웹 layout을 정의하는 방식 보다 세련되고 편한 방법을 제공합니다. Flexbox를 잘 알고 있다면 어떠한 Layout이라도 쉽고 빠르게 정의할 수 있습니다. 사이즈가 불명확하거나 동적인 경우에 효율적이며 쉽게 예측 가능하여 사용하기 편합니다. 웹 뿐만 아니라 React Native에서도 주로 사용되는 Position 방법이기 때문에 잘 알아두면 아주 쓸모가 있습니다! 기본적으로 웹에서는 div요소 즉 block 요소를 기본으로 수직정렬 상태를 가지고 있습니다. 이를 수평정렬하기 위해서는 1. 자식 요소(children)를 inlin-block으로 지정하고 2. `float` 속성 지정을 사용합니다. .item { display: inline-block; ..

history를 보는 중 이전 commit으로 돌아갈 일이 생겨 작업을 마무리하고 다시 원위치로 돌아왔는데 `npx react-native run-ios`을 실행하면 App 자체는 켜지는데 이전에 load 되었던 프로젝트가 실행이 되었다. 이것을 모바일 앱 개발에서 App Crash라고 합니다. 이전에도 이와 비슷한 일이 있어 고민하던 중 Library가 제대로 세팅이 되지 않는 경우가 있었던 기억이 있어 modules를 다시 다운받아야 겠다고 판단했습니다. 하지만 App Crash의 경우 이게 꼭 답이 아닐 수도 있습니다. 따라서 다른 방법도 꼭 생각해 보아야합니다. 이전 커밋 위치로 돌아간다거나 최근 추가한 라이브러리가 제대로 세팅이 되어있는지 등등... 그렇다면 저는 모듈을 다시 다운로드하고 세팅해..

저는 프로젝트 진행 도중 이전 버전의 프로젝트로 다녀올 필요가 있었고 과감하게 SourceTree에서 이전 히스토리로 돌아갔습니다. 하지만 이 에러코드는 때때로 팀원이 작업한 코드를 pull한 경우에도 종종 발생했었는데요. 에러 메세지도 뭔가 자세히 알려주지 않아 항상 헤맸던 기억이 있습니다! [!] Could not automatically select an Xcode project. Specify one in your Podfile like so: project 'path/to/Project.xcodeproj' 두가지 방법을 시도해볼 수 있는데 먼저 /ios 폴더에서 아래 명령어를 실행해주세요! $ npx pod-install 만약 이 방법으로 해결되지 않는다면 두번째 방법을 사용해주세요! 프로젝트의..

JavaScript 프로젝트를 하게 되면 외부 모듈(라이브러리)을 많이 이용하게 됩니다. 라이브러리를 받기 위해서 npm intstall 과 같은 명령어를 많이 보셨을거에요. 그런데 --save 옵션을 봤지만 정확한 이유를 몰랐습니다. save? 저장을 도와주는 옵션인가 정도로 예측할 수 있겠죠? 그러나 우리는 알지도 못하고 마음대로 사용해서는 안되잖아요! 먼저, npm(Node Package Manager)은 프로젝트에 필요한 라이브러리를 다운로드 또는 관리 할 수 있도록 해주는 프로그램입니다. 우리가 일반적으로 npm을 사용하게 되면(npm init 시) package.json 파일을 프로젝트 폴더 바로 아래에서 생성하여 모듈과 해당 모듈의 버전을 관리합니다. 요즘 CLI를 통해서 프로젝트를 생성하게..

React에서 중요한 개념 중 하나인 컴포넌트에 대해서 알아보겠습니다. React를 사용하여 애플리케이션의 인터페이스를 설계할 때 사용자가 볼 수 있는 요소는 여러가지의 컴포넌트(Component)로 구성되어 있습니다. 예를 들어 페이스북의 게시물 하나에 제목, 글과 사용자 정보, 이미지, 입력창, 버튼 등 모두 하나의 컴포넌트입니다. 그리고 게시물 하나에 들어가는 컴포넌트 수만해도 백가지 이상 들어간다고 합니다! 이러한 예시만 보아도 컴포넌트를 잘 만들게 되면 하나의 유기체(컴포넌트의 집합)를 구성하는데 효율적인 구조를 만들 수 있습니다. 컴포넌트의 기능 컴포넌트의 기능은 단순한 템플릿 이상입니다. 데이터가 주어졌을 때 이에 맞추어 UI를 만들어주는 것 라이프사이클(Lifecycle) API를 이용하여..