[React-Native] init 시 Installing Ruby Gems 에러

React-Native 프로젝트의 Back-End를 개발하며, React-Native 개발자가 API 호출하는데 이슈가 있다고하여 직접 테스팅해보기 위해 React-Native 환경을 구축하며 정리한 내용

npx react-native@latest init AwesomeProject
Need to install the following packages:
  react-native@0.72.6
Ok to proceed? (y) y

               ######                ######
             ###     ####        ####     ###
            ##          ###    ###          ##
            ##             ####             ##
            ##             ####             ##
            ##           ##    ##           ##
            ##         ###      ###         ##
             ##  ########################  ##
          ######    ###            ###    ######
      ###     ##    ##              ##    ##     ###
   ###         ## ###      ####      ### ##         ###
  ##           ####      ########      ####           ##
 ##             ###     ##########     ###             ##
  ##           ####      ########      ####           ##
   ###         ## ###      ####      ### ##         ###
      ###     ##    ##              ##    ##     ###
          ######    ###            ###    ######
             ##  ########################  ##
            ##         ###      ###         ##
            ##           ##    ##           ##
            ##             ####             ##
            ##             ####             ##
            ##          ###    ###          ##
             ###     ####        ####     ###
               ######                ######


                  Welcome to React Native!
                 Learn once, write anywhere

✔ Downloading template
✔ Copying template
✔ Processing template
✖ Installing Ruby Gems
error Fetching gem metadata from https://rubygems.org/........
Resolving dependencies...
Fetching rexml 3.2.6
Installing rexml 3.2.6
Fetching CFPropertyList 3.0.6
Installing CFPropertyList 3.0.6
Fetching concurrent-ruby 1.2.2
Installing concurrent-ruby 1.2.2
Fetching i18n 1.14.1
Installing i18n 1.14.1
Fetching minitest 5.20.0
Installing minitest 5.20.0
Fetching tzinfo 2.0.6
Installing tzinfo 2.0.6
Fetching zeitwerk 2.6.12
Installing zeitwerk 2.6.12
Fetching activesupport 6.1.7.6
Installing activesupport 6.1.7.6
Fetching public_suffix 4.0.7
Installing public_suffix 4.0.7
Fetching addressable 2.8.5
Installing addressable 2.8.5
Fetching httpclient 2.8.3
Installing httpclient 2.8.3
Fetching json 2.6.3
Installing json 2.6.3 with native extensions
Gem::Ext::BuildError: ERROR: Failed to build gem native extension.

current directory:
/Users/taeseong/Documents/react-native/byemost/AwesomeProject/vendor/bundle/ruby/2.6.0/gems/json-2.6.3/ext/json/ext/generator
/System/Library/Frameworks/Ruby.framework/Versions/2.6/usr/bin/ruby -I
/System/Library/Frameworks/Ruby.framework/Versions/2.6/usr/lib/ruby/2.6.0 -r
./siteconf20231111-8544-l21ed6.rb extconf.rb
creating Makefile

current directory:
/Users/taeseong/Documents/react-native/byemost/AwesomeProject/vendor/bundle/ruby/2.6.0/gems/json-2.6.3/ext/json/ext/generator
make "DESTDIR=" clean

current directory:
/Users/taeseong/Documents/react-native/byemost/AwesomeProject/vendor/bundle/ruby/2.6.0/gems/json-2.6.3/ext/json/ext/generator
make "DESTDIR="
compiling generator.c
In file included from generator.c:1:
In file included from ./../fbuffer/fbuffer.h:5:
In file included from
/Applications/Xcode.app/Contents/Developer/Platforms/MacOSX.platform/Developer/SDKs/MacOSX14.0.sdk/System/Library/Frameworks/Ruby.framework/Versions/2.6/usr/include/ruby-2.6.0/ruby.h:33:
/Applications/Xcode.app/Contents/Developer/Platforms/MacOSX.platform/Developer/SDKs/MacOSX14.0.sdk/System/Library/Frameworks/Ruby.framework/Versions/2.6/usr/include/ruby-2.6.0/ruby/ruby.h:24:10:
fatal error: 'ruby/config.h' file not found
#include "ruby/config.h"
         ^~~~~~~~~~~~~~~
/Applications/Xcode.app/Contents/Developer/Platforms/MacOSX.platform/Developer/SDKs/MacOSX14.0.sdk/System/Library/Frameworks/Ruby.framework/Versions/2.6/usr/include/ruby-2.6.0/ruby/ruby.h:24:10:
note: did not find header 'config.h' in framework 'ruby' (loaded from
'/Applications/Xcode.app/Contents/Developer/Platforms/MacOSX.platform/Developer/SDKs/MacOSX.sdk/System/Library/Frameworks')
1 error generated.
make: *** [generator.o] Error 1

make failed, exit code 2

Gem files will remain installed in
/Users/taeseong/Documents/react-native/byemost/AwesomeProject/vendor/bundle/ruby/2.6.0/gems/json-2.6.3
for inspection.
Results logged to
/Users/taeseong/Documents/react-native/byemost/AwesomeProject/vendor/bundle/ruby/2.6.0/extensions/universal-darwin-22/2.6.0/json-2.6.3/gem_make.out

An error occurred while installing json (2.6.3), and Bundler cannot continue.
Make sure that `gem install json -v '2.6.3' --source 'https://rubygems.org/'`
succeeds before bundling.

In Gemfile:
  cocoapods was resolved to 1.13.0, which depends on
    cocoapods-core was resolved to 1.13.0, which depends on
      algoliasearch was resolved to 1.27.5, which depends on
        json
✖ Installing Ruby Gems
error Looks like your iOS environment is not properly set. Please go to https://reactnative.dev/docs/environment-setup?os=macos&platform=android and follow the React Native CLI QuickStart guide for macOS and iOS.
info Run CLI with --verbose flag for more details.

https://github.com/facebook/react-native/issues/35873#issuecomment-1396687859

위 댓글에서 제공해준 정보대로 조치하여 해결함

• install and set proper ruby version with rbenv:rbenv install 2.7.6 && rbenv global 2.7.6
• set PATH in .zshrc:echo 'eval "$(rbenv init -)"' >> ~/.zshrc
• and in the end:source ~/.zshrc