React시작하자

React는 사용자 인터페이스를 구축하는 데 사용되는 JavaScript 라이브러리 중 하나입니다.

Facebook에서 개발한 React는 단일 페이지 애플리케이션(SPA) 및 모바일 애플리케이션을 구축하는 데 매우 유용합니다.

React는 구성 요소가 재사용 가능한 UI 블록인 구성 요소 기반 아키텍처를 사용합니다.

각 구성 요소에는 고유한 상태가 있으며 해당 상태가 변경되면 구성 요소가 다시 렌더링됩니다.

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

React는 다양한 생태계에서도 사용됩니다.

예를 들어 React Router를 사용하여 SPA에서 라우팅을 관리하거나 상태를 Redux로 중앙 집중화할 수 있습니다.

'추천 관련글,

ApexCharts는 React와 호환되는 차트 라이브러리입니다.

아래는 React에서 Apex Chart를 사용하기 위한 설치 방법입니다.

create-react-app으로 새로운 React 프로젝트를 생성합니다.
피크 차트그리고 응답 정점 차트 패키지 설치
src/App.js 파일을 열고 다음 코드를 작성합니다.
npm start 명령을 실행하여 React 앱을 실행합니다.
지금 http://로컬 호스트:3000 에 연결하여 apex 다이어그램이 화면에 렌더링되었는지 확인할 수 있습니다.

이 코드는 간단한 막대 차트를 만듭니다.

참고 옵션 그리고 시리즈 속성을 변경하여 차트를 사용자 지정할 수 있습니다.

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

위와 같이 하면 설치가 필요하다고 합니다.

react@gnnbWeb:~$ npx create-react-app my-app
Need to install the following packages:
  [email protected]
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 [email protected] 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 [email protected]
2 info using [email protected]
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 [email protected]
39 silly placeDep ROOT [email protected] 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: 권한이 거부되었습니다.

” 및 “운영 체제에서 작업이 거부되었습니다.

”입니다.

이는 현재 사용자에게 이 파일에 대한 쓰기 권한이 없기 때문입니다.

이 문제를 해결하려면 관리자로 명령을 실행하거나 현재 사용자가 쓰기 권한을 갖도록 파일 권한을 변경해야 할 수 있습니다.

/usr/lib/node_modules/ 폴더는 시스템 수준 폴더이므로 일반 사용자에게는 쓰기 권한이 없어야 합니다.

대신 sudo 명령을 사용하여 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의 전역 설치 경로로 설정합니다.

이 코드를 실행하면 npm install -g 명령을 사용할 때 ~/.npm-global 디렉터리에 전역 모듈이 설치되어 시스템 수준 모듈을 설치할 때 권한 문제가 발생하지 않습니다.

하지만 이 코드를 실행하지 않더라도 npx create-react-app 명령을 실행하는 데에는 큰 문제가 없습니다.

필수는 아니지만 향후 전역 모듈을 설치해야 하는 경우 권한 문제를 피하기 위해 실행하는 것이 좋습니다.

로그인할 때마다 마르사를 실행하는 것이 귀찮다면

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

source ~/.bashrc

cd my-app
npm start

들어오고 나가는 방화벽에서 포트 3000을 엽니다.

이제 빌드해서 웹에 올려야겠죠?

npm run build

npm install -g serve
serve -s build

이제 그래프를 그려봅시다.