JadeCode

공식문서 https://reactnavigation.org/docs/getting-started/ https://reactnavigation.org/docs/getting-started/ reactnavigation.org expo로 프로젝트 생성 후 tabs로 설치하면 자동으로 설치된다. 그렇지 않으면 하나하나 설치해주어야 한다. 필자는 처음부터 expo로 설치했다. 설치 npm install @react-navigation/native npm install @react-navigation/native-stack with expo npx expo install react-native-screens react-native-safe-area-context with bare React Native npm i..

에러메세지 읽기. 무엇이 잘못되었고 문제가 무엇인지에 대한 첫번째 힌트이다. 에러메세지가 완벽하지 않은 경우도 있지만 제일 첫번째 에러가 생긴 이유를 알 수 있다. 에러메세지를 보면 해결을 위해 어디를 살펴봐야 하는지와 어떤 부분을 수정해야 하는지도 알 수 있다. 추가적으로 아랫부분에 스택트레이스를 살펴보면 어디에서 에러가 발생했는지 알 수 있다. 보다보면 유용한 정보가 있다. 공식문서를 살펴보는 것이 좋은 해결책이 될 수 있다. 모바일기기의 에러메세지보다 터미널의 에러메세지를 보는 것이 더 분명하다. CONSOLE.LOG이용 console.log를 이용하면 어플리케이션의 흐름을 이해하기 좋다. 값이 출력되거나 변수나 상태의 값이 출력되게 할 수도 있다. 자바스크립트로 원격으로 디버깅하기 터미널에서 m버..

스크롤뷰는 전체 UI가 렌더링 될 떄마다 안에 있는 항목을 전부 렌더링한다. 그래서 목록이 아주 길다면 성능에 문제가 생길 수 있다. 대체는 FlatList 세부기능을 확인해 보면 보이는 항목만 렌더링하고 화면 밖의 항목은 사용자가 스크롤해야 로딩 및 렌더링된다. {list.map((item: string, idx: number) => { return ( {item} ); })} FlasList로 변환하는 작업 커스텀매핑 지우고 프로퍼티로 추가한다. 데이터를 수동으로 매핑하는 대신 해당 작업을 flatlist로 전달해서 필요한 사항만 렌더링하는 방식으로 목록을 효율적으로 렌더링한다. data property 목록에서 출력할 데이터를 지정하는 역할 {list.map(()=>)} 에서 list부분 rende..

styled-components 리액트에서 처음 styled-components를 사용해보았을 때 센세이션을 느껴 react-native에서도 사용할 것이다. 스타일을 컴포넌트화 해서 다양한 곳에 사용할 수 있고 props로 값을 넘겨 다양한 스타일링이 가능하다는 장점이 있다. npm install styled-components npm install @types/styled-components @types/styled-components-react-native //TypeScript 하지만 styled-component로 코드를 작성하면 치명적인 단점이 있다. className이 해시값으로 만들어지기 때문에 스타일을 수정할 때 애를 먹는다. 그래서 babel-plugin-styled-components..

직접 자신이 가지고있는 모바일기기로 결과물을 확인해도 좋고 가상머신을 활용해도 좋다. expo는 다 지원하기 때문에 모바일 기기가 없어도 안드로이드 화면과 ios화면을 볼 수 있는 가상머신을 설치해 보자. Android 1. android Studio 설치 2. 우측 상단에 More Actions 에서 Virtual Device Manage클릭 3. device를 만들 때 Play Store아이콘이 있는 템플렛으로 디바이스를 만들어야 한다. 4. Actions 실행버튼 누르면 된다. 5. npm run start로 코드를 실행시킨 후 a를 눌러 android Emulator로 결과물 확인 IOS 1. xcode 설치 2. preference > Locations > Command Line Tools에 버..

상대경로로 import를 하면 불편한 점이 있다. 만약 파일의 경로를 수정했을 때 ../../ 의 무한지옥으로 갈 수 있다는 점이다. 그 상황을 해결하기 위해 나는 항상 상대경로가 아닌 절대경로로 설정을 하는 습관이 있다. expo로 프로젝트를 만들면 babel.config.js 와 tsconfig.json 이라는 파일이 있다. babel-plugin-module-resolver 를 설치한다. setup a custom alias for directories, specific files, or even other npm modules. npm install --save-dev babel-plugin-module-resolver https://www.npmjs.com/package/babel-plugin-..

react native //expo 설치 npm install --global expo-cli //맥북이라면 watchman 설치 brew update brew install watchman expo init my-project npx expo login --username "jiyeong" 리액트 네이티브를 사용하면 실제로 앱을 만들 수 있다. Reactjs일 경우 브라우저 돔으로 화면을 띄운다. 하지만 네이티브는 브라우저 없는 인터페이스로, 우리와 운영체제(ios,안드로이드)사이에 있다. 그래서 리액트네이티브로 앱을 만들면 ios와 안드로이드코드로 번역된다. RN은 ios와 안드로이드 코드로 번역할 수 있는 bridge역할이 있다고 말할 수 있다. 예를들어 버튼을 만들 때 react는 화면에 버튼을 ..