소개
안녕하세요. 여러분들께 React Native 지식을 공유해드릴 Wintho 입니다.
저는 Computer Vision을 전공하여, 자동차 업계에서 자율주행 시스템을 개발했고, 현재는 로봇 업계에서 사물인식, 장애물 회피 등의 영상처리 Alg.을 개발하는 개발자입니다.
새로운 영역에서의 개발 Stack을 쌓아보고자 취미로 앱 개발을 시작했습니다. Java와 Swift 언어로 Android/iOS 네이티브 앱 개발도 해봤지만, React Native 만큼 진입장벽이 낮고 개발이 용이한 API도 없다고 생각됩니다. 쉬운 데다가 단 하나의 코드로 iOS/Android 동시 개발이 가능하다는 건 더할 나위 없는 메리트겠죠? :):)
외국에서는 이미 Mega Trend의 흐름에 합류하여 개발자들의 Community도 급증하고 있는 React Native입니다. 국내에서는 React Native의 명성에 비해 그 인지도가 낮은 것이 현실이고요. 많은 분들께 React Native의 훌륭함을 공유해드리고자 본 강의를 제작하게 되었습니다. 수업을 통해 목말라했던 지식을 습득하시는 유익한 시간이 되시길 바라며, 그를 통해 국내에서도 React Native 개발자들의 Community가 활성화 되길 바랍니다.
그럼 강의에서 뵙겠습니다. 감사합니다. ^^;
강의
수강평
- iOS/Android 앱 개발을 위한 실전 React Native - Intermediate
- iOS/Android 앱 개발을 위한 실전 React Native - Basic
- iOS/Android 앱 개발을 위한 실전 React Native - Basic
- iOS/Android 앱 개발을 위한 실전 React Native - Basic
- iOS/Android 앱 개발을 위한 실전 React Native - Basic
게시글
질문&답변
ios 시뮬레이터 실행 오류 납니다.An error was encountered processing the command (domain=com.apple.CoreSimulator.SimError, code=405)
조민정님, 안녕하세요. 지식공유자 Wintho입니다.답변이 늦어져 죄송합니다. 문제가 해결되셨길 바랍니다만, 아직 고군분투 중이시라면 양해의 말씀 드립니다. 해당 문제는 Xcode의 캐시로 인해 발생합니다. 피씨 좌상단의 애플 아이콘 누르시면 '이 맥에 관하여' 라는 탭이 있는데 클릭해서 들어가보시면, 상단에 '저장 공간' 이라는 탭이 있을 겁니다. '관리' 버튼이 보이실텐데 클릭해서 들어가셔서 좌측 메뉴에서 '개발자'를 눌러주시고 'Xcode 캐시'와 '프로젝트 빌드 데이터 및 인덱스'를 삭제한 후에 시뮬레이터를 종료(커맨트+Q)하시고 다시 실행해보시기 바랍니다. react-native run-ios --simulator="iPad Pro (12.9-inch)" 감사합니다.
- 0
- 1
- 4.2K
질문&답변
Could not find "store" in the context of "Connect(AuthForm)"
민정아빠류동수님, 안녕하십니까. 지식공유자 Wintho입니다.답변이 늦어져 죄송합니다. 해당 문제가 해결되지 못해 진도 진행에 이슈가 있었다면 양해의 말씀 드립니다.해당 문제는 App Component를 Provider로 감싸지 않아서 발생하는 오류입니다. Provider는 action을 dispatching하거나 state data를 받기 위해 store에 접근할 수 있도록 도와줍니다. store와 provider가 해당 모듈로부터 제대로 import 되었는지 확인이 필요할 듯 합니다. import React from 'react'; import {AppRegistry} from 'react-native'; import App from './app/index'; import {name as appName} from './app.json'; import { createStore, applyMiddleware, compose } from 'redux'; import { Provider } from 'react-redux'; import promiseMiddleware from 'redux-promise'; import reducers from './app/store/reducers'; import thunkMiddleware from 'redux-thunk'; const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose; const createStoreWithMiddleware = createStore(reducers, composeEnhancers( applyMiddleware(promiseMiddleware, thunkMiddleware) )) const appRedux = () => ( Provider store={createStoreWithMiddleware}> App/> Provider> ) AppRegistry.registerComponent(appName, () => appRedux); 감사합니다.
- 1
- 1
- 613
질문&답변
launchImageLibrary 가 작동하지 않습니다ㅠ
HappyJay님, 안녕하세요. 지식공유자 Wintho입니다. react native image picker가 대대적인 업데이트가 이루어지면서,활용법이 많이 바뀌었는데 uri 접근 방법도 바뀌었네요. 민정아빠류동수님께서 코멘트 해주신 것처럼 response.assets 배열에 접근하시면 됩니다.Image를 하나 pick했을 때에는, response.assets[0].uri로 접근 하시면 됩니다. 참고01 : react-native-image-picker githup pagehttps://github.com/react-native-image-picker/react-native-image-picker/commit/c8f8481eb2c08e8f160ae80177e51c693e887969(사진) 참고02: https://github.com/react-native-image-picker/react-native-image-picker#the-response-object (사진) 현재 버전의 react-native-image-picker로도 Multiple Image 선택은 가능합니다만,Typescript와 Hooks의 개념이 필요합니다.react-native-multiple-image-picker를 사용하셔도 되고 (참고: https://github.com/baronha/react-native-multiple-image-picker),react-native-image-picker를 사용하신다면 다음의 예제 코드를 참고하시기 바랍니다.https://github.com/react-native-image-picker/react-native-image-picker/tree/main/example/src(사진) 감사합니다.
- 0
- 2
- 1.1K
질문&답변
[Stack] Header Bar 커스터마이징은 안드로이드는 안되는 건가요 ? ㅜㅜ
권현서님, 안녕하십니까. 지식공유자 Wintho입니다. 질문 주신 내용에 대한 답변 드리겠습니다. iOS보다 성가시긴 하지만 안드로이드도 header bar configuring이 가능합니다. headerTitle: 이 아니라,headerTitle: props => 로 시도해보시길 바라며, 안드로이드는 ios처럼 headerTitle이 default로 가운데 정렬이 되지 않습니다. 따라서, logo.js 파일에서 Image 태그의 style에 alignSelf: 'center'를 추가해주시기 바랍니다. @logo.js ... render () { return ( style={{width: 40, height: 40, alignSelf: 'center'}} source={Logo} /> ) }... 감사합니다.
- 0
- 3
- 234
질문&답변
[Stack] Header Bar 커스터마이징은 안드로이드는 안되는 건가요 ? ㅜㅜ
권현서님, 안녕하십니까. 지식공유자 Wintho입니다. 질문 주신 내용에 대한 답변 드리겠습니다. iOS보다 성가시긴 하지만 안드로이드도 header bar configuring이 가능합니다. headerTitle: 이 아니라,headerTitle: props => 로 시도해보시길 바라며, 안드로이드는 ios처럼 headerTitle이 default로 가운데 정렬이 되지 않습니다. 따라서, logo.js 파일에서 Image 태그의 style에 alignSelf: 'center'를 추가해주시기 바랍니다. @logo.js ... render () { return ( style={{width: 40, height: 40, alignSelf: 'center'}} source={Logo} /> ) }... 감사합니다.
- 1
- 2
- 317
질문&답변
React Navigation 셋업 오류
김부릉님, 안녕하세요. import를 할 때 중괄호 사용 여부는, 다른 파일에서 export하는 방법에 따라 상이합니다. default로 export를 하게 되면 import할 때 중괄호를 안 쓰고요, 그렇지 않은 경우에는 import할 때 중괄호를 쓰게 됩니다. e.g.case1) export하는 파일에서 -> export class example extends Component { ...} import하는 파일에서 -> import { example } from '[export하는파일경로]'case2) export하는 파일에서 -> export default class example extends Component { ...} import하는 파일에서 -> import example from '[export하는파일경로]' routes.js 작성하고 AuthStack.Navigator로 화면 호출할때 오류 라고 하는게 정확히 어떤 부분인지요? 강의에서는 'compont' 라는 경로를 사용하지 않는데, 혹시 경로나 파일 이름을 부분적으로 임의 생성하신거라면, import시 문제가 될 수 있습니다. 감사합니다.
- 0
- 1
- 1.1K
질문&답변
에러가 납니다...
이정훈 님, 안녕하세요. 질문 주신 내용을 찾아보니, android gradle이 JDK와 충돌하는 이슈인 것 같습니다.참고: https://stackoverflow.com/questions/58293436/could-not-compile-settings-gradle-react-native react-native init [pjt] 로 신규 프로젝트 생성하셨다고 하셨는데, 버전 명시는 따로 하지 않으신 건지요?? 버전 호환성의 문제로 보입니다만, 만약 버전 명시를 안하신 거라면 강의에서 안내드린 버전으로 신규 생성해보시기 바랍니다. 강의를 따라가셔도 되고, 강의자료로 올려둔 코드의 package.json에 보시면 모든 버전을 확인하실 수 있으십니다. 감사합니다.
- 0
- 1
- 455
질문&답변
react-native init error
KYUNGMIN KIM님, 안녕하세요. 지식공유자 Wintho 입니다. 우선 pod 관련 에러는, ruby gem에서 기인하는 것 같습니다. => https://github.com/CocoaPods/CocoaPods/issues/1890 755로 local 폴더에 파일 읽기/쓰기 권한을 줘보시기 바랍니다.=> sudo chmod 755 /usr/local 아래 유첨사진의 에러는 pod 관련 에러가 해결되면 문제 없을 것으로 보입니다만.그래도 문제가 해결되지 않는다면, 새롭게 프로젝트를 생성해보시기 바랍니다. 감사합니다.
- 0
- 4
- 683
질문&답변
설치 오류
eeej42님, 안녕하세요. 지식공유자 Wintho입니다.해당 질문에 답변 드립니다. 저도 개인 프로젝트 진행하다가 동일한 문제에 마주쳤습니다. 몇 시간 전에 Babel이 7.15 버전으로 업데이트 되었는데, 그 버그인 것으로 보입니다. 1. 기존 프로젝트에서 쓰고 계시던 @babel/core (디렉토리: [project]/node_modules/@babel/core) 전체를 새 프로젝트에 복사해서 붙여넣기 또는 2. @babel/core를 7.14 버전으로 downgrade 하는 방법으로 해결 가능합니다. 참고: https://stackoverflow.com/questions/68659516/react-native-property-body41-of-blockstatement-expected-node-to-be-of-a-type 감사합니다.
- 0
- 1
- 150
질문&답변
launchImageLibrary 이미지 로드 안 됨
eeej42님, 안녕하세요. 지식공유자 Wintho 입니다.해당 질문에 답변 드립니다. 전체 코드나 react native image picker 버전을 알려주시겠어요??방금 launchImageLibrary 함수로 테스트 해봤는데, 특별한 이상은 보이지 않습니다.. 감사합니다.
- 0
- 1
- 222