리액트 개발 환경 구축, 앱 생성

211119 - 리액트 개발 환경 구축, 앱 생성

---

리액트 개발 환경 구축

1. 링크 참고하여 nvm(노드 버전 관리자) 먼저 설치. 윈도우에선 windows-nvm 를 사용한다. npm도 함께 설치된다. https://docs.microsoft.com/ko-kr/windows/dev-environment/javascript/nodejs-on-windows
2. npm install -g yarn 명령어로 yarn도 설치한다.

실행 정책 변경하기

yarn을 설치한 후 리액트 앱을 만들기 위해 yarn 명령어로 create-react-app 을 설치하려고 하면 하면 아래와 같은 에러가 뜰 수도 있다.

> yarn global add create-react-app
yarn : File C:\Program Files\nodejs\yarn.ps1 cannot be loaded because running scripts is disabled on this system. For
more information, see about_Execution_Policies at https:/go.microsoft.com/fwlink/?LinkID=135170.
At line:1 char:1
+ yarn global add create-react-app
+ ~~~~
    + CategoryInfo          : SecurityError: (:) [], PSSecurityException
    + FullyQualifiedErrorId : UnauthorizedAccess

앞으로 npm 대신 yarn을 사용할건데 yarn을 실행하려면 정책 변경을 해줘야한다.

위 경고를 잘 읽어보면 윈도우 PowerShell 실행 정책에 관하여 써놓은 링크가 적혀 있다.

https://docs.microsoft.com/ko-kr/powershell/module/microsoft.powershell.core/about/about_execution_policies?view=powershell-7.2

Get-ExecutionPolicy 명령어로 현재 설정된 실행 정책을 확인할 수 있다.

> Get-ExecutionPolicy -List

        Scope ExecutionPolicy
        ----- ---------------
MachinePolicy       Undefined
   UserPolicy       Undefined
      Process       Undefined
  CurrentUser       Undefined
 LocalMachine       Undefined

현재 유저의 정책만 RemoteSigned 로 변경해줄 것이다. 위 링크로 가보면 Unrestricted 같은 옵션도 확인할 수 있는데, 많은 옵션들 중 불필요한 권한까지 주는 옵션을 선택하지 않도록 주의하자.

Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser

위 명령어로 정책을 변경한다.

> Get-ExecutionPolicy -List

        Scope ExecutionPolicy
        ----- ---------------
MachinePolicy       Undefined
   UserPolicy       Undefined
      Process       Undefined
  CurrentUser    RemoteSigned
 LocalMachine       Undefined

다시 명령어를 입력하면 현재 유저에서의 정책이 바뀐 것을 확인할 수 있다. 원래대로 돌리려면 위 명령어에서 RemoteSigned를 Undefined로 바꿔주면 된다.

---

리액트 앱 생성

1. yarn global add create-react-app 로 create-react-app 을 설치한다.

   이 프로그램이 궁금하다면 아래 링크 참고.
   https://ko.reactjs.org/docs/create-a-new-react-app.html
   https://github.com/facebook/create-react-app/blob/main/README.md#getting-started

2. npx create-react-app my-app (create-react-app my-app 이 안된다면)

    Success! Created my-app at C:\Users\UserName\my-app
    Inside that directory, you can run several commands:
   
      yarn start
        Starts the development server.
   
      yarn build
        Bundles the app into static files for production.
   
      yarn test
        Starts the test runner.
   
      yarn eject
        Removes this tool and copies build dependencies, configuration files
        and scripts into the app directory. If you do this, you can’t go back!
   
    We suggest that you begin by typing:
   
      cd my-app
      yarn start
   
    Happy hacking!

3. 시키는 대로 cd my-app 후 yarn start 를 입력해주자.

4. 정해진 주소로 가서 확인한다.

    Local:            http://localhost:3000
    On Your Network:  http://192.168.0.3:3000

---

참고서적

Do it 리액트 프로그래밍 정석