내가 사용하고 있는 CentOS7에 리액트를 설치해 기본 화면을 띄워보려고 한다.
Step 1. 필수 패키지 설치
nodejs 설치
$ sudo yum install nodejs위와 같이 명령어를 입력하면 nodejs를 설치할 수 있다.
설치가 완료되고 node --version과 npm --version을 통해 nodejs와 npm의 버전을 확인할 수 있다.
yarn 설치
$ sudo npm install -g yarnyarn은 npm을 사용해 설치할 수 있다.
정상적으로 설치가 끝나고 yarn --version을 입력하면
위처럼 버전을 볼 수 있다.
create-react-app 설치
$ sudo npm install -g create-react-appcreate-react-app 또한 npm을 사용해 설치한다.
버전을 확인하면
여기서 문제가 발생한다. create-react-app을 사용하려면 node 10 이상 버전(현재 6버전)을 사용해야 하는 메시지를 볼 수 있다.
Step 2. node 버전 업데이트
많이 헤맸는데 결국 방법을 찾았다.
npm cache 삭제
$ sudo npm cache clean -f위의 명령어로 npm cache를 강제 삭제한다
n 모듈 설치
$ sudo npm install -g n최신 nodejs를 설치할 n 모듈을 설치한다.
최신 nodejs 설치
$ sudo n latest위의 명령어로 최신 버전을 설치할 수도 있고, 'sudo n <12.0.1>'처럼 버전을 정해줄 수도 있고, 'sudo n stable'과 같이 안정화된 버전을 설치할 수도 있다.
나는 latest로 최신 버전을 설치했다. 여기서 node --version으로 아무리 확인해도 변하지 않으므로 재부팅을 거쳐야 한다.
재부팅
재부팅 후 node --version으로 버전을 확인한 결과 15.8.0 버전이 설치된 것을 볼 수 있다.
Step 3. react app 설치
$ create-react-app practice나는 practice 라는 이름으로 생성했는데 이름은 마음대로 지으면 된다. 이렇게 하고 몇 초 정도 기다리면
practice라는 이름의 디렉토리가 생성된다.
Step 4. react app 실행
$ cd practice
$ yarn startpractice 디렉토리로 들어가서 yarn start로 실행하면
localhost 3000번 포트로 접속할 수 있다고 알려주는 메시지를 볼 수 있다.
이후 3000번 포트로 들어가면 화면을 볼 수 있고, 나는 원격으로 접속해서 13000번 포트로 포트포워딩 해서 들어간 결과 아래와 같은 화면을 볼 수 있었다.
