React시작하자

React는 자바스크립트 라이브러리 중 하나로, 사용자 인터페이스를 만들기 위해 사용됩니다. React는 Facebook에서 개발되었으며, 단일 페이지 애플리케이션 (SPA) 및 모바일 애플리케이션을 만드는 데 매우 유용합니다.

React는 컴포넌트 기반 아키텍처를 사용하며, 컴포넌트는 재사용 가능한 UI 블록입니다. 각각의 컴포넌트는 자체적으로 상태(state)를 가지고 있으며, 이 상태(state)가 변경되면 컴포넌트는 다시 렌더링됩니다.

React는 Virtual DOM을 사용하여 UI를 효율적으로 업데이트하며, DOM 조작이 필요한 경우 실제 DOM 업데이트를 최소화하여 성능을 향상시킵니다.

React는 또한 다양한 생태계와 함께 사용됩니다. 예를 들어, React Router를 사용하여 SPA의 라우팅을 관리하거나 Redux를 사용하여 상태(state)를 중앙 집중식으로 관리할 수 있습니다.

 

 

 

아펙스 차트(ApexCharts)는 리액트와 호환되는 차트 라이브러리입니다. 아래는 리액트에서 아펙스 차트를 사용하기 위한 설치 방법입니다.

 

1. create-react-app을 사용하여 새 리액트 프로젝트를 만듭니다.
2. apexcharts와 react-apexcharts 패키지를 설치합니다
3. src/App.js 파일을 열고 아래와 같이 코드를 작성합니다.
4. npm start 명령어를 실행하여 리액트 앱을 실행합니다.
5. 이제 http://localhost:3000 으로 접속하여 아펙스 차트가 화면에 렌더링된 것을 확인할 수 있습니다. 이 코드는 간단한 막대 그래프를 생성합니다. 참고로, options 및 series 속성을 수정하여 차트를 커스터마이징할 수 있습니다.

npx create-react-app my-app
cd my-app

위와같이 해보니 인스톨을 해야한다고나옵니다.

react@gnnbWeb:~$ npx create-react-app my-app
Need to install the following packages:
  create-react-app@5.0.1
Ok to proceed? (y) cd my-app
npm notice
npm notice New minor version of npm available! 9.5.1 -> 9.6.0
npm notice Changelog: https://github.com/npm/cli/releases/tag/v9.6.0
npm notice Run npm install -g npm@9.6.0 to update!
npm notice
npm ERR! canceled

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/nodered/react/.npm/_logs/2023-03-02T17_55_50_540Z-debug-0.log

최신으로 npm을 업데이트합니다.

 

npm install -g npm@latest

오류남발하는군요..

 

 

에러로그 한번 보겠습다.

~$ cat /home/nodered/react/.npm/_logs/2023-03-02T18_01_08_985Z-debug-0.log
0 verbose cli /usr/bin/node /usr/bin/npm
1 info using npm@9.5.1
2 info using node@v19.7.0
3 timing npm:load:whichnode Completed in 1ms
4 timing config:load:defaults Completed in 2ms
5 timing config:load:file:/usr/lib/node_modules/npm/npmrc Completed in 1ms
6 timing config:load:builtin Completed in 2ms
7 timing config:load:cli Completed in 3ms
8 timing config:load:env Completed in 0ms
9 timing config:load:project Completed in 1ms
10 timing config:load:file:/home/nodered/react/.npmrc Completed in 6ms
11 timing config:load:user Completed in 6ms
12 timing config:load:file:/usr/etc/npmrc Completed in 1ms
13 timing config:load:global Completed in 1ms
14 timing config:load:setEnvs Completed in 1ms
15 timing config:load Completed in 17ms
16 timing npm:load:configload Completed in 17ms
17 timing npm:load:mkdirpcache Completed in 9ms
18 timing npm:load:mkdirplogs Completed in 0ms
19 verbose title npm install npm@latest
20 verbose argv "install" "--global" "npm@latest"
21 timing npm:load:setTitle Completed in 1ms
22 timing config:load:flatten Completed in 3ms
23 timing npm:load:display Completed in 3ms
24 verbose logfile logs-max:10 dir:/home/nodered/react/.npm/_logs/2023-03-02T18_01_08_985Z-
25 verbose logfile /home/nodered/react/.npm/_logs/2023-03-02T18_01_08_985Z-debug-0.log
26 timing npm:load:logFile Completed in 6ms
27 timing npm:load:timers Completed in 0ms
28 timing npm:load:configScope Completed in 0ms
29 timing npm:load Completed in 38ms
30 timing config:load:flatten Completed in 1ms
31 silly logfile done cleaning log files
32 http fetch GET 200 https://registry.npmjs.org/npm 133ms (cache revalidated)
33 timing arborist:ctor Completed in 1ms
34 timing idealTree:init Completed in 5ms
35 http fetch GET 200 https://registry.npmjs.org/npm 19ms (cache hit)
36 timing idealTree:userRequests Completed in 49ms
37 silly idealTree buildDeps
38 silly fetch manifest npm@9.6.0
39 silly placeDep ROOT npm@9.6.0 OK for:  want: 9.6.0
40 timing idealTree:#root Completed in 15ms
41 timing idealTree:node_modules/npm Completed in 1ms
42 timing idealTree:buildDeps Completed in 18ms
43 timing idealTree:fixDepFlags Completed in 2ms
44 timing idealTree Completed in 76ms
45 timing reify:loadTrees Completed in 359ms
46 timing reify:diffTrees Completed in 7ms
47 silly reify mark retired [ '/usr/lib/node_modules/npm', '/usr/bin/npm', '/usr/bin/npx' ]
48 silly reify moves {
48 silly reify   '/usr/lib/node_modules/npm': '/usr/lib/node_modules/.npm-qUIFSsiV',
48 silly reify   '/usr/bin/npm': '/usr/bin/.npm-CxSgn0z2',
48 silly reify   '/usr/bin/npx': '/usr/bin/.npx-akSQqeWh'
48 silly reify }
49 timing reify:rollback:retireShallow Completed in 1ms
50 timing command:install Completed in 551ms
51 verbose stack Error: EACCES: permission denied, rename '/usr/lib/node_modules/npm' -> '/usr/lib/node_modules/.npm-qUIFSsiV'
52 verbose cwd /home/nodered/react
53 verbose Linux 5.4.0-139-generic
54 verbose node v19.7.0
55 verbose npm  v9.5.1
56 error code EACCES
57 error syscall rename
58 error path /usr/lib/node_modules/npm
59 error dest /usr/lib/node_modules/.npm-qUIFSsiV
60 error errno -13
61 error [Error: EACCES: permission denied, rename '/usr/lib/node_modules/npm' -> '/usr/lib/node_modules/.npm-qUIFSsiV'] {
61 error   errno: -13,
61 error   code: 'EACCES',
61 error   syscall: 'rename',
61 error   path: '/usr/lib/node_modules/npm',
61 error   dest: '/usr/lib/node_modules/.npm-qUIFSsiV'
61 error }
62 error
62 error The operation was rejected by your operating system.
62 error It is likely you do not have the permissions to access this file as the current user
62 error
62 error If you believe this might be a permissions issue, please double-check the
62 error permissions of the file and its containing directories, or try running
62 error the command again as root/Administrator.
63 verbose exit -13
64 timing npm Completed in 618ms
65 verbose unfinished npm timer reify 1677780069223
66 verbose unfinished npm timer reify:retireShallow 1677780069591
67 verbose code -13
68 error A complete log of this run can be found in:
68 error     /home/nodered/react/.npm/_logs/2023-03-02T18_01_08_985Z-debug-0.log
react@gnnbWeb:~$

로그 파일을 보면 npm이 /usr/lib/node_modules/npm 디렉토리를 /usr/lib/node_modules/.npm-qUIFSsiV 로 변경하려고 하다가 권한 문제로 실패한 것으로 보입니다. 에러 메시지에서는 "EACCES: permission denied"와 "operation was rejected by your operating system"이라는 메시지가 나오고 있습니다. 이는 현재 사용자에게 해당 파일에 대한 쓰기 권한이 없기 때문에 발생한 문제입니다. 이를 해결하기 위해서는 해당 명령을 관리자 권한으로 실행하거나, 현재 사용자가 쓰기 권한을 가지도록 파일 권한을 변경해야 할 수 있습니다.

 

/usr/lib/node_modules/ 폴더는 시스템 레벨에서 사용되는 폴더이므로, 일반 사용자가 쓰기 권한을 가지면 안됩니다. 대신, sudo 명령어를 이용하여 root 권한으로 npm을 설치해야 합니다.

아래와 같이 명령어를 입력하여 설치해보세요.

 

sudo npm install -g npm@latest

 

설치가 되었네요

이재  npx create-react-app my-app 를 다시 해봅시다.

npx create-react-app my-app  설치가 잘되고있네요

성공했다고 나오는군요.. npm start , npm run build, npm tet, npm run eject ,  npm start 해볼수있겠군요

현재 사용자 폴더에 npm-global 을 만들어둡니다. 

mkdir ~/.npm-global
npm config set prefix '~/.npm-global'
export PATH=~/.npm-global/bin:$PATH

위의 코드는 현재 사용자의 홈 디렉토리 내에 .npm-global 디렉토리를 생성하고, 이를 npm의 global 설치 경로로 설정하는 코드입니다. 만약 이 코드를 실행하면, npm install -g 명령어를 사용할 때 global 모듈이 ~/.npm-global 디렉토리에 설치되므로, 시스템 레벨에서 모듈을 설치할 때 생기는 권한 문제를 피할 수 있습니다.

하지만 이 코드를 실행하지 않더라도 npx create-react-app 명령어를 실행하는데 큰 문제는 없습니다. 따라서 필수는 아니지만, 추후에 global 모듈을 설치해야 할 때 권한 문제를 피하기 위해 실행하는 것을 권장합니다

 

매번 접속할때마사 실행하귀 귀찮으다면

echo 'export PATH=~/.npm-global/bin:$PATH' >> ~/.bashrc
#그리고 나서 다음 명령어를 실행하여 변경사항을 적용합니다

source ~/.bashrc

 

 

 

cd my-app
npm start

3000포트를 방화벽에서 in바우드 out바운드 모두 열어두고 ..

멋진 돌아가는 모야잉 만들어져네요..

이제 빌드하여 웹에 올려야겠죠?

npm run build

빌그가 되었군요

npm install -g serve
serve -s build

성공적으로 빌드

이제 그래프그려보자.