코딩도 합니다/React Native (11) 썸네일형 리스트형 [리액트네이티브 React Native] Expo 프로젝트 생성하는 방법 / 리액트네이티브 Expo로 구현하기 / How to implement 안녕하세요. 디자인도 하고, 개발도 하는 '디발자 뚝딱'입니다. 이번 포스팅에서는 Expo 프로젝트 생성하는 방법에 대해 공유하겠습니다. How to implement React Native with Expo. React Native로 개발을 하기 위해서는 JAVA, Xcode, SDK, Android Studio 등.. 다양한 인프라가 필요하죠. 리액트네이티브 공부를 하고 싶은데, 이런 초기세팅 때문에 온갖 에러를 만나는 바람에 코드를 한 줄도 적지 못하는 경우가 많습니다. 그.래.서! 사용하는 것이 Expo입니다. Expo는 Xcode나 안드로이드 스튜디오를 사용하지 않고도 앱을 구현할 수 있게 해줍니다. 즉, 안드로이드 스튜디오와 Xcode를 따로 배우지 않고도 리액트네이티브의 코드 자체만을 사용할.. [리액트네이티브 ReactNative] iOS 키보드 안 보일 때 해결 방법 / How to fix the keyboard not showing up / react native textinput keyboard dosen't appear 안녕하세요. 디자인도 하고, 개발도 하는 '디발자 뚝딱'입니다. 이번 포스팅에서는 리액트네이티브로 개발 시 키보드 안 보일 때 해결 방법에 대해 공유하겠습니다. React native textinput keyboard dosen't appear iOS 시뮬레이터에서 textinput을 클릭해도 키보드가 안 나타나서 이 게시글에 들어오셨죠? 그렇다면 제대로 찾아오셨습니다! 해결 방법 1 iOS simulator 안에 있는 Textinput에 focus한 상태로 command(cmd) + K를 입력한다. 해결 방법 2 iOS simulator 상단 탭 > I/O > Keyboard에서 Use the Same Keyboard Language as macOS와 Connet Hardware Keyboard 를 체.. [리액트네이티브 에러 ReactNative Error] Invariant Violation: Module AppRegistry is not a registered callable module (calling runApplication). 안녕하세요. 디자인도 하고, 개발도 하는 '디발자 뚝딱'입니다. 이번 포스팅에서는, 리액트네이티브로 개발 중 만날 수 있는 Invariant Violation: Module AppRegistry is not a registered callable module (calling runApplication). 에러 해결 방법에 대해 공유하겠습니다. 에러 확인 에러내용을 자세하게 봐볼까요? nvariant Violation: Module AppRegistry is not a registered callable module (calling runApplication). A frequent cause of the error is that the application entry file path is incrrect.. [리액트네이티브 ReactNative] styled-component로 border에 style 주는 방법 / How to style a border with styled-component 안녕하세요. 디자인도 하고, 개발도 하는 '디발자 뚝딱'입니다. 이번 포스팅에서는 리액트나 리액트네이티브로 개발 시 사용하는 styled-component로 border에 style 주는 방법에 대해 공유하겠습니다. 자, 먼저 아래의 이미지를 봐주세요. 테이블 양 옆엔 borde가 없는 것을 확인할 수 있습니다. 위 이미지처럼 양 옆의 border없이 하나의 박스를 생성한다고 가정했을 때, 기존의 css에서는 아래의 코드처럼 처리가 가능합니다. 이렇게 하면 위와 아래의 border만 남겨져 있는 모양이 됩니다. border: 1px solid #ddd; // #ddd 컬러의 border를 박스 전체에 씌운다. border-right: none; // 오른쪽 border를 없앤다. border-left:.. [리액트네이티브 ReactNative] This syntax requires an imported helper named ‘__spreadArray’ which does not exit in ‘tslib’. 에러 해결 안녕하세요. 디자인도 하고, 개발도 하는 '디발자 뚝딱'입니다. 리액트네이티브 빌드하는 과정에서 이런 에러를 만났는데요. This syntax requires an imported helper named ‘__spreadArray’ which does not exit in ‘tslib’. 번역기를 돌려보면 이 구문에는 'tslib'에서 종료되지 않는 '__spreadArray'라는 가져온 도우미가 필요합니다. 라고 나오네요. 말이 조금 이상한 거 같은데 tslib에서 발생한 에러라는 건 알 수 있습니다. 해결 방법 터미널을 열고, 해당 프로젝트 경로해서 아래의 명령어를 입력합니다. $ npm install tslib@latest --save 그리고 다시 리액트네이티브 빌드를 실행하여 확인해 보세요 :) [리액트네이티브 React Native] Lexical or Preprocessor Issue ~file not found 에러 해결 안녕하세요. 디자인도 하고, 개발도 하는 '디발자 뚝딱'입니다. 이번 포스팅에서는 리액트네이티브로 개발 시 Xcode 빌드 중 만날 수 있는 Lexical or Preprocessor Issue ~file not found 에러 해결 방법에 대해 공유하겠습니다. In this post, when developing with React Native, How to solve the error [Lexical or Preprocessor Issue ~file not found] 참 지긋지긋하네요. 에러 하나 넘기면 새로운 에러가 나오는 리액트네이티브 앱세팅..ㅎㅎㅎ 자, 이제 해결 방법에 대해 공유할게요. Xcode와 시뮬레이터는 다 종료하고 시도하는 게 가장 깔끔한 느낌..이니 참고하세요! 1. 프로젝트 i.. [리액트네이티브 ReactNative] No such file or directory 해결 방법 안녕하세요. 디자인도 하고, 개발도 하는 '디발자 뚝딱'입니다. 이번 포스팅에서는 리액트네이티브로 개발 시 ios 세팅할 때 만날 수 있는 No such file or directory 에러 해결 방법에 대해 공유하겠습니다. 이 에러는 Xcode에서 재생버튼 눌러서 빌드 했을 때 만나게 된 에러인데요. 해결방법은 매우 간단합니다! 터미널에 아래의 명령어를 입력해 주세요. Xcode와 시뮬레이터는 다 종료한 상태에서 시도해 주세요. $ npm run build:ios 입력 후 완료가 되면 아래와 같은 내용을 볼 수 있습니다. 다시 Xcode로 돌아가서 빌드를 시도하면 정상적으로 진행이 됩니다. 처음엔 리액트네이티브 세팅하는 게 어려웠는데, (물론 지금도 엄청 쉽진 않음) 그래도 반복적으로 겪어보니 에러를 .. [리액트네이티브 ReactNative] Do not use "pod install" from inside Rosetta2 해결 방법 안녕하세요. 디자인도 하고, 개발도 하는 '디발자 뚝딱'입니다. 이번 포스팅에서는 리액트네이티브로 개발 시 ios 세팅할 때 만날 수 있는 경고 해결 방법에 대해 공유할게요. 먼저 경고 메시지를 볼까요? Do not use "pod install" from inside Rosetta2 맥북 M1에서 발생하는 에러라고 하네요. 해결 방법 $ sudo arch -x86_64 gem install ffi $ arch -x86_64 pod install M1의 호환성 때문에 x86_64로 지정해서 실행해야 합니다. [리액트네이티브 ReactNative] Failed to launch the app on simulator, An error was encountered processing the command 해결 안녕하세요. 디자인도 하고, 개발도 하는 '디발자 뚝딱'입니다. 이번 포스팅에서는 리액트네이티브 개발시 ios 빌드할 때 만날 수 있는 에러 Failed to launch the app on simulator, An error was encountered processing the command 해결 방법에 대해 알아보겠습니다. 해당 에러를 번역해 보면, 시뮬레이터에서 앱을 시작하지 못했습니다. 명령을 처리하는 동안 오류가 발생했습니다. 라는 뜻입니다. 해결방법 캡쳐는 맥 버전인데, 윈도우에서도 똑같이 해주시면 됩니다. 열려 있는 시뮬레이터 앱 상단에 위치한 [Quit Simulator]를 눌러 시뮬레이터를 종료해주세요. 시뮬레이터 강제종료로 해결하세요! 강제종료 후 재실행 하면 해결됩니다 :)
