Wintho

조민정님,
안녕하세요. 지식공유자 Wintho입니다. 답변이 늦어져 죄송합니다. 문제가 해결되셨길 바랍니다만, 아직 고군분투 중이시라면 양해의 말씀 드립니다.
해당 문제는 Xcode의 캐시로 인해 발생합니다. 피씨 좌상단의 애플 아이콘 누르시면 '이 맥에 관하여' 라는 탭이 있는데 클릭해서 들어가보시면, 상단에 '저장 공간' 이라는 탭이 있을 겁니다. '관리' 버튼이 보이실텐데 클릭해서 들어가셔서 좌측 메뉴에서 '개발자'를 눌러주시고 'Xcode 캐시'와 '프로젝트 빌드 데이터 및 인덱스'를 삭제한 후에 시뮬레이터를 종료(커맨트+Q)하시고 다시 실행해보시기 바랍니다.
react-native run-ios --simulator="iPad Pro (12.9-inch)"
감사합니다.

ios 시뮬레이터 실행 오류 납니다.An error was encountered processing the command (domain=com.apple.CoreSimulator.SimError, code=405)

<span style="color: #495057; font-family: 'Noto Sans KR', -apple-system, 'system-ui', 'system-ui', 'Apple SD Gothic Neo', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', Helvetica; font-size: 14px; background-color: #ffffff;">민정아빠류동수님,
<span style="color: #495057; font-family: 'Noto Sans KR', -apple-system, 'system-ui', 'system-ui', 'Apple SD Gothic Neo', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', Helvetica; font-size: 14px; background-color: #ffffff;">안녕하십니까. 지식공유자 Wintho입니다. 답변이 늦어져 죄송합니다. 해당 문제가 해결되지 못해 진도 진행에 이슈가 있었다면 양해의 말씀 드립니다. 해당 문제는 App Component를 Provider로 감싸지 않아서 발생하는 오류입니다. Provider는 action을 dispatching하거나 state data를 받기 위해 store에 접근할 수 있도록 도와줍니다. store와 provider가 해당 모듈로부터 제대로 import 되었는지 확인이 필요할 듯 합니다. 
<span style="color: #495057; font-family: 'Noto Sans KR', -apple-system, 'system-ui', 'system-ui', 'Apple SD Gothic Neo', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', Helvetica; font-size: 14px; background-color: #ffffff;"> <index.js>
<div style="color: #d4d4d4; background-color: #1e1e1e; font-family: Menlo, Monaco, 'Courier New', monospace; font-size: 14px; line-height: 21px; white-space: pre;">
<div>import React from 'react';</div>
<div>import {AppRegistry} from 'react-native';</div>
<div>import App from './app/index';</div>
<div>import {name as appName} from './app.json';</div>
 
<div>import { createStore, applyMiddleware, compose } from 'redux';</div>
<div>import { Provider } from 'react-redux';</div>
<div>import promiseMiddleware from 'redux-promise';</div>
<div>import reducers from './app/store/reducers';</div>
<div>import thunkMiddleware from 'redux-thunk';</div>
 
<div>const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;</div>
 
<div>const createStoreWithMiddleware = createStore(reducers, composeEnhancers(</div>
<div>applyMiddleware(promiseMiddleware, thunkMiddleware)</div>
<div>))</div>
 
<div>const appRedux = () => (</div>
<div><Provider store={createStoreWithMiddleware}></div>
<div><App/></div>
<div></Provider></div>
<div>)</div>
 
<div>AppRegistry.registerComponent(appName, () => appRedux);</div>
</div>
&nbsp;
<span style="color: #495057; font-family: 'Noto Sans KR', -apple-system, 'system-ui', 'system-ui', 'Apple SD Gothic Neo', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', Helvetica; font-size: 14px; background-color: #ffffff;">감사합니다.

Could not find "store" in the context of "Connect(AuthForm)"

HappyJay님,
안녕하세요. 지식공유자 Wintho입니다.
react native image picker가 대대적인 업데이트가 이루어지면서, 활용법이 많이 바뀌었는데 uri 접근 방법도 바뀌었네요.
민정아빠류동수님께서 코멘트 해주신 것처럼 response.assets 배열에 접근하시면 됩니다. Image를 하나 pick했을 때에는, response.assets[0].uri로 접근 하시면 됩니다.
참고01 : react-native-image-picker githup page https://github.com/react-native-image-picker/react-native-image-picker/commit/c8f8481eb2c08e8f160ae80177e51c693e887969 <img src="https://cdn.inflearn.com/public/comments/2c591394-38f4-4706-8418-ba28715cc43a/blob" alt="" width="600" />
참고02: https://github.com/react-native-image-picker/react-native-image-picker#the-response-object
<img src="https://cdn.inflearn.com/public/comments/c0166dde-b2ab-44cc-a4c1-15e35fdcc1a5/blob" alt="" width="600" />
&nbsp;
현재 버전의 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 <img src="https://cdn.inflearn.com/public/files/posts/34d2b4a1-6e2f-4686-86fe-12e440887e93/blob" alt="" />
감사합니다.

launchImageLibrary 가 작동하지 않습니다ㅠ

권현서님,
&nbsp;
안녕하십니까. 지식공유자 Wintho입니다.
&nbsp;
질문 주신 내용에 대한 답변 드리겠습니다.
iOS보다 성가시긴 하지만 안드로이드도 header bar configuring이 가능합니다.
headerTitle: <LogoTitle/> 이 아니라, headerTitle: props => <LogoTitle {...props}/> 로 시도해보시길 바라며,
안드로이드는 ios처럼 headerTitle이 default로 가운데 정렬이 되지 않습니다.
따라서, logo.js 파일에서 Image 태그의 style에 alignSelf: 'center'를 추가해주시기 바랍니다.
@logo.js
...
<p class="p1" style="box-sizing: border-box; margin: 0px; padding: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 12px; line-height: normal; font-family: 'Helvetica Neue'; color: #24292e; background-color: #ffffff;">&nbsp;&nbsp;render () {
<p class="p1" style="box-sizing: border-box; margin: 0px; padding: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 12px; line-height: normal; font-family: 'Helvetica Neue'; color: #24292e; background-color: #ffffff;">&nbsp; &nbsp;&nbsp;return (
<p class="p1" style="box-sizing: border-box; margin: 0px; padding: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 12px; line-height: normal; font-family: 'Helvetica Neue'; color: #24292e; background-color: #ffffff;">&nbsp; &nbsp; &nbsp;&nbsp;<Image
<p class="p1" style="box-sizing: border-box; margin: 0px; padding: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 12px; line-height: normal; font-family: 'Helvetica Neue'; color: #24292e; background-color: #ffffff;">&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;style={{width: 40, height: 40, alignSelf: 'center'}}
<p class="p1" style="box-sizing: border-box; margin: 0px; padding: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 12px; line-height: normal; font-family: 'Helvetica Neue'; color: #24292e; background-color: #ffffff;">&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;source={Logo}
<p class="p1" style="box-sizing: border-box; margin: 0px; padding: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 12px; line-height: normal; font-family: 'Helvetica Neue'; color: #24292e; background-color: #ffffff;">&nbsp; &nbsp; &nbsp;&nbsp;/>
<p class="p1" style="box-sizing: border-box; margin: 0px; padding: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 12px; line-height: normal; font-family: 'Helvetica Neue'; color: #24292e; background-color: #ffffff;">&nbsp; &nbsp;&nbsp;)
&nbsp;
<p class="p1" style="box-sizing: border-box; margin: 0px; padding: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 12px; line-height: normal; font-family: 'Helvetica Neue'; color: #24292e; background-color: #ffffff;">&nbsp;&nbsp;} ...
<p class="p1" style="box-sizing: border-box; margin: 0px; padding: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 12px; line-height: normal; font-family: 'Helvetica Neue'; color: #24292e; background-color: #ffffff;">&nbsp;
<p class="p1" style="box-sizing: border-box; margin: 0px; padding: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 12px; line-height: normal; font-family: 'Helvetica Neue'; color: #24292e; background-color: #ffffff;">감사합니다.

[Stack] Header Bar 커스터마이징은 안드로이드는 안되는 건가요 ? ㅜㅜ

권현서님,
&nbsp;
안녕하십니까. 지식공유자 Wintho입니다.
&nbsp;
질문 주신 내용에 대한 답변 드리겠습니다.
iOS보다 성가시긴 하지만 안드로이드도 header bar configuring이 가능합니다.
headerTitle: <LogoTitle/> 이 아니라, headerTitle: props => <LogoTitle {...props}/> 로 시도해보시길 바라며,
안드로이드는 ios처럼 headerTitle이 default로 가운데 정렬이 되지 않습니다.
따라서, logo.js 파일에서 Image 태그의 style에 alignSelf: 'center'를 추가해주시기 바랍니다.
@logo.js
...
&nbsp;&nbsp;render () {
&nbsp; &nbsp; return (
&nbsp; &nbsp; &nbsp; <Image
&nbsp; &nbsp; &nbsp; &nbsp; style={{width: 40, height: 40, alignSelf: 'center'}}
&nbsp; &nbsp; &nbsp; &nbsp; source={Logo}
&nbsp; &nbsp; &nbsp; />
&nbsp; &nbsp; )
&nbsp;
&nbsp; } ...
&nbsp;
감사합니다.

김부릉님, 안녕하세요.
import를 할 때 중괄호 사용 여부는, 다른 파일에서 export하는 방법에 따라 상이합니다.
default로 export를 하게 되면 import할 때 중괄호를 안 쓰고요,
그렇지 않은 경우에는 import할 때 중괄호를 쓰게 됩니다.
e.g. case1) export하는 파일에서 -> export class example extends Component { ...} &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;import하는 파일에서 -> import { example } from '[export하는파일경로]' case2) export하는 파일에서 -> export default class example extends Component { ...} &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;import하는 파일에서 -> import example from '[export하는파일경로]'
&nbsp;
routes.js 작성하고 AuthStack.Navigator로 화면 호출할때 오류 라고 하는게 정확히 어떤 부분인지요?&nbsp;
강의에서는 'compont' 라는 경로를 사용하지 않는데, 혹시 경로나 파일 이름을 부분적으로 임의 생성하신거라면, import시 문제가 될 수 있습니다.
감사합니다.

React Navigation 셋업 오류

이정훈 님, 안녕하세요.&nbsp;
질문 주신 내용을 찾아보니, android gradle이 JDK와 충돌하는 이슈인 것 같습니다. 참고: https://stackoverflow.com/questions/58293436/could-not-compile-settings-gradle-react-native
react-native init [pjt] 로 신규 프로젝트 생성하셨다고 하셨는데, 버전 명시는 따로 하지 않으신 건지요??
버전 호환성의 문제로 보입니다만, 만약 버전 명시를 안하신 거라면 강의에서 안내드린 버전으로 신규 생성해보시기 바랍니다.
강의를 따라가셔도 되고, 강의자료로 올려둔 코드의 package.json에 보시면 모든 버전을 확인하실 수 있으십니다.
감사합니다.

에러가 납니다...

KYUNGMIN KIM님,
안녕하세요. 지식공유자 Wintho 입니다.
우선 pod 관련 에러는, ruby gem에서 기인하는 것 같습니다. => https://github.com/CocoaPods/CocoaPods/issues/1890
755로 local 폴더에 파일 읽기/쓰기 권한을 줘보시기 바랍니다. => sudo chmod 755 /usr/local
아래 유첨사진의 에러는 pod 관련 에러가 해결되면 문제 없을 것으로 보입니다만. 그래도 문제가 해결되지 않는다면, 새롭게 프로젝트를 생성해보시기 바랍니다.
감사합니다.

react-native init  error

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

감사합니다.

설치 오류

eeej42님,
안녕하세요. 지식공유자 Wintho 입니다. 해당 질문에 답변 드립니다.
전체 코드나 react native image picker 버전을 알려주시겠어요?? 방금 launchImageLibrary 함수로 테스트 해봤는데, 특별한 이상은 보이지 않습니다..
감사합니다.

Wintho

Bài viết