174만명의 커뮤니티!! 함께 토론해봐요.
미해결
React Native with Expo: 제로초에게 제대로 배우기
eas build --platform android --profile development 위 eas 빌드 명령어를 실행했는데 거의 30분째 Build in progress... 문구만 보이네요, 좀 찾아봤더니 Free Tier라 큐에 대기시간때문인 것 같은데.. 원래 이런건가요?
해결됨
[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스
에러 어떻게 고치나요?
해결됨
[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스
yarn codegen 명령어 실행 시, ✖ Failed to load schema from http://main-practice.codebootcamp.co.kr/graphql : Unexpected response: "unconditional drop overload" 이와 같은 에러가 뜨네요. 혹시 서버가 지금 잠시 닫힌걸까요? graphql로도 접속이 안되어서 문의드립니다.
미해결
React Native with Expo: 제로초에게 제대로 배우기
안녕하세요 강사님 강의 15회차입니다. npx expo install 명령어를 통해서 expo-location 설치했고, 정상적으로 import * as Location from "expo-location"으로 정상 import 되었고 Node_modules의 expo-location으로도 잘 이동됩니다. Node_modules도 전부 삭제했다가 깔아보고 빌드도 다시 해봤는데 ERROR Error: Cannot find native module 'ExpoLocation', js engine: hermes 에러가 발생하고, 이 에러발생시에 WARN Route "./modal.tsx" is missing the required default export. Ensure a React component is exported as default. warn도 함께 나옵니다.(import가 제대로 되지않아 코드 하단부를 expo에서 안읽는것 같습니다) 해결방법좀 부탁드립니다.
해결됨
[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스
안녕하세요, 현재 이미지 업로드 및 수정 과제를 진행중에 발생한 CORS 에러에 대해 질문드립니다. 새로운 게시글의 이미지 input 데이터를 graphQL에 전송하는 것은 문제가 없습니다. 수정하는 게시글에서 이미지를 onChange를 통해 updateFile에 업데이트하는 것도 문제가 없습니다. 최종적으로 수정을 완료하는 graphQL에 통신을 하는 과정에서 다음과 같은 에러가 발생합니다. 며칠전에 같은 작업을 했을 때에는 문제가 없었던 부분이라 질문드립니다.
미해결
React Native with Expo: 제로초에게 제대로 배우기
앱이 설치되지 않은 경우, 설치 안내 웹페이지가 아닌 스토어로 이동시키려면 어떻게 해야할지 알 수 있을까요?
미해결
React Native with Expo: 제로초에게 제대로 배우기
왜 expo go에 threads-clone 클론이 없을까요? 그냥 아래 이미지처럼만 있습니다.
미해결
배달앱 클론코딩 [with React Native]
학습을하다가 dimension개념과 usewindowdimenstion을 알게되었는데 화면 전환시 가로 세로의 길이를 알려주는 건데 안드로이드에서는 값이 바뀌는데 ios에서는 바뀌지 않습니다. 해결방법이 있을꺄요?
해결됨
아바타 커뮤니티앱 만들기 (React Native Expo)
로그인 과정에서 refresh token은 강의 편의상 생략한 건가요?! 따로 사용하지 않은 이유가 있는지 궁금합니다.
해결됨
[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스
수업 외 질문인데요. 시작은프리캠프 강의에서 사용된 캐릭터 움직이는 애니메이션?은 어떤 프로그램으로 만드신거에요?
미해결
React Native with Expo: 제로초에게 제대로 배우기
(node:49559) [DEP0040] DeprecationWarning: The `punycode` module is deprecated. Please use a userland alternative instead. (Use `node --trace-deprecation ...` to show where the warning was created) 설치할 때 터미널에 이러한 오류가 발생해서 시키는대로 node --trace-deprecation 를 입력했더니 아래 처럼 뜹니다. 그냥 무시해도 되겠죠? ➜ threads git:(master) ✗ node --trace-deprecation Welcome to Node.js v22.9.0. Type ".help" for more information. > punycode { version: '2.1.0', ucs2: { decode: [Function: ucs2decode], encode: [Function: ucs2encode] }, decode: [Function: decode], encode: [Function: encode], toASCII: [Function: toASCII], toUnicode: [Function: toUnicode] } > (node:51239) [DEP0040] DeprecationWarning: The `punycode` module is deprecated. Please use a userland alternative instead. at node:punycode:3:9 at BuiltinModule.compileForInternalLoader (node:internal/bootstrap/realm:399:7) at BuiltinModule.compileForPublicLoader (node:internal/bootstrap/realm:338:10) at loadBuiltinModule (node:internal/modules/helpers:108:7) at Module._load (node:internal/modules/cjs/loader:1099:17) at TracingChannel.traceSync (node:diagnostics_channel:315:14) at wrapModuleLoad (node:internal/modules/cjs/loader:217:24) at Module.require (node:internal/modules/cjs/loader:1339:12) at get (node:internal/modules/helpers:223:33) at REPL1:1:1
해결됨
[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스
next js 14버전, tailwind도 3.4.17로 설치하였는데, @apply 가 먹히지 않네요. 어떻게 하나요? globals.css에도 @tailwind base; @tailwind components; @tailwind utilities; 입력 시, 'Unkown at rule @tailwind' 라는 메시지가 송출됩니다. tailwind.config.ts (js->ts 변경) 파일에도 module.exports = { content: [ "./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}", "./app/**/*.{js,ts,jsx,tsx}", "./src/**/*.{js,ts,jsx,tsx}", ], theme: { extend: { colors: { background: "var(--background)", foreground: "var(--foreground)", 철수가좋아하는색깔: "blue", 영희가좋아하는색깔: "green", }, }, }, plugins: [], }; 입력했습니다.
미해결
React Native with Expo: 제로초에게 제대로 배우기
수강노트는 어디에서 볼수있나요? 깃에는 최종코드만 있어서 에러가 발생해가지구요 실행시키기 위해 npx expo를 많이했는데도 에러가 발생하더라구요 ERROR Error: Cannot find native module 'ExpoLocation', js engine: hermes ERROR Error: Cannot find native module 'ExponentImagePicker', js engine: hermes
해결됨
아바타 커뮤니티앱 만들기 (React Native Expo)
저장 버튼을 동일하게 작성했는데 화면상에 그려지지 않더라구요. 공식문서도 확인해보고 찾아보는데, isFocused나 useLayoutEffect등을 통해 실험해봐도 저장 버튼이 보이지 않습니다. 무엇을 잘못 작성했나 싶어 자료를 다운로드 받아 post 의 _layout.tsx 와 write.tsx도 복사, 붙여넣기 하여 확인했는데도 저장버튼이 보이지 않았습니다. 그런데, post의 _layout에서 headerRight을 작성하니 보입니다. setOptions가 동작하지 않는 것 같이 보이는데, 원인을 잘 모르겠습니다. 어떻게 해결하면 될까요? import CustomButton from "@/components/CustomButton"; import DescriptionInput from "@/components/DescriptionInput"; import TitleInput from "@/components/TitleInput"; import useCreatePost from "@/hooks/queries/useCreatePost"; import { ImageUri } from "@/types"; import { useNavigation } from "expo-router"; import { useEffect } from "react"; import { FormProvider, useForm } from "react-hook-form"; import { StyleSheet } from "react-native"; import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view"; type FormValues = { title: string; description: string; imageUris: ImageUri[]; }; export default function PostWriteScreen() { const navigation = useNavigation(); const createPost = useCreatePost(); const postForm = useForm<FormValues>({ defaultValues: { title: "", description: "", imageUris: [], }, }); const onSubmit = (formValues: FormValues) => { createPost.mutate(formValues); }; useEffect(() => { navigation.setOptions({ headerRight: () => ( <CustomButton label="저장" size="medium" variant="standard" onPress={postForm.handleSubmit(onSubmit)} /> ), }); }, []); return ( <FormProvider {...postForm}> <KeyboardAwareScrollView contentContainerStyle={styles.container}> <TitleInput /> <DescriptionInput /> </KeyboardAwareScrollView> </FormProvider> ); } const styles = StyleSheet.create({ container: { margin: 16, gap: 16, }, }); import { colors } from "@/constants"; import { Feather } from "@expo/vector-icons"; import { Link, Stack } from "expo-router"; export default function PostLayout() { return ( <Stack screenOptions={{ headerTintColor: colors.BLACK, contentStyle: { backgroundColor: colors.WHITE, }, }} > <Stack.Screen name="write" options={{ title: "글쓰기", headerShown: true, headerLeft: () => ( <Link href={"/"} replace> <Feather name="arrow-left" size={28} color={"black"} /> </Link> ), }} /> </Stack> ); } +추가로 확인한 부분. app의 _layout.tsx에서 <Stack.Screen name="post" options={{ headerShown: false }} /> 이 친구를 주석하면 헤더가 두 개 나오게 되는데, 숨겨놨던 루트에 저장 버튼이 떠 있더라구요. 이걸 어떻게 수정하면 되는건지.. 어렵네요
해결됨
[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스
안녕하세요 해당수업중 강의 내용대로 했는데 실행시 아래와 같이 에러 뜨고 정상 실행이 안됩니다. TypeError: react_dom_1.default.findDOMNode is not a function at ReactQuill.getEditingArea ( http://localhost:3000/_next/static/chunks/node_modules_5754136c._.js:16760:43 ) at ReactQuill.instantiateEditor ( http://localhost:3000/_next/static/chunks/node_modules_5754136c._.js:16631:50 ) at ReactQuill.componentDidMount ( http://localhost:3000/_next/static/chunks/node_modules_5754136c._.js:16590:14 ) at LoadableComponent ( http://localhost:3000/_next/static/chunks/_2df4111c._.js:296:57 ) at WebEditorPage ( http://localhost:3000/_next/static/chunks/_2df4111c._.js:81:215 ) at ClientPageRoot ( http://localhost:3000/_next/static/chunks/node_modules_next_dist_1a6ee436._.js:2053:50 )
미해결
맛집 지도앱 만들기 (React Native & NestJS)
(너무 초보적인 질문이라면 죄송합니다 ㅠ.. 리액트 초보여서,,) 제가 알기로는 리액트에서는 컴포넌트 리렌더링 시점이 컴포넌트 함수를 직접 재호출하거나, 내부 state가 변경됐을 때로 알고 있는데요, 그런 개념을 가지고 코드를 살펴보면 RootNavigator에서 로그인 여부에 따라 분기처리를 하고 있는데, 여기서 내부 state를 가지고 있는 것도 아닌데, useAuth의 로그인이나 로그아웃 메서드 호출만으로 리렌더링이 되어서 스크린이 변경되고 있는데 어떻게 이 동작이 가능한건지가 궁금합니다. 리렌더링을 발생시키는 조건이 궁금합니다.
미해결
맛집 지도앱 만들기 (React Native & NestJS)
안녕하세요! useGetRefreshToken 에서 응답 성공/실패 시에 각각 useEffect로 감싸서 후속처리를 하게 작성해주셨는데요, 해당 로직들은 항상 해당 함수가 호출되고 나서 응답이 온 후에 순차적으로 실행되어야 하는 로직으로 생각이 들어서 비동기로 동작하는 useEffect를 굳이 사용할 필요가 없다고 생각이 드는데요, useEffect로 사용하신 특별한 이유가 있으실까요!?
미해결
맛집 지도앱 만들기 (React Native & NestJS)
저를 포함한 많은 수강생분들께서 설치시 Gem 과 rn 버전등 강의와 latest 버전의 충돌로 인해 많은 어려움을 겪고 계신 것 같아 2025년 5월 기준 제가 해결한 방법을 공유드리려고 올려둡니다! React Native 공식 문서는 최신이 아닌 0.73 버전으로 확인합니다 => 0.73 버전 안내 링크 프로젝트 생성시에는 @latest 가 아닌 0.73 버전으로 설치를 합니다 npx react-native@0.73 init 사용하실프로젝트명 --version 0.73 설치되어 있는데도 CLT가 기본 설정이면, Xcode 경로로 전환해줘야 합니다 터미널에서 xcode-select -p 를 입력해서 경로를 확인합니다. 만일 결과가 /Library/Developer/CommandLineTools 이렇게 되어있다면 오류가 나는 원인 중 하나입니다! 이 경우 아래 3-b 순서를 통해 변경해줘야 합니다 터미널에서 sudo xcode-select -s /Applications/Xcode.app/Contents/Developer 를 입력해 경로를 변경해줍니다 터미널에서 xcode-select -p 를 입력해 /Applications/Xcode.app/Contents/Developer 와 같이 경로가 변경되었는지 확인해줍니다 여기까지 한 후에도 npm start 가 오류가 발생하면 cd ios rm -rf Pods Podfile.lock pod install cd .. 이를 통해서 cocoapod 관련 찌꺼기를 없애고, bundle install 를 해서 필요한 gem 들을 다시 .install 해줍니다. 이렇게 한 후 npm start 를 하여 오류를 수정했었습니다! IOS 는 또 어떤 요류로 잘 안 될 수 있는지 모르니 .. 그냥 최신 버전으로 하고 강의 내용을 최신 버전에 맞추는게 현명할지도..
미해결
아바타 커뮤니티앱 만들기 (React Native Expo)
선생님께서는 로그인직후 내 정보불러오기위해서 fetchQuery를쓰셨는데 invalidateQueries 를 써도 되는거아닌가? 무슨차이때문에 그런걸까?를 생각해봤는데 fetchQuery는 즉시 가져오는거기때문에 이후 /이나 뭐 어디다른페이지를가도 로딩이안뜨고 바로 최신상태를 유지하는 반면 invalidateQueries 를 사용하면 기존 쿼리를 scale로 처리해줘서 캐싱무효화를해주고 그 해당 query key를 사용중인 페이지에 들어가면 그때 서버로부터 리페치를 한다? 그렇기때문에 로딩이뜬다. 그래서 여기선 fetchQuery를 사용하신거다로 이해했는데 맞을까요?
해결됨
아바타 커뮤니티앱 만들기 (React Native Expo)
import { Link, Stack } from 'expo-router'; import Foundation from '@expo/vector-icons/Foundation'; import { colors } from '@/constants'; export default function AuthLayout() { return ( <Stack screenOptions={{ headerTintColor: colors.BLACK, contentStyle: { backgroundColor: colors.WHITE, }, }} > <Stack.Screen name="index" options={{ title: '로그인', headerTitleAlign: 'center', headerShown: true, headerLeft: () => ( <Link href={'/'} replace> <Foundation name="home" size={28} color={'black'} /> </Link> ), }} /> </Stack> ); } 선생님은 Link 태그에 paddingLeft해서 안드로이드 Header에서 조정해주신반면 저는 좀 더 통일성을위해서 headerTitleAlign 을 center로 줬습니다. 이 방법이 더 괜찮아보이는데 어떤지 궁금해요!
