해결 방법
- 가장 빠른 건 우분투 새로 설치하고 아래의 절차 따라가기
- 모든 기존 패키지가 최신 상태여야 해서 운영체제를 업데이트 한다.
터미널에 sudo apt update && sudo apt upgrade -y 입력 - ReactJS 앱을 만들고 실행시키기 위해서 Node.js 를 설치한다.
만약 curl 이 설치가 안 되어 있다면 sudo apt-get install curl 입력하여 설치
그 다음 curl -sL https://deb.nodesource.com/setup_18.x | sudo bash - 입력 - 설치 후 sudo apt install nodejs 입력
- node -v, npm -v 를 입력하여 각각 버전 확인
// node: v18.15.0, npm: 9.5.0 - ReactJS 패키지 설치하기 위해서
sudo npm install -g create-react-app 입력
create-react-app 이 잘 설치 되었는지 확인하기 위해 create-react-app --version 입력
// 5.0.1 이 출력되어야 함 - React 앱을 만들기 위해서
sudo create-react-app (원하는 앱 이름) 입력
아래와 같은 글이 출력된다면 성공한 것
만약 Permisson Denied 가 뜬다면 sudo su 로 root 로그인 한 후, cd (원하는 앱 이름) 입력하여 원하는 폴더에 진입하고, npx create-react-app (원하는 앱 이름) 입력하면 됨
Success! Created myreactapp at /home/react/myreactapp
Inside that directory, you can run several commands:
npm start
Starts the development server.
npm run build
Bundles the app into static files for production.
npm test
Starts the test runner.
npm run 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 myreactapp
npm start
Happy hacking!
8. 7번에서 원하는 앱 이름을 입력한 폴더로 이동
cd (원하는 앱 이름)
이후 npm start 입력하여 실행하고 아래와 같은 글이 뜬다면 성공한 것
Compiled successfully!
You can now view myreactapp in the browser.
Local: http://localhost:3000
On Your Network: http://192.168.1.100:3000
Note that the development build is not optimized.
To create a production build, use npm run build.
만약 실행되지 않는다면 권한 문제일 수 있으므로 sudo npm start 입력할 것
문제 해결 흐름
우분투 설치후에 React-nginx 구동을 위해서 먼저 React를 설치하려 했는데 cb.apply is not a function 에러가 떴다.
위에 글에 나와있는대로 시도 해봤다.
- 에러 설명에 나와있는 디렉토리로 이동하여 폴더 삭제
(나 같은 경우는 가상머신에 설치한거라서 C 드라이브가 아닌 /home/(사용자 계정)에 있었는데
(사용자 계정) 폴더 아이콘이 보이지 않아서 폴더에 우클릭 해서 [Show Hidden Files] 를 클릭 했더니 (사용자 계정) 폴더가 보였다. - 터미널에서 에러 로그에 뜬 디렉토리로 이동
- cache clear 해주기
그런데 2번에서 막혔다. 사용자 폴더는 있었지만 에러 로그에 뜬 디렉토리가 존재하지 않았다.
2시간동안 끙끙대다가 처음으로 돌아가는게 빠를 듯해서 다시 우분투 설치했다...
https://www.linuxtuto.com/how-to-install-reactjs-on-ubuntu-22-04/
이후에 정보를 찾다가 이 글에 써진대로 차근차근 따라해봤더니 드디어 리액트 구동 성공!
중간에 Permisson Denied가 떴지만
https://2vup.com/ubuntu-react-error/
해당 글을 참고해서 root 사용자로 로그인하여 구동을 원하는 폴더에 진입해서 npx create-react-app (원하는 앱 이름)을 입력했더니 잘 생성되었다.
누군가에게는 쉬운 일이었겠지만 나한테는 리액트 구동이 너무 어려웠다..
참고
2.https://www.linuxtuto.com/how-to-install-reactjs-on-ubuntu-22-04/
'종합 프로젝트 (종료) > 문제 해결' 카테고리의 다른 글
[PS][종합프로젝트] Ubuntu 22.04 - Nginx 구동 및 연결 종료 (0) | 2023.04.10 |
---|---|
[PS][종합프로젝트] Ubuntu 22.04 - 터미널 단축키 실행 안되는 오류 해결 (0) | 2023.04.10 |
[PS][종합프로젝트] Ubuntu 22.04 - 사용자 계정에 root 권한 부여 (0) | 2023.04.10 |