• 요새는 번역기가 잘 되어있다 보니, 번역기를 사용하면 어느정도 문맥 등을 파악할 수 있는 것이 사실이다. 하지만 어떤 사람에게는/혹은 어떤 날에는 그것 조차 눈에 잘 들어오지 않을 때가 있을 것이다. 1차적으로는 나 자신에게 도움이 되고, 2차적으로는 필요한 누군가에게 도움이 될 수 있지 않을까 싶어 소소하게나마 번역을 해보았다.
• 오류가 있을 시 댓글로 알려주시면 감사하겠습니다.🙂
• 이 페이지는 React Native 공식 문서의 개인적인 번역본입니다.
  • https://reactnative.dev/docs/navigation
    • Last updated on Jun 21, 2023

🏁 화면간의 탐색 기능

모바일 앱은 대부분 여러 개의 화면으로 이루어져 있습니다. 'Navigatior(네비게이터(탐색기))'라고 불리는 것이 여러 화면들의 표시 및 전환을 관리합니다.

이 가이드는 리액트 네이티브에서 사용가능한 다양한 네비게이션 컴포넌트를 다룹니다. 탐색 기능을 시작하려면, React Navigation 을 사용할 수 있습니다. React Navigation 은 안드로이드, IOS 양쪽 모두에게 공통적인 stack navigation과 tabbed navigation 패턴을 나타낼 수 있는 기능을 가진, 간단한 탐색 솔루션을 제공합니다.

이미 네비게이션을 기본적으로 관리하고 있는 앱에 리액트 네이티브를 통합하고 싶거나, 혹은 리액트 네비게이션의 대안을 찾고 있다면 다음 라이브러리가 양 플랫폼에게 기본 네비게이션을 제공합니다 react-native-navigation.

ReactNavigation(리액트 네비게이션)

개발자들가 몇 줄의 코드로 앱의 화면을 설정하게 해주는, 독립적인 라이브러리 입니다.

설치 및 설정

먼저, 프로젝트에 설치해야합니다.

npm install @react-navigation/native @react-navigation/native-stack

그 다음, 필요한 peer 종속성을 설치합니다. Expo가 프로젝트를 관리하는지 또는 기본 리액트 네이티브 프로젝트인지에 따라 다른 명령어를 사용해야 합니다.

• 엑스포가 관리하는 프로젝트라면, expo로 설치

  npx expo install react-native-screens react-native-safe-area-context

• 기본 리액트 네이티브 프로젝트라면, npm으로 설치

  npm install react-native-screens react-native-safe-area-context

  • ios를 위한 기본 리액트 네이티브 프로젝트인 경우, Cocoapod이 설치되어있어야 합니다. 그 후 pods를 설치해서 과정을 완료합니다.
    cd ios pod install cd ..

  NOTE 설치 후에 peer 종속성 관련 경고가 뜰 수도 있습니다. 이런 경고들은 대체로 몇 패키지들의 버젼이 맞지 않아 생깁니다. 앱이 문제없이 빌드되는 한 대부분의 경고는 무시할 수 있습니다.

이제 전체 앱을 NavigationContainer 로 감싸야합니다. 보통 index.js 나 App.js 같은 entry file(진입 파일)에 많이 합니다.

import * as React from 'react';
import {NavigationContainer} from '@react-navigation/native';
const App = () => {
  return (
    <NavigationContainer>
      {/* Rest of your app code */}
    </NavigationContainer>
  );
};
export default App;
export default App;

디바이스/시뮬레이터에서 앱 빌드 및 실행할 준비가 끝났습니다.


### Usage
이제 홈 화면과 프로필 화면이 있는 app을 생성할 수 있습니다.

>```
import * as React from 'react';
import {NavigationContainer} from '@react-navigation/native';
import {createNativeStackNavigator} from '@react-navigation/native-stack';
const Stack = createNativeStackNavigator();
const MyStack = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen
          name="Home"
          component={HomeScreen}
          options={{title: 'Welcome'}}
        />
        <Stack.Screen name="Profile" component={ProfileScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

위 예제에서, 홈과 프로필 화면 두 가지는 Stack.Screen component 를 사용해 정의됩니다. 이와 같은 방법으로 원하는 만큼의 화면을 정의할 수 있습니다.

Stack.Screen의 prop인 options로 화면제목을 설정할 수 있습니다.

각 화면은 리액트 컴포넌트인 component prop을 사용합니다. 이 컴포넌트들은 다양한 메소드를 가진navigation이란 prop을 받습니다. 예를들어, navigation.navigate 를 사용해 Profile 스크린으로 이동할 수 있습니다.

const HomeScreen = ({navigation}) => {
  return (
      <Button
      title="Go to Jane's profile"
      onPress={() =>
        navigation.navigate('Profile', {name: 'Jane'})
      }
    />
  );
};
const ProfileScreen = ({navigation, route}) => {
  return <Text>This is {route.params.name}'s profile</Text>;
};

```native-stack``` 네비게이터는 기본적인 API들을 사용합니다.
- IOS 의 경우 : ```UINavigationController```
- Android의 경우 : ```Fragment```

```createNativeStackNavigator``` 으로 구축된 네비게이션은 API 위에 기본적으로 구축된 앱과 동일하게 동작하며, 성능 특성이 동일합니다.


 리액트 네비게이션은 tabs나 drawer같은 다양한 네비게이터를 위한 패키지도 있습니다. 이를 사용해 앱에서 다양한 패턴을 구현할 수 있죠.

리액트 네비게이션 인트로를 완료하려면, 아래의 리액트 [React Navigation Getting Started Guide](https://reactnavigation.org/docs/getting-started/) 를 따라해보세요.



[끝]

---

1) 리액트 네이티브 환경을 구축하고 안드로이드 시뮬레이터를 돌리기 위해 아래 명령어를 입력했다.

npx react-native run-android

문제발생

1) 터미널에서 build는 6s만에 성공적으로 되었다고 나오는데, 2) 아래와 같은 경고창이 뜬다. 3) 안드로이드 스튜디오 내의 화면에서도 script를 불러올 수 없다는 경고가 뜬다.

문제 해결

1) 아래 링크를 참고해서 해결했다. 경고창의 메시지대로 itearm2 / 터미널에서 문서를 여는 권한을 주지 않아 나타난 문제인듯하다. https://stackoverflow.com/questions/74187734/launchpackager-command-can-t-be-opened

2) 다시 실행해보니 작동이 잘 된다.

1) 아래 링크를 참고해서 설치를 진행했다. https://dev-yakuza.posstree.com/ko/react-native/install-on-mac/

2) 1번 항목의 링크에 있는 설치 순서 및 목적을 한 눈에 보고싶어, 아래와 같이 적어둔다.

• Homebrew
  • mac에서 필요한 패키지를 설치 및 관리.
• rbenv
  • (리액트 네이티브에 필요한)Ruby를 버전별로 설치하고 관리할 수 있게 도와주는 툴.(프로젝트 마다 사용하는 Ruby 버젼이 다를 수 있어서 그렇다.)
  • 공식 깃헙 링크
• Node.js
  • JS의 런타임(실행기).
• Watchman
  • 특정 폴더/파일 감시중 변화가 생기면 특정 동작을 실행하도록 설정. 리액트 네이티브에서는 소스코드의 추가, 변경 발생시 재빌딩 위해 사용.
• React Native CLI
• Xcode
  • ios 개발 툴.
• Cocoapods
  • ios 개발에 사용되는 의존성 관리자.
• JDK
  • Java Development Kit.
• Android Studio
  • 안드로이드 앱 개발시 필요.
  • 안드로이드 스튜디오 SDK 설정.
  • 안드로이드 스튜디오 환경 변수 설정.
• 리액트 네이티브 프로젝트 생성
  • ios 에뮬레이터 작동 확인.
  • 안드로이드 에뮬레이터 작동 확인 .

과정

1) 프로젝트 초기화

npx react-native@latest init 프로젝트명

2)에러발생

3)

npm uninstall -g react-native-cli @react-native-community/cli

4)해당 프로젝트 폴더로 이동

cd 해당 프로젝트명

5)vsc에서 아래 명령어로 서버를 먼저 실행

 npx react-native start

6)다른 터미널을 열어 아래 명령어 입력

npx react-native run-ios

7)에러 발생

npx react-native run-ios
warn Multiple Podfiles were found: ios/Podfile,vendor/bundle/ruby/2.6.0/gems/cocoapods-core-1.12.1/lib/cocoapods-core/Podfile. Choosing ios/Podfile automatically. If you would like to select a different one, you can configure it via "project.ios.sourceDir". You can learn more about it here: https://github.com/react-native-community/cli/blob/master/docs/configuration.md
error str.replace is not a function.
TypeError: str.replace is not a function
    at inlineString (/Users/soo/AwesomeProject/node_modules/@react-native-community/cli-tools/build/errors.js:25:33)
    at new CLIError (/Users/soo/AwesomeProject/node_modules/@react-native-community/cli-tools/build/errors.js:13:11)
    at getProjectInfo (/Users/soo/AwesomeProject/node_modules/@react-native-community/cli-platform-ios/build/tools/getProjectInfo.js:29:11)
    at Object.runIOS [as func] (/Users/soo/AwesomeProject/node_modules/@react-native-community/cli-platform-ios/build/commands/runIOS/index.js:82:58)
    at Command.handleAction (/Users/soo/AwesomeProject/node_modules/@react-native-community/cli/build/index.js:108:23)
    at Command.listener [as _actionHandler] (/Users/soo/AwesomeProject/node_modules/commander/lib/command.js:482:17)
    at /Users/soo/AwesomeProject/node_modules/commander/lib/command.js:1283:65
    at Command._chainOrCall (/Users/soo/AwesomeProject/node_modules/commander/lib/command.js:1177:12)
    at Command._parseCommand (/Users/soo/AwesomeProject/node_modules/commander/lib/command.js:1283:27)
    at /Users/soo/AwesomeProject/node_modules/commander/lib/command.js:1081:27

8) 비슷한 이슈 링크(댓글의 Apolloseven 작성자 참고) https://github.com/CocoaPods/CocoaPods/issues/11641

sudo gem install cocoapods --pre -n /usr/local/bin

sudo xcode-select --switch /Applications/Xcode.app.

sudo xcodebuild -license accept

npx react-native@latest init AwesomeProject1

9) 리액트 네이티브 실행 에러는 해결.

10) ios 에뮬레이터 재실행

npx react-native start

npx react-native run-ios

11) 문제 발생

12) ios simulator 잘 작동 (어떻게 해결한건지 까먹음...)

안드로이드 에뮬레이터 실행

1) 실행중인 안드로이드 디바이스 시뮬(?)을 확인할 수 있는 CLI

adb devices

2) Android Debug Bridge(ADB) 버젼 확인 CLI

adb

3) 안드로이드 에뮬레이터 실행을 위해 명령어 입력 하였으나,

npx react-native run-android

4) 에러발생

5) 문제 해결 시도1

export ANDROID_HOME=<sdk위치>
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools

6) 에러 메시지

7) 문제해결 시도2 (액세스 문제로 추정) https://stackoverflow.com/questions/75731330/still-getting-error-spawn-gradlew-eacces-even-after-chmod-755-android-gradlew

chmod 755 android/gradlew

8) 재시도

npx react-native run-android

9) 여전히 에러 출력

10) 안드로이드 스튜디오에서 버젼을 오라클로 설정 settings->build,execution(...)->build tools->gradle

11) 여기서도 뭔가 했는데...이 부분을 뭘 한건지 까먹었다()

공식문서도 참고했음. https://reactnative.dev/docs/environment-setup?os=macos&platform=android

기타 노트

[note1] ios앱을 만드는 것은 맥북에만 있는 Xcode를 사용하기 때문에, 맥북에서만 가능하다.

[note2] 에뮬레이터와 시뮬레이터는 같지 않다. 아직 완벽히 이해되지는 않았으니 에뮬레이터는 '실제' '행동' '복제' 와 같은 키워드가 많이 도출되고, 시뮬레이터는 '모의실험' '모델링' 과 같은 키워드가 많이 보인다. (내 생각에는) 에뮬레이터는 작동 기전까지 똑같이 복제해서 따라하는것 같고, 시뮬레이터는 에뮬레이터 보다는 얕게 모방해내는것 같다.

에뮬레이터(Emulator)는 한 시스템에서 다른 시스템을 복제한다.
그리하여 두 번째 시스템이 첫 번째 시스템을 따라 행동하는 것이다.
외부의 행동에 대해 똑같이 따라하려고 하는 이 관점은 시뮬레이션과는 정 반대이다. 
왜냐하면, 시뮬레이션은 자주 내부 상태와 관련하여, 
흉내내는 시스템의 추상적인 모델과 관계가 있기 때문이다.

참고문서1 위키백과 참고문서2 https://giantsol.github.io/emulator-vs-simulator/

프로젝트/공부시 깃헙 이슈와 커밋내역을 연동하는것을 좋아하는데(기록으로 남으니까!), 하나하나 GUI로 등록하자니 비효율적이라고 느껴졌다. 그래서 "git cli로 커밋시 이슈 연결/닫기는 가능한데, 이슈 생성은 못하는건가?"하는 의문이 들어 방법을 찾아보았다. 결론적으로는, GH CLI(GitHub Command-Line Interface)가 필요하다고 한다.

과정

1. 참고문서_GH CLI 설치

https://github.com/cli/cli#installation

2. GH CLI 설치 및 깃헙 사용자 인증

나는 homebrew로 설치했다.

brew install gh

아래 명령어로 잘 설치되었는지 확인해본다.

gh version

설치확인 후 이슈를 등록하려고 제시된 명령어를 사용했는데, 그 전에 gh auth login을 구동해달라고 한다. 사용자 인증이 필요하다는 내용인것 같다. auth는 authorized(인증된)의 줄임말로 추정된다.

gh auth login

명령어를 입력하면 여러가지 묻는데, 사용자 인증에 필요한 내용들이다. 모두 대답하면 8자리의 인증 코드가 뜨면서 Enter를 누르라고 한다.(혹시몰라 캡쳐하지 않았다.) Entert시 새 브라우저 창이 뜨고, 8자리의 인증 코드를 입력하면 아래와 같이 인증완료되었다는 화면이 나온다.

3.참고문서_GH CLI

링크에서 필요한 부분(issue 등록, 완료 등)에 가면 GUI를 사용한 방법과 CLI를 사용한 방법 모두 나와있다. https://docs.github.com/en/issues/tracking-your-work-with-issues

4. GH CLI 를 이용한 'issue 등록' 및 '커밋시 issue링크 & issue닫기'

GH CLI를 사용해서, 이슈를 등록했다.(제목, 본문, 담당자 뿐만 아니라 레이블 등등 모두 설정가능하다. 다만 이미 설정되어있는 레이블만 가져올 수 있다.) case1.이슈 제목과 본문만 적는 경우

gh issue create --title "이슈 제목" --body "본문 내용 작성하면 됩니다."

case2.담당자, 레이블 등 기타정보도 적는 경우 (담당자는 @ 뒤에 이름을 적어주면 된다. 자신인 경우 @me 로 하면 된다.)

gh issue create --title "이슈 제목" --body "본문 내용 작성하면 됩니다." --assignee @담당자 --label "레이블명" --project 프로젝트명 --milestone "마일스톤명"

그리고 commit을 하면서 이슈를 링크하고 닫는 명령어를 입력했다.

4-1.문제발생

그런데, 깃헙 레포에 가보니 커밋내역에는 분명히 이슈넘버가 잘 반영되어 있는데, 이슈가 close 되지 않았다. 아마 main 브랜치에 반영되어야만 close 되는 모양이다.(나는 develop 브랜치에 커밋했었다.)

4-2.문제해결

브랜치 병합을 위해 main 브랜치로 이동하여 병합 후 푸쉬해주었다.(내 경우 upstream)

git switch main

git merge <main에 합칠 브랜치 이름>

git push upstream

예상대로 merge 해주었더니 3번 이슈는 GUI를 건드리지 않았는데도 닫힘처리 되었다. 그런데 4번 이슈는 여전히 닫히지 않았음을 알 수 있었는데, 아마 이슈를 여러개 링크할 시, 이슈넘버 앞에 각각 close 라고 써주어야 하는 것 같다. (여러개의 이슈에 연결되어있는 commit 이더라도 어떤 이슈에는 완료이고, 어떤 이슈에는 완료가 아닐 수 있으니) 4번 이슈는 GUI로 닫힘 처리하고, 다음에 여러 이슈를 닫아야 할 일이 생기면 적용해보자.

소감

이렇게 찬찬히 적어보니 좀 더 잘 머리에 들어오는 것 같다. 다만 마크다운을 좀 써서 꾸밀 필요가 더 있을까...싶긴하다.

맥북 에어 m1 을 장만했다! 그런데 환경설정 세팅할 생각에 한숨부터 나온다... 그렇지만 언젠가는 해야할 일이라 생각하고 진행했다. 첫번째 실패는 뭔가 중간에 꼬여버리고, 너무 무지성으로 아무거나 때려박고 입력한것 같다 처음부터 찬찬히 진행하기로 했다. 중간에 혹시 마이그레이션을 하면 npm 등 다 딸려오는걸까 해서 두 번 시도해봤는데, 적용되지 않아 다시 공장초기화를 진행했다. Q. npm은 대체 어디에 설치되는거고, 왜 마이그레이션에 안 딸려올까?

zsh, bash 차이 터미널은 무엇인가

홈브루

1)brew list로 따로 관리가능하여 용이함. 오...홈브루도 git 기반으로 되어있다네. ->node ->git

이 링크에 들어가면 홈브루로 많이 설치하는 것을 볼 수 있다.

홈브루 설치가 완료되면 아래의 명령어를 입력했을 때 결과가 잘 나온다. (버젼은 시기에 따라 다를 수 있다.)

soo@suyeongui-MacBookAir ~ % brew -v                    
Homebrew 4.0.1
Homebrew/homebrew-core N/A

반대로, 아직 nvm을 설치하지 않았기 때문에(또는 제대로 설치되지 않았기 때문에) 아래 명령어는 오류가 난다.

soo@suyeongui-MacBookAir ~ % nvm -v
zsh: command not found: nvm

nvm 설치를 위해서는 최초 명령어 이후 두번 더 해줘야한다. 명령어들의 해석에 대해서는 다른 블로그를 참고하시라.

soo@suyeongui-MacBookAir ~ % export NVM_DIR="$HOME/.nvm"
  [ -s "/opt/homebrew/opt/nvm/nvm.sh" ] && \. "/opt/homebrew/opt/nvm/nvm.sh"    soo@suyeongui-MacBookAir ~ %  [ -s "/opt/homebrew/opt/nvm/etc/bash_completion.d/nvm" ] && \. "/  

나는 아래와 같은 내용이 나왔는데, 무슨 소리인지는 모르겠다. 나의 경우 cmd+c로 그냥 나왔다.

cmdand dquote> 

아래 명령어로 설치할 수 있는 node.js 버젼을 출력해본다.

soo@suyeongui-MacBookAir ~ % nvm ls-remote

그러면 아래와 같이 설치할 수 있는 목록이 쭉 뜨는데, 나는 안정성을 위해 가장 최근의 LTS 버젼을 설치했다.(LTS는 안정적인 버젼이며, 최신의 버젼이 꼭 LTS는 아니다.)

아래 처럼 nvm install (설치할 node.js 버젼) 을 입력하면 설치가 진행된다.

nvm install 18.14.1

제대로 설치되었는지 확인을 위해, 아래와 같이 입력해보면 정상적으로 출력된다.

soo@suyeongui-MacBookAir ~ % node -v
v18.14.1

npm(노드 패키지 매니저) node.js의 패키지를 관리해주는 도구. npm은 의존성이 강하다.)

npx

nvm(노드 버젼 매니저)

깃 설치하기

아래 명령어를 실행하면 홈브루가 git 설치를 해준다.

brew install git

아래 명령어 중 하나를 입력해보고, 버젼이 제대로 뜬다면 성공적인 설치이다.

git --version

git -v

깃과 깃헙은 다르다.

깃헙은 설치하는게 아니라, 접속하는 것이다. (플랫폼이다)

깃 최초설정(user.name "내용", https://git-scm.com/book/ko/v2/%EC%8B%9C%EC%9E%91%ED%95%98%EA%B8%B0-Git-%EC%B5%9C%EC%B4%88-%EC%84%A4%EC%A0%95

위 문서에서 " 환경 설정은 한 컴퓨터에서 한 번만 하면 된다. 설정한 내용은 Git을 업그레이드해도 유지된다." 라고 표시되고 있다.

사용할 수 잇는 깃 컨피그 명령어들을 보여주는것 같다.

git config --system

아래 명령어들로 유저 네임과 유저 이메일 입력.

git config --global user.name "sykang013"

git config --global user.email sy.kang013@gmail.com

아래 명령어로 방금 입력한 유저네임과 이메일이 잘 입력되었는지 확인

git config ls

git의 기본 편집기로 vsc 설정 --await 은실수 방지용이다.(cli로 vsc 실행했을시, vsc 끄기 전까지 command를 대기시킨다는데 먼소린지 모르겠음. 여튼 브렌치 머지할때 유용하다함)

tip 파일 이름 앞에 .가 있다면 숨김파일이므로, ls 를 해도 보이지 않는다. 숨김파일까지 보려면 ls -a 을 입력해서 모든 파일을 표시해야한다.

git config --global core.editor "code --wait"

cask 설치

맥용 어플리케이션 설치를 터미널에서 가능하게 해주는 것이라고 한다. 설치 명령어

brew install cask

이러면 뭔가 엄청 많이 뜨면서 설치된다.

그리고 cask로 vsc를 설치했다.

brew install --cask visual-studio-code

윈도우와 맥의 공백문자 설정

윈도우와 맥으로 협업시, 공백문자 때문에 불필요한 충돌이 많이 난다고 알고있다. 해당 문제를 방지하기 위해 아래 명령어를 입력한다.

git config --global core.autocrlf input

git config에 잘 들어갔는지 확인한다. 아래 명령어를 입력했을 때 뜨는 목록들 중에 core.autocrlf=input이 있다면 잘 등록된거다.

git config --list

iterm2 설치

vsc와 깃헙 연동

vsc 좌측 하단의 프로필 이미지를 클릭해서, terning on setting sync를 클릭하고, 깃헙으로 로그인을 선택한다. vsc와 깃헙이 연동되어있으면 로컬의 저장소를 깃헙에 그대로 푸쉬 가능해서 편하다.

terminal, VSC 현재 브랜치 보이도록 설정

깃 익스텐션 읽어보기 https://inpa.tistory.com/entry/VSCode-%F0%9F%92%BD-GIT-%EC%9D%B5%EC%8A%A4%ED%85%90%EC%85%98-%EC%B6%94%EC%B2%9C#Git_History

tip 최상위 폴더에 git을 설정해두면 커밋할게 많아져서 추천하지 않는다 <- 다시 알아보기.

바벨 :리액트 문법을 위한? pars?

사실 설치를 하거나 하다보면 주룩주룩 뜨는걸 읽어보기 싫은 마음이 드는데, 그렇다고 해서 막상 읽어보면 아주 어려운 내용도 아니다. 그리고 의외로 이런 문제가 있는거 같은데 이렇게 해결해봐! 라고 알려주는걸 그대로 따라해서 문제를 해결한 경우도 더러 있으니, 아주 친절한 도구이다. 중요한것은 익숙해지는 것이다. 메시지를 읽고 도움말을 읽는 연습을 가져야 혼자 공부할 수 있고, 툴에 상관없이 원리와 기본을 이해해야 나중에 또다른 유행으로 툴이 바뀌더라도 크게 흔들리지 않고 꾸준히 성장할 수 있다.

아래 명령어는, npm에게 무엇무엇을 설치해달라고 하는 것이다. 구체적으로 원하는게 있다면 뒤에 그것을 붙이지만, 다른 사람의 레포를 가졍ㄴ 경우, package.json이 있는 경우를 볼 수 있다. 그러면 우리는 터미널에 npm i 만 입력하면, npm이 package.json을 훑어서 흠 이러이러한게 필요하군! 하고 설치해준다. 그러면 node_modules 라는 개발 의존 모듈이 생긴다.

npm i

기타 설정 xhtml 셀프 클로징?

아름다운 iterm2

https://so-es-immer.tistory.com/entry/iterm2-%EC%84%B8%ED%8C%85%ED%95%98%EA%B8%B0-vim-%EC%83%89%EA%B9%94-%EC%9E%85%ED%9E%88%EA%B8%B0

이 분의 블로그를 참고했으니(아주 상세하게 설명해주시고 계신다) 관심 있으시다면 정독을 추천합니다.

다만, 코드를 수정해도 금방금방 적용되지 않는것 같을텐데, 그럴때는 아래 명령어를 입력하면 됩니다.

❯ source ~/.zshrc

1)선생님의 레포지토리를 fork 해와서, 로컬에 clone 하고, 로컬의 origin은 forked 레포, upstream은 원본 레포지토리로 두었다. 2)그런데, main 브랜치만 fork 되었다. => 왜 main 브랜치만 fork될까? 3)그리고 로컬에 새 브랜치 a를 파서 원본 레포의 브랜치 a를 가져오려고 했다.

2.문제해결과정

이 문제를 해결하고나서 처음 내뱉은 말은... "뭐야! 왜 되지! 왜 됐는지 모르겠다고!ㅠㅠ" 였다. 분명 에러 메시지에서 권해주는대로 하긴 했는데, 그래서 왜 충돌이 났고 왜 해결이 되었는가?

3.분석

첫 에러메시지: 구체적인 pull 옵션이 필요하다. 행동1: git config pull.rebase false 로 선택

두번째 에러메시지: 상관없는 히스토리라 머지가 거절되었다. 행동: --allow-unrelated-histories 로 강제하기

세번째 에러메시지: 머지 전 package-lock.json을 옮기거나 지워달라 행동: 해당파일 삭제

다시 시도: 됨.

npm i 를 했고, npm start도 문제없이 동작한다.