첫 React 프로젝트 만들기

09. 첫 React 프로젝트 만들기

🔥 NVM과 VSCode를 설치하셨나요? 안하셨다면 지금 바로 설치해주세요!

• 폴더부터 만들게요 😉
  • [sparta_react]라는 폴더를 만들어주세요!
  • windows: C드라이브 아래에!
  • osx: macintosh HD → 사용자 → [내 컴퓨터 이름] 아래에!
• 13) NVM으로 노드 버전을 관리해보자
  • NVM(Node Version Manager)을 왜 써야할까? 👉 nvm은 Node.js의 버전 관리자입니다. 우리 컴퓨터에 node를 설치하는 툴인데 수많은 버전을 마음대로 골라 설치할 수 있게 해주는 멋진 친구입니다. 🙂 시스템(우리 컴퓨터)에 Node.js를 직접 설치하다보면 다른 버전을 설치하게 되는 경우가 많은데, 여러 버전의 Node.js를 관리하는 건 굉장히 귀찮은 일이죠. 😖 nvm을 설치하고 설치한 nvm을 통해 node를 설치하면 나중에 생길 귀찮음을 방지할 수 있습니다!
  • nvm 설치 확인하기 VSCode에서 터미널을 열고 아래와 같이 타이핑 해봅니다. nvm이 잘 설치 되었다면 설치한 nvm 버전이 나올 거예요.

    nvm --version

    
    
  • nvm으로 노드 설치하기 👉 이제 Node.js를 설치해봅시다! [노드 공식 사이트](https://nodejs.org/ko/)에서 안정적인 버전(버그가 적은 버전! LTS라고 불러요.)을 확인해보고 LTS 버전을 설치해봅시다! 공식 사이트에는 최신 LTS 버전과 최신 버전을 바로 안내해주고 있습니다. (아래 이미지의 초록 박스 확인)  14.17.5가 최신 LTS네요! 아래 명령어를 입력해서 node.js를 설치해볼까요? 14.17.5 버전을 다 설치해봅시다. ```bash nvm install [설치할 버전] ``` 설치가 끝났다면 터미널에 아래 명령어를 입력해서 잘 설치 되었는 지 확인해봅시다! ```bash nvm ls # nvm으로 설치한 노드 버전 리스트 확인 명령어 node -v # 노드 버전 확인 명렁어 ```  👉 갓 설치한 14.17.5 버전에 화살표가 붙어 있는 게 보이시나요? 사용 중인 노드 버전을 표시해주는 거예요! node -v를 입력해서 나온 버전과 같은 지 확인합시다. +) nvm에서 사용 중인 노드 버전 바꾸기 ⚠️ 앗! LTS는 14.17.5인데, 사용 중인 노드 버전을 바꾸고 싶을 땐 어떻게 할까요? 아래 명령어를 입력해 사용할 노드 버전을 바꾸고, 다시 node -v 명령어로 노드 버전을 확인해봅시다! ```bash nvm use [사용할 노드 버전] ```
• 14) npm으로 yarn을 설치해보자 😖 **설치,, 그만! yarn을 꼭 써야만 하나?** 꼭 사용하실 필요 없어요. npm을 그대로 사용하셔도 좋고, npx를 사용하셔도 좋습니다. 강의에서는 yarn을 사용하지만, 원하는 패키지 매니저를 사용하셔도 좋아요. - NPM(Node Package Manager)은 무수히 많은 third-party 패키지를 활용할 수 있게 해줍니다! 💡 비슷한 친구로는 yarn이 있습니다. 둘 다 "프론트엔드 의존성"을 관리하기 위한 "패키지 매니저"입니다. → "누가 만들어 놓은 좋은 것"(= 패키지)을 가져다 쓰기 편하게 도와줍니다. 👉 npm은 노드를 설치하면 함께 설치되서 따로 설치하지 않아도 됩니다! - npm으로 yarn을 설치해보자! 아래 명령어를 입력해서 yarn을 설치해봅시다. ```bash # npm으로 패키지를 설치할 때는 아래 명령어를 사용해요! # 옵션은 필요한 경우에만 적어줍니다. # npm install [옵션] [설치할 패키지 이름] npm install -g yarn # 이 명령어는 "npm으로 yarn을 컴퓨터 전체에 설치한다"는 뜻입니다. # -g 옵션은 컴퓨터 전체에서 쓸 수 있게 한다는 뜻입니다. ``` 잘 설치되었다면 아래처럼 yarn -v 명령어로 yarn의 버전을 확인하실 수 있을거예요!  👉 yarn으로 패키지를 설치할 때는? ****yarn으로 패키지를 설치할 때는 아래 명령어를 사용합니다. 명령어가 조금 더 직관적이죠! ```bash yarn add [옵션] [설치할 패키지 이름] ```
• 15) CRA(create-react-app)으로 시작하는 리액트
  • yarn으로 CRA를 설치하자! 👉 yarn을 설치하지 않은 분들은 아래 명령어 대신, npx나 npm을 사용해도 좋습니다. ```bash # 옵션 global은 전역에 이 패키지를 깔겠다는 뜻입니다. yarn add global create-react-app ```
  • CRA가 뭘까? 👉 React는 **레고**같은 친구입니다. 어린이들이 레고로 성을 만드는 것처럼 우리는 React로 웹사이트를 만들 거예요. 마트에서 레고를 보신 분들은 아시겠지만, 레고는 네모 블럭, 긴 블럭, 혹은 귀여운 캐릭터만 따로 구매할 수 있죠? 만들고 싶은 성 모양에 맞춰 누구는 네모 블럭만 잔뜩 살 것이고 누구는 성문과 대포까지 살 겁니다. 하나씩 구매하기 번거롭다면요? [해리x터 성만들기]같은 패키지를 사겠죠! React도 마찬가지입니다! 우리가 웹사이트에 만들기 위해 필요한 것들을 하나씩 설치할 수 있습니다. (webpack, babel 같은 녀석들을 배워야 하지만요.) **CRA(Create React App)는 웹사이트를 만들 때 필요한 것을 몽땅 때려넣어 만든 패키지**입니다. 레고의 해리x터 성만들기 같은 거라고 생각하시면 좋아요.
  • 우리의 첫번째 리액트 프로젝트를 만들어요! 다시 터미널로 돌아가서 우리의 첫 리액트 프로젝트를 만들어 봅시다!

    # yarn create react-app [우리의 첫 리액트 프로젝트 이름]
    # 우리가 설치한 create-react-app 패키지를 써서 프로젝트를 만들어요.
    # 주의! 꼭 sparta_react 폴더 경로에서 입력해주세요!
    yarn create react-app week-1

    👉 React에서는 프로젝트를 앱이라고 불러요. 리액트 프로젝트와 리액트 앱은 같은 말이니, 편하신 쪽으로 말씀하시면 됩니다. 🔥 프로젝트가 생성이 되면, sparta_react 폴더 아래에 week-1이라는 폴더가 생길 거예요. VSCode를 열어서, [폴더 열기] → sparta_react → week-1 폴더를 선택해 열어주세요! VSCode에서 폴더 구조를 확인해 봅시다.  👉 지금은 모양이 이렇게 생겼다만 알아두시면 됩니다! 하나씩 천천히 배워가요! 설치가 끝났다면, 아래 명령어를 입력해서 우리의 첫 리액트 앱을 실행시켜봅시다! ```bash cd week-1 # week-1 폴더로 이동합니다. yarn start ``` 브라우저가 열리고 우리의 첫 리액트 앱이 실행되었습니다. 🙂