맨 땅에 프론트엔드 개발자 되기

모바일 앱 개발에 있어서 기기 사이즈, 노치 크기 등이 다 다르므로, react-native-safe-area-context 라이브러리를 사용하면, iOS 와 안드로이드에서 모두 Safe Area(기기 사이즈, 노치 크기 등으로 가려지지 않는 안전지대)를 확보할 수 있다. 에러 해결 react-native-safe-area-context 라이브러리를 설치했는데도 불구하고 위와 같은 에러 메시지가 나온다면, 아래 커맨드를 실행한다. $ npx pod-install ios 그리고 나서 다시 Metro를 실행해주면, 에러가 해결된다.

라이브러리 설치 $ npm install react-native-vector-icons // for TypeScript $ npm install --save-dev @types/react-native-vector-icons 라이브러리 연결 React Native 0.59 버전 이하에서는 아래 명령어로 바로 연결을 해줄 수 있었으나, $ react-native link react-native-vector-icons 0.60 버전 이상부터는 수동으로 연결을 해주어야 한다. - iOS react-native CLI로 프로젝트를 시작했다는 가정하에 진행한다. (Expo CLI로 시작했을 경우, Expo 패키지에 기본적으로 포함되어 있다.) react-native CLI로 프로젝트를 시작하려면, 기본적으로 Xco..

* 예시 프로젝트는 React Native CLI로 만들어진 프로젝트임을 참고 바랍니다. React Native 개발 환경 설정은 공식 문서를 참고하세요. Setting up the development environment · React Native This page will help you install and build your first React Native app. reactnative.dev React Native 프로젝트 폴더 구조 셋팅 react-native init 명령어로 프로젝트를 시작하면 아래와 같은 폴더 구조를 기본으로 셋팅해준다. 해당 프로젝트 루트에 components 폴더와 assets 폴더를 구성할 수도 있지만 app과 관련된 것들을 app 폴더에서 관리해주기 위해 아래와..

React Native React Native는 React를 만든 페이스북이 만든 모바일 앱 개발을 위한 JavaScript 기반 프레임워크다. React와 React Native의 가장 큰 차이점은 React는 JavaScript 라이브러리 이지만, React Native는 프레임워크라는 점이다. React는 JavaScript 라이브러리 이므로 JavaScript를 쓰는 느낌에 더 가깝다면, React Native는 만들어진 프레임을 가져다 쓰는 느낌에 가깝다. 그러나 이 둘의 근본은 같아서 React를 어느정도 사용해본 사람들은 금방 React Native도 익숙해질 수 있다. React Native는 HTML이나 CSS를 사용하지 않는다. 그 대신 JavaScript 쓰레드로부터의 메시지를 사용하..