프로젝트를 수행하는데 당장의 문제는 없는거 같아서 진행하고있었는데 계속해서 로그에 오류가 발생해서 질문드려봅니다. 로그인/로그아웃시 오류가 발생하고 있습니다 터미널에서는 (NOBRIDGE) ERROR [TypeError: unsubscribe is not a function (it is undefined)] 이런 오류로 뜨고 기기에서는 이런식의 오류코드가 나옵니다.
Next.js에서 서버 컴포넌트는 서버에서 실행되기 때문에, useEffect 없이 컴포넌트 내부에서 직접 fetch 요청을 보낼 수 있는 것으로 알고 있습니다. 또한, 서버 액션은 백엔드 없이 Next.js 풀스택 환경에서 DB에 직접 접근할 때 주로 사용하는 것으로 이해하고 있습니다. 그렇다면, 별도로 백엔드가 존재하는 경우에도 서버 액션을 사용할 필요가 있나요? 그리고 실제로 현업에서도 백엔드가 따로 있을 경우에 서버액션을 사용하나요? 감사합니다!
현재 RN0.77 버전으로 프로젝트를 하고있는데, react-native-vector-icons가 강사님께서 강의를 찍으신 당시와 좀 바뀌어서 몇 개의 아이콘 종류들은 사라지고 다른 것들로 대체되거나 몇개는 기존 것이 있는 상황입니다. 근데 옛날과 다르게 github문서( https://github.com/oblador/react-native-vector-icons )의 과정과 강사님의 과정이 좀 차이가 있어서 다음과 같이 수행했습니다. 1. 라이브러리 설치 ```npm install --save @react-native-vector-icons/common``` 에서 common을 제외하고 받았습니다. 2. node_modules 에서 ttf파일 추출 후 Fonts폴더 생성 후 그곳에 넣기 추후에 build phase에서 적용된 것 확인함(5-3 강의 16분23초 쯤인가 그 과정) 3. 라이브러리 호출 후 사용 이 때 계속 아이콘이 깨져서 나옵니다 RN버전이랑 안맞는 건지, 아니면 공식문서와 강의의 설정이 차이가 있는지 잘 모르겠네요. import icon from '@react-native-vector-icons/ionicons 로 호출하게 되면 에러메시지는 안뜨지만 사진처럼 나오고, import icon from 'react-native-vector-icons/ionicons 로 하게되면 아래와 같은 에러 로그가 나옵니다. ``` Error: Unable to resolve module react-native-vector-icons/ionicons from /Users/juhkang/Documents/Github/ReactNative/matzip/Matzip_FE/src/navigations/drawer/MainDrawerNavigator.tsx: react-native-vector-icons/ionicons could not be found within the project or in these directories: ``` 77버전에서 react-native-vector-icons를 자유롭게 사용하고 싶은데 해결책이 있을까요?
강의를 한번 완주하고 다시 복습하는 겸 발생했던 문제들과 해결 방법들에 대해 간단히 적어 넣습니다. npx react-native@0.72.6 init [프로젝트명] --version 0.72.6 우선 저는 루비 버전 3.2 를 설치하여 사용하고 있습니다. cocoapods 이 정상적으로 설치했음에도 다음과 같이 cocoapods 이 정상적으로 설치 되지 않았다고 나옵니다. ✔ Downloading template ✔ Copying template ✔ Processing template ✔ Installing Ruby Gems ✖ Installing CocoaPods dependencies (this may take a few minutes) error bundler: failed to load command: pod (/Users/park/Desktop/project/myfood/food/vendor/bundle/ruby/3.2.0/bin/pod) /Users/park/Desktop/project/myfood/food/vendor/bundle/ruby/3.2.0/gems/activesupport-7.0.8.7/lib/active_support/logger_thread_safe_level.rb:12:in `<module:LoggerThreadSafeLevel>': uninitialized constant ActiveSupport::LoggerThreadSafeLevel::Logger (NameError) 이럴땐 가볍게 무시하고 cocoapods이 설치 되어있으니 ios 폴더로 들어가서 pod install 명령어를 치면됩니다. cd 프로젝트명/ios pod install 이후에 ios 프로젝트를 실행시킬때 정상적으로 작동하면 다행이지만 터미널이 위의 사진과 같이 실행되고 멈추는 현상이 있을 경우 해결 방법은 다음과 같습니다 우선 Xcode 를 실행시켜주고Open Existing Project로 프로젝트를 열어줍니다. 사진은 tttt 지만 강의를 들으신다면 아마 Matzip 일 겁니다. xcworspace 를 열어주시고 좌측 메뉴에 Pods → Flipper → FilpperTransportTypes 파일로 가서 사진처럼 #include <functional> 코드를 넣어주면 다시 vscode로 가서 실행시켜주면 아마 될 겁니다. 왜 이런 오류가 나는지는 잘 모르겠지만 저와 같은 문제로 고생 안했으면 싶어서 올립니다.
next는 자동적으로 캐시 저장기능이 있고 next에서도 DB 데이터가 필요한 페이지에서 직접 불러와서 사용하는 것을 권장한다 라고 말씀해주셨는데요 그러면 next는 보통 zustand, recoli, redux와 같은 상태관리 라이브러리를 사용하지 않는 것을 추천하시나요? 아니면 사용하는 것을 추천하시나요??
안녕하세요 회원가입창에서 요청자체가 가질 않는데 어떻게 해야하나요? ios입니다. 오류난것도 없고 서버 다 킨 상태입니다. ❗ 질문 작성시 꼭 참고해주세요 에러 메세지에서 단서를 찾을 수 있는 경우가 많습니다. 에러 메세지를 읽고 한번 검색해보시는것을 추천드립니다. 질문글을 작성하실때는, 현재 문제(또는 에러)와 코드나 github 을 첨부해주세요. 개발중인 OS, ReactNative, Node 버전 등의 개발환경 을 알려주셔야합니다. 에러메세지는 일부분이 아닌 전체 상황 을 올려주세요. 일부만 보여주시면 답변이 어렵습니다. ( 일부만 자르거나 일부만 복사하지말아주세요 .)
공익을 위해 첨부합니다... Windows의 경우 Mac과 다른 방식으로 경로가 설정되는 탓인지 상품 업로드 후 홈화면에서 상품이미지가 엑박으로 보이는 오류가 발생합니다. 그동안 질문&답변 게시판에 올라온 모든 질문 및 답변을 참고해 해결을 해보고자 하였는데요, 그 어느 답변을 참고해도 해결이 되지 않아 눈물을 머금고 10분짜리 강의에 몇시간동안 매달려있었습니다. 그렇게 알게된 방법은... 저의 경우 (1) 상품 업로드 화면에서 사진을 첨부한 후 개발자 도구의 Network에서 첨부한 사진의 링크를 보면 http://localhost:8080/upload/(상품이름).jpg 이런 식으로 뜹니다. (2) 업로드 버튼을 누른 후 홈 화면으로 이동 (3) 개발자 도구의 Network에서 새롭게 업로드된 사진의 링크를 보면 http://localhost:3000/upload/(상품이름).jpg 이런 식으로 뜹니다. 이를 해결하기 위해, grab-market-web 폴더 (사용자에 따라 폴더 이름은 다를 수 있음) → src → main → index.js에서 product-card 의 product-img 부분을 확인합니다. <div> <img className="product-img" src={`${API_URL}/${product.imageUrl}`} ></img> </div> src 링크를 다음과 같이 변경합니다. 그럼 상품 업로드 화면에서의 이미지와 홈화면에서의 이미지가 localhost:8080로 동일해지기 때문에 상품 사진이 정상적으로 보입니다. 물론 이렇게 코드를 수정하고 나면 기존에 저장해놨던 상품들의 이미지에 엑박이 뜹니다. (images/products/__ 이런 식으로 폴더 내 이미지와 연결해둔 링크들이 http://localhost:8080/images/products/__ 처럼 변경되니 엑박이 뜨는 것으로 추정됩니다.) 어차피 이제 사진을 서버에 직접 업로드하는 방법으로 진행될 예정이니 그냥 기존의 상품들은 삭제하시면 될 것 같습니다. (DB Browser → 데이터 탐색 → 기존 상품 레코드 선택 → 현재 레코드 삭제하기 → 변경사항 저장하기 이용하면 삭제 가능합니다.) 저와 동일한 이유로 엑박 뜨는게 아니라면... 저도 모르겠습니다. 방법을 찾으시면 공유해주세요. 파이팅! +) 상품 상세페이지를 들어가면 다시 엑박이 뜹니다. <div id="image-box"> <img src={`${API_URL}/${product.imageUrl}`} /> {console.log(product.imageUrl)} </div> 이때는 product 폴더의 index.js에 들어가여 image-box 부분을 다음과 같이 변경해주세요. 원리는 위와 동일합니다. 그러면 상세페이지에서도 정상적으로 작동합니다.
안녕하세요? 강의관련 환경 설정 중 막힌 부분이 있어서 질문드립니다. 현재 환경 설정은 rn75 폴더에서 시작하여 openJDK 11 안드로이드 13.0 티라미수 (api 33) 넥서스5 안드로이드 13.0 티라미수 (api 33) x86_44 gradle 버전 7.2 위에 3번 환경설정까지 셋팅 후 npm run android를 실행하면 첨부드림과 같이 최신 gradle(8.x) 버전에서는 Java 17을 사용해야 한다고 하여 jdk 11버전을 공식 지원한다고 찾아본 7.x버전으로 낮추어 다시 명령어를 입력해보았지만 동일한 상황입니다. 혹시 제가 누락한 부분이 있을지 궁금합니다...!
안녕하세요! 덕분에 nextjs에 대해 깊에 알아가고 있습니다. 제목처럼 page 컴포넌트에 'use client'를 명시하고 빌드 해도 해당 페이지에 대한 rsc_payload가 생성되어서 .next 빌드 파일을 살펴 보았습니다. 페이지를 클라이언트 컴포넌트로 작성하던 서버 컴포넌트로 작성하던 .next 빌드 파일 server, static/chunk/app 폴더에 모두 page.js 파일이 생성되는 것을 확인했습니다. 1. server 폴더에 있는 page.js는 해당 페이지에 필요한 번들 파일에 대한 내용인 거고, static 폴더에 있는 page.js는 해당 페이지에 그려질 내용에 대한 파일인 건가요?? 2. 그래서 page컴포넌트를 클라이언트 컴포넌트로 만들어도 페이지에서 사용할 번들 파일의 주소를 알아야 하기 때문에 rsc_payload를 만들어서 내려주는 건가요??
레이아웃은 네비게이션을 해도 상태를 유지하고 렌더링을 하지 않는다라고 이해했습니다. 그런데, 오른쪽 레이아웃을 만들면서 패러렐 라우트라던지 template를 쓰지 않고 (비록 컴포넌트를 분리하긴 했으나) 서버에서 데이터를 뿌려주는 미래를 상상하고 쭉 코드를 짜고 계시는 모습을 보면서, 레이아웃이 서버 데이터는 변경사항을 화면에 반영해주는 것처럼 이해가 되었습니다. 뒷부분은 수강하지 않았습니다. 제가 잘못 이해 중인가요?
7.15 :: 상태 변수와 컴포넌트 언마운트 강의 부분에서 SIGN IN 과 SIGN UP 버튼으로 이동시 (NOBRIDGE) LOG SignIn Mount (NOBRIDGE) LOG SignUp Mount (NOBRIDGE) LOG SignIn Mount 로그에 이렇게만 표시가 되고있는 상태입니다. SignUp UnMount 가 되지 않는 상태인데 어떤부분에서 잘못됐는지 찾지를 못해서 질문드려봅니다. 감사합니다! 깃주소입니다. https://github.com/dvrakry/rn-photo
❗ 질문 작성시 꼭 참고해주세요 에러 메세지에서 단서를 찾을 수 있는 경우가 많습니다. 에러 메세지를 읽고 한번 검색해보시는것을 추천드립니다. 질문글을 작성하실때는, 현재 문제(또는 에러)와 코드나 github 을 첨부해주세요. 개발중인 OS, ReactNative, Node 버전 등의 개발환경 을 알려주셔야합니다. 에러메세지는 일부분이 아닌 전체 상황 을 올려주세요. 일부만 보여주시면 답변이 어렵습니다. 제대로 체크되었는지 봐주실 수 있나요? Android 15.0 ("VanillaIceCream")은 처음부터 체크되어있었습니다!
❗ 질문 작성시 꼭 참고해주세요 에러 메세지에서 단서를 찾을 수 있는 경우가 많습니다. 에러 메세지를 읽고 한번 검색해보시는것을 추천드립니다. 질문글을 작성하실때는, 현재 문제(또는 에러)와 코드나 github 을 첨부해주세요. 개발중인 OS, ReactNative, Node 버전 등의 개발환경 을 알려주셔야합니다. 에러메세지는 일부분이 아닌 전체 상황 을 올려주세요. 일부만 보여주시면 답변이 어렵습니다. Java Development Kit 설치부분 코드가 영상에 나온 부분과 제가 보고있는 부분의 코드가 달라 문의드립니다. 상관없는건가요 혹시? <영상> brew tap homebrew/cask-versions brew install --cask zulu11 brew info --cask zulu11 <현재 링크 들어갔을때 보이는 부분> https://reactnative.dev/docs/set-up-your-environment?platform=android
