본문 바로가기
AICC 과정 정리

맥에서 React와 Git 설치 및 설정 가이드

by 미르아 2024. 12. 28.
728x90

1. Homebrew 설치

Homebrew는 macOS에서 패키지 관리 및 프로그램 설치를 간편하게 해주는 도구입니다.

설치 명령어:

bash
코드 복사
/bin/bash -c "$(curl -fsSL <https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh>)"


2. Node.js 설치

React 개발에 필요한 Node.js와 npm(Node Package Manager)을 설치합니다.

설치 명령어:

bash
코드 복사
brew install node

설치 확인:

bash
코드 복사
node -v    # Node.js 버전 확인
npm -v     # npm 버전 확인


3. nvm(Node Version Manager) 설치

nvm은 여러 버전의 Node.js를 관리할 수 있게 해줍니다.

설치 명령어:

bash
코드 복사
brew install nvm

설치 후 환경변수 등록: nvm이 정상적으로 동작하려면 쉘 환경 변수에 nvm을 등록해야 합니다. 사용하는 쉘에 따라 아래 파일 중 하나를 편집하세요.

zsh 사용 시:

bash
코드 복사
vim ~/.zprofile

bash 사용 시:

bash
코드 복사
vim ~/.bash_profile

파일에 아래 내용을 추가하세요:

bash
코드 복사
export NVM_DIR="$HOME/.nvm"
[ -s "/opt/homebrew/opt/nvm/nvm.sh" ] && \\. "/opt/homebrew/opt/nvm/nvm.sh" # This loads nvm
[ -s "/opt/homebrew/opt/nvm/etc/bash_completion.d/nvm" ] && \\. "/opt/homebrew/opt/nvm/etc/bash_completion.d/nvm" # This loads nvm bash_completion

저장 및 적용:

bash
코드 복사
# zsh
source ~/.zprofile

# bash
source ~/.bash_profile

설치 확인:

bash
코드 복사
nvm -v    # nvm 버전 확인


4. Git 설치

Git은 버전 관리 도구로, 프로젝트의 변경 이력을 관리합니다.

설치 명령어:

bash
코드 복사
brew install git

설치 확인:

bash
코드 복사
git --version    # Git 버전 확인


5. Git 초기 설정

Git 사용 시 최초 1회만 사용자 정보를 설정해야 합니다.

사용자 정보 설정:

bash
코드 복사
git config --global user.name "Github 이름"
git config --global user.email "Github 이메일"


6. Git 사용법

레포지토리 초기화 및 파일 업로드:

bash
코드 복사
git init                         # 로컬 레포지토리 초기화
git add .                        # 모든 파일 스테이징
git commit -m "Initial commit"   # 커밋 메시지 작성
git branch -M main               # 메인 브랜치 설정
git remote add origin <레포지토리 URL> # 원격 저장소 연결
git push -u origin main          # 원격 저장소로 업로드

예시:

bash
코드 복사
git remote add origin <https://github.com/username/project.git>
git push -u origin main

수정 후 업로드:

bash
코드 복사
git add .
git commit -m "업데이트 설명"
git push


7. React 설치

React 프로젝트를 생성하려면 npx 명령어를 사용합니다.

React 프로젝트 생성:

bash
코드 복사
npx create-react-app my-app

설치 후 프로젝트 폴더로 이동:

bash
코드 복사
cd my-app

React 개발 서버 실행:

bash
코드 복사
npm start


8. 설치 후 버전 확인

설치된 주요 도구의 버전을 확인하여 정상적으로 설치되었는지 확인합니다.

bash
코드 복사
node -v      # Node.js 버전
npm -v       # npm 버전
nvm -v       # nvm 버전
git --version # Git 버전


요약

  1. Homebrew로 필요한 프로그램 설치.
  2. Node.js와 nvm으로 React 개발 환경 구축.
  3. Git으로 프로젝트 관리 및 원격 저장소 연결.
  4. npx create-react-app으로 React 프로젝트 생성.
728x90

'AICC 과정 정리' 카테고리의 다른 글

배포 환경 테스트  (1) 2024.12.30
node child python  (1) 2024.12.29
Git 명령어 정리  (0) 2024.12.28
CSS / Animation  (2) 2024.12.27
CSS  (1) 2024.12.27