궁금한게 생겨 질문합니다.. 제가 쓰는 캘린더 앱은 네트워크 연결을 끊고 들어가도 데이터에 접근이 가능합니다.. 끈 상태로 편집도 가능하고요, aysnc-storage 캐시를 쓰고 있는거겠죠? 그럼 AsyncStorage에 모든 데이터를 저장한다면, 왜 전역 상태 관리가 추가로 필요한가요? AsyncStorage가 비동기라서 느리다고 하는데, 전역 상태 변수를 바꿔서 UI를 빠르게 업데이트하고 useEffect로 AsyncStorage에 저장하는 방식인가요? Refresh/Access 토큰 방식으로 인증을 관리할 때, access 토큰을 발급받으려면 서버 통신이 필요한데, 오프라인에서도 앱 접속이 되는 이유가 궁금합니다. 리프레쉬는 저장되어있겠지만 access는 state에 저장해둔다고 알고 있는데 그럼 앱 껐을 때 사라지고 로그인할 때 발급되는거 아닌가요? 이게 네트워크 연결 없이 되는 이유가 궁금합니다.
환경: mac m1 npx react-native start --reset-cache를 했는데 (node:73693) [DEP0040] DeprecationWarning: The `punycode` module is deprecated. Please use a userland alternative instead. (Use `node --trace-deprecation ...` to show where the warning was created) ▒▒▓▓▓▓▒▒ ▒▓▓▓▒▒░░▒▒▓▓▓▒ ▒▓▓▓▓░░░▒▒▒▒░░░▓▓▓▓▒ ▓▓▒▒▒▓▓▓▓▓▓▓▓▓▓▓▓▒▒▒▓▓ ▓▓░░░░░▒▓▓▓▓▓▓▒░░░░░▓▓ ▓▓░░▓▓▒░░░▒▒░░░▒▓▒░░▓▓ ▓▓░░▓▓▓▓▓▒▒▒▒▓▓▓▓▒░░▓▓ ▓▓░░▓▓▓▓▓▓▓▓▓▓▓▓▓▒░░▓▓ ▓▓▒░░▒▒▓▓▓▓▓▓▓▓▒░░░▒▓▓ ▒▓▓▓▒░░░▒▓▓▒░░░▒▓▓▓▒ ▒▓▓▓▒░░░░▒▓▓▓▒ ▒▒▓▓▓▓▒▒ warning: the transform cache was reset. Welcome to Metro v0.76.8 Fast - Scalable - Integrated r - reload the app d - open developer menu i - run on iOS a - run on Android warning: Watchman `watch-project` returned a warning: Recrawled this watch 1 time, most recently because: MustScanSubDirs UserDroppedTo resolve, please review the information on https://facebook.github.io/watchman/docs/troubleshooting.html#recrawl To clear this warning, run: `watchman watch-del '/Users/teng/MatzipApp' ; watchman watch-project '/Users/teng/MatzipApp'` warning: Watchman `query` returned a warning: Recrawled this watch 1 time, most recently because: MustScanSubDirs UserDroppedTo resolve, please review the information on https://facebook.github.io/watchman/docs/troubleshooting.html#recrawl To clear this warning, run: `watchman watch-del '/Users/teng/MatzipApp' ; watchman watch-project '/Users/teng/MatzipApp'` Recrawled this watch 1 time, most recently because: MustScanSubDirs UserDroppedTo resolve, please review the information on https://facebook.github.io/watchman/docs/troubleshooting.html#recrawl To clear this warning, run: `watchman watch-del '/Users/teng/MatzipApp' ; watchman watch-project '/Users/teng/MatzipApp'` Recrawled this watch 1 time, most recently because: MustScanSubDirs UserDroppedTo resolve, please review the information on https://facebook.github.io/watchman/docs/troubleshooting.html#recrawl To clear this warning, run: `watchman watch-del '/Users/teng/MatzipApp' ; watchman watch-project '/Users/teng/MatzipApp'` info Opening the app on Android... info JS server already running. info Launching emulator... info Successfully launched emulator. info Installing the app... > Task :gradle-plugin:compileKotlin UP-TO-DATE > Task :gradle-plugin:compileJava NO-SOURCE > Task :gradle-plugin:pluginDescriptors UP-TO-DATE > Task :gradle-plugin:processResources UP-TO-DATE > Task :gradle-plugin:classes UP-TO-DATE > Task :gradle-plugin:jar UP-TO-DATE > Task :gradle-plugin:inspectClassesForKotlinIC UP-TO-DATE > Configure project :react-native-reanimated Android gradle plugin: 7.4.2 Gradle: 8.0.1 WARNING:Software Components will not be created automatically for Maven publishing from Android Gradle Plugin 8.0. To opt-in to the future behavior, set the Gradle property android.disableAutomaticComponentCreation=true in the `gradle.properties` file or use the new publishing DSL. (생략) > Task :react-native-gesture-handler:compileDebugLibraryResources > Task :app:mergeDebugResources > Task :app:processDebugMainManifest > Task :app:processDebugManifest > Task :app:processDebugManifestForPackage > Task :react-native-gesture-handler:parseDebugLocalResources > Task :react-native-masked-view_masked-view:compileDebugLibraryResources > Task :react-native-reanimated:parseDebugLocalResources > Task :react-native-reanimated:compileDebugLibraryResources > Task :react-native-masked-view_masked-view:parseDebugLocalResources > Task :react-native-safe-area-context:compileDebugLibraryResources > Task :react-native-safe-area-context:parseDebugLocalResources > Task :react-native-gesture-handler:generateDebugBuildConfig > Task :react-native-reanimated:generateDebugBuildConfig > Task :react-native-screens:compileDebugLibraryResources > Task :react-native-reanimated:packageNdkLibs NO-SOURCE > Task :react-native-reanimated:javaPreCompileDebug > Task :react-native-gesture-handler:javaPreCompileDebug > Task :react-native-masked-view_masked-view:generateDebugBuildConfig > Task :react-native-masked-view_masked-view:javaPreCompileDebug > Task :react-native-safe-area-context:generateDebugBuildConfig > Task :react-native-safe-area-context:javaPreCompileDebug > Task :react-native-screens:generateDebugBuildConfig > Task :react-native-screens:javaPreCompileDebug > Task :react-native-screens:parseDebugLocalResources > Task :app:mergeDebugShaders UP-TO-DATE > Task :app:compileDebugShaders NO-SOURCE > Task :app:generateDebugAssets UP-TO-DATE > Task :react-native-gesture-handler:mergeDebugShaders > Task :react-native-gesture-handler:compileDebugShaders NO-SOURCE > Task :react-native-gesture-handler:generateDebugAssets UP-TO-DATE > Task :react-native-gesture-handler:packageDebugAssets > Task :react-native-masked-view_masked-view:mergeDebugShaders > Task :react-native-masked-view_masked-view:compileDebugShaders NO-SOURCE > Task :react-native-masked-view_masked-view:generateDebugAssets UP-TO-DATE > Task :react-native-masked-view_masked-view:packageDebugAssets > Task :react-native-reanimated:mergeDebugShaders > Task :react-native-reanimated:compileDebugShaders NO-SOURCE > Task :react-native-reanimated:generateDebugAssets UP-TO-DATE > Task :react-native-reanimated:packageDebugAssets > Task :react-native-safe-area-context:mergeDebugShaders > Task :react-native-safe-area-context:compileDebugShaders NO-SOURCE > Task :react-native-safe-area-context:generateDebugAssets UP-TO-DATE > Task :react-native-safe-area-context:packageDebugAssets > Task :react-native-screens:mergeDebugShaders > Task :react-native-screens:compileDebugShaders NO-SOURCE > Task :react-native-screens:generateDebugAssets UP-TO-DATE > Task :react-native-screens:packageDebugAssets > Task :react-native-reanimated:generateDebugRFile > Task :react-native-safe-area-context:generateDebugRFile > Task :app:mergeDebugAssets UP-TO-DATE > Task :react-native-masked-view_masked-view:generateDebugRFile > Task :react-native-screens:generateDebugRFile > Task :react-native-gesture-handler:generateDebugRFile > Task :react-native-reanimated:compileDebugJavaWithJavac FAILED Deprecated Gradle features were used in this build, making it incompatible with Gradle 9.0. You can use '--warning-mode all' to show the individual deprecation warnings and determine if they come from your own scripts or plugins. See https://docs.gradle.org/8.0.1/userguide/command_line_interface.html#sec:command_line_warnings 82 actionable tasks: 70 executed, 12 up-to-date 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 /Users/teng/MatzipApp/frontend/node_modules/react-native-reanimated/android/src/main/java/com/swmansion/reanimated/NodesManager.java:440: error: switch rules are not supported in -source 11 case "opacity" -> { ^ (use -source 14 or higher to enable switch rules) /Users/teng/MatzipApp/frontend/node_modules/react-native-reanimated/android/src/main/java/com/swmansion/reanimated/layoutReanimation/AnimationsManager.java:356: error: pattern matching in instanceof is not supported in -source 11 if (props.get(Snapshot.TRANSFORM_MATRIX) instanceof ReadableNativeArray matrixArray) { ^ (use -source 16 or higher to enable pattern matching in instanceof) 2 errors FAILURE: Build failed with an exception. * What went wrong: Execution failed for task ':react-native-reanimated:compileDebugJavaWithJavac'. > Compilation failed; see the compiler error output for details. * Try: > Run with --stacktrace option to get the stack trace. > Run with --info or --debug option to get more log output. > Run with --scan to get full insights. * Get more help at https://help.gradle.org BUILD FAILED in 34s info Run CLI with --verbose flag for more details. 위와 같이 에러가 발생합니다. Drawer를 설치한 이후부터 계속 막히네요 ... `plugins: ['react-native-reanimated/plugin'],`도 했습니다. 추가적으로 다른 질문들도 봤는데 다 해결이 안 됐습니다 ㅜㅜ
❗ 질문 작성시 꼭 참고해주세요 현재 문제(또는 에러)와 코드(또는 github) 를 첨부해주세요. 맥/윈도우, 안드로이드/iOS, ReactNative, Node 버전 등의 개발환경 을 함께 적어주시면 도움이 됩니다. 에러메세지는 일부분이 아닌 전체 상황 을 올려주세요. ( 일부만 자르거나 복사하지말아주세요 .) 개발환경/코드에 대한 정보가 없을경우 답변이 어렵습니다. npx react-native를 통해 프로젝트를 다운로드 하는데 ✖ Installing CocoaPods error error Installing Cocoapods failed. This doesn't affect project initialization and you can safely proceed. However, you will need to install Cocoapods manually when running iOS, follow additional steps in "Run instructions for iOS" section. Error: An error occured while trying to install CocoaPods, which is required by this template. Please try again manually: sudo gem install cocoapods. CocoaPods documentation: https://cocoapods.org/ 다음과 같은 에러가 발생했습니다. >> sudo gem install cocoapods Password: ERROR: Error installing cocoapods: The last version of drb (>= 0) to support your Ruby & RubyGems was 2.0.6. Try installing it with `gem install drb -v 2.0.6` and then running the current command again drb requires Ruby version >= 2.7.0. The current ruby version is 2.6.10.210 수동으로 설치했는데 안 돼서 ruby 버전을 봤는데 >> ruby -v ruby 2.6.10p210 (2022-04-12 revision 67958) [universal.arm64e-darwin24] 루비를 2.7 버전 이상으로 만들어주기 위해 rbenv를 다운받고 rbenv install -l 3.1.6 3.2.6 3.3.6 jruby-9.4.9.0 mruby-3.3.0 picoruby-3.0.0 truffleruby-24.1.1 truffleruby+graalvm-24.1.1 rbenv install 3.3.6 ruby-build: using openssl@3 from homebrew ==> Downloading ruby-3.3.6.tar.gz... -> curl -q -fL -o ruby-3.3.6.tar.gz https://cache.ruby-lang.org/pub/ruby/3.3/ruby-3.3.6.tar.gz % Total % Received % Xferd Average Speed Time Time Time Current Dload Upload Total Spent Left Speed 100 21.1M 100 21.1M 0 0 2434k 0 0:00:08 0:00:08 --:--:-- 2470k ==> Installing ruby-3.3.6... ruby-build: using libyaml from homebrew ruby-build: using gmp from homebrew -> ./configure "--prefix=$HOME/.rbenv/versions/3.3.6" --with-openssl-dir=/usr/local/opt/openssl@3 --enable-shared --with-libyaml-dir=/usr/local/opt/libyaml --with-gmp-dir=/usr/local/opt/gmp --with-ext=openssl,psych,+ -> make -j 8 *** Following extensions are not compiled: openssl: Could not be configured. It will not be installed. /private/var/folders/yk/px23h3t50fn50y19rbdwp81r0000gn/T/ruby-build.20241124141446.8409.VoUaep/ruby-3.3.6/ext/openssl/extconf.rb:122: OpenSSL library could not be found. You might want to use --with-openssl-dir=<dir> option to specify the prefix where OpenSSL is installed. Check /var/folders/yk/px23h3t50fn50y19rbdwp81r0000gn/T/ruby-build.20241124141446.8409.VoUaep/ruby-3.3.6/ext/openssl/mkmf.log for more details. psych: Could not be configured. It will not be installed. Check /var/folders/yk/px23h3t50fn50y19rbdwp81r0000gn/T/ruby-build.20241124141446.8409.VoUaep/ruby-3.3.6/ext/psych/mkmf.log for more details. BUILD FAILED (macOS 15.1.1 on arm64 using ruby-build 20241105) You can inspect the build directory at /var/folders/yk/px23h3t50fn50y19rbdwp81r0000gn/T/ruby-build.20241124141446.8409.VoUaep See the full build log at /var/folders/yk/px23h3t50fn50y19rbdwp81r0000gn/T/ruby-build.20241124141446.8409.log 이렇게 에러가 발생합니다 .. 이틀째 해결방법을 찾는데 계속 막혀서 글 올립니다 감사합니다 ㅜㅜ
❗ 질문 작성시 꼭 참고해주세요 현재 문제(또는 에러)와 코드(또는 github) 를 첨부해주세요. 맥/윈도우, 안드로이드/iOS, ReactNative, Node 버전 등의 개발환경 을 함께 적어주시면 도움이 됩니다. 에러메세지는 일부분이 아닌 전체 상황 을 올려주세요. ( 일부만 자르거나 복사하지말아주세요 .) 개발환경/코드에 대한 정보가 없을경우 답변이 어렵습니다. Macbook Ari M1 / MacOS 15.0.1 rbenv [루비버전] rbenv install 3.2.2 rbenv: /Users/teng/.rbenv/versions/3.2.2 already exists continue with installation? (y/N) y ruby-build: using openssl@3 from homebrew ==> Downloading ruby-3.2.2.tar.gz... -> curl -q -fL -o ruby-3.2.2.tar.gz https://cache.ruby-lang.org/pub/ruby/3.2/ruby-3.2.2.tar.gz % Total % Received % Xferd Average Speed Time Time Time Current Dload Upload Total Spent Left Speed 100 19.5M 100 19.5M 0 0 16.5M 0 0:00:01 0:00:01 --:--:-- 16.5M ==> Installing ruby-3.2.2... ruby-build: using readline from homebrew ruby-build: using libyaml from homebrew ruby-build: using gmp from homebrew -> ./configure "--prefix=$HOME/.rbenv/versions/3.2.2" --with-openssl-dir=/usr/local/opt/openssl@3 --enable-shared --with-readline-dir=/usr/local/opt/readline --with-libyaml-dir=/usr/local/opt/libyaml --with-gmp-dir=/usr/local/opt/gmp --with-ext=openssl,psych,+ -> make -j 8 BUILD FAILED (macOS 15.0.1 on arm64 using ruby-build 20241105) You can inspect the build directory at /var/folders/yk/px23h3t50fn50y19rbdwp81r0000gn/T/ruby-build.20241123200520.32443.l96uOO See the full build log at /var/folders/yk/px23h3t50fn50y19rbdwp81r0000gn/T/ruby-build.20241123200520.32443.log 이렇게 오류가 발생합니다. 선생님. 2.7.6을 다운로드 했는데 deprecated 됐다고 나오고, 그래서 이 버전으로도 해봤는데 안 되더라구요... 거의 몇시간을 찾는데 관련 글도 안 나옵니다 ㅜㅜ
안녕하세요 조은님! 강의 즐겁게 수강했습니다 🤓 다른게 아니라 배포 후 발견한 문제 때문에 질문 드립니닷! 로컬에서는 문제없이 새로고침할 때마다 조회수가 1씩 증가하는데용 배포 후에는 조회수가 3씩 증가 하고 있습니닷 🤔 (포스팅 갯수도 3개여서 관련이 있을 거라고 생각되는데욤..) 제 코드는 강의와 약간 다른 점이 있습니닷! 현재 Vercel 에서는 기존 Vercel Postgres를 대체하는 Neon Marketplace 통합으로 변경되었는데요 (자세히는 잘 모르겠습니닷.. 관련 링크를 첨부합니닷..) https://vercel.com/docs/storage/vercel-postgres https://vercel.com/changelog/neon-now-available-on-vercel-marketplace 그래서 강의와는 다른 import { neon } from "@neondatabase/serverless"; 를 불러와서 사용 중입니닷 "use server"; import { neon } from "@neondatabase/serverless"; import { unstable_noStore as noStore } from "next/cache"; const sql = neon(`${process.env.DATABASE_URL}`); export async function getViewsCount(): Promise< { slug: string; count: number; }[] > { if (!process.env.POSTGRES_URL) { return []; } noStore(); const rows = await sql` SELECT slug, count FROM views `; return rows.map((row) => ({ slug: row.slug, count: row.count, })); } export const incrementView = async (slug: string) => { noStore(); await sql` INSERT INTO views (slug, count) VALUES (${slug}, 1) ON CONFLICT (slug) DO UPDATE SET count = views.count + 1; `; }; 다른 분들도 저와 비슷한 오류가 생길지 궁금한데용.. 혹시 배포 후 조회수 증가를 확인해주실 수 있을까용..? 감사합니다!
안녕하세요 강사님. 강의 잘 보고 있습니다. 궁금한 점이 있어 질문남깁니다. 마이크로소프트에서 25년 3월 이후로 앱센터 서버 지원을 안하면서 코드푸시 기능이 독자적으로 구축하는 standalone버전으로 본인 로컬이나, 자체 백 서버에서 독자적으로 구축해 코드푸시 기능을 사용할 수 있도록 소스코드를 공개했습니다. 이에 CodePush기능에 관해 2가지 궁금한 점이 있습니다. 1. 공식개발문서를 보면, CodePush기능이 Reactnative 0.71버전까지라 나와있는 것 같아서 현재 RN 0.71버전으로 프로젝트를 재생성해 프로젝트를 하고 있는데, 버전이 신규버전이어도 상관없는 걸까요? 강사님께서 올려주신 github레포의 코드를 보니 Reactnative 버전이 0.72.6버전으로 나와있는데, 구현해주신 CodePush 강의를 보고 질문드립니다. 2. 혹시 StandAlone 버전의 CodePush기능 강의를 만들어주실수 있을까요? 강사님 덕분에 많은 것을 보고 배워서 잘 배우고 싶어서 standalone버전 강의도 보고 싶습니다!
안녕하세요, 강좌들으며, msw를 프로젝트에 도입하다 궁금한점이 있어 남깁니다! 현재 위와 같이 코드를, 작성하여, 로그인 성공시, 위와 같이, 데이터와, 쿠키를 동시에 세팅해주고 있는 상황입니다! 실제로 아래와 같이, response들은 잘 넘어오나 response headers에 쿠키가, 오지 않아, 실제로 스토리지에 쿠키가 담기지 않습니다! 원래, 가상으로 심어주는 쿠키는, 브라우저의 쿠키에 담기지 않는건가요?? 궁금하여 질문남깁니다!! 좋은 강의 감사합니다!
안녕하세요 조은님! 앞서 작성했던 질문 글에 다 작성하며 너무 길어질 것 같아 이렇게 나눠서 적게 되었습니다 ㅎㅎ; Q3. 강의에서 즉시 실행함수는 스코프를 제한해주기 위해서 사용한다고 이해를 했는데, 이건 혹시 모를 변수 중복 위험을 제한하기 위해서일까요?? 이 외에도 강사님께서 즉시 실행 함수를 사용하는 일반적인 케이스나 즉시 실행함수를 사용하면 좋은 케이스들이 있다면 배워가고 싶습니다! Q4. 추가로 dangerouslySetInnerHTML를 사용하는 이유에 대해서 여쭤보고 싶습니다! 제가 찾아봤을 때는 React에서 HTML 사용에 위험성을 알리기 위해서는 dangerouslySetInnerHTML를 사용해라. 라는 것까지는 확인을 했습니다! 하지만 기능적으로 특별한 기능을 하는 것 같지는 않은데.. dangerouslySetInnerHTML이 사용되는 다른 이유가 있을지에 대해 여쭤보고 싶습니다!
안녕하세요. 조은님 :) 이번에 다크 모드 관련 내용을 수강하면서 head 태그를 작성하는 부분에서 작은 의문이 생겨 질문 드리게 되었습니다. Q1. 이번 강의 중 다크모드 설정을 localStorage에서 가져오는 부분에서 head에서 script를 사용하는 이유에 대해서 알 수 있을까요?? fouc 문제를 막기위해서 저렇게 사용한다고 검색을 통해 알게 되었는데, 이 의도 맞을지 혹시 또 다른 이유가 있을지에 대해서 여쭤보고 싶습니다! Q2. 이어지는 질문으로 관련해서 공부를 하다보니 NextJS에서 제공하는 Head tag와 Script tag가 있는 걸 알게 되었습니다. 혹시 해당 태그들을 사용하지 않고 순수 HTML로 작성하신 이유에 대해서 궁금증이 생겨 여쭤보고 싶습니다! 가능하다면 두 개의 차이점에 대해서도 여쭤보고 싶습니다!
function useLogout(mutationOptions?: UseMutationCustomOptions) { return useMutation({ mutationFn: async () => { await axiosInstance.post('/auth/logout'); // 로그아웃 요청을 서버에 먼저 보냄 removeHeader('Authorization'); await removeEncryptStorage(storageKeys.REFRESH_TOKEN); queryClient.resetQueries({queryKey: [queryKeys.AUTH]}); }, ...mutationOptions }); } 안녕하세요 강사님 강사님의 리액트 네이티브 강의를 보면서 직접 자신만의 리액트 네이티브 프로젝트도 직접 다뤄보면서 하고 있는 학생입니다. https://github.com/Dongrang072/carPoolTeamProject-server 이게 현재 제가 작성하고 있는 로컬 서버의 코드이고 https://github.com/Dongrang072/carpoolTeamProject 이게 프론트의 코드입니다 기존의 로그아웃 코드가 잘 작동하지 않아서, 코드를 이런식으로 고치고 난 후에 실행했는데 로그아웃으로 네비게이터가 authStack에 관련된 화면을 다시 보여주고 난 후에 이후 로그인까지는 의도적으로 되지만 로그인을 다시 실행하면 이전에 스토리지가 다 지워지지 않았는지 계정을 바꿔서 로그인 할 경우 전에 있던 계정으로 로그인이 되는 현상이 발생하고 있습니다. 분명 헤더와 스토리지를 지움으로서 accessToken과 refreshToken 둘 다 지운걸로 생각했는데 이런 일이 생기는 이유가 궁금합니다. 로그아웃 엔드포인트 호출까지 진행되고 다시 화면이 랜더링 되어서 저는 괜찮았다고 생각했는데 이후 storage가 다 지워지지 않는 것이 원인인것 같습니다
1) prefetching 이 초기 1회만 발생하는지, 페이지를 이동할때마다 해당 페이지에 맞춰서 발생하는지가 궁금합니다. 초기 접속이후에는 CSR 방식으로 동작해서 서버에서 렌더링이 발생하지 않는다고 배웠는데, 이동 가능한 페이지에 대해서 prefetching 한다고 하니, 인덱스 페이지에서 바로 이동 가능한 페이지가 아닌 경우 (특정 페이지를 통해서만 이동가능한 페이지) 의 prefetching은 어떤식으로 처리되는지가 궁금합니다. 2) 초기접속시 전달받는 JS Bundle에는 인덱스 페이지에서 이동 가능한 페이지들에 대한 JS 파일만 구성되어 있는 것인지 궁금합니다. 그 이후에 다른 페이지에 이동 요청을 보내면 필요에 따라 JS Bundle을 추가로 서버에서 전달받는 건가요?
nextjs dev모드로 실행하다가 코드 저장하면 자꾸 서버 다운될 때도 많고, 코드 새로 수정해도 반영 안 될 때가 있어서, 서버 껐다 키는 경우가 빈번한데.. 이런거 해결하는 방법 없나요.. 제 컴퓨터에서는 nextjs가 너무 무거워서 리로드 하는 시간도 너무 오래 걸려서요 ㅠㅠ
서버 배포후 제공해주는 쿠키의 domain이, .naver.com이고, 만약 로컬호스트로 개발 할 경우 localhost의 도메인을 갖게되어, 둘의 도메인이 달라, 쿠키가 담기지 않는 경우가 발생합니다. 모든 통신 요청을 서버와 직접 진행 할 경우, .naver.com의 쿠키로, 모든것이 공유가 가능하니, 정상적으로 접근이 가능한 것 같은데 이제 간혹, 라우트 핸들러나, 미들웨어를 거쳐서, 통신 할 경우 도메인이 localhost가 되어, 401 에러가 발생하게 됩니다!! 이를 해결하기 위해, 로컬에서 두개의 서버를 띄워서 테스트하는 방법말고, 보통 실무나, 현업에서는 배포된 쿠키 로그인 방식을 활용할 떄, 어떻게 Next.js에서 환경 구성을 하는지, 로컬호스트가 아닌, 다른 도메인으로 띄울 수 있는 방법이 있는지 궁금합니다.
계산기 앱 개발과 마찬가지로, 다음과 같은 프로젝트 설치 및 실행을 진행하였습니다. <기종 : Android> npx create-expo-app <앱 이름> --template 세 번째(blank) :typescript 선택 npx expo start를 실행 expo 앱에서 QR 코드로 보기 이전 강의(레이아웃 구성하기)의 중간(7:23)에 나오는 텍스트 창을 클릭하면 UI가 따라 올라가는 것을 방지하기 위한 설정방법이 제 것에서는 나타나지 않았습니다. 검색 창에 windowsoftinputmode 또는 AndroidManifest 를 검색해도 나타나지 않았습니다. (아무래도, 제가 설치를 잘못해서 나타났거나 expo로 빌드했기에 나타나지 않는 것 같습니다. VSCode는 기존에 사용했던 터라 해당되지 않는 것 같습니다.) 이를 해결하기 위해, Picker를 감싸고 있는 View를 Wrapper라고 이름을 변경한 후에, postion: absolute 속성을 부여했습니다. +) 텍스트 입력 글자가 꽤 길어지면, 줄바꿈이 되지 않고 글자가 잘려나가는 현상이 있습니다. 이를 해결하는 방법으로는 multiline={true}를 추가해주면 됩니다. 코드는 아래와 같습니다. import { StatusBar } from 'expo-status-bar'; import React, { useState } from 'react'; import { Text, TextInput, View, Dimensions } from 'react-native'; import Translator from 'react-native-translator'; import styled from 'styled-components/native'; import { Picker } from '@react-native-picker/picker'; const Container = styled.View` background-color: #181818; flex: 1; padding-top: 20px; `; const Wrapper = styled.View` position: absolute; top: 40px; left: 0; right: 0; padding-horizontal: 10px; `; const InputView = styled.View` background-color: #606060; height: 250px; justify-content: left; align-items: start; padding: 10px; border-radius: 10px; margin-bottom: 80px; `; const ResultView = styled(InputView)` background-color: #0084ff; margin-bottom: 10px; `; const App = () => { const [value, setValue] = useState(''); const [result, setResult] = useState(''); const [fromLang, setFromLang] = useState('en'); const [toLang, setToLang] = useState('ko'); return ( <Container> <StatusBar style="light" /> <Translator from={fromLang} to={toLang} value={value} onTranslated={(t) => setResult(t)} /> <Wrapper> <Picker style={{ marginBottom: 10, backgroundColor: '#606060' }} selectedValue={fromLang} onValueChange={(itemValue) => setFromLang(itemValue)} > <Picker.Item label="한국어" value="ko" /> </Picker> <InputView> <TextInput style={{ fontSize: 24, color: 'white' }} value={value} onChangeText={(t) => setValue(t)} multiline={true} placeholder="번역할 텍스트 입력" /> </InputView> <Picker style={{ marginBottom: 10, backgroundColor: '#0084ff' }} selectedValue={toLang} onValueChange={(itemValue) => setToLang(itemValue)} > <Picker.Item label="영어" value="en" /> </Picker> <ResultView> <Text style={{ fontSize: 24, color: 'white' }}>{result}</Text> </ResultView> </Wrapper> </Container> ); }; export default App; ps) 간혹 글자를 입력하면 즉각 번역되지 않고, 번역되는 아래쪽 Picker를 클릭한 후에야 동작하긴 합니다. 이를 해결하기 위해서는 useEffect를 사용하면 해결되지만 강의에서는 다루지 않아 코드에 반영하지 않았습니다. GPT가 잘 알려주니까 궁금하신 분들은 해보시면 좋을 것 같습니다~ ps) 업데이트 하시면서, 영상이 잘못배치된 것 같습니다~ 번역앱 원리와 이해 부분에 코인에 관한 영상이 재생됩니다. 코인 관련, 날씨앱에서는 이상이 없었습니다~ 좋은 강의 감사합니다~!! 덕분에 많은 도움이 되고 있습니다.
