velopert / dealing-with-react-native Goto Github PK
View Code? Open in Web Editor NEW리액트 네이티브를 다루는 기술
Home Page: https://bit.ly/velopert-react-native
리액트 네이티브를 다루는 기술
Home Page: https://bit.ly/velopert-react-native
React Native 0.71 이상 버전부터 프로젝트를 만들 때 TypeScript 환경을 만들어집니다.
TypeScript는 12장부터 다루므로 그 전에 프로젝트를 만들땐
npx react-native init LearnReactNative --version 0.70
와 같이, --version 0.70
을 포함해야합니다.
그리고, 12장과 15장에서 새로운 TypeScript 환경 프로젝트를 생성할땐 --template react-native-template-typescript
를 생략해도 됩니다.
e.g.
npx react-native init ArticlesApp
프로젝트 생성 명령어 변경
yarn config set ignore-engines true
npx [email protected] articles-server --quickstart
strapi v4로 업데이트를 하려고 했지만
v4는 정말 별로입니다..! 정말 많이 안정화가 되고 docs가 더 성숙해지지 않는 이상 v4를 쓰는건 별로 좋지 않을 것 같아요.
components/PostCard.js
return (
<View style={styles.block}>
<View style={[styles.head, styles.paddingBlock]}>
<Pressable style={styles.profile} onPress={onOpenProfile}>
source={
user.photoURL
? {
uri: user.photoURL,
}
: require("../assets/user.png")
}
resizeMode="cover"
style={styles.avatar}
/>
...
</Pressable>
</View>
...
책에는 컴포넌트가 없습니다.
확인 부탁드립니다 :)
p516
안녕하세요 벨로퍼트님!
실습 다이어리 만들기 - daylog 부분 실습 마지막 부분에 AsyncStorage 부분까지 끝내고
앱을 다시 리로딩 하니까 다음과 같은 에러가 뜹니다.
Reduce of empty array with no initial value
찾아보니 처음에 빈배열로 들어와서 생기는 오류 같은데, 어떤식으로 바꿔줘야 하나요?
아니면 제가 어떤 부분을 놓친걸까요...?
const markedDates = useMemo(
() => logs.reduce((acc, current) => {
const formattedDate = format(new Date(current.date), 'yyyy-MM-dd')
acc[formattedDate] = { marked: true }
return acc
})
, [logs])
Originally posted by JeesubKim December 13, 2021
function CustomButton({onPress, title, hasMarginBottm}){
return (
<View style={[styles.block, ...
...
}
const styles=StyleSheet.create( {
// block style 없음
overflow: { //overflow style 사용되는 곳 없음
borderRadius:4,
overflow:'hidden'
```</div>
Originally posted by cotingmaster November 18, 2021
안녕하세요, 정말 너무 좋은 책으로 찾아와주셔서 감사합니다.
요즘 혹시 react-native-image-picker 에서는 manifest.xml 파일에 use permissions을 적어주지 않아도 되는 것인지 확인차 질문드립니다.
책 내용에서는 p467 상단에 있는 내용이고,
https://github.com/react-native-image-picker/react-native-image-picker
여기 링크에서 버전 4.3.0부터 manifest에 아무것도 쓰지 말라고 하는 것 같아서요.
제가 정말 궁금한 내용은 이것이 아니라 다음에 올릴 질문인데요, 혹시 제가 이것을 안해서 이따가 쓸 오류가 나타나는 건지 확인해보려고 이 질문을 드립니다. 메인 질문을 바로 다시 작성하도록 할게요. 감사합니다.
안드로이드의 경우 별도로 권한 설정을 해주지 않아도 괜찮습니다. 단, 만약에 여러분이 나중에 이 라이브러리를 프로젝트에서 사용하는데, 앱에서 찍은 사진을 스토리지에 저장을 하고 싶다면 WRITE_EXTERNAL_STORAGE 라는 권한을 추가해 주어야 합니다. Android에서의 권한 설정은 다음과 같이 AndroidManifest.xml 파일에서 합니다. 참고로, 이번 실습에선 권한을 추가하지 않아도 모든 기능이 정상적으로 작동하니, 이 과정을 생략하셔도 무방합니다.
issue 실수로 달았습니다; 삭제해주세요;
환경
jdk: javac 20.02
노드 버전: v16.17.0
gradle: 8.0.1
안드로이드 스튜디오 에뮬레이터 - 정상 실행 됩니다.
안드로이드 스튜디오에서 .android 연결 시킨채로요.
yarn android를 실행하면 오류가 발생합니다.
구글 서칭을 해보면 아래의 명령어로 고치라는데
npx react-native doctor를 실행하면 아래와 같은 오류가 나오는데 저아래의 오류때문에 문제가 발생하는지 모르겠는데요.
✓ Adb - Required to verify if the android device is attached correctly
✖ JDK - Required to compile Java code
해당 문제를 고쳐서 다 체크표시되게 한다음, yarn android를 실행했는데
info � Tip: Make sure that you have set up your development environment correctly, by running react-native doctor. To read more
about doctor command visit: https://github.com/react-native-community/cli/blob/main/packages/cli-doctor/README.md#doctor
Compilation with Kotlin compile daemon was not successful
java.lang.Exception: Cannot create empty file: C:\Users\hs\Desktop\reactNative\LearnReactNative\LearnReactNative1\node_modules@
react-native\gradle-plugin\build\kotlin\compileKotlin\cacheable\caches-jvm\jvm\kotlin\source-to-classes.tab
at org.jetbrains.kotlin.daemon.common.CompileService$CallResult$Error.get(CompileService.kt:60)
at org.jetbrains.kotlin.daemon.common.CompileService$CallResult$Error.get(CompileService.kt:59)
at org.jetbrains.kotlin.compilerRunner.GradleKotlinCompilerWork.compileWithDaemon(GradleKotlinCompilerWork.kt:218)
at org.jetbrains.kotlin.compilerRunner.GradleKotlinCompilerWork.compileWithDaemonOrFallbackImpl(GradleKotlinCompilerWork
.kt:150)
at org.jetbrains.kotlin.compilerRunner.GradleKotlinCompilerWork.run(GradleKotlinCompilerWork.kt:124)
at org.jetbrains.kotlin.compilerRunner.GradleCompilerRunnerWithWorkers$GradleKotlinCompilerWorkAction.execute(GradleComp
ilerRunnerWithWorkers.kt:79)
at org.gradle.workers.internal.DefaultWorkerServer.execute(DefaultWorkerServer.java:63)
at org.gradle.workers.internal.NoIsolationWorkerFactory$1$1.create(NoIsolationWorkerFactory.java:66)
at org.gradle.workers.internal.NoIsolationWorkerFactory$1$1.create(NoIsolationWorkerFactory.java:62)
at org.gradle.internal.classloader.ClassLoaderUtils.executeInClassloader(ClassLoaderUtils.java:100)
at org.gradle.workers.internal.NoIsolationWorkerFactory$1.lambda$execute$0(NoIsolationWorkerFactory.java:62)
at org.gradle.workers.internal.AbstractWorker$1.call(AbstractWorker.java:44)
at org.gradle.workers.internal.AbstractWorker$1.call(AbstractWorker.java:41)
at org.gradle.internal.operations.DefaultBuildOperationRunner$CallableBuildOperationWorker.execute(DefaultBuildOperation
Runner.java:204)
at org.gradle.internal.operations.DefaultBuildOperationRunner$CallableBuildOperationWorker.execute(DefaultBuildOperation
Runner.java:199)
at org.gradle.internal.operations.DefaultBuildOperationRunner$2.execute(DefaultBuildOperationRunner.java:66)
at org.gradle.internal.operations.DefaultBuildOperationRunner$2.execute(DefaultBuildOperationRunner.java:59)
at org.gradle.internal.operations.DefaultBuildOperationRunner.execute(DefaultBuildOperationRunner.java:157)
at org.gradle.internal.operations.DefaultBuildOperationRunner.execute(DefaultBuildOperationRunner.java:59)
at org.gradle.internal.operations.DefaultBuildOperationRunner.call(DefaultBuildOperationRunner.java:53)
at org.gradle.internal.operations.DefaultBuildOperationExecutor.call(DefaultBuildOperationExecutor.java:73)
at org.gradle.workers.internal.AbstractWorker.executeWrappedInBuildOperation(AbstractWorker.java:41)
at org.gradle.workers.internal.NoIsolationWorkerFactory$1.execute(NoIsolationWorkerFactory.java:59)
at org.gradle.workers.internal.DefaultWorkerExecutor.lambda$submitWork$0(DefaultWorkerExecutor.java:169)
at java.base/java.util.concurrent.FutureTask.run(FutureTask.java:264)
at org.gradle.internal.work.DefaultConditionalExecutionQueue$ExecutionRunner.runExecution(DefaultConditionalExecutionQue
ue.java:187)
at org.gradle.internal.work.DefaultConditionalExecutionQueue$ExecutionRunner.access$700(DefaultConditionalExecutionQueue
.java:120)
at org.gradle.internal.work.DefaultConditionalExecutionQueue$ExecutionRunner$1.run(DefaultConditionalExecutionQueue.java
:162)
at org.gradle.internal.Factories$1.create(Factories.java:31)
at org.gradle.internal.work.DefaultWorkerLeaseService.withLocks(DefaultWorkerLeaseService.java:249)
at org.gradle.internal.work.DefaultWorkerLeaseService.runAsWorkerThread(DefaultWorkerLeaseService.java:109)
at org.gradle.internal.work.DefaultWorkerLeaseService.runAsWorkerThread(DefaultWorkerLeaseService.java:114)
at org.gradle.internal.work.DefaultConditionalExecutionQueue$ExecutionRunner.runBatch(DefaultConditionalExecutionQueue.j
ava:157)
at org.gradle.internal.work.DefaultConditionalExecutionQueue$ExecutionRunner.run(DefaultConditionalExecutionQueue.java:1
26)
at java.base/java.util.concurrent.Executors$RunnableAdapter.call(Executors.java:515)
at java.base/java.util.concurrent.FutureTask.run(FutureTask.java:264)
at org.gradle.internal.concurrent.ExecutorPolicy$CatchAndRecordFailures.onExecute(ExecutorPolicy.java:64)
at org.gradle.internal.concurrent.ManagedExecutorImpl$1.run(ManagedExecutorImpl.java:49)
at java.base/java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1128)
at java.base/java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:628)
at java.base/java.lang.Thread.run(Thread.java:834)
FAILURE: Build failed with an exception.
A failure occurred while executing org.jetbrains.kotlin.compilerRunner.GradleCompilerRunnerWithWorkers$GradleKotlinCompilerWor
kAction
Could not delete 'C:\Users\hs\Desktop\reactNative\LearnReactNative\LearnReactNative1\node_modules@react-native\gradle-plug
in\build\kotlin\compileKotlin\cacheable\caches-jvm'
-> metro 관련 모듈을 삭제하고 다시 설치하니까 되네요..? 암튼.. 해결됬네요..
기존에 댓글 조회하기 부분에 handler 가 잘못설정되어있었습니다.
{
"method": "GET",
"path": "/articles/:articleId/comments",
- "handler": "article.find",
+ "handler": "comment.find"
Originally posted by cotingmaster November 18, 2021
안녕하세요, 정말 너무 좋은 책으로 찾아와주셔서 감사합니다.
요즘 혹시 react-native-image-picker 에서는 manifest.xml 파일에 use permissions을 적어주지 않아도 되는 것인지 확인차 질문드립니다.
책 내용에서는 p467 상단에 있는 내용이고,
https://github.com/react-native-image-picker/react-native-image-picker
여기 링크에서 버전 4.3.0부터 manifest에 아무것도 쓰지 말라고 하는 것 같아서요.
제가 정말 궁금한 내용은 이것이 아니라 다음에 올릴 질문인데요, 혹시 제가 이것을 안해서 이따가 쓸 오류가 나타나는 건지 확인해보려고 이 질문을 드립니다. 메인 질문을 바로 다시 작성하도록 할게요. 감사합니다.
잘못 import 하는 코드가 포함됨
import {SafeAreaProvider, SafeAreaView} from 'react-native-safe-area-context';
이렇게 불러오기
remove(state, action) {
const index = state.findIndex(todo => todo.id === action.payload)
state.splice(index)
},
책에 나온 remove 함수 부분인데요,
flter()
로 하면 제대로 되는데 splice()
로 했을 때, 두번째 아이템부터는 괜찮은데 맨 처음 껄 삭제하면 모든 아이템이 삭제돼요
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.