React environment setup(Mac)

맥(Mac)에 React 및 React Native 환경을 설정하려면 다음 단계를 따르면 됩니다.

React 환경 설정

1. Homebrew 설치 (이미 설치되어 있으면 생략):
   Homebrew는 맥에서 패키지를 쉽게 설치하고 관리할 수 있게 해주는 패키지 관리 도구입니다. 터미널을 열고 다음 명령어를 실행합니다.

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

2. Node.js와 npm 설치:
   React는 Node.js와 npm(Node Package Manager)을 필요로 합니다. Homebrew를 사용하여 설치할 수 있습니다.

   ```bash
   brew install node
   
   ```
   
   설치가 완료되면 다음 명령어로 설치된 버전을 확인할 수 있습니다.
   
   ```bash
   node -v
   npm -v
   
   ```

3. Create React App 설치:
   Create React App은 새로운 React 프로젝트를 쉽게 시작할 수 있게 해주는 도구입니다. npm을 사용하여 글로벌로 설치합니다.

   ```bash
   npm install -g create-react-app
   
   ```

4. 새 React 프로젝트 생성:
   Create React App을 사용하여 새로운 프로젝트를 생성합니다.

   ```bash
   create-react-app my-react-app
   cd my-react-app
   npm start
   
   ```
   
   `npm start`를 실행하면 로컬 서버가 시작되고 브라우저에서 `http://localhost:3000`을 열어 React 애플리케이션을 확인할 수 있습니다.

5. Yarn 설치

   React에서 Yarn을 설치하는 이유는 몇 가지 장점 때문입니다. Yarn은 Facebook에서 개발한 JavaScript 패키지 매니저로, npm(Node Package Manager)과 비슷한 기능을 제공하지만 몇 가지 차별화된 기능과 성능 개선을 제공합니다. 주요 이유는 다음과 같습니다:

   1. 속도:
      • 병렬 설치: Yarn은 패키지를 병렬로 설치하므로, npm보다 더 빠르게 패키지를 설치할 수 있습니다.
      • 캐싱: 한 번 설치된 패키지는 캐시에 저장되어 이후 설치 시 더 빠르게 설치됩니다.
   2. 일관성:
      • lock 파일: Yarn은 yarn.lock 파일을 사용하여 의존성 트리를 고정합니다. 이는 동일한 프로젝트에서 다른 개발자가 같은 의존성을 설치했을 때 일관성을 보장합니다. npm의 package-lock.json 파일과 유사하지만, Yarn의 lock 파일은 더 많은 정보를 포함하여 의존성 충돌을 줄입니다.
   3. 보안:
      • 결정적 설치: Yarn은 결정적 설치 방식을 사용하여 동일한 의존성을 항상 동일한 방식으로 설치합니다. 이는 보안과 안정성을 높입니다.
   4. 기타 기능:
      • 오프라인 모드: 한 번 설치된 패키지를 오프라인에서도 설치할 수 있습니다.
      • 플러그인 시스템: Yarn은 플러그인을 통해 기능을 확장할 수 있습니다.

   Yarn 설치 방법

   1. Homebrew로 Yarn 설치:
      Homebrew를 사용하여 쉽게 Yarn을 설치할 수 있습니다.

      ```bash
      bash코드 복사
      brew install yarn
      
      ```

   2. npm을 통해 Yarn 설치:
      npm을 사용하여 Yarn을 설치할 수도 있습니다.

      ```bash
      bash코드 복사
      npm install -g yarn
      
      ```

   Yarn 사용 방법

   1. 새 프로젝트 생성:
      React 프로젝트를 생성할 때 create-react-app을 사용할 수 있습니다.

      ```bash
      bash코드 복사
      yarn create react-app my-react-app
      cd my-react-app
      
      ```

   2. 패키지 설치:
      프로젝트 디렉토리에서 패키지를 설치할 때 yarn add 명령어를 사용합니다.

      ```bash
      bash코드 복사
      yarn add [패키지 이름]
      
      ```

   3. 스크립트 실행:
      yarn start 등 npm 스크립트와 동일한 방식으로 사용할 수 있습니다.

      ```bash
      bash코드 복사
      yarn start
      
      ```

   4. 의존성 관리:
      • 패키지 제거: yarn remove [패키지 이름]
      • 특정 버전 설치: yarn add [패키지 이름]@[버전]

   이러한 이유들로 인해 많은 개발자들이 npm 대신 Yarn을 선택하여 사용하고 있습니다. React 프로젝트에서도 Yarn을 사용하면 더 빠르고 일관된 개발 환경을 구축할 수 있습니다.